-m BEM commit

63b729c9 · Luis Ribeiro · ce492944 · 63b729c9 · 63b729c9
Commit 63b729c9 authored Mar 16, 2023 by Luis Ribeiro
Show whitespace changes
Inline Side-by-side

Showing with 91 additions and 90 deletions

index.html
+40 -40

styles.css
+51 -50

No files found.
--- a/index.html
+++ b/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">
+    <nav class="header__nav">
-      <h2 class="logo">LOGO</h2>
+      <h2 class="header__logo">LOGO</h2>
-      <ul class="ul_direita">
+      <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">
+  <main class="main__container">
-    <section id="home" class="first_section"> 
+    <section id="home" class="section__intro"> 
-      <div class="first_section-texto">
+      <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"> 
+    <section class="section__follow section__follow--background"> 
-      <img class="section_img" src="images/open-doodles-coffee.svg" alt="coffee-art"> 
+      <img class="section__img" src="images/open-doodles-coffee.svg" alt="man hugging a coffee mug art"> 
-      <div class="second_section-texto">
+      <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>
+    <h2 id="menu" class="section__title">Mais Vendidos</h2>
-    <section class="third_section"> 
+    <section class="section__menu"> 
-      <a href="#"><img class="third_section-img" src="images/clarissa-carbungco-uy9DJw9e_vs-unsplash.jpg" alt=""></a>
+      <a href="#"><img src="images/clarissa-carbungco-uy9DJw9e_vs-unsplash.jpg" alt="frape"></a>
-      <a href="#"><img class="third_section-img"  src="images/siddharth-salve-8wESIey6sYQ-unsplash.jpg" alt=""></a>
+      <a href="#"><img src="images/siddharth-salve-8wESIey6sYQ-unsplash.jpg" alt="coffee drink"></a>
-      <a href="#"><img class="third_section-img"  src="images/tabitha-turner-3n3mPoGko8g-unsplash.jpg" alt=""></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-->
+    <h2 id="sobre" class="section__title">Nossos Valores</h2> <!-- Talvez seja melhor usar Grid invés de Flex-->
-    <section class="fourth_section"> 
+    <section class="section__valores"> 
-      <figure class="valores_figuras">
+      <figure class="figures">
-        <img class="valores_img" src="images/Boba.svg" alt="">
+        <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">
+      <figure class="figures">
-        <img class="valores_img"  src="images/Save Earth.svg" alt="">
+        <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">
+      <figure class="figures">
-        <img class="valores_img" src="images/Hockey stick growth.svg" alt="">
+        <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">
+    <section id="contato" class="contact">
-      <img class="fifth_section-img" src="images/nafinia-putra-Kwdp-0pok-I-unsplash.jpg" alt="coffee shop photo">
+      <img class="contact__background" 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>
+      <p class="contact__text">Venha bater um papo com a gente!</p>
-      <button class="fifth_section-button"><a href="#">Entre em Contato...</a></button>
+      <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 -->
+  <footer>
-    <div class="footer_coluna">
+    <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><a href="#"><img class="footer__svg" src="images/icons8-facebook.svg" alt="facebook icon"></a></li>
-        <li><img class="svg_icons" src="images/icons8-instagram.svg" alt=""></li>
+        <li><a href="#"><img class="footer__svg" src="images/icons8-instagram.svg" alt="instagram icon"></a></li>
-        <li><img class="svg_icons" src="images/icons8-whatsapp.svg" alt=""></li>
+        <li><a href="#"><img class="footer__svg" src="images/icons8-whatsapp.svg" alt="whatsapp icon"></a></li>
      </ul>
    </div>
  </footer>

--- a/styles.css
+++ b/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