Webleb - Snippets de Código -

1972 asimabbasi

Abrir no Editor Publique Seu Código

Recomendado

16 December 2024

Uma página inicial com a cor Leon

13 October 2024

forma por

21 January 2025

Página de destino da agência imobiliária

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

<p>
              The smart 365-days-per-year food subscription that will make yoi
              eat healthy again. Tailored to your personal tastes and
              nutritional needs
            </p>

<a href="#" class="btn">Start eating well</a>
          </div>
        </div>
      </div>
    </header>

<section>
      <div class="container">
        <h2>Some random heading</h2>

<p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi itaque
          quisquam excepturi minima nulla eligendi non ea porro magni temporibus
          culpa fugiat laudantium, dolorem, accusantium odit doloremque expedita
          officia deserunt. Nisi iusto blanditiis cupiditate vitae nesciunt
          ratione quaerat labore porro. Ea eos nulla amet, nostrum veritatis
          dignissimos iste ex non pariatur enim accusamus eius perferendis natus
          illo ipsum quasi omnis!
        </p>
      </div>
    </section>
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
      crossorigin="anonymous"
    ></script>
  </body>
</html>

CSS

/* Replace with your CSS Code 
(Leave empty if not needed) */                                           
/*
SPACING SYSTEM (px)
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128

FONT SIZE SYSTEM (px)
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98
*/

/* 
MAIN COLOR:#e67e22;
GREY COLOR:#444;
}
*/

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  font-family: Rubik;
  color: #444;
}
.container{
  margin: 0 auto;
  width: 1200px;
  
}
header {
  
  height: 100vh;
  position: relative;
  background-image:linear-gradient(
    rgba(0, 0, 0, 0.548)
    ,rgba(0, 0, 0, 0.541)
    ) ,url(hero.jpg);
   background-size: cover;
   color: #FFF;
}

.header-container {
  width: 1200px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}

#container {
  width: 50%;
}
nav {
  font-size: 20px;
  font-weight: 700;
  display: flex;
  justify-content: space-between;
   padding-top: 32px;
}
h1 {
  font-size: 52px;
  margin-bottom: 32px;
  line-height: 1.05;
}

p{
  font-size: 20px;
  line-height: 1.6;
  margin-bottom: 48px;
}

.btn:link,
.btn:visited{
  font-size: 20px;
  font-weight: 600;
  background-color: #e67e22;
  color: #FFF;
  text-decoration: none;
  display: inline-block;
  padding: 16px 32px;
  border-radius: 9px;
  transition: all 0.8s;
}

.btn:hover,
.btn:active{
  font-size: 20px;
  font-weight: 600;
  background-color:#c86d1c;
  text-decoration: none;
  display: inline-block;
  padding: 16px 32px;
  border-radius: 20px;
  margin: 0 100px;
}

h2{
  font-size: 42px;
  margin-bottom: 48px;
 }

section{
  padding: 96px 0;
  background-color: rgba(250, 229, 250, 0.467);
  /* height: 100vh; *
}

Recomendado

Uma página inicial com a cor Leon

forma por

Página de destino da agência imobiliária

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS