Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <!--header-->
<div class="header" id="header">
  <div class="logo">
    <img src="https://upload.wikimedia.org/wikipedia/commons/7/71/Maple_leaves.jpg" alt="image d'une feuille d'érable" id="header-img"></a>
  </div><!--fin du logo-->

  <div class="navbar">
    <nav id="nav-bar">
      <button><a class="nav-link" href="#home">Accueil</a></button>
      <button><a class="nav-link" href="#feature">Fonctionnalités</a></button>
      <button><a class="nav-link" href="#clientprofile">Nos fans</a></button>
    </nav>
  </div><!--fin du navbar-->
</div> <!--fin du header-->

<!--main-->
<div class="main">
  <h1><a id="home">Nourrissons-nous dans les bois !</a></h1>
  <h3>Apprennez à reconnaitre, récolter et cuisiner les plantes indigènes du Québec</h3>
  <form id="form" action="https://www.freecodecamp.com/email-submit"method="get">
    <label for="email">Inscrivez votre courriel</label>
      <input id="email" type="email" name="email" placeholder="courriel" required>

    <input type="submit" value="Soumettre" id="submit">
  </form>
  <p id="call-to-action">Abonnez-vous à notre infolettre pour recevoir nos nouvelles recettes !</p>
</div><!--fin du main-->

<!--video-->
<div class="video">
  <iframe id="video" width="80%" height="450" src="https://www.youtube.com/embed/zdVGlgn7SGs" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div><!--fin du video-->

<!--box-feature-->
<div class="box-feature">
<h2><a id="feature">Nos fonctionnalités</a></h2>
<div class="features">
  <div class="box">
    <h3>Index des plantes</h3>
    <img class="box-image" src="http://www.quebecuisine.ca/sites/default/files/chou%20gras_07136.jpg" alt="photo d'une poulette grasse">
  </div>
  <div class="box">
    <h3>Recettes boréales</h3>
    <img class="box-image" src="https://res.cloudinary.com/serdy-m-dia-inc/image/upload/f_auto/fl_lossy/q_auto:eco/x_0,y_44,w_849,h_477,c_crop/w_836,h_470,c_scale/v1507085121/foodlavie/prod/recettes/tartare-de-truite-a-la-creme-sure-30172334" alt="tartare de truite">
  </div>
  <div class="box">
    <h3>Vertues médicinales</h3>
    <img class="box-image" src="http://www.terredinfostv.fr/wp-content/uploads/2017/11/framboisier.jpeg" alt ="tisane de framboisier">
    </div>
</div><!--fin du feature-->
</div><!--fin du box-feature-->

<!--client-profile-->
<div class="clientprofile">
  <h2> <a id="clientprofile">Avez-vous le profil pour être un de nos fans ?</a></h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mi ipsum, cursus nec cursus non, ullamcorper quis lacus. Mauris leo augue, vulputate sed finibus sit amet, varius ac ex. Sed rutrum mi in sagittis laoreet. Donec sollicitudin et tellus in blandit. Suspendisse eu lectus mi. Integer tristique dolor nec leo tincidunt volutpat. Nunc volutpat hendrerit augue, ac pretium sem faucibus eu. Ut euismod sodales leo a condimentum. Nulla tempus volutpat fringilla. </p>

<p>Vestibulum hendrerit, ipsum a consectetur posuere, mauris ante maximus nisi, id consequat libero magna id lacus. Maecenas varius augue ut feugiat vulputate. Pellentesque finibus felis id eros varius molestie eu eu elit. Sed in convallis nunc. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus iaculis feugiat aliquet. Suspendisse potenti.</p>
</div><!--fin du clientprofile-->

<!--footer-->
<div class="footer">
  <ul>
    <li><a href="#">Facebook</a></li>
    <li><a href="#">Instagram</a></li>
    <li><a href="#">Twitter</a></li>
  </ul>
  <a id="contact" href ="http://www.marisestpierre.com/" target="_blank"><p>&copy 2018 Marise St-Pierre</p></a>
</div><!--fin du footer-->
              
            
!

CSS

              
                /*CSS variables*/
:root {
  --text-color: #267F26;
}

/*body*/
html, body, .header, .main, .video, .features, .clientprofile, .footer {
  margin: 0;
  padding: 0;
  font-size: 16px;
}

body {
  display: flex;
  flex-direction: column;
  font-family: 'Happy Monkey', cursive; sans-serif
}

/*header*/
.header {
  background: var(--text-color);
  display: flex;
  justify-content: space-between;
  position: fixed;
}

.logo {
  background: var(--text-color);
  flex-basis: 15%;
}

img {
  width: 50%;
  height:100%;
}

.navbar {
  background: var(--text-color);
}

.navbar nav {
  list-style-type: none; 
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}

.navbar button {
  margin: 2%;
  background: #141414;
  border: #000;
}

.navbar button:hover {
  background: #00CC00;
  border: 1px solid #000;
  transition: 0.3s;
}

nav a {
  color: var(--text-color);
  padding: 2%;
  text-decoration: none;
  font-size: 1.1rem;
  letter-spacing: 0.1em;
  font-family: 'Happy Monkey', cursive;
}

nav a:hover {
  background:#00CC00;
  border: #00CC00;
  color: #000;
  border-color: #000;
  transition: 0.3s;
}

/*main*/
.main {
  background: #141414;
  text-align: center;
  color: var(--text-color);
  padding-top: 5%;
}

