ADVANCED CSS

/* our css file is called belinda.css this is a comment in css*/
body{
background-color:lightblue;
font-family:Helvetica, sans-serif;
padding-bottom:100px;

}
html,body{
padding:0;
margin:0;
}
h2,h3{
margin:0 0 .75em 0;

}
input{
font-size:14px;
font-family:Helvetica, sans-serif;

}
.container{
max-width:750px;
margin:20px auto 0 auto;
padding:30px;
background-color:#fff;

}
.form-row{
padding:10px 0;
display:flex;
}
.form-row label{
/flex:1;/
padding-right:10px;
}
.form-row input{
flex:1;
}
.column-layout{
max-width:1300px;
background-color:#fff;
margin:40px 40px 0 auto;
line-height:1.65;
padding:20px 50px;
display:flex;
}
.main-column{
flex:2;
order:2;
}
.sidebar-one{
flex:1;
order:1;
}
.sidebar-two{
flex:1;
order:3;
}

.call-outs-container{
max-width:1400px;
margin:40px auto 0 auto;

}
.call-out{
padding:20px;
box-sizing:border-box;
margin-bottom:20px;
flex-basis:30%;
}

/the following css code makes it possible for devices with small display/
@media (min-width:900px){
.call-outs-container{
display:flex;
justify-content:space-between;}
}
.call-out:nth-child(1){background-color:#c0dbe2;}
.call-out:nth-child(2){background-color:#cdf1c3;}
.call-out:nth-child(3){background-color:#ccb9da;}
.banner{
height:400px;
max-width:700px;
margin:40px auto 40px auto;
background-color:#2a2a2a;
display:flex;

}
.center-me{
color:#fff;
font-size:50px;
margin:auto;

}

.equal-height-container{

max-width:900px;
margin:0 auto;
display:flex;

}
.first{
flex:1;
background-color:#fff;
padding:20px;

}
.second{
background-color:yellow;
flex:1;
display: flex;
flex-direction:column;
}

.second-1{
background-color:#c0dbe2;
flex:1;
}
.second-2{
background-color:#cdf1c3;
flex:1;
}

Leave a Reply

Your email address will not be published. Required fields are marked *