Página de destino

2,706 asimabbasi

Abrir en el editor Publica tu código

Recomendado

4 August 2025

Digital deja vu

12 July 2025

Contador de clics de la barra espaciadora - JavaScript HTML

13 September 2025

Animación de carga CSS: Ellipse Loader

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