Skip to content

Luís Felipe Campos / Teste00-CoffeeShop

Go to a project
Commit 63b729c9 by Luis Ribeiro
Options

-m BEM commit

parent ce492944
Showing with 91 additions and 90 deletions
index.html
......@@ -6,13 +6,13 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,500;0,600;0,700;0,800;1,100;1,200;1,500;1,600;1,700;1,800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css" />
<title>Teste00</title>
<title>Teste00--Coffee Shop</title>
</head>
<body>
<header id="home">
<nav class="nav_header">
<h2 class="logo">LOGO</h2>
<ul class="ul_direita">
<nav class="header__nav">
<h2 class="header__logo">LOGO</h2>
<ul class="header__ul">
<li><a href="#">Home</a></li>
<li><a href="#menu">Menu</a></li>
<li><a href="#sobre">Sobre</a></li>
......@@ -21,69 +21,69 @@
</nav>
</header>
<main class="main_container">
<section id="home" class="first_section">
<div class="first_section-texto">
<main class="main__container">
<section id="home" class="section__intro">
<div class="section__text">
<h1>O café que você merece.</h1>
<p>Experimente nossos melhores sabores, feitos com todo carinho do mundo.</p>
<button class="SB_button"><a href="#menu">Saiba Mais...</a></button>
<button class="button"><a href="#menu">Confira</a></button>
</div>
<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 class="second_section second-background">
<img class="section_img" src="images/open-doodles-coffee.svg" alt="coffee-art">
<div class="second_section-texto">
<section class="section__follow section__follow--background">
<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>
<p>Conheça um pouco sobre nossos princípios, no que acreditamos e no porque fazemos o que fazemos.</p>
<button class="SB_button-alt"><a href="#sobre">Saiba mais...</a></button>
<button class="button--alt"><a href="#sobre">Saiba mais...</a></button>
</div>
</section>
<h2 id="menu" class="titulo_section">Mais Vendidos</h2>
<section class="third_section">
<a href="#"><img class="third_section-img" src="images/clarissa-carbungco-uy9DJw9e_vs-unsplash.jpg" alt=""></a>
<a href="#"><img class="third_section-img" src="images/siddharth-salve-8wESIey6sYQ-unsplash.jpg" alt=""></a>
<a href="#"><img class="third_section-img" src="images/tabitha-turner-3n3mPoGko8g-unsplash.jpg" alt=""></a>
<h2 id="menu" class="section__title">Mais Vendidos</h2>
<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="titulo_section">Nossos Valores</h2> <!-- Talvez seja melhor usar Grid invés de Flex-->
<section class="fourth_section">
<figure class="valores_figuras">
<img class="valores_img" src="images/Boba.svg" alt="">
<h2 id="sobre" class="section__title">Nossos Valores</h2> <!-- 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">
<figcaption>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis impedit qui, modi a aspernatur assumenda placeat odit nostrum! Incidunt beatae in voluptatum tenetur a ex neque aliquid sequi possimus odit.
</figcaption>
</figure>
<figure class="valores_figuras">
<img class="valores_img" src="images/Save Earth.svg" alt="">
<figure class="figures">
<img class="figures__img" src="images/Save Earth.svg" alt="hands holding the planet svg">
<figcaption>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta aliquam quis non suscipit! Eos eius, mollitia, deserunt doloremque cupiditate facere perferendis eaque veniam reprehenderit sint officiis, veritatis dolor cumque molestias.
</figcaption>
</figure>
<figure class="valores_figuras">
<img class="valores_img" src="images/Hockey stick growth.svg" alt="">
<figure class="figures">
<img class="figures__img" src="images/Hockey stick growth.svg" alt="growing chart svg">
<figcaption>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic tempora est repudiandae quod, cumque quam saepe placeat deserunt minima aliquid assumenda molestiae natus numquam quis, sint illum delectus modi id.
</figcaption>
</figure>
</section>
<section id="contato" class="fifth_section">
<img class="fifth_section-img" src="images/nafinia-putra-Kwdp-0pok-I-unsplash.jpg" alt="coffee shop photo">
<p class="fifth_section-texto">Venha bater um papo com a gente!</p>
<button class="fifth_section-button"><a href="#">Entre em Contato...</a></button>
<section id="contato" class="contact">
<img class="contact__background" src="images/nafinia-putra-Kwdp-0pok-I-unsplash.jpg" alt="coffee shop photo">
<p class="contact__text">Venha bater um papo com a gente!</p>
<button class="contact__button"><a href="#">Entre em Contato...</a></button>
</section>
</main>
<section class="volta_inicio">
<section class="btt__link">
<h3><a href="#home">Voltar ao início</a></h3>
</section>
<footer> <!-- Footer em colunas -->
<div class="footer_coluna">
<footer>
<div class="footer__col">
<h3>Pagamento</h3>
<ul>
<li>Meios de Pagamento</li>
......@@ -92,7 +92,7 @@
</ul>
</div>
<div class="footer_coluna">
<div class="footer__col">
<h3>Conheça-nos</h3>
<ul>
<li>Informações</li>
......@@ -103,7 +103,7 @@
</ul>
</div>
<div class="footer_coluna">
<div class="footer__col">
<h3>Ajuda</h3>
<ul>
<li>Parceiros</li>
......@@ -114,7 +114,7 @@
</ul>
</div>
<div class="footer_coluna">
<div class="footer__col">
<h3>Endereço</h3>
<ul>
<li>Rua tchurusbango</li>
......@@ -122,11 +122,11 @@
</ul>
</div>
<div class="footer_linha">
<div class="footer__row">
<ul>
<li><img class="svg_icons" src="images/icons8-facebook.svg" alt=""></li>
<li><img class="svg_icons" src="images/icons8-instagram.svg" alt=""></li>
<li><img class="svg_icons" src="images/icons8-whatsapp.svg" alt=""></li>
<li><a href="#"><img class="footer__svg" src="images/icons8-facebook.svg" alt="facebook icon"></a></li>
<li><a href="#"><img class="footer__svg" src="images/icons8-instagram.svg" alt="instagram icon"></a></li>
<li><a href="#"><img class="footer__svg" src="images/icons8-whatsapp.svg" alt="whatsapp icon"></a></li>
</ul>
</div>
</footer>
......
styles.css
......@@ -24,57 +24,57 @@ header {
padding: 10px 170px;
}
.logo {
.header__logo {
float: left;
font-weight: 600;
font-size: 1.4em;
}
.logo:hover {
.header__logo:hover {
cursor: default;
}
.nav_header {
.header__nav {
width: 100%;
display: inline-block;
}
.ul_direita {
.header__ul {
float: right;
}
.ul_direita a{
.header__ul a{
color: var(--corPrimeira);
text-decoration: none;
transition: 0.4s;
}
.nav_header li {
.header__nav li {
display: inline;
padding: 0px 20px;
font-size: larger;
}
.ul_direita a:hover {
.header__ul a:hover {
transition: 0.4s;
color: var(--corSegunda);
}
.main_container{
.main__container{
color: var(--corSegunda);
margin: 0 auto;
padding: 0;
max-width: 1200px;
}
.first_section {
.section__intro {
display: inline-flex;
width: 100%;
margin-top: 100px;
justify-content: space-evenly;
}
.first_section-texto {
.section__text {
margin-top: 150px;
width: 400px;
}
......@@ -84,7 +84,7 @@ h1 {
font-weight: bold;
}
.titulo_section {
.section__title {
font-size: xx-large;
font-weight: bolder;
text-align: center;
......@@ -93,7 +93,7 @@ h1 {
position: relative;
}
.titulo_section::after {
.section__title::after {
content: '';
background: var(--corSegunda);
width: 120px;
......@@ -105,12 +105,12 @@ h1 {
transform: translateX(-50%);
}
.first_section-texto p {
.section__text p {
font-size: 20px;
padding: 0;
}
.SB_button {
.button {
font-size: 1em;
border: none;
border-radius: 9999px;
......@@ -119,24 +119,24 @@ h1 {
background-color: var(--corTerceira);
}
.SB_button:hover {
.button:hover {
background-color: var(--corPrimeira);
transition: 0.5s;
transform: scale(1.08);
border: 1px solid var(--corSegunda);
}
.SB_button a {
.button a {
color: var(--corPrimeira);
text-decoration: none;
padding: 10px 30px;
}
.SB_button a:hover {
.button a:hover {
color: var(--corSegunda);
}
.SB_button-alt {
.button--alt {
font-size: 1em;
border: 1px solid var(--corPrimeira);
border-radius: 9999px;
......@@ -145,25 +145,25 @@ h1 {
background-color: var(--corSegunda);
}
.SB_button-alt:hover {
.button--alt:hover {
background-color: var(--corPrimeira);
transition: 0.4s;
transform: scale(1.05);
border: 1px solid var(--corSegunda);
}
.SB_button-alt a {
.button--alt a {
color: var(--corPrimeira);
text-decoration: none;
padding: 10px 30px;
}
.SB_button-alt a:hover {
.button--alt a:hover {
color: var(--corSegunda);
}
.second_section {
.section__follow {
margin-top: 130px;
background-color: var(--corTerceira);
width: 100%;
......@@ -172,42 +172,42 @@ h1 {
justify-content: space-evenly;
}
.second-background {
.section__follow--background {
box-shadow: 0 0 0 100vmax var(--corTerceira);
clip-path: inset(0 -100vmax);
}
.second_section-texto {
.section__follow__text {
margin-top: 50px;
width: 400px;
}
.second_section-texto p {
.section__follow__text p {
color: var(--corPrimeira);
font-size: 20px;
padding: 0;
}
.second_section-texto h1 {
.section__follow__text h1 {
color: var(--corPrimeira);
}
.section_img {
.section__img {
width: 520px;
}
.third_section {
.section__menu {
margin-top: 60px;
width: 100%;
display: inline-flex;
justify-content: space-evenly;
}
.third_section a {
.section__menu a {
width: 300px;
}
.third_section img {
.section__menu img {
width: 100%;
height: 100%;
border: none;
......@@ -215,37 +215,37 @@ h1 {
border-radius: 5%;
}
.third_section img:hover {
.section__menu img:hover {
transition: 0.3s;
transform: scale(1.08);
}
.valores_img {
.figures__img {
width: 100px;
margin-bottom: 35px;
}
.fourth_section {
.section__valores {
display: inline-flex;
width: 100%;
margin-top: 60px;
justify-content: space-evenly;
}
.valores_figuras {
.figures {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.fifth_section {
.contact {
margin-top: 150px;
margin-bottom: 100px;
position: relative;
}
.fifth_section-img {
.contact__background {
width: 100%;
filter:brightness(50%);
object-fit: cover;
......@@ -253,7 +253,7 @@ h1 {
border: none;
}
.fifth_section-texto {
.contact__text {
color: var(--corPrimeira);
font-size: 1.4em;
top: 30%;
......@@ -262,7 +262,7 @@ h1 {
position: absolute;
}
.fifth_section-button {
.contact__button {
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
......@@ -275,7 +275,7 @@ h1 {
background-color: var(--corTerceira);
}
.fifth_section-button:hover {
.contact__button:hover {
top: 50%;
left: 50%;
transform: translate(-50%,-50%) scale(1.09);
......@@ -284,24 +284,24 @@ h1 {
border: 1px solid var(--corSegunda);
}
.fifth_section-button a {
.contact__button a {
color: var(--corPrimeira);
text-decoration: none;
padding: 10px 30px;
}
.fifth_section-button a:hover {
.contact__button a:hover {
color: var(--corSegunda);
}
.volta_inicio {
.btt__link {
background-color: var(--corQuarta);
display: flex;
justify-content: center;
text-align: center;
}
.volta_inicio a {
.btt__link a {
text-decoration: none;
font-size: small;
font-weight: normal;
......@@ -309,7 +309,7 @@ h1 {
transition: 0.4s;
}
.volta_inicio a:hover {
.btt__link a:hover {
color: var(--corPrimeira);
transition: 0.4s;
}
......@@ -328,21 +328,21 @@ footer h3 {
font-weight: normal;
}
.footer_coluna {
.footer__col {
flex-direction: column;
display: flex;
align-content: flex-start;
justify-content:flex-start;
}
.footer_coluna ul {
.footer__col ul {
color: var(--corPrimeira);
padding: 0;
margin-top: 0;
list-style-type: none;
}
.footer_linha ul {
.footer__row ul {
display: inline-flex;
margin-top: 80px;
flex-direction: row;
......@@ -350,17 +350,17 @@ footer h3 {
list-style-type: none;
}
.footer_linha li {
.footer__row li {
padding: 0px 12px;
transition: 0.4s;
}
.footer_linha li:hover {
.footer__row li:hover {
transition: 0.4s;
transform: scale(1.08);
}
.svg_icons {
.footer__svg {
filter: invert(84%) sepia(8%) saturate(1561%) hue-rotate(338deg) brightness(112%)
contrast(92%);
}
\ No newline at end of file
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