Add files via upload

analyangelinastippschmoeller · Sep 13, 2023 · 83b54a4 · 83b54a4
1 parent d286277
commit 83b54a4
Show file tree

Hide file tree

Showing 60 changed files with 714 additions and 0 deletions.
diff --git a/analyemariabooks/img/Alura.png b/analyemariabooks/img/Alura.png
diff --git a/analyemariabooks/img/AluraEmpresas.png b/analyemariabooks/img/AluraEmpresas.png
diff --git a/analyemariabooks/img/AluraLatam.png b/analyemariabooks/img/AluraLatam.png
diff --git a/analyemariabooks/img/AluraLingua.png b/analyemariabooks/img/AluraLingua.png
diff --git a/analyemariabooks/img/AluraStart.png b/analyemariabooks/img/AluraStart.png
diff --git a/analyemariabooks/img/Angular-1.png b/analyemariabooks/img/Angular-1.png
diff --git a/analyemariabooks/img/Angular-2.png b/analyemariabooks/img/Angular-2.png
diff --git a/analyemariabooks/img/Angular-3.png b/analyemariabooks/img/Angular-3.png
diff --git a/analyemariabooks/img/Angular-4.png b/analyemariabooks/img/Angular-4.png
diff --git a/analyemariabooks/img/Angular.png b/analyemariabooks/img/Angular.png
diff --git a/analyemariabooks/img/ApacheKafka.png b/analyemariabooks/img/ApacheKafka.png
diff --git a/analyemariabooks/img/Caelum.png b/analyemariabooks/img/Caelum.png
diff --git a/analyemariabooks/img/CarreiraSemFronteira.png b/analyemariabooks/img/CarreiraSemFronteira.png
diff --git a/analyemariabooks/img/CasaDoCodigo.png b/analyemariabooks/img/CasaDoCodigo.png
diff --git a/analyemariabooks/img/Compras.svg b/analyemariabooks/img/Compras.svg
diff --git a/analyemariabooks/img/Email.svg b/analyemariabooks/img/Email.svg
diff --git a/analyemariabooks/img/Estrelinhas.png b/analyemariabooks/img/Estrelinhas.png
diff --git a/analyemariabooks/img/Favoritos-1.svg b/analyemariabooks/img/Favoritos-1.svg
diff --git a/analyemariabooks/img/Favoritos.svg b/analyemariabooks/img/Favoritos.svg
diff --git a/analyemariabooks/img/Frame 143.png b/analyemariabooks/img/Frame 143.png
diff --git a/analyemariabooks/img/GUJ.png b/analyemariabooks/img/GUJ.png
diff --git a/analyemariabooks/img/Guia Front-end.png b/analyemariabooks/img/Guia Front-end.png
diff --git a/analyemariabooks/img/HipstersJobs.png b/analyemariabooks/img/HipstersJobs.png
diff --git a/analyemariabooks/img/HipstersTech.png b/analyemariabooks/img/HipstersTech.png
diff --git a/analyemariabooks/img/Javascript.png b/analyemariabooks/img/Javascript.png
diff --git a/analyemariabooks/img/Layers.png b/analyemariabooks/img/Layers.png
diff --git a/analyemariabooks/img/Liderança.png b/analyemariabooks/img/Liderança.png
diff --git a/analyemariabooks/img/LikeABoss.png b/analyemariabooks/img/LikeABoss.png
diff --git a/analyemariabooks/img/Logo.png b/analyemariabooks/img/Logo.png
diff --git a/analyemariabooks/img/Logo.svg b/analyemariabooks/img/Logo.svg
diff --git a/analyemariabooks/img/Menu Aberto.png b/analyemariabooks/img/Menu Aberto.png
diff --git a/analyemariabooks/img/Menu.svg b/analyemariabooks/img/Menu.svg
diff --git a/analyemariabooks/img/MusicDot.png b/analyemariabooks/img/MusicDot.png
diff --git a/analyemariabooks/img/PM3.png b/analyemariabooks/img/PM3.png
diff --git a/analyemariabooks/img/Perfil-escritora 1-1.png b/analyemariabooks/img/Perfil-escritora 1-1.png
diff --git a/analyemariabooks/img/Perfil-escritora 1-2.png b/analyemariabooks/img/Perfil-escritora 1-2.png
diff --git a/analyemariabooks/img/Perfil-escritora 1-3.png b/analyemariabooks/img/Perfil-escritora 1-3.png
diff --git a/analyemariabooks/img/Perfil-escritora 1-4.png b/analyemariabooks/img/Perfil-escritora 1-4.png
diff --git a/analyemariabooks/img/Perfil-escritora 1-5.png b/analyemariabooks/img/Perfil-escritora 1-5.png
diff --git a/analyemariabooks/img/Perfil-escritora 1.png b/analyemariabooks/img/Perfil-escritora 1.png
diff --git a/analyemariabooks/img/Pesquisa.svg b/analyemariabooks/img/Pesquisa.svg
diff --git a/analyemariabooks/img/Portugol.png b/analyemariabooks/img/Portugol.png
diff --git a/analyemariabooks/img/Página inicial - LOGADA-1.png b/analyemariabooks/img/Página inicial - LOGADA-1.png
diff --git a/analyemariabooks/img/Página inicial - LOGADA.png b/analyemariabooks/img/Página inicial - LOGADA.png
diff --git a/analyemariabooks/img/Página inicial - MENU-1.png b/analyemariabooks/img/Página inicial - MENU-1.png
diff --git a/analyemariabooks/img/Página inicial - MENU.png b/analyemariabooks/img/Página inicial - MENU.png
diff --git a/analyemariabooks/img/Rectangle 30.png b/analyemariabooks/img/Rectangle 30.png
diff --git a/analyemariabooks/img/Sacola.png b/analyemariabooks/img/Sacola.png
diff --git a/analyemariabooks/img/Scuba.png b/analyemariabooks/img/Scuba.png
diff --git a/analyemariabooks/img/Usuario.png b/analyemariabooks/img/Usuario.png
diff --git a/analyemariabooks/img/Usuário.svg b/analyemariabooks/img/Usuário.svg
diff --git a/analyemariabooks/img/banner.css b/analyemariabooks/img/banner.css
@@ -0,0 +1,92 @@
+.banner{
+   background-color: deeppink;
+   color: var(--branco);
+   text-align: center;
+   padding: 2.5em 2em;
+    }
+
+    .banner__titulo{
+   font-size: 18px;
+   font-weight: 700;
+    }
+
+    .banner__texto{
+   font-weight: 500;
+   margin: 1em 0;
+    }
+
+
+    .banner__pesquisa {
+   background-color: transparent;
+   border: 1px solid var(--branco);
+   color: var(--branco);
+   border-radius: 24px;
+   padding: 1em;
+   width: 100%;
+    }
+
+    .banner__pesquisa::placeholder {
+   font-family: var(--fonte-principal);
+   font-size: 14px;
+   font-weight: 400;
+   text-align: center;
+   color: var(--branco);
+   background: url("../img/Lupa.svg") no-repeat;
+   background-position: 1em;
+    }
+
+    @media screen and (min-width: 1024px) {
+   .banner__titulo {
+    font-size: 36px;
+   }
+
+   .banner__pesquisa {
+    width: 50%;
+   }
+
+   .banner__pesquisa::placeholder {
+    background-position: 7em;
+   }
+    }
+
+    @media screen and (min-width: 1728px) {
+   .banner__pesquisa {
+    width: 35%;
+   }
+
+   .banner__pesquisa::placeholder {
+    background-position: 12em;
+   }
+
+   .banner {
+    padding: 6em 0;
+   }
+    }
+
+    @media screen and (min-width: 1024px) {
+       .banner__titulo {
+        font-size: 36px;
+       }
+
+       .banner__pesquisa {
+        width: 50%;
+       }
+
+       .banner__pesquisa::placeholder {
+        background-position: 7em;
+       }
+        }
+
+        @media screen and (min-width: 1728px) {
+       .banner__pesquisa {
+        width: 35%;
+       }
+
+       .banner__pesquisa::placeholder {
+        background-position: 12em;
+       }
+
+       .banner {
+        padding: 6em 0;
+       }
+        }
diff --git a/analyemariabooks/img/menu_black_24dp 1.png b/analyemariabooks/img/menu_black_24dp 1.png
diff --git a/analyemariabooks/index.html b/analyemariabooks/index.html
@@ -0,0 +1,126 @@
+<!DOCTYPE html>
+<html lang="pt-br">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AluraBooks Maria Laura e Analy 2A</title>
+    <link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css" />     
+
+    <link rel="stylesheet" href="reset.css">
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <header class="cabeçalho">
+        <div class="container">
+            <input type="checkbox" id="menu" class="container__botao">
+        <label for="menu">
+            <span class="cabeçalho__menu-hamburguer container__imagem"></span>
+        </label>
+        <ul class="lista-menu">
+            <li class="lista-menu__titulo">Categorias</li>
+            <li class="lista-menu__item">
+               <a href="#" class="lista-menu__link">Aventura</a>
+            </li>
+            <li class="lista-menu__item">
+                <a href="#" class="lista-menu__link">Biografia</a>
+            </li>
+            <li class="lista-menu__item">
+                <a href="#" class="lista-menu__link">Ficção Científica</a>
+            </li>
+            <li class="lista-menu__item">
+                <a href="#" class="lista-menu__link">Romance</a>
+            </li>
+            <li class="lista-menu__item">
+                <a href="#" class="lista-menu__link">Vestibular</a>
+            </li>
+     </ul>
+
+           <img src="img/Logo.svg" alt="Logo da AluraBooks" class="container__imagem">
+           <h1 class="container__titulo"> Alura Books </h1>
+        </div>
+
+
+        <ul class="opções">
+            <input type="checkbox" id="opções-menu" class="opções__botão">
+            <label for="opções-menu" class="opções__rotulo">
+            <li class="opções__item"> Categorias ...</li>
+            </label>
+            <ul class="lista-menu"> <!-- essa lista e identica a do menu hamburguer -->
+            <li class="lista-menu__item">
+            <a href="#" class="opções__link">Programação</a>
+            </li>
+            <li class="lista-menu__item">
+            <a href="#" class="opções__link">Front-end</a>
+            </li>
+            <li class="lista-menu__item">
+            <a href="#" class="opções__link">Infraestrutura</a>
+            </li>
+            <li class="lista-menu__item">
+            <a href="#" class="opções__link">Business</a>
+            </li>
+            <li class="lista-menu__item">
+            <a href="#" class="opções__link">Design & UX</a>
+            </li>
+            </ul>
+            <li class="opções__item"><a href="#" class="opções__link">Favoritos</a></li>
+            <li class="opções__item"><a href="#" class="opções__link">Minha estante</a></li>
+            </ul>
+
+
+        <div class="container">
+            <a href="#"><img src="img/Favoritos.svg" alt="" class="container__imagem container__imagem container-transparente"></a>
+            <a href="#"><img src="img/Compras.svg" alt="" class="container__imagem"></a> 
+            <p class="container__texto"> Minhas Compras </p>
+            <a href="#"><img src="img/Usuário.svg" alt="" class="container__imagem"></a>
+            <p class="container__texto"> Perfil </p>
+        </div>
+    </header>
+    <section class="banner">
+        <h2 class="banner__titulo"> Já sabepor onde começar</h2>
+    <p class="banner__texto"> Enconre em nossa estante o que precisa para o seu desenvolvimento</p>
+    <input type="search" class="banner__pesquisa" placeholder="Qual sera a sua proxima leitura">
+</section>
+
+<section class="carrossel">
+    <h2 class="carrossel__titulo">Novos lançamentos</h2>
+    <div class="carrossel__container">
+        <div class="swiper">
+            <div class="swiper-pagination"></div>
+
+            <div class="swiper-wrapper">
+                <!-- Slides -->
+                <div class="swiper-slide"><img src="img/ApacheKafka.png"
+                        alt="Livro sobre apache kafka e spring boot da alura books"></div>
+                <div class="swiper-slide"><img src="img/Liderança.png"
+                        alt="Livro sobre liderança em design da alura books"></div>
+                <div class="swiper-slide"><img src="img/Javascript.png"
+                        alt="Livro sobre javascript assertivo da alurabooks"></div>
+                <div class="swiper-slide"><img src="img/Guia Front-end.png" alt="Livro Guia front end"></div>
+                <div class="swiper-slide"><img src="img/Portugol.png" alt="Livro sobre portugol"></div>
+                <div class="swiper-slide"><img src="img/Liderança.png" alt="livro sobre acessibilidade"></div>
+            </div>
+
+            <!-- If we need navigation buttons -->
+            <div class="swiper-button-prev"></div>
+            <div class="swiper-button-next"></div>
+        </div>
+
+</section>
+
+<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
+    <script>
+        const swiper = new Swiper('.swiper', {
+            spaceBetween: 10,
+            slidesPerView: 3,
+            pagination: {
+                el: '.swiper-pagination',
+                type: 'bullets',
+            },
+        });
+    </script>
+
+
+
+</body>
+</html>
diff --git a/analyemariabooks/reset.css b/analyemariabooks/reset.css
@@ -0,0 +1,48 @@
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
diff --git a/analyemariabooks/style/banner.css b/analyemariabooks/style/banner.css
@@ -0,0 +1,63 @@
+.banner {
+    background: var(--azul-degrade);
+    color: var(--branco);
+    text-align: center;
+    padding: 2.5em 2em;
+}
+
+.banner__titulo {
+    font-size: 18px;
+    font-weight: 700;
+}
+
+.banner__texto {
+    font-weight: 500;
+    margin: 1em 0;
+}
+
+.banner__pesquisa {
+    background-color: transparent;
+    border: 1px solid var(--branco);
+    color: var(--branco);
+    border-radius: 24px;
+    padding: 1em;
+    width: 100%;
+}
+
+.banner__pesquisa::placeholder {
+    font-family: var(--fonte-principal);
+    font-size: 14px;
+    font-weight: 400;
+    text-align: center;
+    color: var(--branco);
+    background: url("../img/Lupa.svg") no-repeat;
+    background-position: 1em;
+}
+
+@media screen and (min-width: 1024px) {
+    .banner__titulo {
+        font-size: 36px;
+    }
+
+    .banner__pesquisa {
+        width: 50%;
+    }
+
+    .banner__pesquisa::placeholder {
+        background-position: 7em;
+    }
+}
+
+@media screen and (min-width: 1728px) {
+    .banner__pesquisa {
+        width: 35%;
+    }
+
+    .banner__pesquisa::placeholder {
+        background-position: 12em;
+    }
+
+    .banner {
+        padding: 6em 0;
+    }
+}