Projeto desenvolvido no curso Fullstack do B7Web

1. Separando as fontes do projeto: Calistoga e Inter

   @import url('<https://fonts.googleapis.com/css2?family=Calistoga&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap>');
   

2. Estilização global: definindo configurações globais, do body e container (larguras e alturas)

   @import url('<https://fonts.googleapis.com/css2?family=Calistoga&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap>');
   
   * {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
       font-family: Arial, Helvetica, sans-serif;
       list-style: none;
       text-decoration: none;
   }
   
   body {
       font-family: 'Inter';
       font-size: 18px;
       background-color: #141414;
       color: #fff;
   }
   
   .container {
       width: 100%;
       margin: auto;
       max-width: 1200px;
       padding: 0 20px;
   }
   

3. Criando a logo no HTML e no CSS

<header>
      <div class="container">
           <div class="logo">
             <a href="#">B7 <span> &#8226;</span> Burguer </a>
          </div>
      </div>
 </header>

.logo a {
    font-family: 'Calistoga';
    font-size: 36px;
    color: #fff;
    text-decoration: none;
}
.logo span {
    color: #fe6a0f;
}

1. Criando o header (Cabeçalho)

   ...
    <nav>
        <ul class="leftside">
            <li><a href="#">Início</a></li>
            <li><a href="#">Burgers</a></li>
            <li><a href="#">Contato</a></li>
         </ul>
             <div class="rightside">
                <a href="#">Fazer pedido</a>
              </div>
       </nav>
   

2. Criando a estilização do menu (Início, Burgers, Contato)

   /* HEADER */
   header .container {
       display: flex;
       align-items: center;
       /* respiro de página*/
   	  padding-top: 45px;
       padding-bottom: 45px;
       gap: 50px;
   }
   
   header nav {
       flex: 1;
       display: flex;
       align-items: center;
   }
   
   header nav .leftside {
       display: flex;
       flex: 1;
   }
   

3. Aplicando espaçamentos entre os menus

   /* Espaçamento entre os menus */
   header nav li {
       margin: 0 30px;
   }
   

4. Aplicando cores aos menus

   /* Cores do menu */
   header nav li a {
       color: #fff;
   }
   header nav li a:hover {
       color: #999;
   }
   

5. Aplicando estilo ao link com class button “Fazer pedido”

   /* Estilo do botão fazer pedido */
   header nav .button {
       display: block;
       border: 1px solid #fff;
       padding: 15px 30px;
       border-radius: 5px;
       color: #fff;
   }
   
   header nav .button:hover {
       color: #fe6a0f;
       border-color: #fe6a0f;
   }
   

6. Aplicando responsividade no header

   /* Iniciando a responsividade no header */
   header .menu {
       display: none;
       flex: 1;
       justify-content: end;
   }
   /* Menu hamburguer para responsividade */
   header .menu-icon {
       width: 32px;
       height: 32px;
       display: flex;
       flex-direction: column;
       justify-content: space-between;
       cursor: pointer;
   }
   /* menu hamburguer listas (divs) */
   header .menu-icon div {
       height: 6px;
       background-color: #fff;
   }
   /* aplicando adaptação mobile no header */
   @media (max-width: 820px){
       header nav {
           display: none;
       }
       header .menu{
           display: flex;
       }
   }
   

7. Hero Area

     <!-- Hero Área -->
       <section class="hero">
           <div class="container">
               <div class="left-side">
                   <h1>O hamburguer mais delicioso.😋</h1>
                   <p>A primeira hamburgueria virtual que você faz o pedido online e come o burger através do computador.</p>
                   <a href="#" class="button">Fazer pedido</a>
               </div>
               <div class="right-side">
                   <img src="./assets/heroBurger.png" alt="Hamburguer">
               </div>
           </div>
       </section>
   

   Estilização da hero área

   /* Hero área - foto do hamburguer */
   .hero .container {
       display: flex;
   }
   .hero .leftside,
   .hero .rightside {
       flex: 1;
   }
   .hero .leftside {
       padding-bottom: 150px;
   }
   .hero .rightside{
       text-align: center;
   }
   .hero .rightside img {
       width: auto;
       height: 600px;
   }
   .hero h1 {
       font-family: "Calistoga";
       font-size: 72px;
       line-height: 74px;
       margin-top: 50px;
   }
   .hero p {
       font-family: 'Inter';
       font-size: 20px;
       line-height: 26px;
       margin: 40px 0;
   
   }
   .hero .button {
       display: inline-block;
       background-color: #fe6a0f;
       font-family: 'Inter';
       font-weight: 500;
       color: #fff;
       padding: 15px 65px;
       border-radius: 5px;
       cursor: pointer;
   }
   .hero .button:hover {
       opacity: 0.8;
   }
   

   Responsividade do hero área

   /* aplicando adaptação mobile no header */
   @media (max-width: 820px){
       header nav {
           display: none;
       }
       header .menu{
           display: flex;
       }
       .hero .container {
           flex-direction: column;
       }
       .hero .leftside {
           text-align: center;
           padding-bottom: 30px;
       }
       .hero .rightside {
           padding-bottom: 30px;
       }
       .hero .rightside img {
           height: 300px;
       }
       .hero h1 {
           font-size: 44px;
           line-height: 50px;
       }
   }
   

