Embedded Files
CSS
*{
margin: 0;
box-sizing: border-box;
}
header{
width: 100vw;
height: 10vh;
background-color: rgb(18, 9, 9);
display: flex;
justify-content: center;
align-items: center;
}
button{
width: 200px;
border-radius: 5px;
background-color: rgb(244, 245, 245);
height: 40px;
border: none;
margin: 2px
}
main{
width: 100vw;
height: 70vh;
display: flex;
justify-content: center;
align-items: center;
background-color: rgb(185, 185, 180);
}
section{
width: 28%;
height: 94%;
border: 1px solid rgb(233, 227, 227);
background-color: white;
padding: 2%;
}
figure{
text-align: center;
}
img{
width: 28%;
}
p{
font-size: 1rem;
}
footer{
width: 100vw;
height: 20vh;
background-color: rgb(14, 1, 1);
color: rgb(240, 233, 233);
display: flex;
justify-content: center;
align-items: center;
font-size: 2rem;
}
/* TABLET*/
@media (min-width: 768px) and (max-width: 1023px) {
header{
width: 100vw;
height: 20vh;
background-color: rgb(18, 9, 9);
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
padding: 0 20%;
}
button{
width: 200px;
border-radius: 5px;
background-color: rgb(244, 245, 245);
height: 40px;
border: none;
margin: 3px
}
main{
width: 100vw;
height: 110vh;
display: flex;
justify-content: center;
align-items: center;
background-color: rgb(192, 192, 178);
flex-wrap: wrap;
}
section{
width: 95%;
height:32%;
border: 1px solid rgb(233, 227, 227);
background-color: white;
padding: 1%;
}
figure{
text-align: center;
}
img{
width: 7%;
}
p{
font-size: 1rem;
}
footer{
width: 100vw;
height: 20vh;
background-color: rgb(14, 1, 1);
color: rgb(240, 233, 233);
display: flex;
justify-content: center;
align-items: center;
font-size: 2rem;
}
}
/*smartphone*/
@media (max-width: 767px) {
header{
width: 100vw;
height: 40vh;
background-color: rgb(18, 9, 9);
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
padding: 0 20%;
flex-direction: column;
}
button{
width: 200px;
border-radius: 5px;
background-color: rgb(244, 245, 245);
height: 40px;
border: none;
margin: 3px
}
main{
width: 100vw;
height: 120vh;
display: flex;
justify-content: center;
align-items: center;
background-color: rgb(192, 192, 178);
flex-wrap: wrap;
}
section{
width: 95%;
height:33%;
border: 1px solid rgb(233, 227, 227);
background-color: white;
padding: 1%;
}
figure{
text-align: center;
}
img{
width: 7%;
}
p{
font-size: 1rem;
}
footer{
width: 100vw;
height: 20vh;
background-color: rgb(14, 1, 1);
color: rgb(240, 233, 233);
display: flex;
justify-content: center;
align-items: center;
font-size: 2rem;
}
}
Google Sites
Report abuse