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; | |
} |
.view2
and .view3
both havedisplay:
twice and the 2nd one is causing issues when one tries to setdisplay:
toflex
to view it (given the rules of cascading styles).
For anyone having issues same as @ugonna-szn. The fix I did was to add height: 70vh;
at the main
selector just after the width: 100%
.
Thanks Dave!
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I’m having a little issue here