diff --git a/assets/img/Marketplace.svg b/assets/img/Marketplace.svg new file mode 100644 index 0000000..641cf22 --- /dev/null +++ b/assets/img/Marketplace.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/assets/img/Payment.svg b/assets/img/Payment.svg new file mode 100644 index 0000000..8182973 --- /dev/null +++ b/assets/img/Payment.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/assets/img/coin 1.svg b/assets/img/coin 1.svg new file mode 100644 index 0000000..463bc1d --- /dev/null +++ b/assets/img/coin 1.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/css/layout/main.css b/css/layout/main.css index e163438..c40b70b 100644 --- a/css/layout/main.css +++ b/css/layout/main.css @@ -11,6 +11,7 @@ align-items: center; position: relative; margin-top: 80px; + margin-bottom: 95px; } .three-computers { @@ -24,6 +25,41 @@ max-width: 766px; } +.content-card-container { + max-width: 1092px; + height: 435px; + display: flex; + justify-content: space-around; + align-items: center; + position: relative; + margin: auto; +} + +.first-content-card { + width: 100%; + height: 435px; + background: #F0F0F0; + +} + +.first-card, .second-card, .three-card { + width: 350.33px; + height: 287.95px; + background: #FFFFFF; + box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23); + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + margin: auto; +} + +.first-card p, .second-card p, .three-card p { + width: 299px; + text-align: center; + margin: 27px 0; +} + @media screen and (max-width: 415px) { .main_banner_desktop { display: none; @@ -34,17 +70,36 @@ margin-top: 84px; padding-left: 31px; padding-right: 29px; + margin-bottom: 158px; } .three-computers { width: 239px; height: 239px; - margin-top: 67px; + margin-top: 137px; margin-left: 0; + position: relative; } .first-content-text { max-width: 357px; + + } + + .first-content-card { + width: auto; + height: 966px; + display: flex; + justify-content: center; + align-items: center; + } + + .content-card-container { + width: auto; + height: 894px; + flex-direction: column; + justify-content: space-around; + } } diff --git a/index.html b/index.html index 1b253cb..09bd791 100644 --- a/index.html +++ b/index.html @@ -39,5 +39,22 @@ imagem ilustrativa de 3 computadores +
+
+
+ ícone mercado +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.

+
+
+ ícone de bolsa com um escudo e ícone de confirmação +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.

+
+
+ ícone de uma mão aberta com um símbolo de dólar em cima +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.

+
+
+ +
\ No newline at end of file