Skip to content

Commit

Permalink
feat: making footer
Browse files Browse the repository at this point in the history
  • Loading branch information
@henriquedev24
henriquedev24 committed Sep 25, 2024
1 parent 2e11526 commit 077d1b0
Show file tree
Hide file tree
Showing 2 changed files with 130 additions and 83 deletions.
53 changes: 36 additions & 17 deletions landpageex.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,13 +11,13 @@
<body>
<header>
<img class="logo" src="logo.png" alt="logo marca" />
<nav class="lista">
<a class="opcoes">Home</a>
<a class="opcoes">Sobre</a>
<a class="opcoes">Serviço</a>
<a class="opcoes">Preço</a>
<a class="opcoes">Conteúdos</a>
<a class="opcoes">Contatos</a>
<nav class="list">
<a class="options">Home</a>
<a class="options">Sobre</a>
<a class="options">Serviço</a>
<a class="options">Preço</a>
<a class="options">Conteúdos</a>
<a class="options">Contatos</a>
</nav>
<button class="btn-encomendas">Pegue as encomendas</button>
</header>
Expand Down Expand Up @@ -66,35 +66,54 @@ <h1>Pacotes com preços</h1>
<div>
<h1>R$ 45</h1>
<h2>Básico</h2>
<p>Entrega Rápida</p>
<p>Proteção ao produto</p>
<button>Peça agora</button>
<div class="centralize">
<p>Entrega Rápida</p>
<p>Proteção ao produto</p>
</div>
</div>
<button>Peça agora</button>
</div>
<div class="plan-premium">
<div>
<h1>R$ 80</h1>
<h2>Premium</h2>
<p>Entrega Rápida</p>
<p>Proteção ao produto</p>
<button>Peça agora</button>
<div class="centralize">
<p>Entrega Rápida</p>
<p>Proteção ao produto</p>
</div>
</div>
<button>Peça agora</button>
</div>
<div class="plan-business">
<div>
<h1>R$ 125</h1>
<h2>Business</h2>
<p>Entrega Rápida</p>
<p>Proteção ao produto</p>
<button>Peça agora</button>
<div class="centralize">
<p>Entrega Rápida</p>
<p>Proteção ao produto</p>
</div>
</div>
<button>Peça agora</button>
</div>
</div>
</section>
</main>
</body>
<footer>

<div class="links">
<adress class="contacts">
<h2>Contactar</h2>
<a href="#">Av. Barão de Studart, 158, Fortaleza, CE</a>
<a href="#">85 8562-9634</a>
<a href="#">[email protected]</a>
</adress>
<div class="media">
<a href="">Twitter</a>
<a href="">facebook</a>
<a href="">Linkedin</a>
<a href="">Instagram</a>
</div>
</div>
</footer>

</html>
160 changes: 94 additions & 66 deletions pagestyle.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
}
Expand Down Expand Up @@ -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;
Expand All @@ -162,125 +163,152 @@ 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;
width: 30%;
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;
border: none;
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;
}

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;
}

0 comments on commit 077d1b0

Please sign in to comment.