From 077d1b07e117a1a8dafa279acccc17d071e255bc Mon Sep 17 00:00:00 2001 From: Gabriel Henrique Date: Tue, 24 Sep 2024 21:08:47 -0300 Subject: [PATCH] feat: making footer --- landpageex.html | 53 +++++++++++----- pagestyle.css | 160 ++++++++++++++++++++++++++++-------------------- 2 files changed, 130 insertions(+), 83 deletions(-) diff --git a/landpageex.html b/landpageex.html index 52ecf72..228bd6e 100644 --- a/landpageex.html +++ b/landpageex.html @@ -11,13 +11,13 @@
-
@@ -66,35 +66,54 @@

Pacotes com preços

R$ 45

Básico

-

Entrega Rápida

-

Proteção ao produto

- +
+

Entrega Rápida

+

Proteção ao produto

+
+

R$ 80

Premium

-

Entrega Rápida

-

Proteção ao produto

- +
+

Entrega Rápida

+

Proteção ao produto

+
+

R$ 125

Business

-

Entrega Rápida

-

Proteção ao produto

- +
+

Entrega Rápida

+

Proteção ao produto

+
+
\ No newline at end of file diff --git a/pagestyle.css b/pagestyle.css index fa6bebd..b1696f5 100644 --- a/pagestyle.css +++ b/pagestyle.css @@ -10,22 +10,22 @@ header { display: flex; justify-content: space-between; } -.lista { +.list { display: flex; position: relative; justify-content: center; flex-direction: row; - padding: 15px; + padding: 12px; gap: 8px; cursor: default; } -.opcoes { +.options { padding: 15px 20px; width: auto; font-weight: bolder; } -.opcoes:hover { +.options:hover { display: flex; /* flex-wrap: nowrap; */ background-color: orangered; @@ -43,9 +43,10 @@ header { position: relative; margin-right: 15rem; border: none; - border-radius: 10px; + font-size: 15px; color: white; - padding: 10px 20px 10px 20px; + font-weight: bold; + padding: 5px 20px 5px 20px; background-color: orangered; transition: background-color 0.2s ease, color 0.2s ease; } @@ -138,19 +139,19 @@ header { font-size: 36px; color: #333; margin-bottom: 20px; - } - - .text-getquote h4 { +} + +.text-getquote h4 { font-size: 20px; color: #ff5a01; margin-bottom: 10px; - } - - .text-getquote p { +} + +.text-getquote p { font-size: 16px; color: #666; line-height: 1.6; - } +} .order-services { background-color: #dfddd7; @@ -162,24 +163,23 @@ header { align-items: center; } - .num-services { text-align: center; margin-left: 20px; - } - - .num-services h1 { +} + +.num-services h1 { font-size: 36px; color: #ff5a01; - } - - .num-services p { +} + +.num-services p { font-size: 16px; color: #666; margin-bottom: 30px; - } +} - .orders-services { +.orders-services { display: flex; flex-direction: column; gap: 15px; @@ -187,23 +187,23 @@ header { background-color: #ff5a01; padding: 30px; border-radius: 5px; - } - - .orders-services input { +} + +.orders-services input { padding: 15px; border: none; border-radius: 5px; font-size: 16px; - } - .orders-services select { +} +.orders-services select { width: 100%; padding: 15px; border: none; border-radius: 5px; font-size: 16px; - } - - .orders-services button { +} + +.orders-services button { padding: 15px; background-color: #1a1a1a; color: white; @@ -211,76 +211,104 @@ header { border-radius: 5px; font-size: 16px; cursor: pointer; - } - - .orders-services button:hover { +} + +.orders-services button:hover { background-color: #333; - } +} - .plan-prices { +.plan-prices { text-align: center; - } +} - .title-plan { +.title-plan { margin: 10px; - } +} - .title-plan h3 { +.title-plan h3 { font-size: 18px; text-transform: uppercase; color: #ff5a01; - } +} - .title-plan h1 { +.title-plan h1 { + margin-top: 10px; font-size: 36px; - } + margin-bottom: 35px; +} - .plans { +.plans { display: flex; justify-content: center; + align-items: stretch; margin: 15px; text-align: center; gap: 8%; - } +} - .plans h1 { +.plans h1 { font-size: 50px; margin: 30px; - } +} - .plans h2 { - margin: 25% 10%; +.plans h2 { + margin: 10px 0; font-size: 35px; - /* background-color: #ff5a01; */ - } + background-color: #050505; + color: white; + padding: 15px 50px; +} - .plans p { +.plans p { font-size: 20px; margin: 15px; - } +} + +.centralize { + margin-top: 55px; +} - .plans button { - margin-top: 55%; +.plans button { padding: 10%; font-size: 20px; + font-weight: bolder; background-color: #ff5a01; border: none; cursor: pointer; border-radius: 40px; color: azure; - } +} - .plan-basic { - padding: 3rem 5rem 15rem 5rem; - background-color: #dfddd7; - } +.plans button:hover { + background-color: aliceblue; + color: #1a1a1a; +} - .plan-premium { - padding: 3rem 5rem 15rem 5rem; +.plan-basic, +.plan-premium, +.plan-business { + padding: 3rem 5rem 10rem 5rem; background-color: #dfddd7; - } + width: 15%; +} - .plan-business { - padding: 3rem 5rem 15rem 5rem; - background-color: #dfddd7; - } \ No newline at end of file + +footer { + background-color: darkblue; + margin-top: 45px; +} + +footer h2 { + color: aliceblue; +} + +.links { + margin-left: 0; + padding: 10rem; +} + +.contacts { + display: flex; + flex-direction: column; + gap: 10px; +}