JS Course Chapter 22 CSS

js_chapter_22_css.css

* {
    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 $display: none;$ from $.view2$ and $.view3$ which resolved the matter!

You used view as a class in your code, and we’re using view1, view2 , view3. Why?

I’m having a little issue here