JSFiddle - React, Tailwind, and code Playground

by Damien Alves

HTML

<body>
  <div class="blocpage">
    <header>

      <div>
        <nav>
          <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#goal">Our goal</a></li>
            <li><a href="#shows">Shows</a></li>
            <li><a href="#adress">Contact</a></li>
          </ul>
        </nav>
      </div>

    </header>

    <div id="imagecirque">

      <div class="item"><img src="image/sans titre.png" alt="cirque"></div>

    </div>


    <section class="intro">
      <article id="goal">
        <h1>Our goal</h1>
        <P>Circus, this simple word evokes in the memory of all magic, fairy, dream, doesn't it?
          <br/>
          <br/> Of course! In every society and throughout all ages, the circus has carried us through its image into distant lands and has given the smallest as well as the greatest to escape, to dream; to marvel!
          <br/>
          <br/> WILD CIRCUS is the combination of all these adjectives! and promises to make you spend an unforgettable moment. Come to discover in family a spectacle that will amaze young and grownup with numerous acrobatics, taming, trapezists, jugglers,
          clowns; there will be enough for everyone!
          <br/>
          <br/> All our artists will be proud to welcome you to one of the biggest marquees in the world, which has been the emblem of the WILD CIRCUS since its creation in 1967!</P>
      </article>


      <h1>Shows</h1>
      <article id="shows" , class="aju">
        <img src="http://img15.hostingpics.net/pics/711652irina.png">
        <div class="texte_trp">
          <h2>Trapezist</h2>

          <p>Our artist "Irina" "who comes from the cold of Siberia will make you shiver through her unique acrobatics, rocking contorsions, one-armed rolling, simple board, twists, and many others! All this realized without technical assistance and with
            the the only force of her physique and courage! A performance that you will not forget anytime soon.</p>
        </div>
     ...

CSS

.blocpage {
  width: 1000px;
  margin: 0 auto;
}


/*Corps de la page*/

body {
  background-color: rgb(255, 143, 57);
  font-family: arial, Georgia, verdana;
}


/* En tête de la page*/

header {
  background-image: url("https://img4.hostingpics.net/pics/474429WILDCIRCUS3.png");
  background-repeat: no-repeat;
  height: 285px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  width: 1000px;
}

header div {
  min-width: 100%;
}


/* Menu*/

nav ul {
  list-style-type: none;
  display: flex;
  background-color: rgb(46, 178, 255);
  height: 50px;
  justify-content: center;
}

nav li {
  margin-right: 150px;
  margin-top: 10px;
}

nav a {
  font-size: 1.3em;
  text-decoration: none;
  color: white;
  font-weight: bold;
}


/* 1ere section partie intro*/


/*.intro {
	display: flex;
	
}*/


/* 2ieme partie section*/

section {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: rgb(255, 191, 34);
  padding: 10px;
}


/* Titre principale section*/

section h1 {
  font-size: 2em;
  text-align: center;
  border-top: 3px solid rgb(46, 178, 255);
  border-bottom: 3px solid rgb(46, 178, 255);
  color: rgb(255, 19, 0);
}


/*Titre secondaire section*/

section h2 {
  font-family: courier new Comic sans ms;
  font-weight: bold;
  text-transform: uppercase;
  border-top: 2px solid rgb(46, 178, 255);
  border-bottom: 2px solid rgb(46, 178, 255);
  color: rgb(197, 10, 0);
}


/* paragraphe partie section*/

section p {
  font-family: "Libre Baskerville", verdana;
  color: white;
  font-size: 0.9em;
}

.aju {
  display: flex;
  align-items: center;
  margin: 10px;
}

.texte_trp {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}


/* Pied de page */

footer {
  display: flex;
  justify-content: space-between;
  padding-left: 20px;
  padding-right: 20px;
  background-color: rgb(46, 178, 255);
}


/* Partie Robozzle */

.logo {
  margin: auto;
}

.logo_robot {
  text-align:...

JavaScript

$(document).ready(function() {
  // Add return on top button
  $('body').append('<div id="returnOnTop" title="Back to top">&nbsp;</div>');

  // On button click, let's scroll up to top
  $('#returnOnTop').click(function() {
    $('html,body').animate({
      scrollTop: 0
    }, 'slow');
  });
});

$(window).scroll(function() {
  // If on top fade the bouton out, else fade it in
  if ($(window).scrollTop() == 0)
    $('#returnOnTop').fadeOut();
  else
    $('#returnOnTop').fadeIn();
});