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 @@
<title>Teste00--Coffee Shop</title>
</head>
<body>
<header id="home">
<header id="home"> <!-- Header -->
<nav class="header__nav">
<h2 class="header__logo">LOGO</h2>
<ul class="header__ul">
......@@ -23,7 +23,7 @@
</nav>
</header>
<main class="main__container">
<main class="main__container"> <!-- Container -->
<div class="modal" id="modal1"> <!-- Modal -->
<form class="modal__form">
......@@ -43,9 +43,9 @@
</form>
</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">
<h1>O café que você merece.</h1>
<p>Experimente nossos melhores sabores, feitos com todo carinho do mundo.</p>
......@@ -54,7 +54,7 @@
<img class="section__img" src="images/gummy-coffee.svg" alt="coffee art">
</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">
<div class="section__follow__text">
<h1>Agindo com paixão e inspiração.</h1>
......@@ -63,14 +63,14 @@
</div>
</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">
<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/tabitha-turner-3n3mPoGko8g-unsplash.jpg" alt="capuccino"></a>
</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">
<figure class="figures">
<img class="figures__img" src="images/Boba.svg" alt="boba tea svg">
......@@ -101,11 +101,11 @@
</section>
</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>
</section>
<footer>
<footer> <!-- Footer -->
<div class="footer__col">
<h3>Pagamento</h3>
<ul>
......
styles.css
......@@ -20,6 +20,7 @@ body {
transition: background 1s;
}
/* Dark Mode */
.dark {
background-color: var(--corQuinta);
color: var(--corSexta);
......@@ -59,6 +60,7 @@ body {
filter: invert(55%) sepia(91%) saturate(274%) hue-rotate(356deg) brightness(87%) contrast(86%);
}
/* Header */
header {
color: var(--corPrimeira);
background-color: var(--corTerceira);
......@@ -118,6 +120,7 @@ header {
transition: 0.4s;
}
/* Container */
.main__container {
color: var(--corSegunda);
margin: 0 auto;
......@@ -125,6 +128,7 @@ header {
max-width: 1200px;
}
/* Seção Inicial */
.section__intro {
display: inline-flex;
width: 100%;
......@@ -142,6 +146,7 @@ h1 {
font-weight: bold;
}
/* T[itulos das seções */
.section__title {
font-size: xx-large;
font-weight: bolder;
......@@ -168,6 +173,7 @@ h1 {
padding: 0;
}
/* Botões */
.button {
font-size: 1em;
border: none;
......@@ -220,6 +226,7 @@ h1 {
color: var(--corSegunda);
}
/* Segunda Seção */
.section__follow {
margin-top: 130px;
background-color: var(--corTerceira);
......@@ -278,6 +285,7 @@ h1 {
transform: scale(1.08);
}
/* Seção Valores */
.figures__img {
width: 100px;
margin-bottom: 35px;
......@@ -297,6 +305,7 @@ h1 {
text-align: center;
}
/* Seção Contato */
.contact {
margin-top: 150px;
margin-bottom: 100px;
......@@ -352,6 +361,7 @@ h1 {
color: var(--corSegunda);
}
/* Seção voltar ao início */
.btt__link {
background-color: var(--corTerceira);
display: flex;
......@@ -372,6 +382,7 @@ h1 {
transition: 0.4s;
}
/* Footer */
footer {
background-color: var(--corQuarta);
width: 100%;
......@@ -438,6 +449,7 @@ footer h3 {
border-radius: 9999px;
}
/* Modal */
.modal {
position: fixed;
top: 50%;
......@@ -477,6 +489,7 @@ footer h3 {
padding-block-start: 10px;
}
/* Formulário -- Modal */
.modal__form h1 {
color: var(--corSegunda);
font-size: x-large;
......@@ -538,6 +551,7 @@ input[type=text]:focus, input[type=password]:focus {
outline: none;
}
/* Segundo plano -- Modal */
#modal__background {
position: fixed;
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