diff --git a/assets/images/fxemoji_threenetworkedcomputers.svg b/assets/images/fxemoji_threenetworkedcomputers.svg new file mode 100644 index 0000000..aa8344a --- /dev/null +++ b/assets/images/fxemoji_threenetworkedcomputers.svg @@ -0,0 +1,15 @@ + diff --git a/assets/styles/styles.css b/assets/styles/styles.css index da3dcf1..b1a9d15 100644 --- a/assets/styles/styles.css +++ b/assets/styles/styles.css @@ -2,6 +2,8 @@ margin: 0; padding: 0; box-sizing: border-box; + font-family: "Inter", sans-serif; + color: #000000; } header { @@ -27,6 +29,49 @@ header { display: none; } +.infocard { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; +} + +.infocard div { + display: flex; + flex-direction: column; + margin: 74px 0; + width: 80%; +} + +.infocard h2 { + text-align: center; + font-size: 32px; + line-height: 39px; + text-transform: uppercase; +} + +.infocard h1 { + text-align: center; + font-weight: 500; + font-size: 48px; + line-height: 58px; + text-transform: uppercase; +} + +.infocard p { + text-align: center; + font-size: 16px; + line-height: 24px; + margin-top: 28px; + width: 100%; +} + +.infocard figure { + display: flex; + justify-content: center; + margin-bottom: 90px; +} + @media (max-width: 414px) { .banner-desktop { display: none; @@ -41,4 +86,22 @@ header { .banner-mobile figure img { width: 100%; } + + .infocard div { + width: 86%; + } + + .infocard h2 { + font-size: 20px; + line-height: 24px; + } + + .infocard h1 { + font-size: 28px; + line-height: 34px; + } + + .infocard figure img { + width: 58%; + } } diff --git a/index.html b/index.html index 81c7017..33498db 100644 --- a/index.html +++ b/index.html @@ -1,10 +1,18 @@
+ + + + +
+ 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.
+