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; | |
} |
Finded a solution .view2 and .view3 have 2 display to make view 2 visible add line at last of the .view1 class as display:none which overides the display:flex at starting then remove display:none at second last line or third line of .view2 class this will make .view2 visible and for further .view3 class remove display at last of .view3 class and add display:none to .view2 and .view1 classes. Done✅✅
@jsc0ded - Thanks Adam. Just noticed what you had mentioned. Removed extra
You used view as a class in your code, and we’re using view1, view2 , view3. Why?
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hi Dave, I have been following your JS training but faced a problem in Chapter 22. Your comment in the CSS file which reads "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." is not completely clear to me. I followed your instruction (the way I understood which might be wrong...) but cannot see the grey margin around the dark blue box as you have shown in the YouTube training.
Could you please have a look at your CSS and HTML files associated with the view you work on in Chapter 22 of the training and share those two files. Thanks.