Skip to content

Luís Felipe Campos / Teste00-CoffeeShop

Go to a project
Commit 340924e5 by Luis Ribeiro
Options

commentary commit

parent 30061d9e
Showing with 23 additions and 9 deletions
index.html
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
<title>Teste00--Coffee Shop</title> <title>Teste00--Coffee Shop</title>
</head> </head>
<body> <body>
<header id="home"> <header id="home"> <!-- Header -->
<nav class="header__nav"> <nav class="header__nav">
<h2 class="header__logo">LOGO</h2> <h2 class="header__logo">LOGO</h2>
<ul class="header__ul"> <ul class="header__ul">
...@@ -23,7 +23,7 @@ ...@@ -23,7 +23,7 @@
</nav> </nav>
</header> </header>
<main class="main__container"> <main class="main__container"> <!-- Container -->
<div class="modal" id="modal1"> <!-- Modal --> <div class="modal" id="modal1"> <!-- Modal -->
<form class="modal__form"> <form class="modal__form">
...@@ -43,9 +43,9 @@ ...@@ -43,9 +43,9 @@
</form> </form>
</div> </div>
<div id="modal__background"></div> <div id="modal__background"></div> <!-- Segundo plano do Modal-->
<section id="home" class="section__intro"> <section id="home" class="section__intro"> <!-- Primeira Seção -->
<div class="section__text"> <div class="section__text">
<h1>O café que você merece.</h1> <h1>O café que você merece.</h1>
<p>Experimente nossos melhores sabores, feitos com todo carinho do mundo.</p> <p>Experimente nossos melhores sabores, feitos com todo carinho do mundo.</p>
...@@ -54,7 +54,7 @@ ...@@ -54,7 +54,7 @@
<img class="section__img" src="images/gummy-coffee.svg" alt="coffee art"> <img class="section__img" src="images/gummy-coffee.svg" alt="coffee art">
</section> </section>
<section class="section__follow section__follow--background"> <section class="section__follow section__follow--background"> <!-- Segunda Seção -->
<img class="section__img" src="images/open-doodles-coffee.svg" alt="man hugging a coffee mug art"> <img class="section__img" src="images/open-doodles-coffee.svg" alt="man hugging a coffee mug art">
<div class="section__follow__text"> <div class="section__follow__text">
<h1>Agindo com paixão e inspiração.</h1> <h1>Agindo com paixão e inspiração.</h1>
...@@ -63,14 +63,14 @@ ...@@ -63,14 +63,14 @@
</div> </div>
</section> </section>
<h2 id="menu" class="section__title">Mais Vendidos</h2> <h2 id="menu" class="section__title">Mais Vendidos</h2> <!-- Terceira Seção -->
<section class="section__menu"> <section class="section__menu">
<a href="#"><img src="images/clarissa-carbungco-uy9DJw9e_vs-unsplash.jpg" alt="frape"></a> <a href="#"><img src="images/clarissa-carbungco-uy9DJw9e_vs-unsplash.jpg" alt="frape"></a>
<a href="#"><img src="images/siddharth-salve-8wESIey6sYQ-unsplash.jpg" alt="coffee drink"></a> <a href="#"><img src="images/siddharth-salve-8wESIey6sYQ-unsplash.jpg" alt="coffee drink"></a>
<a href="#"><img src="images/tabitha-turner-3n3mPoGko8g-unsplash.jpg" alt="capuccino"></a> <a href="#"><img src="images/tabitha-turner-3n3mPoGko8g-unsplash.jpg" alt="capuccino"></a>
</section> </section>
<h2 id="sobre" class="section__title">Nossos Valores</h2> <!-- Talvez seja melhor usar Grid invés de Flex--> <h2 id="sobre" class="section__title">Nossos Valores</h2> <!--Quarta Seção -- Talvez seja melhor usar Grid invés de Flex -->
<section class="section__valores"> <section class="section__valores">
<figure class="figures"> <figure class="figures">
<img class="figures__img" src="images/Boba.svg" alt="boba tea svg"> <img class="figures__img" src="images/Boba.svg" alt="boba tea svg">
...@@ -101,11 +101,11 @@ ...@@ -101,11 +101,11 @@
</section> </section>
</main> </main>
<section class="btt__link"> <section class="btt__link"> <!-- Seção Voltar ao início -->
<h3><a href="#home">Voltar ao início</a></h3> <h3><a href="#home">Voltar ao início</a></h3>
</section> </section>
<footer> <footer> <!-- Footer -->
<div class="footer__col"> <div class="footer__col">
<h3>Pagamento</h3> <h3>Pagamento</h3>
<ul> <ul>
......
styles.css
...@@ -20,6 +20,7 @@ body { ...@@ -20,6 +20,7 @@ body {
transition: background 1s; transition: background 1s;
} }
/* Dark Mode */
.dark { .dark {
background-color: var(--corQuinta); background-color: var(--corQuinta);
color: var(--corSexta); color: var(--corSexta);
...@@ -59,6 +60,7 @@ body { ...@@ -59,6 +60,7 @@ body {
filter: invert(55%) sepia(91%) saturate(274%) hue-rotate(356deg) brightness(87%) contrast(86%); filter: invert(55%) sepia(91%) saturate(274%) hue-rotate(356deg) brightness(87%) contrast(86%);
} }
/* Header */
header { header {
color: var(--corPrimeira); color: var(--corPrimeira);
background-color: var(--corTerceira); background-color: var(--corTerceira);
...@@ -118,6 +120,7 @@ header { ...@@ -118,6 +120,7 @@ header {
transition: 0.4s; transition: 0.4s;
} }
/* Container */
.main__container { .main__container {
color: var(--corSegunda); color: var(--corSegunda);
margin: 0 auto; margin: 0 auto;
...@@ -125,6 +128,7 @@ header { ...@@ -125,6 +128,7 @@ header {
max-width: 1200px; max-width: 1200px;
} }
/* Seção Inicial */
.section__intro { .section__intro {
display: inline-flex; display: inline-flex;
width: 100%; width: 100%;
...@@ -142,6 +146,7 @@ h1 { ...@@ -142,6 +146,7 @@ h1 {
font-weight: bold; font-weight: bold;
} }
/* T[itulos das seções */
.section__title { .section__title {
font-size: xx-large; font-size: xx-large;
font-weight: bolder; font-weight: bolder;
...@@ -168,6 +173,7 @@ h1 { ...@@ -168,6 +173,7 @@ h1 {
padding: 0; padding: 0;
} }
/* Botões */
.button { .button {
font-size: 1em; font-size: 1em;
border: none; border: none;
...@@ -220,6 +226,7 @@ h1 { ...@@ -220,6 +226,7 @@ h1 {
color: var(--corSegunda); color: var(--corSegunda);
} }
/* Segunda Seção */
.section__follow { .section__follow {
margin-top: 130px; margin-top: 130px;
background-color: var(--corTerceira); background-color: var(--corTerceira);
...@@ -278,6 +285,7 @@ h1 { ...@@ -278,6 +285,7 @@ h1 {
transform: scale(1.08); transform: scale(1.08);
} }
/* Seção Valores */
.figures__img { .figures__img {
width: 100px; width: 100px;
margin-bottom: 35px; margin-bottom: 35px;
...@@ -297,6 +305,7 @@ h1 { ...@@ -297,6 +305,7 @@ h1 {
text-align: center; text-align: center;
} }
/* Seção Contato */
.contact { .contact {
margin-top: 150px; margin-top: 150px;
margin-bottom: 100px; margin-bottom: 100px;
...@@ -352,6 +361,7 @@ h1 { ...@@ -352,6 +361,7 @@ h1 {
color: var(--corSegunda); color: var(--corSegunda);
} }
/* Seção voltar ao início */
.btt__link { .btt__link {
background-color: var(--corTerceira); background-color: var(--corTerceira);
display: flex; display: flex;
...@@ -372,6 +382,7 @@ h1 { ...@@ -372,6 +382,7 @@ h1 {
transition: 0.4s; transition: 0.4s;
} }
/* Footer */
footer { footer {
background-color: var(--corQuarta); background-color: var(--corQuarta);
width: 100%; width: 100%;
...@@ -438,6 +449,7 @@ footer h3 { ...@@ -438,6 +449,7 @@ footer h3 {
border-radius: 9999px; border-radius: 9999px;
} }
/* Modal */
.modal { .modal {
position: fixed; position: fixed;
top: 50%; top: 50%;
...@@ -477,6 +489,7 @@ footer h3 { ...@@ -477,6 +489,7 @@ footer h3 {
padding-block-start: 10px; padding-block-start: 10px;
} }
/* Formulário -- Modal */
.modal__form h1 { .modal__form h1 {
color: var(--corSegunda); color: var(--corSegunda);
font-size: x-large; font-size: x-large;
...@@ -538,6 +551,7 @@ input[type=text]:focus, input[type=password]:focus { ...@@ -538,6 +551,7 @@ input[type=text]:focus, input[type=password]:focus {
outline: none; outline: none;
} }
/* Segundo plano -- Modal */
#modal__background { #modal__background {
position: fixed; position: fixed;
opacity: 0; opacity: 0;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment