Página de destino

2,594 asimabbasi

Abrir en el editor Publica tu código

Recomendado

25 February 2026

Cargador de juegos en pantalla completa con pantalla de bienvenida y anuncios

2 July 2025

Clínica de Cardiología: Atención cardíaca, servicios y citas

30 March 2025

Un código de ytr3d3

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; *
}