8. Seção de pedidos

       <!-- Seção de pedidos-->
       <section class="search">
           <div class="container">
               <div class="search-title">
                   Pesquise o seu <br/>
                   hamburger favorito
               </div>
               <div class="search-sides">
                   <div class="leftside">
                       <input type="search" placeholder="Digite o nome do burger">
                       
                   </div>
                   <div class="rightside">
                       <select>
                           <option value="burgers">Selecionar categoria</option>
                           <option value="burgers">Burgers</option>
                           <option value="pizza">Pizza</option>
                           <option value="vagetariano">Vegetariano</option>
                           <option value="kids">Kids</option>
                       </select>
                   </div>
               </div>
           </div>
       </section>
   

   Estilização do search

   /* Seção de pedidos */
   .search {
       background-color: #1f1f1f;
       padding: 80px 0;
       margin-top: -100px;
   }
   .search .title {
       font-size: 32px;
       font-family: 'Inter';
       font-weight: 500;
   }
   .search .sides {
       display: flex;
       margin-top: 30px;
       gap: 100px;
   }
   .seach .leftside, 
   .seach .rightside {
       flex: 1;
   }
   .search input,
   .search select {
       width: 100%;
       background-color: #2b2b2b;
       color: #fff;
       font-size: 24px;
       padding: 20px 80px;
       border: 0;
       border-radius: 5px;
   }
   .search input {
       background-image: url(./assets/searchIcon.png);
       background-repeat: no-repeat;    
       background-position: 20px center;
       padding-left: 60px;
   }
   
   .search select {
       border-right: 20px solid transparent;
   
   }
   

9. Seção de Produtos

    <!--Seção de Produtos-->
       <main>
           <div class="container">
               <div class="products-grid">
                   <a href="#" class="product-item">
                       <div class="warning">Promoção</div>
                       <div class="photo">
                           <img src="./assets/burger1.png" alt="Burger">
                       </div>
                       <div class="info">
                           <div class="product-category">Tradicional</div>
                           <div class="product-name">Texas Burger</div>
                           <div class="product-price">R$ 25,50</div>
                       </div>
                   </a>
                   <a href="#" class="product-item">
                       <div class="photo">
                           <img src="./assets/burger1.png" alt="Burger">
                       </div>
                       <div class="info">
                           <div class="product-category">Tradicional</div>
                           <div class="product-name">Texas Burger</div>
                           <div class="product-price">R$ 25,50</div>
                       </div>
                   </a>
                   <a href="#" class="product-item">
                       <div class="photo">
                           <img src="./assets/burger2.png" alt="Burger">
                       </div>
                       <div class="info">
                           <div class="product-category">Tradicional</div>
                           <div class="product-name">Texas Burger</div>
                           <div class="product-price">R$ 25,50</div>
                       </div>
                   </a>
                   <a href="#" class="product-item">
                       <div class="photo">
                           <img src="./assets/burger3.png" alt="Burger">
                       </div>
                       <div class="info">
                           <div class="product-category">Tradicional</div>
                           <div class="product-name">Texas Burger</div>
                           <div class="product-price">R$ 25,50</div>
                       </div>
                   </a>
                   <a href="#" class="product-item">  
                       <div class="photo">
                           <img src="./assets/burger4.png" alt="Burger">
                       </div>
                       <div class="info">
                           <div class="product-category">Tradicional</div>
                           <div class="product-name">Texas Burger</div>
                           <div class="product-price">R$ 25,50</div>
                       </div>
                   </a>
                   <a href="#" class="product-item">
                       <div class="photo">
                           <img src="./assets/burger1.png" alt="Burger">
                       </div>
                       <div class="info">
                           <div class="product-category">Tradicional</div>
                           <div class="product-name">Texas Burger</div>
                           <div class="product-price">R$ 25,50</div>
                       </div>
                   </a>
               </div>
           </div>
       </main>
   

   Estilização

   /* Seção de produtos */
   main .products-grid {
       display: grid;
       grid-template-columns: 1fr 1fr 1fr;
       gap: 20px;
       margin: 40px 0;
   }
   .product-item {
       display: block;
       border-radius: 8px;
       overflow: hidden;
       position: relative;
   }
   .product-item:hover {
       opacity: 0.8;
   }
   .product-item .warning {
       position: absolute;
       top: 30px;
       left: 30px;
       background-color: #fe6a0f;
       font-size: 16px;
       font-weight: 500;
       color: #fff;
       padding: 10px 20px;
       border-radius: 4px;
   }
   .product-item .photo {
       text-align: center;
       background-color: #2b2b2b;
       padding-top: 30px;
   }
   .product-item .photo img {
       max-width: 100%;
   }
   .product-item .info {
       background-color: #1f1f1f;
       padding: 60px 30px;
       margin-top: -50px;
   }
   .product-item .product-category {
       color: #fff;
       font-family: 'Inter';
       font-size: 18px;
       font-weight: 500;
   }
   .product-item .product-name {
       font-family: 'Calistoga';
       font-size: 32px;
       font-weight: 500;
       margin: 10px 0;
       color: #fff;
   }
   .product-item .product-price {
       font-size: 32px;
       font-weight: bold;
       color: #fe6a0f;
   }
   

