-
Notifications
You must be signed in to change notification settings - Fork 47
Branches - Erika #46
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: master
Are you sure you want to change the base?
Branches - Erika #46
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -3,34 +3,37 @@ | |
| <head> | ||
| <meta charset="utf-8"> | ||
| <title>Startrly</title> | ||
| <link href="style/styles.css" rel="stylesheet"> | ||
| <link href="normalization.css" rel="stylesheet"> | ||
| <link href="https://fonts.googleapis.com/css?family=Cantarell:400i|IM+Fell+Double+Pica:400i|Lato:100i|Playfair+Display+SC:900&display=swap" rel="stylesheet"> | ||
| </head> | ||
| <body> | ||
| <div> | ||
|
|
||
|
|
||
| <nav> | ||
| <ul> | ||
| <li> | ||
| <li class="b"> | ||
| Startrly | ||
| </li> | ||
| <li> | ||
| <li class="e"> | ||
| Try Now! | ||
| </li> | ||
| <li> | ||
| <li class="f"> | ||
| About | ||
| </li> | ||
| </ul> | ||
| </nav> | ||
|
|
||
|
|
||
| <section> | ||
| <h1>Startrly</h1> | ||
| <sub>A catchy tagline for a great solution</sub> | ||
| <a href="#">Some Call to Action</a> | ||
| <section class="header"> | ||
| <div class="logo">Startrly</div> | ||
| <sub> A catchy tagline for a great solution</sub> | ||
| <a class="button" href="#">Some Call to Action</a> | ||
| </section> | ||
|
|
||
|
|
||
| <section> | ||
| <section class="quote"> | ||
| <blockquote> | ||
| Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. | ||
| </blockquote> | ||
|
|
@@ -40,25 +43,25 @@ <h1>Startrly</h1> | |
| </section> | ||
|
|
||
|
|
||
| <section> | ||
| <h2>Why?</h2> | ||
| <ul> | ||
| <li> | ||
| <img src="http://via.placeholder.com/100x100" /> | ||
| <section class="why-section"> | ||
| <h2 class="header2">Why?</h2> | ||
| <ul class="reasons"> | ||
| <li class="A"> | ||
| <img class="img" src="http://via.placeholder.com/100x100" /> | ||
| <strong>Comfortable</strong> | ||
| <p> | ||
| Et quas molestias excepturi sint occaecati cupiditate non providents, ut aut reiciendis voluptatibus maiores. | ||
| </p> | ||
| </li> | ||
| <li> | ||
| <img src="http://via.placeholder.com/100x100" /> | ||
| <li class="B"> | ||
| <img class="img" src="http://via.placeholder.com/100x100" /> | ||
| <strong>Robust</strong> | ||
| <p> | ||
| At vero eos et accusamus et iusto odio dignissimos ducimus qui. Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam. | ||
| </p> | ||
| </li> | ||
| <li> | ||
| <img src="http://via.placeholder.com/100x100" /> | ||
| <li class="C"> | ||
| <img class="img" src="http://via.placeholder.com/100x100" /> | ||
| <strong>Convenient</strong> | ||
| <p> | ||
| Itaque earum rerum hic tenetur a sapiente delectus. | ||
|
|
@@ -68,7 +71,7 @@ <h2>Why?</h2> | |
| </section> | ||
|
|
||
|
|
||
| <section> | ||
| <section class="quote"> | ||
| <blockquote> | ||
| Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. | ||
| </blockquote> | ||
|
|
@@ -78,41 +81,43 @@ <h2>Why?</h2> | |
| </section> | ||
|
|
||
|
|
||
| <section> | ||
| <h2>Meet the team</h2> | ||
| <ul> | ||
| <section class="bear-sec"> | ||
| <h2 class="header2 meet-team">Meet the team</h2> | ||
| <ul class="dabears"> | ||
| <li> | ||
| <img src="https://placebear.com/150/150" alt="profile for kari kiwi" /> | ||
| <img class="bear-img" src="https://placebear.com/150/150" alt="profile for kari kiwi" /> | ||
| <span>Kari Kiwi</span> | ||
| <span>CFO</span> | ||
| </li> | ||
| <li> | ||
| <img src="https://placebear.com/150/150" alt="profile for dan dragon" /> | ||
| <img class="bear-img" src="https://placebear.com/150/150" alt="profile for dan dragon" /> | ||
| <span>Dan Dragon</span> | ||
|
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Nice usage of span |
||
| <span>CMO</span> | ||
| </li> | ||
| <li> | ||
| <img src="https://placebear.com/150/150" alt="profile for chris caribou" /> | ||
| <img class="bear-img" src="https://placebear.com/150/150" alt="profile for chris caribou" /> | ||
| <span>Chris Caribou</span> | ||
| <span>CIO</span> | ||
| </li> | ||
| <li> | ||
| <img src="https://placebear.com/150/150" alt="profile for charles cheetah" /> | ||
| <img class="bear-img" src="https://placebear.com/150/150" alt="profile for charles cheetah" /> | ||
| <span>Charles Cheetah</span> | ||
| <span>Board Member, CTO</span> | ||
| </li> | ||
| <li> | ||
| <img src="https://placebear.com/150/150" alt="profile for dee dugong" /> | ||
| <img class="bear-img" src="https://placebear.com/150/150" alt="profile for dee dugong" /> | ||
| <span>Dee Dugong</span> | ||
| <span>Startup Enthusiast</span> | ||
| </li> | ||
| </ul> | ||
| <div class="header2 meet-team"> </div> | ||
| </section> | ||
|
|
||
|
|
||
|
|
||
| <section> | ||
| <h2>Sponsors</h2> | ||
| <ul> | ||
| <h2 class="header2">Sponsors</h2> | ||
| <ul class="sponsors"> | ||
| <li> | ||
| <img src="http://via.placeholder.com/300x100" /> | ||
| </li> | ||
|
|
@@ -132,10 +137,11 @@ <h2>Sponsors</h2> | |
| </section> | ||
|
|
||
|
|
||
| <section> | ||
| <section class="footer"> | ||
| <div> | ||
| <h3>Support</h3> | ||
| <ul> | ||
|
|
||
| <ul class="Z"> | ||
| <h3>Support</h3> | ||
| <li> | ||
| Demo | ||
| </li> | ||
|
|
@@ -151,8 +157,9 @@ <h3>Support</h3> | |
| </ul> | ||
| </div> | ||
| <div> | ||
| <h3>About</h3> | ||
| <ul> | ||
|
|
||
| <ul class="Y"> | ||
| <h3>About</h3> | ||
| <li> | ||
| Our Mission | ||
| </li> | ||
|
|
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,191 @@ | ||
| html { | ||
| padding: 0; | ||
| margin: 0; | ||
| } | ||
|
|
||
| body { | ||
| margin: 0; | ||
| padding: 0; | ||
| font-family: Helvetica, sans-serif; | ||
| } | ||
|
|
||
| div { | ||
| margin: 0; | ||
| padding: 0; | ||
| } | ||
|
|
||
| ul { | ||
| margin-block-start: 0; | ||
| margin-block-end: 0; | ||
| padding-inline-start: 0; | ||
| } | ||
|
|
||
| li { | ||
| padding: 0; | ||
| margin: 0; | ||
| list-style-type: none; | ||
| } | ||
|
|
||
| nav ul { | ||
| background-color: #5e85a4; | ||
| color: white; | ||
| padding: 1em; | ||
| display: grid; | ||
| grid-template-columns: repeat(6 1fr); | ||
|
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. ooh I haven't seen this |
||
| grid-template-rows: 1; | ||
| grid-template-areas: | ||
| "a b c d e f"; | ||
| } | ||
|
|
||
| .b{ | ||
| grid-area: b; | ||
| } | ||
|
|
||
| .e{ | ||
| grid-area: e; | ||
| justify-content: flex-end; | ||
| } | ||
|
|
||
| .f { | ||
| grid-area: f; | ||
| } | ||
|
|
||
| .header { | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: center; | ||
| border-top: solid black 1px; | ||
| padding: 2em; | ||
| background-color: floralwhite; | ||
| } | ||
|
|
||
| .logo { | ||
| font-family: 'Playfair Display SC', serif; | ||
| font-size: 3em; | ||
| margin: .5em; | ||
| } | ||
|
|
||
| section sub { | ||
| display: block; | ||
| } | ||
|
|
||
| .button { | ||
| border: .25px black solid; | ||
| background-color: #354d60; | ||
| /* papayawhip */ | ||
| /* floralwhite */ | ||
| color: white; | ||
| padding: 15px 32px; | ||
| text-align: center; | ||
| text-decoration: none; | ||
| font-size: 1em; | ||
| display: inline-block; | ||
| border-radius: 1em; | ||
| margin-top: 2em; | ||
| margin-bottom: 1em; | ||
| } | ||
|
|
||
| .quote { | ||
| font-family: 'Lato', cursive; | ||
|
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Nice usage of multiple fonts! |
||
| font-weight: 600; | ||
| padding: 2em; | ||
| margin: 0; | ||
| background-color: white; | ||
| padding: 3.5em 15% 3.5em; | ||
| border-top: black solid .05em; | ||
| border-bottom: black solid .05em; | ||
| } | ||
|
|
||
| .quote p { | ||
| text-align: right; | ||
| } | ||
|
|
||
| .header2 { | ||
| font-family: 'Playfair Display SC', serif; | ||
| font-size: 2em; | ||
| margin: 0; | ||
| text-align: center; | ||
| } | ||
|
|
||
| .reasons { | ||
| display: grid; | ||
| grid-template-columns: repeat (3 fr); | ||
| grid-template-rows: 1; | ||
| justify-content: space-around; | ||
| flex-direction: row; | ||
| grid-template-areas: | ||
| "A B C"; | ||
| } | ||
|
|
||
| .A{ | ||
| grid-area: A; | ||
| } | ||
|
|
||
| .B{ | ||
| grid-area: B; | ||
| justify-content: flex-end; | ||
| } | ||
|
|
||
| .C { | ||
| grid-area: C; | ||
| } | ||
|
|
||
| .img { | ||
| float: left; | ||
| padding: 0 .5em 0; | ||
| } | ||
|
|
||
| .why-section { | ||
| background-color: floralwhite; | ||
| padding: 8em 0; | ||
| } | ||
|
|
||
| .bear-img { | ||
| border-radius: 50%; | ||
| } | ||
|
|
||
| span { | ||
| display: block; | ||
| } | ||
|
|
||
| .header2 { | ||
| } | ||
|
|
||
| .meet-team { | ||
| background-color: #5e85a4; | ||
| height: 1.6em; | ||
| } | ||
|
|
||
| .dabears { | ||
| display: flex; | ||
| flex-flow: wrap; | ||
| flex-direction: row; | ||
| justify-content: center; | ||
| background-color: floralwhite; | ||
| padding: 1em; | ||
| } | ||
|
|
||
| .dabears li { | ||
| width: 30%; | ||
| text-align: center; | ||
| } | ||
|
|
||
| .sponsors { | ||
| display: flex; | ||
| justify-content: space-evenly; | ||
| flex-wrap: wrap; | ||
| padding: 1.2em; | ||
| } | ||
|
|
||
| .footer { | ||
| display: grid; | ||
| grid-template-columns: repeat(5 fr); | ||
| grid-template-rows: 1; | ||
| grid-template-areas: | ||
| "Z Y X X X"; | ||
| justify-items: center; | ||
| border-top: solid black .25px; | ||
| background-color: #354d60; | ||
| color: white; | ||
| padding-bottom: 1 | ||
| } | ||
|
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. add 1 new line at the end of each file you create ( I think this is a design thing) |
||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I like how you label classes with letters - this makes it easy to follow vs descriptive class names, which could mean one thing to you vs the reader.