Espace blanc entre mes sections

color13 · 28 Janvier 2020

Bonjour,

Je me permet de poster sur ce forum car je n'arrive pas à enlever des espaces blancs entre chaque section de mon projet. Je commence en css/html donc j'ai du surement faire une erreur quelque part.
J'ai beau tout essayer mais je vois pas d'où ça peut venir, voici quelques screens à l'appui ;

spout · 28 Janvier 2020

Sans URL, impossible à savoir.

color13 · 28 Janvier 2020

spout a dit:
Sans URL, impossible à savoir.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Wild Circus</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Amatic+SC&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Fira+Sans&display=swap" rel="stylesheet">
</head>
<body class="body">
<header class="topbar">
<h1>Wild <br> Circus</h1>
<nav>

<a href="#Performances">Performances</a>
<a href="#Aboutus">About Us</a>
<a href="#Prices">Prices</a>
<a href="#Contactus">Contact</a>
</nav>
</header>
<section class="section">
<img src="img/maincircus.jpg" class="imgmain" alt="">
<h2 id="Performances" class="main">Performances</h2>

<ul>

<li class="laugh">
<h3>Laugh</h3>
<p>As an adult, come and discover our irresistible clowns, between practical jokes and pranks let yourself be carried away by their joy and fall back into childhood.</p>
</li>

<li class="dream">
<h3>Dream</h3>
<p>Let yourself be carried away in a world where the real and the imaginary are one, in the company of our talented magicians, discover a wonderful world limited only by your imagination.</p>
</li>

<li class="marvel">
<h3>Marvel at</h3>
<p>Tame the untameable in the company of our tamers, between roar and razor-sharp claws, watch these fierce felines turn into sweet kittens.</p>
</li>
</ul>
</section>
<hr/>
<div class="before"></div>
<section id="banniere">
<h2 id ="Aboutus" class="aboutus">About Us</h2>
<p class="aboutimg">
<strong>Wild Circus</strong> <br> is a recent circus company because it was created in 1999, the year I was born, by my parents. <br>
It is with these animals that I have seen grow up and aim back that I come to talk to you about what he advocates.
</p>
<p class="aboutusone">
Today, he is showing great success all over the world because his primary will is to raise animals in a respectable way not as they were at the time.
Here, animals are kings and spectators are their best friends!
Come and discover the many aerobatic shows that acrobats meticulously prepare for you.
Your eyes will be on the air as well as on the floor of our fabulous.
</p>
<p class="aboutustwo">
Our animals: lions, elephants, dogs, tigers and so on ... Our clown named Hector has prepared many jokes for you all funnier than each other! Several activities are available to the most curious such as feeding our animals, pampering them, caressing them and training them .
Acrobatic courses are also available!
</p>
<p class="aboutustree">
Don’t hesitate to contact us for more information! Our circus is intergenerational, here no one is bored everyone is lulled by our sweet magic.
From the director of your circus who is eagerly waiting for you, Guillaume Bleyer and all his company and animals. <br> <strong> See you soon! </strong>
</p>
<video id="video" autoplay="autoplay" loop="loop" muted="muted">
<source src="vid/media.mp4" type="video/mp4">
<source src="movie.webm" type="video/webm">Sorry, your browser does not support HTML5 video.</video>

</section>
<div class="after"></div>

<section>
<img src="img/conor-samuel-pMsebqxRnxs-unsplash.jpg" class="downimg" alt="">
<h2 id="Prices">Prices</h2>
<table>
<tr>
<th></th>
<th>Adultes</th>
<th>Enfants de moins de 12 ans</th>
<th>Groupes (plus de 10 personnes)</th>
<th>Ecoles</th>
</tr>
<tr>
<td>Semaines hors mercredi</td>
<td>150$</td>
<td>$100</td>
<td>$100</td>
<td>$100</td>
</tr>
<tr>
<td>Week-end et mercredi</td>
<td>150$</td>
<td>150$</td>
<td>150$</td>
<td>$100</td>
</tr>
</table>

</section>

<section>
<h2 id="Contactus">Contact Us</h2>
<div class="container">
<form action="action_page.php">

<label for="fname">First Name</label>
<input type="text" id="fname" name="firstname" placeholder="Your name..">

<label for="lname">Last Name</label>
<input type="text" id="lname" name="lastname" placeholder="Your last name..">

<label for="subject">Subject</label>
<textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea>

<input type="submit" value="Submit">

</form>
</div>

</section>

<footer class="footer">

<p>Wild Circus by [Ton nom] - France-IOI: [lien vers ton profil public France-IOI] - SoloLearn: [lien vers ton profil SoloLearn] - Wild Code School - [Date de réalisation du site]</p>
</footer>
</body>
</html>

* {
margin:0;
padding:0;
}

body {
font-family: 'Amatic SC', cursive, sans-serif;
font-size: 25px;
margin: 0;

padding: 0;
}

ul {
position: relative;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
margin: 0;
font-size: 25px;
background-image: url(img/backgroundcircus.jpg);
background-position: center;
background-size: cover;
width: 100%;
display: flex;
padding: 300px 0;
}

.section ul {
list-style-type: none;
}

.topbar {
position: absolute;
top: 75px;
left: 0;
right: 0;
padding: 30px;
padding-top: 1px;
}

h1 {
font-family: 'Fira Sans', sans-serif;
font-size: 254px;
opacity: 0.7;
color: white;
margin: 0;
text-align: center;
}

a {
color: white;
opacity: 0.6;
}

.topbar a {
margin: 0 45px;
text-decoration: none;

}

.topbar nav a:hover {
opacity: 1;
text-decoration: underline;
}

.topbar nav {
float: left;
padding-left: 520px;
}

nav {
font-size: 42px;
}

.main {
border-radius: 16px;
font-family: 'Amatic SC', sans-serif;
font-size: 80px;
text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
color: rgb(0, 0, 0);
position: absolute;
text-align: center;
margin: 17px 803px;
z-index: 2;
}

.imgmain {
background-image: url(img/maincircus.jpg);
width: 100%;
}

.img {
width: 100%;
}

.laugh {
background-color: white;
color: rgb(50, 67, 87);
opacity: 0.5;
font-size: 35px;
text-align: center;
font-weight: bolder;
box-shadow: 0px 4px 30px rgba(0, 0, 0, .5);

}

.dream {
background-color: white;
opacity: 0.5;
color: rgb(70, 17, 11);
font-size: 35px;
text-align: center;
font-weight: bolder;
box-shadow: 0px 4px 30px rgba(0, 0, 0, .5);
}

.marvel {
background-color: white;
color: rgba(56, 99, 115, 1);
opacity: 0.5;
font-size: 35px;
text-align: center;
font-weight: bolder;
box-shadow: 0px 4px 30px rgba(0, 0, 0, .5);

}

.marvel:hover {
box-shadow: 0 0 57px rgb(255, 83, 83);
}

h3 {
display: inline;
}

.aboutus{
position: absolute;
text-align: center;
color: #FBFBFB;
width: 100%;
margin: 0;
font-size: 70px;
text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
padding: 35px 0px;
}

.aboutimg {
position: absolute;
border-radius: 43px;
width: 83%;
color: rgb(0, 0, 0);
text-align: center;
font-size: 40px;
padding: 42px 0;
margin: 152px 181px;
background: #FBFBFB;
box-shadow: 0px 4px 30px rgba(0, 0, 0, .5);
opacity: 0.8;
}

.aboutustwo {
position: absolute;
margin: 381px 1223px;
text-align: center;
background: #FBFBFB;
box-shadow: 0px 4px 30px rgba(0, 0, 0, .5);
opacity: 0.8;
width: 375px;
padding: 40px;
font-size: 31px;
z-index: 3;
overflow: hidden;
}

.aboutusone {
position: absolute;
margin: 367px 235px;
text-align: center;
background: #FBFBFB;
box-shadow: 0px 4px 30px rgba(0, 0, 0, .5);
opacity: 0.8;
width: 375px;
padding: 40px;
font-size: 31px;
z-index: 4;
}

.aboutustree {
position: absolute;
margin: 591px 724px;
text-align: center;
background: #FBFBFB;
box-shadow: 0px 4px 30px rgba(0, 0, 0, .5);
opacity: 0.8;
width: 375px;
padding: 40px;
font-size: 35px;
z-index: 4;
}

.aboutustree:hover {
box-shadow: 0 0 57px rgb(251, 255, 0);
}

.aboutusone:hover {
box-shadow: 0 0 57px rgb(255, 0, 191);
}

.aboutustwo:hover {
box-shadow: 0 0 57px rgb(0, 255, 157);
}

#video {
min-width: 100%;
min-height: 100%;
height:auto;
width:auto;
}

#Prices {
background: #f2f2f2;
padding: 10px 227px;
margin: 0 655px;
font-size: 60px;
text-align: center;
}

table {
border-radius: 10px;
background-color: #FBFBFB;
border-collapse: collapse;
margin: 31px 494px;
box-shadow: 0px 4px 30px rgba(0, 0, 0, .5);
}

th, td {
font-size: 30px;
text-align: left;
padding: 10px;
}

th {
background-color: rgb(249, 255, 159);
color: rgb(0, 0, 0);
}

tr:nth-child(even) {
background-color: #f2f2f2;

}

#Contactus {
padding: 10px 184px;
margin: 21px 655px;
background: #f2f2f2;
font-size: 60px;
text-align: center;
box-shadow: 0px 4px 30px rgba(0, 0, 0, .5);
}

input[type=text], select, textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical
}

input[type=submit] {
background-color: #f9ff9f;
color: rgb(0, 0, 0);
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}

input[type=submit]:hover {
background-color: #ffffff;
}

.container {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
margin: 13px 470px;
box-shadow: 0px 4px 30px rgba(0, 0, 0, .5);
}

.downimg {
position: absolute;
width: auto;
height: auto;
max-width: 100%;
z-index: -100;

}

footer p {
margin: 0;
}

.footer {
background-color: black;
text-align: center;
color: white;
z-index: 1;
}

hr {
margin: 0;
}

color13 · 28 Janvier 2020

spout a dit:
Sans URL, impossible à savoir.

https://codepen.io/guillaume13/pen/QWwYWyN

voici mon code pen

spout · 29 Janvier 2020

Le codepen n'affiche pas la même chose que ton screen.

color13 · 29 Janvier 2020

Normalement c'est réglé, c'est la vidéo en background qui m'embête un peu ;
https://codepen.io/guillaume13/full/QWwYWyN