10. Área do Rodapé

 <!-- Area/Rodapé -->
        <footer>
            <div class="container">

                <div class="logo">
                    <a href="">B7 <span>•</span> Burger</a>
                </div>

               <div class="copyrights">criado pela <a href="">B7Web</a>.</div>
            </div>
        </footer>

    <!-- Fim -->

estilização

/*FOOTER */
footer {
   background-color: #1f1f1f;
}

footer .container {
    display: flex;
    justify-content: space-between;
    padding-top: 80px;
    padding-bottom: 80px;
    align-items: center;

}
footer .copyrights {
    font-size: 24px;
    color: #5f5f5f;
}

footer .copyrights a {
    color: #5f5f5f;
    text-decoration: none;
}

footer .copyrights a:hover {
    text-decoration: underline;
}

1. Código do HTML

   <!DOCTYPE html>
   <html lang="pt-br">
   <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <link rel="preconnect" href="<https://fonts.googleapis.com>">
       <link rel="preconnect" href="<https://fonts.gstatic.com>" crossorigin>
       <link rel="stylesheet" href="css/styles.css">
       <title>B7Burguer</title>
   </head>
   <body>
       <!--2. criando a logo no HTML e os estilos -->
       <header>
           <div class="container">
               <div class="logo">
                   <!--1. Criando a logo -->
                   <a href="#">B7 <span> &#8226;</span> Burger </a>
               </div>
       <!--3. Criando o header -->
               <nav>
               <!-- Menu um ao lado do outro (header nav)-->
                   <ul class="leftside">
                       <li><a href="#">Início</a></li>
                       <li><a href="#">Burgers</a></li>
                       <li><a href="#">Contato</a></li>
                   </ul>
                   <div class="rightside">
                       <a href="#" class="button">Fazer pedido</a>
                   </div>
               </nav>
               <!-- Menu hamburguer para responsividade -->
               <div class="menu">
                   <div class="menu-icon">
                       <div></div>
                       <div></div>
                       <div></div>
                   </div>
               </div>
           </div>
       </header>
       <!-- Hero Área -->
       <section class="hero">
           <div class="container">
               <div class="leftside">
                   <h1>O hamburguer mais delicioso.😋</h1>
                   <p>A primeira hamburgueria virtual que você faz o pedido online e come o burger através do computador.</p>
                   <a href="#" class="button">Fazer pedido</a>
               </div>
               <div class="rightside">
                   <img src="./assets/heroBurger.png" alt="Hamburguer">
               </div>
           </div>
       </section>
       <!-- Seção de pedidos-->
       <section class="search">
           <div class="container">
               <div class="title">Pesquise o seu <br/>hamburger favorito</div>
               <div class="sides">
                   <div class="leftside">
                       <input type="search" placeholder="Digite o nome do burger">
                   </div>
                   <div class="rightside">
                       <select>
                           <option value="burgers">Selecionar categoria</option>
                           <option value="burgers">Burgers</option>
                           <option value="pizza">Pizza</option>
                           <option value="vagetariano">Vegetariano</option>
                           <option value="kids">Kids</option>
                       </select>
                   </div>
               </div>
           </div>
       </section>
       <!--Seção de Produtos-->
           <main>
               <div class="container">
   
                   <div class="products-grid">
                       <a href="#" class="product-item">
                           <div class="warning">Promocao</div>
   
                           <div class="photo">
                               <img src="assets/burger1.png" alt=""/>
                           </div>
   
                           <div class="info">
                               <div class="product-category">Tradicional</div>
                               <div class="product-name">Texas Burger</div>
                               <div class="product-price">R$ 25,50</div>
                           </div>
                       </a>
   
                       <a href="#" class="product-item">
                          
                           <div class="photo">
                               <img src="assets/burger2.png" alt=""/>
                           </div>
   
                           <div class="info">
                               <div class="product-category">Tradicional</div>
                               <div class="product-name">Texas Burger</div>
                               <div class="product-price">R$ 25,50</div>
                           </div>
                       </a>
   
                       <a href="#" class="product-item">
                           <div class="photo">
                               <img src="assets/burger3.png" alt=""/>
                           </div>
   
                           <div class="info">
                               <div class="product-category">Tradicional</div>
                               <div class="product-name">Texas Burger</div>
                               <div class="product-price">R$ 25,50</div>
                           </div>
                       </a>
   
                       <a href="#" class="product-item">
                           <div class="photo">
                               <img src="assets/burger3.png" alt=""/>
                           </div>
   
                           <div class="info">
                               <div class="product-category">Tradicional</div>
                               <div class="product-name">Texas Burger</div>
                               <div class="product-price">R$ 25,50</div>
                           </div>
                       </a>
   
                       <a href="#" class="product-item">                  
                           <div class="photo">
                               <img src="assets/burger4.png" alt=""/>
                           </div>
   
                           <div class="info">
                               <div class="product-category">Tradicional</div>
                               <div class="product-name">Texas Burger</div>
                               <div class="product-price">R$ 25,50</div>
                           </div>
                       </a>
   
                       <a href="#" class="product-item">
                           <div class="photo">
                               <img src="assets/burger2.png" alt=""/>
                           </div>
   
                           <div class="info">
                               <div class="product-category">Tradicional</div>
                               <div class="product-name">Texas Burger</div>
                               <div class="product-price">R$ 25,50</div>
                           </div>
                       </a>
   
                   </div>
               </div>
           </main>
            <!-- Area/Rodapé -->
           <footer>
               <div class="container">
   
                   <div class="logo">
                       <a href="">B7 <span>•</span> Burger</a>
                   </div>
   
                  <div class="copyrights">Desenvolvido por <a href="">Viviane Silva</a>.</div>
               </div>
           </footer>
       <!-- Fim -->
   
   </body>
   </html>
   

