Skip to content

Instantly share code, notes, and snippets.

@RomanMaksudov

RomanMaksudov/display_flex.markdown

Created February 5, 2024 13:40
Show Gist options
  • Save RomanMaksudov/5651c7cd23ac03f1820948ac67fac4fa to your computer and use it in GitHub Desktop.
Save RomanMaksudov/5651c7cd23ac03f1820948ac67fac4fa to your computer and use it in GitHub Desktop.
Download ZIP
display_flex
Raw
index.html
<header>
<img class="logo" src="images/W3C.svg" alt="Логотип сайта" width="50" height="50">
<ul class="site-menu">
<li><a href="">Главная</a></li>
<li><a href="about.html">О нас</a></li>
<li><a href="services.html">Услуги</a></li>
</ul>
</header>
<body>
<h2>Галерея 1</h2>
<div class="gallery gallery-1">
<img src="img/photo-1.jpeg" alt="">
<img src="img/photo-2.jpeg" alt="">
<img src="img/photo-3.jpeg" alt="">
</div>
<h2>Галерея 2</h2>
<div class="gallery gallery-2">
<img src="img/photo-4.jpeg" alt="">
<img src="img/photo-5.jpeg" alt="">
<img src="img/photo-6.jpeg" alt="">
</div>
<h2>Галерея 3</h2>
<div class="gallery gallery-3">
<img src="img/photo-7.jpeg" alt="">
<img src="img/photo-8.jpeg" alt="">
<img src="img/photo-9.jpeg" alt="">
</div>
</body
Raw
style.css
h2 {
margin: 0;
}
.gallery {
box-shadow: 5px 5px 10px grey;
padding: 20px;
margin-bottom: 20px;
display: flex;
}
.gallery:nth-of-type(2n) {
flex-direction: row;
}
.gallery:nth-of-type(2n + 1) {
flex-direction: row-reverse;
}
.gallery > img {
width: 200px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment