Created
January 3, 2022 17:09
-
-
Save gitdagray/cf6256c62fad399e056d8e7187950c73 to your computer and use it in GitHub Desktop.
JS Course Chapter 22 CSS
This file contains 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
* { | |
margin: 0; | |
padding: 0; | |
-webkit-box-sizing: border-box; | |
box-sizing: border-box; | |
} | |
html { | |
font-family: Arial, Helvetica, sans-serif; | |
font-size: 16px; | |
} | |
body { | |
min-height: 100vh; | |
display: -webkit-box; | |
display: -ms-flexbox; | |
display: flex; | |
-webkit-box-orient: vertical; | |
-webkit-box-direction: normal; | |
-ms-flex-direction: column; | |
flex-direction: column; | |
-webkit-box-pack: center; | |
-ms-flex-pack: center; | |
justify-content: center; | |
-webkit-box-align: center; | |
-ms-flex-align: center; | |
align-items: center; | |
} | |
main { | |
display: -webkit-box; | |
display: -ms-flexbox; | |
display: flex; | |
-webkit-box-orient: vertical; | |
-webkit-box-direction: normal; | |
-ms-flex-direction: column; | |
flex-direction: column; | |
-webkit-box-pack: center; | |
-ms-flex-pack: center; | |
justify-content: center; | |
-webkit-box-align: center; | |
-ms-flex-align: center; | |
align-items: center; | |
background-color: #708090; | |
border: 1px solid #000; | |
width: 100%; | |
} | |
.height100 { | |
height: 100px; | |
} | |
.purple { | |
background-color: purple; | |
} | |
.blue { | |
background-color: blue; | |
} | |
.darkblue { | |
background-color: #00008b; | |
} | |
.black { | |
background-color: #000; | |
} | |
nav { | |
display: -webkit-box; | |
display: -ms-flexbox; | |
display: flex; | |
-webkit-box-pack: justify; | |
-ms-flex-pack: justify; | |
justify-content: space-between; | |
-webkit-box-align: center; | |
-ms-flex-align: center; | |
align-items: center; | |
padding: 1rem; | |
width: 100%; | |
height: 48px; | |
position: fixed; | |
top: 0; | |
border-bottom: 1px solid #fff; | |
z-index: 2; | |
background-color: #000; | |
color: #fff; | |
} | |
section { | |
display: -webkit-box; | |
display: -ms-flexbox; | |
display: flex; | |
-webkit-box-orient: vertical; | |
-webkit-box-direction: normal; | |
-ms-flex-direction: column; | |
flex-direction: column; | |
-webkit-box-pack: center; | |
-ms-flex-pack: center; | |
justify-content: center; | |
-webkit-box-align: center; | |
-ms-flex-align: center; | |
align-items: center; | |
width: 100%; | |
height: 100vh; | |
z-index: 1; | |
padding-top: 48px; | |
} | |
/* Depending on the view example (1, 2, or 3), | |
you will want to set display:none for the other two | |
and display:flex for the example you want to see. */ | |
.view1 { | |
display: -webkit-box; | |
display: -ms-flexbox; | |
display: flex; | |
-webkit-box-orient: horizontal; | |
-webkit-box-direction: normal; | |
-ms-flex-direction: row; | |
flex-direction: row; | |
-ms-flex-wrap: wrap; | |
flex-wrap: wrap; | |
-webkit-box-pack: space-evenly; | |
-ms-flex-pack: space-evenly; | |
justify-content: space-evenly; | |
background-color: #d3d3d3; | |
color: #000; | |
} | |
.view1 div { | |
display: -webkit-box; | |
display: -ms-flexbox; | |
display: flex; | |
-webkit-box-orient: vertical; | |
-webkit-box-direction: normal; | |
-ms-flex-direction: column; | |
flex-direction: column; | |
-webkit-box-pack: center; | |
-ms-flex-pack: center; | |
justify-content: center; | |
-webkit-box-align: center; | |
-ms-flex-align: center; | |
align-items: center; | |
width: 100px; | |
height: 100px; | |
background-color: #000; | |
color: #fff; | |
margin: 10px; | |
} | |
.view2 { | |
display: -webkit-box; | |
display: -ms-flexbox; | |
display: flex; | |
-webkit-box-orient: vertical; | |
-webkit-box-direction: normal; | |
-ms-flex-direction: column; | |
flex-direction: column; | |
-webkit-box-pack: center; | |
-ms-flex-pack: center; | |
justify-content: center; | |
-webkit-box-align: center; | |
-ms-flex-align: center; | |
align-items: center; | |
display: none; | |
color: #fff; | |
max-width: 400px; | |
max-height: 60%; | |
padding-top: 0; | |
} | |
.view2 div { | |
display: -webkit-box; | |
display: -ms-flexbox; | |
display: flex; | |
-webkit-box-orient: vertical; | |
-webkit-box-direction: normal; | |
-ms-flex-direction: column; | |
flex-direction: column; | |
-webkit-box-pack: center; | |
-ms-flex-pack: center; | |
justify-content: center; | |
-webkit-box-align: center; | |
-ms-flex-align: center; | |
align-items: center; | |
width: 200px; | |
height: 200px; | |
color: #fff; | |
margin: 10px; | |
} | |
.view3 { | |
display: -webkit-box; | |
display: -ms-flexbox; | |
display: flex; | |
-webkit-box-orient: vertical; | |
-webkit-box-direction: normal; | |
-ms-flex-direction: column; | |
flex-direction: column; | |
-webkit-box-pack: center; | |
-ms-flex-pack: center; | |
justify-content: center; | |
-webkit-box-align: center; | |
-ms-flex-align: center; | |
align-items: center; | |
display: none; | |
background-color: #d3d3d3; | |
border: 1px solid #000; | |
max-width: 400px; | |
padding: 2rem; | |
} | |
.view3 form label { | |
color: #000; | |
margin-right: 1rem; | |
font-size: 1.5rem; | |
} | |
.view3 form input { | |
width: 100%; | |
line-height: 1.5rem; | |
font-size: 1.5rem; | |
} | |
.view3 form button { | |
display: block; | |
margin-top: 1rem; | |
margin-left: auto; | |
font-size: 1.25rem; | |
padding: 0.75rem; | |
border-radius: 10px; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Thanks Dave!