This repository has been archived on 2023-11-10. You can view files and clone it, but cannot push or open issues or pull requests.
freecodecamp-projects/1-responsive-web-design/4-product-landing-page/styles.css

111 lines
1.4 KiB
CSS
Raw Normal View History

2022-10-06 14:17:56 +00:00
*{
box-sizing: border-box;
margin: 0;
}
body{
background: linear-gradient(
lightpink,
mintcream,
lime
);
}
#header{
width: 100%;
height: 3rem;
min-height: 1%;
position: sticky;
top: 0;
background-color: peachpuff;
z-index: 10;
}
#logo{
position: absolute;
width: 30%;
left: 1rem;
top: 1rem;
font-family: sans-serif;
}
#logo img{
width: 2rem;
height: 2rem;
float: left;
position: relative;
bottom: 0.5rem;
}
#nav-bar{
position: absolute;
right: 0;
display: flex;
justify-content: space-evenly;
width: 50%;
padding-top: 1rem;
}
.nav-link{
text-decoration: none;
color: black;
}
main{
margin: 0 auto;
padding: 1rem 0;
max-width: 70%;
text-align: center;
}
main h1{
padding: 3rem;
}
#video{
width: 100%;
padding: 2rem;
border: 0;
}
#Why_ours{
padding: 1rem;
display:flex;
flex-flow: column;
justify-content: space-evenly;
}
.reason{
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
font-size: 1.2rem;
margin: 2rem 2rem;
}
.reason i{
font-size: 3rem;
position: relative;
right: 2rem;
bottom: 1rem;
color: mediumpurple;
}
@media (max-width: 480px) {
main{
width: 100%;
max-width: 100%;
margin: 0;
}
}
form{
margin-top: 30px;
}
button{
border: 0;
font-weight: bold;
}