Blog

<head>
<style>
.menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.menu li {
  display: inline-block;
  position: relative;
}

.menu a {
  display: inline-block;
padding: 10px;
text-decoration: none;
color: #000;
}

.menu ul {
position: absolute;
top: 100%;
left: 0;
display: none;
background-color: #f9f9f9;
padding: 0;
}

.menu li:hover > ul {
display: block;
}

.menu ul li {
width: 200px;
display: block;
}

.menu ul li a {
padding: 8px 10px;
color: #000;
}

.menu ul li:hover a {
background-color: #ddd;
}
</style>

</head>

<body>
<ul class="menu">
  <li><a href="#">Головна</a></li>
  <li>
    <a href="#">Про нас</a>
    <ul>
      <li><a href="#">Історія</a></li>
      <li><a href="#">Команда</a></li>
      <li><a href="#">Місія</a></li>
    </ul>
  </li>
  <li>
    <a href="#">Послуги</a>
    <ul>
      <li><a href="#">Веб-дизайн</a></li>
      <li><a href="#">Розробка</a></li>
      <li><a href="#">Маркетинг</a></li>
    </ul>
  </li>
  <li><a href="#">Контакти</a></li>
</ul>
</body>

<!DOCTYPE html>
<html>
<head>
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
 ::selection {
    background: #b3d4fc;
    text-shadow: none;
}
body {
  display: grid;
  grid-template-columns: auto;
  gap: 1%;
  background-color: #BBD4E8;
font-family:Oswald;
   }
   header,footer{display: grid;
grid-template-columns: auto;border: 1px solid black;text-align: center;
border-radius: 4px;
box-shadow: 2px 2px 2px rgb(0,0,0), -2px -2px 2px #000000 ;
}
   main{display: grid;
grid-template-columns: auto auto auto auto;
gap: 1%;}

main > section {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid black;
  text-align: center;
border-radius: 4px;
}
   nav {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #333;
  padding: 1%;
  border-radius: 4px;
}
   nav ul {
  display: flex;
  list-style: none;
 /*  margin: 0;
  padding: 0; */
flex-grow: 1;

}
   nav li {
display: flex;
margin: 0 10px;
padding: 10px;
background-color:  #756E6E;
border-radius: 8px;
flex-grow: 1;
justify-content: center;
align-items: center;

box-shadow: 2px 2px 3px yellow, -2px -2px 2px #03A9F4 ;
   }
   nav a {
  color: #fff;
  text-decoration: none;
}

</style>
</head>
<body>
   <header><h1>Grid Контейнер</h1>
   <p>Grid контейнер складається з елементів сітки, розташованих у стовпцях і рядках</p>
   </header>
   <nav>
  <ul>
    <li><a href="#">Пункт 1</a></li>
    <li><a href="#">Пункт 2</a></li>
    <li><a href="#">Пункт 3</a></li>
    <li><a href="#">Пункт 4</a></li>
    <li><a href="#">Пункт 5</a></li>
  </ul>
</nav>
<main>
 <section>
	<h2>Назва розділу 1</h2>
	<article><h3>Назва публікації 1</h3>
	   <p>
		  Перше речення першої публікації.</p>
	</article>
</section>
<section>
   <h2>Назва розділу 2</h2>
<article><h3>Назва публікації 2</h3></article>
   <p>Перше речення другої публікації.</p>
</section>
<section>
   <h2>Назва розділу 3</h2>
<article><h3>Назва публікації 3</h3></article>
   <p>Перше речення третьої публікації.</p>
</section>
<section>
   <h2>Назва розділу 4</h2>
<article><h3>Назва публікації 4</h3></article>
   <p>Перше речення четвертої публікації.</p>
</section>
<section>
<h2>Назва розділу 5</h2>
<article><h3>Назва публікації 5</h3></article>
   <p>Перше речення п'ятої публікації.</p>
</section>
<section>
   <h2>Назва розділу 6</h2>
<article><h3>Назва публікації 6</h3></article>
   <p>Перше речення шостої публікації.</p>
</section>
<section>
<h2>Назва розділу 7</h2>
<article><h3>Назва публікації 7</h3></article>
   <p>Перше речення сьомої публікації.</p>
</section>
<section>
<h2>Назва розділу 8</h2>
<article><h3>Назва публікації 8</h3></article>
   <p>Перше речення восьмої публікації.</p></section>
   </main>
   <footer><p>Прямі дочірні елементи контейнера сітки автоматично стають елементами сітки.</p>
<p>
   Copyright © by Kolomiets Oleksandr 2023
	  </p>
   </footer>
</body>
</html>

EXAMPLES

Створення вкладених меню за допомогою HTML та CSS

Приклад застосування кольорів та інших властивостей до виділеного тексту на веб-сторінці.

Grid контейнер складається з елементів сітки, розташованих у стовпцях і рядках.