Page de destination

Ouvrir dans l'éditeur Publiez votre code

Recommandé

31 July 2025

Générateur de mots de passe par SENAPI

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

Page de destination

Recommandé

Le chuchoteur de codes

Effet de survol GSAP

Générateur de mots de passe par SENAPI

HTML

CSS

JS

Recommandé

Le chuchoteur de codes

Effet de survol GSAP

Générateur de mots de passe par SENAPI

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS