Bonjour à tous !
Je postule à une formation de développeur web et à ce titre, je dois accomplir un petit travail.
Je me régale à découvrir le code et... je galère aussi.
J'ai 1 souci en fait : en pleine page sur 1 ordi ma mise en page tient à peu près la route. Par contre, si je réduis la dimension de la page, mon menu de navigation ne ressemble plus à rien.
J'ai bien tenté les Medias Queries afin qu'il se dispose en colonne, mais les conteneurs de mon menu ne se redimensionnent pas eux.
J'espère avoir à peu près respecter la manière de poser sa question sur ce forum que je découvre.
Merci d'avance !
Je postule à une formation de développeur web et à ce titre, je dois accomplir un petit travail.
Je me régale à découvrir le code et... je galère aussi.
J'ai 1 souci en fait : en pleine page sur 1 ordi ma mise en page tient à peu près la route. Par contre, si je réduis la dimension de la page, mon menu de navigation ne ressemble plus à rien.
J'ai bien tenté les Medias Queries afin qu'il se dispose en colonne, mais les conteneurs de mon menu ne se redimensionnent pas eux.
<!DOCTYPE html>
<link rel="stylesheet" href="wildcircusflex.css">
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Ruthie" rel="stylesheet">
<title>Wild Circus</title>
<body>
<div id="bloc_plage">
<header>
<h1>Welcome to the Wild Circus</h1>
<h2>More than a circus : an enchanted journey !</h2>
</header>
<nav>
<ul>
<li><a href="#">Show</a></li>
<li><a href="#">Tickets</a></li>
<li><a href="#">Reviews</a></li>
<li><a href="#">Our next locations</a></li>
<li><a href="#">Caring for circus animals</a></li>
</ul>
</nav>
<article class="summary">
<p class="fairytale">Once upon a time...</p>
<p>This is how the most beautiful stories begin.</p>
<p>More than a succession of performances, we invite you to a magical and poetic journey ! <br /> Albert Pumpkin, a brilliant scientist, has completed the construction of his rocket. He takes his funny family to a space adventure full of twists and turns.</p>
</article>
<section class="iceplanet">
<h3 class="title1">The Ice world</h3>
<p>
<img src="wild_circus/OOTW_General_Clowns_1500x1000.jpg" class="iceplanet_img" alt="pumpkin family on the ice planet">First step: the ice planet!<br />
Hang your belts: the landing will be hectic !
</p>
</section>
<section class="robots">
<h3 class="title2">The Planet of Robots</h3>
<p>
<img src="wild_circus/OOTW_General_1500x1000.jpg" class="robots_img" alt="pumpkin family has landed on the planet of robots">Short of fuel and forced to land on a strange metalic planet !<br /> The Pumpkyn family will meet a robot people with incredible capabilities !
</p>
</section>
<section class="pirates">
<h3 class="title3">The Intergalactic Pirates</h3>
<p>
<img src="wild_circus/OOTW_General_Ringmaster-and-Starseeker_1500x1000.jpg" class="pirates_img" alt="the intergalactic pirates">What would be a space adventure without pirates ?
Those will make you laugh out loud !
</p>
</section>
</div>
<footer>
<a href="#" class="top">Back to the top</a>
</footer>
</body>@font-face {
font-family: 'Roboto', sans-serif;
src: url(Fonts/Roboto-Black.ttf)
}
header {
font-family: 'Roboto Slab', sans-serif;
text-align: center;
background: url("wild_circus/stars.jpg");
background-size: cover;
color: white;
padding: 15px 0px 150px 0px;
border: 1px black solid;
border-radius: 0px 0px 10px 10px;
}
h1 {
font-size: 3em;
}
h2 {
font-size: 1.5em;
}
nav {
position: relative;
bottom: 75px;
}
ul {
text-align: center;
background: rgba(0,0,0,0.4);
height: 60px;
border-radius: 0px 0px 10px 10px;
}
li {
display: inline;
padding: 0px 40px 0px 40px;
}
a {
font-family: 'Roboto Slab', sans-serif;
font-size: 1.5em;
text-decoration: none;
color: white;
position: relative;
top: 10px;
}
a:hover {
font-size: 1.6em;
color: rgb(204,102,204);
}
article {
width: 75%;
margin: 0 auto;
position: relative;
bottom: 20px;
}
.summary {
position: relative;
bottom: 150px;
text-align: center;
font-family: 'Roboto Slab', sans-serif;
font-size: 1em;
}
.fairytale {
font-family: 'Ruthie', cursive;
font-size: 4em;
font-weight: bold;
color: rgb(51,0,102);
text-align: center;
text-shadow: 3px 3px 2px gray;
position: relative;
top: 50px;
}
img {
width: 800px;
display: block;
border: 1px black solid;
border-radius: 10px;
margin-right: auto;
margin-left: auto;
}
#bloc_page {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
h3 {
text-align: center;
font-size: 2.4em;
font-family: 'Roboto Slab', sans-serif;
}
.title1 {
color: rgb(51,0,204);
}
.title2 {
color: rgb(255,0,102);
}
.title3 {
color: rgb(255,153,51);
}
p {
text-align: center;
font-family: 'Roboto Slab', sans-serif;
font-size: 1.2em;
}
footer {
text-align: center;
}
.top {
color: gray;
}
@media screen and (max-width: 1280px)
{
#bloc_page, header, nav {
width: auto;
}
}J'espère avoir à peu près respecter la manière de poser sa question sur ce forum que je découvre.
Merci d'avance !
).