diff --git a/assets/top-infocard-image.png b/assets/top-infocard-image.png new file mode 100644 index 0000000..2af63bd Binary files /dev/null and b/assets/top-infocard-image.png differ diff --git a/css/style.css b/css/style.css index 306cf0f..b1642ae 100644 --- a/css/style.css +++ b/css/style.css @@ -1,6 +1,5 @@ * { margin: 0; - padding: 0; box-sizing: border-box; } @@ -9,6 +8,8 @@ body{ color: #000000; } +/*** HEADER ***/ + .page-header{ display: flex; justify-content: center; @@ -21,6 +22,8 @@ body{ display: block; } +/*** MAIN BANNER ***/ + .main-banner-desktop{ display: block; width: 100%; @@ -30,13 +33,77 @@ body{ width: 100%; } +/*** TOP INFOCARD ***/ + +.top-infocard { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + margin-top: 74px; +} + +.top-infocard-subtitle{ + font-weight: 400; + font-size: 32px; + line-height: 39px; + text-transform: uppercase; +} + +.top-infocard-title{ + font-weight: 500; + font-size: 48px; + line-height: 58px; + text-transform: uppercase; +} + +.top-infocard-description{ + font-weight: 400; + font-size: 16px; + line-height: 24px; + margin-top: 28px; + max-width: 40%; +} + +.top-infocard-image{ + margin-top: 74px; +} + @media screen and (max-width: 1024px){ + /*** MAIN BANNER ***/ .main-banner-desktop{ display: none; } + + /*** TOP INFOCARD ***/ + .top-infocard{ + padding: 0 28px 0; + } + + .top-infocard-subtitle{ + font-size: 20px; + line-height: 24px; + text-align: center; + } + + .top-infocard-title{ + text-align: center; + font-size: 28px; + line-height: 34px; + } + + .top-infocard-description{ + max-width: 100%; + text-align: center; + } + + .top-infocard-image{ + margin-top: 65px; + } } @media screen and (min-width: 1025px){ + /*** MAIN BANNER ***/ .main-banner-mobile{ display: none; } diff --git a/index.html b/index.html index a85328e..a36ee64 100644 --- a/index.html +++ b/index.html @@ -1,6 +1,10 @@
+ + + + @@ -9,18 +13,48 @@ ++ Lorem ipsum +
+ + ++ dolor sit amet +
+ + ++ Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Cras euismod enim non dui fringilla interdum. + Curabitur ut tortor sed lacus egestas vulputate vel sit amet velit. Nulla suscipit magna dui. +
+ + + +