2. Código completo no CSS

   @import url('<https://fonts.googleapis.com/css2?family=Calistoga&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap>');
   /* AQUI É O ESTILO GOLBAL */
   * {
       margin: 0;
       padding: 0;
       list-style: none;
       box-sizing: border-box;
       font-family: Arial, Helvetica, sans-serif;
   }
   
   body {
       font-family: 'inter';
       font-size: 18px;
       background-color: #141414;
       color: #fff;
   }
   
   .container {
       width: 100%;
       margin: auto;
       max-width: 1200px;
       padding:0px 20px;
      
   }
   
   .logo a {
       font-family: 'calistoga';
       font-size: 36px;
       color: #fff;
       text-decoration: none;
   }
   
   .logo a span {
       color: #fe6a0f;
   }
   
   /* HEADER */
   header .container {
       display: flex;
       align-items: center;
       padding-top: 45px;
       padding-bottom: 45px;
       gap: 50px;
   }
   
   header nav {
       flex: 1;
       display: flex;
       align-items: center;
      
   }
   
   header nav .leftside {
       display: flex;
       flex: 1;
   }
   
   header nav li {
       margin: 0 30px;
   }
   
   header nav li a {
       color: #fff;
       text-decoration: none;
   }
   
   header nav li a:hover {
       color: #999;
   }
   
   header nav .button {
       display: block;
       border: 1px solid #fff;
       text-decoration: none;
       padding: 15px 30px;
       border-radius: 5px;
       color: #fff;
   }
   
   header nav .button:hover {
       color: #999;
       border-color: #999;
   }
   
   header .menu{
       display: none;
       flex-direction: column;
       justify-content: space-between;
       width: 32px;
       height: 32px;
       cursor: pointer;
       }
   
   header .menu .menu-inline {
       height: 6px;
       background-color: #fff;
   }
   
   /* HERO */
   .hero .container {
       display: flex;
   }
   
   .hero .leftside,
   .hero .rightside {
       flex: 1;
   }
   
   .hero .leftside {
       padding-bottom:150px ;
   }
   
   .hero .rightside {
       text-align: center;
      
   }
   
   .hero .rightside img {
       width:auto ;
       height: 600px;
   
   }
   .hero h1 {
       font-family: 'calistoga';
       font-size: 72px;
       line-height: 74px;
       margin-top: 50px;
   
   }
   .hero p {
       font-family: 'Inter',Arial;
       font-size: 20px;
       line-height: 26px;
       margin: 40px 0;
   }
   
   .hero .button {
       display: inline-block;
       background-color: #fe6a0f;
       font-weight: 500;
       color: #fff;
       padding: 15px 80px;
       border-radius: 5px;
       text-decoration: none;
   }
   
   .hero .button:hover {
       opacity: 0.8;
   }
   
   /* Search */
   .search {
       background-color:#1f1f1f ;
       padding: 80px 0;
       margin-top: -100px;
   }
   
   .search .title {
       font-size: 32px;
       font-weight:500;
   }
   
   .search .sides {
       display: flex;
       margin-top: 30px;
       gap: 100px;
   
   }
   .search .left-side,
   .search .right-side {
       flex: 1;
   }
   
   .search input,
   .search select {
       width: 100%;
       background-color: #2b2b2b;
       color:#fff;
       font-size: 24px;
       outline: none;
       padding: 20px;
       border: 0;
       border-radius:5px ;
   }
   
   .search input {
       background-image: url(../assents/searchIcon.png);
       background-repeat: no-repeat;
       background-position: 20px center;
       padding-left: 60px;
    
   }
   
   .search select {
       border-right: 20px solid transparent;
   }
   
   /*PRODUCTS*/
   .products-grid {
       display: grid;
       grid-template-columns: repeat(3,1fr);
       gap: 20px;
       margin: 40px 0;
   }
   
   .product-item {
       display: block;
       border-radius: 8px;
       overflow: hidden;
       text-decoration: none;
       position: relative;
       background-color: red;
   }
   
   .product-item:hover {
       opacity: 0.8;
   }
   
   .product-item .warning {
       position: absolute;
       top:30px;
       left:30px;
       background-color: #fe6a0f;
       font-size: 16px;
       font-weight: 500;
       color: #fff;
       padding: 10px 15px;
       border-radius: 4px;
   }
   
   .product-item .photo {
       text-align: center;
       background-color: #2b2b2b;
       padding-top: 30px;
   }
   
   .product-item .photo img {
       max-width: 100%;
   }
   
   .product-item .info {
       background-color: #1f1f1f;
       padding: 60px 30px 30px 30px;
       margin-top: -50px;
   }
   
   .product-item .product-category {
       color: #fff;
       font-weight: 500;
       font-size: 18px;
   }
   
   .product-item .product-name {
       font-family: 'Calistoga';
       font-size: 32px;
       color:#fff;
       margin:10px 0;
   }
   
   .product-item .product-price {
       font-size: 33px;
       font-weight: bold;
       color: #fe6a0f;
   }
   
   /*FOOTER */
   footer {
      background-color: #1f1f1f;
   }
   
   footer .container {
       display: flex;
       justify-content: space-between;
       padding-top: 80px;
       padding-bottom: 80px;
       align-items: center;
   
   }
   footer .copyrights {
       font-size: 24px;
       color: #5f5f5f;
   }
   
   footer .copyrights a {
       color: #5f5f5f;
       text-decoration: none;
   }
   
   footer .copyrights a:hover {
       text-decoration: underline;
   }
   
   @media (max-width:820px) {
       header nav {
           display: none;
       }
   
       header .container {
           padding:45px 20px ;
           justify-content: space-between;
       }
   
       header .menu {
           display: flex;
       }
   
       .hero .container {
           flex-direction: column;
       }
   
       .hero .leftside {
           text-align: center;
           padding-bottom: 40px;
       }
   
       .hero .rightside {
           padding-bottom: 30px;
       }
   
       .hero .rightside img {
           height: 300px;
       }
      
       .hero h1 {
           font-size: 44px;
           line-height: 50px;
       }
   
       .search {
           padding-bottom: 30px;
       }
   
       .search .title {
           text-align: center;
       }
   
       .search .sides {
           flex-direction: column;
           gap: 30px;
       }
   
       .products-grid {
           grid-template-columns: repeat(2,1fr);
       }
   
       footer .container {
           flex-direction: column;
           gap: 20px;
       }
   }
   
   @media(max-width:500px) {
       .products-grid {
           grid-template-columns: 1fr;
       }
   }