Sockets - Sarah #41
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,149 @@ | ||
|
|
||
| h1, h2, h3 { | ||
| font-family: 'Oleo Script', cursive; | ||
| } | ||
| body { | ||
| font-family: 'Open Sans', sans-serif; | ||
| } | ||
| nav ul { | ||
| margin: 0; | ||
| padding: 1.5em 0; | ||
| } | ||
| nav, footer { | ||
| background-color: #015249; | ||
| color: beige; | ||
| } | ||
| footer { | ||
| padding-bottom: 2em | ||
| } | ||
| .team-members { | ||
| background-color: #77C9D4; | ||
| } | ||
| section { | ||
| padding: 4em 2em; | ||
| } | ||
|
|
||
| h2 { | ||
| font-size: 2em; | ||
| text-align: center; | ||
| } | ||
| .tagline { | ||
| background: #57BC90; | ||
| display: grid; | ||
|
There was a problem hiding this comment. Nice use of grid on the tagline section! |
||
| align-items: center; | ||
| grid-template-rows: 35% 1fr 1fr ; | ||
| font-size: 1.6em | ||
| } | ||
| .tagline * { | ||
| justify-self: center; | ||
| } | ||
| .tagline h1 { | ||
| font-size: 2em; | ||
| grid-row: 1; | ||
| } | ||
|
|
||
| .tagline sub { | ||
| grid-row: 2; | ||
| } | ||
| .tagline a { | ||
| font-size: .8em; | ||
| text-decoration: none; | ||
| grid-row: 3; | ||
| display: block; | ||
| border-radius: 15px; | ||
| border: 2px solid; | ||
| padding: 8px; | ||
| border-color: darkslategray | ||
| } | ||
|
|
||
| .quote { | ||
| display: grid; | ||
| align-items: center; | ||
| background-color: #77C9D4; | ||
| background-color: beige; | ||
| } | ||
|
|
||
| blockquote { | ||
| font-style: italic | ||
| } | ||
|
|
||
| .quote p { | ||
| text-align: right | ||
| } | ||
|
|
||
| .flexbox { | ||
| display: flex; | ||
| flex-direction: row; | ||
| align-content: space-around; | ||
| } | ||
|
|
||
| .flexbox li { | ||
| flex: 1; | ||
|
There was a problem hiding this comment. This is something I hadn't seen before. Thanks for the learning moment. :-) |
||
| list-style-type: none; | ||
| } | ||
| .why .flexbox li > * { | ||
| padding: .5em | ||
| } | ||
|
|
||
| .why .flexbox img { | ||
| float: left; | ||
| } | ||
|
|
||
| .sponsers .flexbox, .team-members .flexbox { | ||
| justify-content: space-around; | ||
|
There was a problem hiding this comment. The sponsors are almost touching on my browser. Was this a design choice or a browser rendering? It could be nice to give these elements a little margin. (or not) |
||
| flex-wrap: wrap; | ||
| justify-content: center; | ||
| } | ||
|
|
||
| .sponsers .flexbox li, .team-members .flexbox li { | ||
| align-items: center; | ||
| display: flex; | ||
| justify-content: center; | ||
| } | ||
|
|
||
|
|
||
| .sponsers .flexbox img { | ||
| margin: .3em | ||
| } | ||
|
|
||
| .team-members .flexbox li { | ||
| margin: 0 2em; | ||
| flex-direction: column; | ||
| } | ||
|
|
||
| .team-members .flexbox li img { | ||
|
There was a problem hiding this comment. I think you did a great job of naming everything! It made it very easy to read your code. |
||
| border-radius: 50%; | ||
| } | ||
|
|
||
| nav ul, footer { | ||
| display: grid; | ||
| grid-template-columns: 10% 10% 20% 20% 10% 10% 10% 10%; | ||
| } | ||
|
|
||
| nav li:first-child { | ||
| grid-column-start: 2; | ||
| } | ||
|
|
||
| nav li:nth-child(2) { | ||
| grid-column-start: 5; | ||
| } | ||
|
|
||
| nav li:last-child { | ||
| grid-column-start: 7; | ||
| } | ||
|
|
||
| footer div:first-child { | ||
| grid-column-start: 2; | ||
| } | ||
| footer div:last-child { | ||
| grid-column-start: 4; | ||
| } | ||
|
|
||
| footer ul { | ||
| padding-left: 0pt; | ||
| } | ||
|
|
||
| li { | ||
| list-style-type: none; | ||
| } | ||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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.
Did you consider using grid for the overall structure?