Может ли кто-нибудь помочь мне сделать эту страницу отзывчивой?
Когда страница отображается на мобильном телефоне, изображение цыпленка должно заполнить экран, а затем изображение стула и стола с текстом. , Когда вы прокручиваете дальше вниз, вам нужно получить два столбца с изображением и текстом, когда вы прокручиваете дальше вниз, вы получаете 3 столбца с изображением и текстом на одном экране и c.
Используйте только html и Css, нет javascript или bootstrap.
Я пробовал разные виды отображения, но не могу получить хороший результат.
Может кто-нибудь объяснить мне, как правильно задать медиа-запрос.
Я включил css и html код ниже
Большое спасибо
* {
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
text-decoration: none;
}
body,
{
font-family: 'Ubuntu', sans-serif;
font-size: 16px;
}
.wrapper {
width: 1614px;
margin: 0 auto;
}
img {
max-width: 100%;
}
.main-header {
background-image: url(img/bkg.jpg);
background-size: cover;
background-repeat: no-repeat;
height: 774px;
margin-bottom: 52px;
}
.main-header .header-content {
position: relative;
top: 50%;
margin-left: 40px;
color: #000;
display: inline-block;
}
.main-header .header-content h1 {
font-size: 3em;
}
.main-header .header-content p {
font-weight: bold;
font-size: 20px;
}
.bars,
.close {
display: flex;
justify-content: flex-end;
font-size: 28px;
margin-right: 20px;
}
.bars p,
.close p {
margin-top: -3px;
margin-right: 10px;
}
.menu-plein-ecran {
background-color: #3b685b;
position: fixed;
top: 0;
right: 0;
left: 0;
bottom: 0;
display: none;
}
.menu-plein-ecran:target {
display: block;
}
.navbar {
display: flex;
flex-direction: column;
height: 100vh;
justify-content: center;
align-items: center;
}
.navbar li {
list-style: none;
padding: 10px;
}
.navbar li a {
font-size: 4em;
text-decoration: none;
color: #fff;
}
.navbar li a:hover {
color: #f44336;
}
/**************************main**********************/
main {
max-width: 1200px;
margin: 0 auto;
}
.main-content .container1,
.main-content .container2,
.main-content .container3 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
grid-column-gap: 50px;
}
.main-content > .more {
color: #549ff3;
}
.main-content .more:hover {
color: #f00;
}
.main-content h2 {
margin-bottom: 10px;
margin-top: 10px;
}
.main-content p {
margin-bottom: 40px;
}
/************************ footer form container***********************/
.form-container {
padding: 1em;
}
.wrapper2 > * {
padding: 1em;
}
.contact {
width: 900px;
height: 50vh;
margin: 0 auto;
margin-top: 20px;
background: rgba(250, 250, 250, 0.5);
border-radius: 20px;
}
.contact h1 {
margin-bottom: 40px;
}
.contact form {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 20px;
}
.contact form p {
margin: 0;
}
.contact form label {
display: block;
margin-bottom: 10px;
color: #669;
}
.contact form button {
border: 0;
border-radius: 40px;
margin: 5px;
width: 25%;
padding: 0.5em;
background-image: linear-gradient(#b9bbde, #669);
}
.contact .full {
grid-area: 3/1/4/3;
text-align: center;
}
.contact form input,
.contact form textarea {
width: 92%;
padding: 1em;
border: 1px solid #c9e6ff;
border-radius: 10px;
}
.contact form button:hover,
.contact form button:focus {
background-image: linear-gradient(#666, #444);
outline: 0;
}
footer {
background-image: url(img/bkg-form.jpg);
background-size: cover;
margin-top: 50px;
height: 636px;
}
footer ul {
background: #ff7fcf;
margin: 0;
}
footer a {
border-left: 1em solid #ededed;
color: #ededed;
padding-left: .75em;
text-decoration: none;
}
footer a:hover {
border-color: #333;
}
footer a {
display: block;
float: left;
margin-bottom: 0.2em;
margin-left: 1em;
min-width: 26%;
}
.item:after,
nav:after,
footer ul:after,
.content:after {
clear: both;
content: "";
display: block;
}
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>devoir2</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Ubuntu&display=swap" rel="stylesheet">
</head>
<body>
<!---------------wrapper------------------->
<div class="wrapper">
<!--------------- début header------------------->
<header class="main-header" id="top">
<div class="bars">
<p>menu</p>
<a href="#menu"><i class="fa fa-bars" aria-hidden="true"></i></a>
</div>
<div class="header-content">
<h1>d-angle</h1>
<p>a responsive answer</p>
</div>
<!---------------navbar------------------->
<nav class="menu-plein-ecran" id="menu">
<div class="close">
<p>fermer</p>
<a href="#top"><i class="fa fa-times"></i></a>
</div>
<div class="main-menu">
<ul class="navbar">
<li><a href="#">Projets</a></li>
<li><a href="#">Pricing</a></li>
<li><a href="#">Tower</a></li>
<li><a href="#">Contacts</a></li>
</ul>
</div>
</nav>
</header>
<!---------------fin header------------------->
<!---------------début main------------------->
<main class="main-content">
<div class="container1">
<section>
<figure>
<img src="img/img-01.jpg" alt="chaises">
</figure>
<h2>Lorem ipsum dolor sit.</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum at, modi hic possimus quasi tempora sed asperiores qui eius excepturi iure voluptates doloremque minima beatae laboriosam quae ad tenetur esse iste nostrum obcaecati. Quaerat reprehenderit necessitatibus eum cum possimus, a deleniti ipsa nemo corrupti eveniet suscipit repudiandae ipsum pariatur rem earum aspernatur assumenda iste atque officiis ab. Architecto impedit facilis eaque temporibus culpa libero, ut dolorem tempore illo nobis, amet reiciendis consectetur ea velit placeat quia debitis cumque quibusdam. Quibusdam alias praesentium quas enim velit. Illo ab id optio quae sint ex debitis nostrum officia laborum, placeat, illum delectus nesciunt! <a href="#" class="more">Lire la suite</a></p>
</section>
<section>
<figure>
<img src="img/img-03.jpg" alt="fenetre">
</figure>
<h2>Lorem ipsum dolor sit.</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum at, modi hic possimus quasi tempora sed asperiores qui eius excepturi iure voluptates doloremque minima beatae laboriosam quae ad tenetur esse iste nostrum obcaecati. Quaerat reprehenderit necessitatibus eum cum possimus, a deleniti ipsa nemo corrupti eveniet suscipit repudiandae ipsum pariatur rem earum aspernatur assumenda iste atque officiis ab. Architecto impedit facilis eaque temporibus culpa libero, ut dolorem tempore illo nobis, amet reiciendis consectetur ea velit placeat quia debitis cumque ! <a href="#" class="more">Lire la suite</a></p>
</section>
</div>
<div class="container2">
<section>
<figure>
<img src="img/img-04.jpg" alt="carreaux">
</figure>
<h2>Lorem ipsum dolor sit.</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum at, modi hic possimus quasi tempora sed asperiores qui eius excepturi iure voluptates doloremque minima beatae laboriosam quae ad tenetur esse iste nostrum obcaecati. Quaerat reprehenderit necessitatibus eum cum possimus, a deleniti ipsa nemo corrupti eveniet suscipit repudiandae ipsum pariatur rem earum aspernatur assumenda iste atque officiis ab. Architecto impedit facilis eaque temporibus culpa libero, ut dolorem tempore illo nobis, amet reiciendis consectetur ea velit placeat quia debitis cumque quibusdam. Quibusdam alias praesentium quas enim velit. Illo ab id optio quae sint ex debitis nostrum officia laborum, placeat, illum delectus nesciunt! <a href="#" class="more">Lire la suite</a></p>
</section>
<section>
<figure>
<img src="img/img-02.jpg" alt="velo">
</figure>
<h2>Lorem ipsum dolor sit.</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum at, modi hic possimus quasi tempora sed asperiores qui eius excepturi iure voluptates doloremque minima beatae laboriosam quae ad tenetur esse iste nostrum obcaecati. Quaerat reprehenderit necessitatibus eum cum possimus, a deleniti ipsa nemo corrupti eveniet suscipit repudiandae ipsum pariatur rem earum aspernatur assumenda iste atque officiis ab. Architecto impedit facilis eaque temporibus culpa libero, ut dolorem tempore illo nobis, amet reiciendis consectetur ea velit placeat quia debitis cumque quibusdam. Quibusdam alias praesentium quas enim velit. Illo ab id optio quae sint ex debitis nostrum officia laborum, placeat, illum delectus nesciunt! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit explicabo eius, ducimus ullam quis blanditiis alias dolor, delectus et officiis. <a href="#" class="more">Lire la suite</a></p>
</section>
<section>
<figure>
<img src="img/img-05.jpg" alt="artiste">
</figure>
<h2>Lorem ipsum dolor sit.</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum at, modi hic possimus quasi tempora sed asperiores qui eius excepturi iure voluptates doloremque minima beatae laboriosam quae ad tenetur esse iste nostrum obcaecati. Quaerat reprehenderit necessitatibus eum cum possimus, a deleniti ipsa nemo corrupti eveniet suscipit repudiandae ipsum pariatur rem earum aspernatur assumenda iste atque officiis ab. Architecto impedit facilis eaque temporibus culpa libero, ut dolorem tempore illo nobis, amet reiciendis consectetur ea velit placeat quia debitis cumque quibusdam. Quibusdam alias praesentium quas enim velit. Illo ab id optio quae sint ex debitis nostrum officia laborum, placeat, illum delectus nesciunt! <a href="#" class="more">Lire la suite</a></p>
</section>
</div>
<div class="container3">
<section>
<figure>
<img src="img/img-06.jpg" alt="pneu">
</figure>
<h2>Lorem ipsum dolor sit.</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum at, modi hic possimus quasi tempora sed asperiores qui eius excepturi iure voluptates doloremque minima beatae laboriosam quae ad tenetur esse iste nostrum obcaecati. Quaerat reprehenderit necessitatibus eum cum possimus, a deleniti ipsa nemo corrupti eveniet suscipit repudiandae ipsum pariatur rem earum aspernatur <a href="#" class="more">Lire la suite</a></p>
</section>
<section>
<figure>
<img src="img/img-07.jpg" alt="main">
</figure>
<h2>Lorem ipsum dolor sit.</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum at, modi hic possimus quasi tempora sed asperiores qui eius excepturi iure voluptates doloremque minima beatae laboriosam quae ad tenetur esse iste nostrum obcaecati. Quaerat reprehenderit necessitatibus eum cum possimus, a deleniti ipsa nemo corrupti eveniet suscipit repudiandae ipsum pariatur rem earum aspernatur assumenda iste atque officiis ab. Architecto impedit facilis eaque temporibus culpa libero, ut dolorem tempore illo nobis, amet reiciendis consectetur ea velit placeat quia debitis cumque quibusdam. Quibusdam alias praesentium quas enim velit. Illo ab id optio quae sint ex debitis nostrum officia laborum, placeat, illum delectus nesciunt! <a href="#" class="more">Lire la suite</a></p>
</section>
<section>
<figure>
<img src="img/img-08.jpg" alt="oiseaux">
</figure>
<h2>Lorem ipsum dolor sit.</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum at, modi hic possimus quasi tempora sed asperiores qui eius excepturi iure voluptates doloremque minima beatae laboriosam quae ad tenetur esse iste nostrum obcaecati. Quaerat reprehenderit necessitatibus eum cum possimus, a deleniti ipsa nemo corrupti eveniet suscipit repudiandae ipsum pariatur rem earum aspernatur <a href="#" class="more">Lire la suite</a></p>
</section>
<section>
<figure>
<img src="img/img-09.jpg" alt="personne">
</figure>
<h2>Lorem ipsum dolor sit.</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum at, modi hic possimus quasi tempora sed asperiores qui eius excepturi iure voluptates doloremque minima beatae laboriosam quae ad tenetur esse iste nostrum obcaecati. Quaerat reprehenderit necessitatibus eum cum possimus, a deleniti ipsa nemo corrupti eveniet suscipit repudiandae ipsum pariatur rem earum aspernatur <a href="#" class="more">Lire la suite</a></p>
</section>
</div>
</main>
<!-------------------------fin main--------------------------------->
<!------------------------ début footer------------------------------>
<footer>
<div class="form-container">
<div class="wrapper2">
<div class="contact">
<h1>Contactez-nous</h1>
<form>
<p>
<label>Name*:</label>
<input type="text" name="name" placeholder="Entrez votre nom" required>
</p>
<p>
<label>Telephone*:</label>
<input type="email" name="email" placeholder="Laissez votre numero de tel" required>
</p>
<p>
<label>Email*:</label>
<input type="text" name="phone" placeholder="Votre email" required>
</p>
<p>
<label>Message:</label>
<textarea name="message" rows="5" placeholder="Laissez-nous votre message"></textarea>
</p>
<p class="full">
<button type="submit">Envoyer</button><br/>
<button type="reset">Reset</button>
</p>
</form>
</div>
</div>
</div>
<ul class="responsive">
<li><a href="#">Responsive Design</a></li>
<li><a href="#">Principes</a></li>
<li><a href="#">Grilles fluides</a></li>
<li><a href="#">Smartphones</a></li>
<li><a href="#">Ecran Responsive</a></li>
<li><a href="#">Principes</a></li>
<li><a href="#">Grilles fluides</a></li>
<li><a href="#">Medias fluides</a></li>
<li><a href="#">Landscape</a></li>
<li><a href="#">Media querie portrait</a></li>
<li><a href="#">Atelier Design</a></li>
<li><a href="#">Points de rupture</a></li>
<li><a href="#">Typographie Responsive</a></li>
<li><a href="#">Un formulaire responsive</a></li>
</ul>
</footer>
</div>
</body>
</html>