challenge-landing-page-samu.../styles/style.css

176 lines
2.8 KiB
CSS

@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Inter', sans-serif;
color: #000000;
}
.page-header {
background-color: #000000;
display: flex;
justify-content: center;
}
.header-logo {
padding: 29px 0px;
display: block;
}
.main-banner {
width: 100%;
}
.first-content {
padding-top: 73px;
display: flex;
align-items: center;
justify-content: center;
}
.first-content-text {
max-width: 766px;
}
.first-content-h2 {
text-transform: uppercase;
font-weight: 400;
font-size: 32px;
line-height: 39px;
text-align: center;
}
.first-content-h1 {
font-weight: 500;
font-size: 40px;
line-height: 58px;
text-transform: uppercase;
text-align: center;
}
.first-content-p {
font-weight: 400;
font-size: 16px;
padding-top: 28px;
}
.block {
width: 50%;
max-width: 315px;
display: block;
margin: auto;
padding: 73px 0px 179px 0px;
}
.first-card {
width: auto;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 21px;
padding-bottom: 79px;
}
.first-card-p {
width: 299px;
padding: 27px;
padding-top: 27px;
text-align: center;
}
.first-card-image {
display: block;
margin: auto;
width: 103px;
padding: 35px 12px 0px 12px;
}
.first-card-cards {
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
}
.image-row-background {
background-color: #E0E0E0;;
height: 530px;
}
.image-row-desktop {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 39px;
padding: 62px 72px 0px 72px;
}
.row-image-desktop {
margin-top:62px;
}
.image-row-mobile1 {
display: flex;
justify-content: center;
align-items: center;
gap: 14px;
padding: 0px 23px 0px 23px;
}
.image-row-mobile2 {
display: flex;
justify-content: center;
align-items: center;
padding: 24px 23px;
}
@media screen and (max-width: 1024px) {
.first-content-text {
max-width: 367px;
padding: 0px 29px;
}
.first-content-h2 {
font-size: 20px;
line-height: 24px;
}
.first-content-h1 {
font-size: 28px;
line-height: 34px;
}
.first-content-p {
text-align: center;
}
.block {
padding-bottom: 90px;
}
.first-card {
display: flex;
flex-direction: column;
}
}
@media screen and (max-width: 1919px) {
.image-row-background {
height: 579px;
}
.row-image-desktop {
display: none;
}
}
@media screen and (min-width: 1920px){
.image-row-mobile1 {
display: none;
}
.image-row-mobile2 {
display: none;
}
}