h1 {
  font-size: 3rem;
  margin-bottom: 5%;
  margin-top: 10%;
}

h3 {
  font-size: 1.75rem;
  margin-bottom: 15%;
}

form {
  margin-bottom: 5%;
}

label {
  font-size: 1.25rem;
}

input[type="email"] {
  font-size: 1.025rem;
  border-color: var(--text-color);
  border-radius: 4px;
  margin: 2%;
}

input[type="email"]:focus {
  border: 1px solid #00CC00;
  outline-color: #00ff00;
}

::placeholder { 
  color: #000;
  opacity: 1; 
  letter-spacing: 0.1em;
  font-size: 1.025rem;
  padding: 2%;
  margin: 1%;
  font-family: 'Happy Monkey', cursive;
}

input[type="submit"] {
  background: black;
  color: var(--text-color);
  border-color: var(--text-color);
  padding: 1%;
  margin-left: 3%;
  letter-spacing: 0.1em;
  cursor: pointer;
  font-size: 1.025rem;
  border-radius: 4px;
  font-family: 'Happy Monkey', cursive;
}

input[type="submit"]:hover{
  background: #00CC00;
  color: black;
  border-color:black;
  transition: 0.3s;
}

#call-to-action {
  font-size: 1.75rem;
  margin-bottom: 5%;
}

/*video*/
.video {
  background: #141414;
  padding:5%;
}

iframe {
  display: block;
  margin: auto;
}

/*features*/
.box-feature {
   background: #000;
   padding: 2%;
}

h2 {
  margin: 2%;
  color: var(--text-color);
  padding-bottom: 2%;
}

.features {
  background: #141414;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.box {
  background: var(--text-color);
  border: 3px solid black;
  flex-basis: 25%;
  flex-grow: 1;
  text-align: center;
  color: black;
}

.box-image {
  width: 200px;
  height: 150px;
  margin-bottom: 5%;
  cursor: pointer;
}

.box h3 {
  font-size: 1.5rem;
}

/*clientprofile*/
.clientprofile {
  background: #141414;
  padding: 4%;
  text-align: justify;
}

.clientprofile p {
  margin: 2%;
  color: var(--text-color);
}

/*footer*/
.footer {
  background: #000;
  display: flex;
  justify-content: space-between;
  padding: 1%;
}

.footer ul {
  list-style-type: none; 
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  color: var(--text-color);
}

.footer li {
  margin: 2%;
  padding-left: 2%;
}

.footer ul a {
  text-decoration: none;
}

.footer p {
  margin: 2%;
}

.footer a {
  color: var(--text-color);
  align-self: center;
}

#contact {
  text-decoration: none;
  flex-basis: 25%;
}

/*media queries*/
/*media queries format tablettes*/
@media screen and (max-width:768px) {
  
.header {
  justify-content: center;
  flex-direction: column-reverse;
}
  
.logo {
  background: var(--text-color);
  flex-basis: 5%;
}

#header-img {
  width: 10%;
  }
  
#nav-bar {
  justify-content: center;
}

.navbar button {
 margin: 1%;   
  }
  
nav a {
  font-size: 0.9rem;
  padding: 1%;
  }
  
h1, h3 {
  padding: 2%;
  }
  
h1 {
  font-size: 2.25rem;
  margin-bottom: 3%;
  margin-top: 15%;
  }
  
h3 {
  font-size: 1.25rem;
  margin-bottom: 10%;
}
  
#call-to-action {
  margin: 2%;
  font-size: 1.25rem;
  margin-bottom: 5%;
  }

#video {
  height: 315px;
  }  
  
.feature {
  flex-direction: column;
}
  
h2 {
  text-align: center;
  font-size: 1.25rem;
  }
  
.box {
  flex-basis: 20%;
  }
  
.box h3 {
  font-size: 1rem;
  }
  
.box-image {
  width: 150px;
  height: 100px;
  }
  
.footer {
  flex-direction: column; 
  justify-content: center;
  }

.footer ul {
   justify-content: center; 
  }
  
#contact {
  width: 100%;
  text-align: center;
  }
  
}/*fin media queries format tablettes*/
  
/*media queries format téléphone*/
@media screen and (max-width:480px){

.logo {
 flex-basis: 10%;
  }

nav a {
  font-size: 0.9rem;
  }
  
.header {
  justify-content: center;
  flex-direction: column-reverse;
}
  
h1, h3 {
  padding: 3%;
  }
  
h1 {
  font-size: 2.5rem;
  margin-bottom: 3%;
  margin-top: 25%;
  }
  
h3 {
  font-size: 1.25rem;
  margin-bottom: 10%;
}
  
form {
  padding: 2%;
  }
  
label {
  margin: 3%;
  }
  
input[type="email"]{
  margin: 3%
  }
    
#call-to-action {
  margin: 2%;
  font-size: 1.25rem;
  margin-bottom: 5%;
  }
  
#video {
  height: 250px;
  }
  
h2 {
  text-align: center;
  font-size: 1.25rem;
  }
  
.box {
  flex-basis: 20%;
  }
  
.box h3 {
  font-size: 1.25rem;
  }

.box-image {
  width: 200px;
  height: 150px;
  }
    
.footer li {
  margin: 2%;
}
  
  } /*fin des medias queries format mobile/*
              
            
!

JS

              
                
              
            
!
999px

Console