-
Notifications
You must be signed in to change notification settings - Fork 48
Sockets - Hana #29
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?
Sockets - Hana #29
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,9 +3,12 @@ | |
| <head> | ||
| <meta charset="utf-8"> | ||
| <title>Startrly</title> | ||
| <link rel="stylesheet" type="text/css" media="screen" href="styles/normalize.css" /> | ||
| <link rel="stylesheet" type="text/css" media="screen" href="styles/index.css" /> | ||
| <link href="https://fonts.googleapis.com/css?family=Caveat|Homemade+Apple|Muli|Noto+Serif+JP|Roboto" rel="stylesheet"> | ||
| </head> | ||
| <body> | ||
| <div> | ||
| <body class="pagecontainer"> | ||
| <div class="container"> | ||
|
|
||
|
|
||
| <nav> | ||
|
|
@@ -23,14 +26,14 @@ | |
| </nav> | ||
|
|
||
|
|
||
| <section> | ||
| <section class="splash"> | ||
| <h1>Startrly</h1> | ||
| <sub>A catchy tagline for a great solution</sub> | ||
| <a 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,7 +43,7 @@ <h1>Startrly</h1> | |
| </section> | ||
|
|
||
|
|
||
| <section> | ||
| <section class="why"> | ||
| <h2>Why?</h2> | ||
| <ul> | ||
| <li> | ||
|
|
@@ -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,7 +81,7 @@ <h2>Why?</h2> | |
| </section> | ||
|
|
||
|
|
||
| <section> | ||
| <section class="team"> | ||
| <h2>Meet the team</h2> | ||
| <ul> | ||
| <li> | ||
|
|
@@ -110,7 +113,7 @@ <h2>Meet the team</h2> | |
| </section> | ||
|
|
||
|
|
||
| <section> | ||
| <section class="sponsors"> | ||
| <h2>Sponsors</h2> | ||
| <ul> | ||
| <li> | ||
|
|
@@ -132,7 +135,7 @@ <h2>Sponsors</h2> | |
| </section> | ||
|
|
||
|
|
||
| <section> | ||
| <section class="menu"> | ||
| <div> | ||
| <h3>Support</h3> | ||
| <ul> | ||
|
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. I like how you organized and segmented each portion of the HTML. |
||
|
|
@@ -168,4 +171,4 @@ <h3>About</h3> | |
|
|
||
| </div> | ||
| </body> | ||
| </html> | ||
| </html> | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,162 @@ | ||
| .pagecontainer { | ||
| display: flex; | ||
| width: 100%; | ||
| justify-content: center; | ||
| background-color: #CDD6DD; | ||
| } | ||
|
|
||
|
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. Love the color! |
||
| .container { | ||
| display: flex; | ||
| flex-flow: column wrap; | ||
| width: 80%; | ||
| justify-content: center; | ||
| background-color: #CD8987; | ||
| padding-top: 2em; | ||
| font-family: 'Roboto', sans-serif; | ||
| } | ||
|
|
||
| nav ul { | ||
| display: grid; | ||
| grid-template-columns: 70% 15% 15%; | ||
| font-weight: bold; | ||
| font-family: Arial, bolder, sans-serif; | ||
| margin: auto; | ||
| font-size: 1.1em; | ||
| } | ||
|
|
||
| .splash { | ||
| display: grid; | ||
| grid-template-rows: 50% 20% 30%; | ||
| max-height: 600px; | ||
| justify-content: center; | ||
| padding-bottom: 8em; | ||
| } | ||
|
|
||
| h1 { | ||
| font-size: 5em; | ||
| line-height: .5em; | ||
| text-align: center; | ||
| } | ||
|
|
||
| .splash sub { | ||
| height: 2em; | ||
| font-size: 2em; | ||
| font-weight: bold; | ||
| text-transform: capitalize; | ||
| font-stretch: ultra-expanded; | ||
| } | ||
|
|
||
| .splash a[href], a:active { | ||
| background-color: #CDD6DD; | ||
| border: 2px solid black; | ||
| border-radius: 10px; | ||
| margin: 0em 4.5em 0em 4.5em; | ||
| line-height: 3em; | ||
| font-size: 1.7em; | ||
| vertical-align: middle; | ||
| text-align: center; | ||
| text-decoration: none; | ||
| color: black; | ||
| } | ||
|
|
||
|
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. This is such a cool thing you did here and a great way to showcase different ways of approaching targeting items. |
||
| section { | ||
| margin-top: 2em; | ||
| padding: 0em 0em 0em 2em; | ||
| border-bottom: 1px solid black; | ||
| } | ||
|
|
||
| .quote { | ||
| display: grid; | ||
| grid-template-rows: 1fr 1fr; | ||
| font-style: italic; | ||
| font-size: 2em; | ||
| font-family: Georgia, 'Times New Roman', Times, serif; | ||
| line-height: 2em; | ||
| padding-left: .5em; | ||
| } | ||
|
|
||
| blockquote { | ||
| background-color: #CDD6DD; | ||
| border-radius: 50px; | ||
| padding: 1em; | ||
| } | ||
|
|
||
| .quote p:before { | ||
| content: "--"; | ||
| } | ||
|
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. Thanks for showing me how to do this!! |
||
|
|
||
| .quote p { | ||
| text-align: right; | ||
| padding: 0em 3em 0em 0em; | ||
| } | ||
|
|
||
| .why ul { | ||
| display: grid; | ||
| grid-template-areas: "a b c"; | ||
| } | ||
|
|
||
|
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. I like your template areas! |
||
| .why img[src] { | ||
| float: left; | ||
| margin-right: .7em; | ||
| } | ||
|
|
||
| .team ul { | ||
| display: flex; | ||
| flex-flow: row wrap; | ||
| align-content: center; | ||
| padding: 0em 0% 0em 5%; | ||
| } | ||
|
|
||
| .team li { | ||
| display: flex; | ||
| flex-flow: column wrap; | ||
| align-items: center; | ||
| padding: 1em; | ||
| } | ||
|
|
||
| .team li span { | ||
| margin: 0em 1em .2em 1em; | ||
| } | ||
|
|
||
| .team ul:nth-child(4) { | ||
| margin-left: 30px; | ||
| } | ||
|
|
||
| .team img[src] { | ||
| border-radius: 110px; | ||
| } | ||
|
|
||
| li { | ||
| list-style-type: none; | ||
| } | ||
|
|
||
| .sponsors { | ||
| display: grid; | ||
| grid-template-areas: | ||
| } | ||
|
|
||
| .sponsors { | ||
| display: grid; | ||
| grid-rows: 1fr 5fr; | ||
| } | ||
|
|
||
| .sponsors ul { | ||
| display: flex; | ||
| flex-flow: row wrap; | ||
| justify-content: space-evenly; | ||
| align-content: space-around; | ||
| align-items: center; | ||
| padding-right: 3em; | ||
| } | ||
|
|
||
| .sponsors ul li { | ||
| padding: 1em; | ||
| } | ||
|
|
||
| section:last-of-type { | ||
| background-color: #CDCACC; | ||
| /* padding: 0em 0em 5em 5em; */ | ||
| display: grid; | ||
| grid-template-areas: "a b c c" | ||
| "a b c c"; | ||
| } | ||
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.
Good differentiating between the classes here. I like how you used names that are specific and understandable!