Это легко сделать с помощью современных семантических элементов CSS3 и HTML5.
с тэгами, такими как «nav, main, figure, article и section», вы можете получить согласованную структуру для своего сайта, а затем применитьнекоторый стиль документа с использованием CSS GRID и CSS переменных.Вы получите работу без усилий, и вам даже не нужен Javascript.
посмотрите на этот пример:
@charset "UTF-8";
:root{
--w:#fff;
--x:100%/600;
--bu:#e15f41;
--m:#786fa6;
--v:400;
--n:#f8a5c2;
--z:400/600;
--t:#333;
--r: calc(var(--z)*100%);
--b:#000;
}
body{
margin: 1rem;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
font: inherit;
color: var(--t);
vertical-align: baseline;
box-sizing: border-box;
font-family: sans-serif;
background-color: var(--b);
min-width: 100px;
display: grid;
}
nav{
text-align: center;
background-color: var(--n);
padding: .3rem;
}
h1, h2, h3{
color: var(--w);
}
ul{
display: grid;
grid-template-columns: repeat(5, 1fr);
list-style: none;
padding: .2rem;
}
a{text-decoration: none; color: var(--b);}
a:hover{color:var(--w);text-shadow: 1px 1px 3px var(--t);}
main{
display: grid;
min-width: 100px;
background-color: var(--m);
padding: 1em;
}
figure{
--i:calc(var(--x)*var(--v));
margin: 0;
position: relative;
border: 4px solid white;
padding-top: var(--i);
}
img{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: #888;
}
button{
background-color: var(--bu);
position: fixed;
width: 50px;
height: 50px;
font-size: 1.2rem;
bottom: 15px;
right: 15px;
z-index: 100;
padding: 10px;
border-radius: 50%;
outline: 0;
box-shadow: 0px 0px 6px 3px rgba(0, 0, 0, 0.5);
}
button:hover{
--buh:#e77f67;
cursor: pointer;
background-color: var(--buh);
}
@media only screen and (min-width: 600px){
main{
padding: 1.5em;
min-width: 100px;
background-color: var(--m);
display: grid;
grid-template-columns: repeat(2,1fr);
grid-gap: .5em;
}
}
@media only screen and (min-width: 1080px){
main{
padding: 2em;
min-width: 100px;
background-color: var(--m);
display: grid;
grid-template-columns: repeat(3,1fr);
grid-gap: .8em;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="master.css">
<title>Document</title>
</head>
<body>
<header>
<nav>
<h1>site title</h1>
<ul class=''>
<li><a href="#">menu1</a></li>
<li><a href="#">menu2</a></li>
<li><a href="#">menu3</a></li>
<li><a href="#">menu4</a></li>
<li><a href="#">menu5</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h3>Random Title</h3>
<figure>
<img class="on-off" src="" alt="image not found">
</figure>
<article><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></article>
</section>
<section>
<h3>Random Title</h3>
<figure>
<img class="on-off" src="" alt="image not found">
</figure>
<article><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></article>
</section>
<section>
<h3>Random Title</h3>
<figure>
<img class="on-off" src="" alt="image not found">
</figure>
<article><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></article>
</section>
<section>
<h3>Random Title</h3>
<figure>
<img class="on-off" src="" alt="image not found">
</figure>
<article><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></article>
</section>
<section>
<h3>Random Title</h3>
<figure>
<img class="on-off" src="" alt="image not found">
</figure>
<article><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></article>
</section>
<section>
<h3>Random Title</h3>
<figure>
<img class="on-off" src="" alt="image not found">
</figure>
<article><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></article>
</section>
<section>
<h3>Random Title</h3>
<figure>
<img class="on-off" src="" alt="image not found">
</figure>
<article><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></article>
</section>
<section>
<h3>Random Title</h3>
<figure>
<img class="on-off" src="" alt="image not found">
</figure>
<article><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></article>
</section>
<section>
<h3>Random Title</h3>
<figure>
<img class="on-off" src="" alt="image not found">
</figure>
<article><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></article>
</section>
</main>
<footer>
<button type="button" onclick="onOff();">⇄</button>
</footer>
<!--The following javascript is for demonstration purposes only and is not necessary-->
<script>
function onOff() {
let images = document.querySelectorAll('.on-off');
for (let i = 0; i < images.length; i++) {
if (images[i].getAttribute('src')=="") {
images[i].setAttribute('src', "https://upload.wikimedia.org/wikipedia/commons/6/6b/Delizia_del_Verginese%2C_tra_arte_e_natura.jpg")
}
else {
images[i].setAttribute('src', "")
}
}
};
</script>
</body>
</html>
Важное примечание:
javascript он там только для демонстрации, чтобы переключать изображения наи выключен и не имеет никакого взаимодействия с макетом. взгляните на этот PEN
Вам следует оптимизировать изображения до нужного размера и веса, особенно если они большие.