Простой сайт на html через блокнот - HTML, CSS - Ответ 14252557

@gotovets · Регистрация: 12.02.2020

Author24 — интернет-сервис помощи студентам

Приветствую!Прошу вашего совета. Пишу сайт с нуля. Не могу найти инфу,которая будет работать на блокноте. Сделать разметку картинок и подписать их. Пробовала по разному, не получается. Будет типа интернет-магазина цветов, нужно красиво сделать галерею с подписями. Буду рада любому совету.

Вот код html

HTML5

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title> Интернет-магазин Мята </title>
 
<title></title>
    <link rel="stylesheet" href="text.css">
</head>
 
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
 
<body 
bgcolor="#000" background="fon.jpg">
 
<nav class="top-menu">
  <a class="navbar-logo" href=""><img src="https://i.pinimg.com/236x/e5/89/6a/e5896adf1184ee46e07aa97f340834a1.jpg"></a>
  <ul class="menu-main">
    <li><a href="">Главная</a></li>
    <li><a href="">Доставка</a></li>
    <li><a href="">О нас</a></li>
    <li><a href="">Контакты</a></li>
  </ul>
</nav>
 
<p>
    <img src="букет1.jpg" alt="photo" "width="350" height="350">
    <img src="букет2.jpg" alt="photo" width="350" height="350">
    <img src="букет3.jpg" alt="photo" width="350" height="350">
</p>
<p>
    <img src="букет4.jpg" alt="photo" "width="350" height="350">
    <img src="букет5.jpg" alt="photo" width="350" height="350">
    <img src="букет6.jpg" alt="photo" width="350" height="350">
</p>
<p>
    <img src="букет7.jpg" alt="photo" "width="350" height="350">
    <img src="букет8.jpg" alt="photo" width="350" height="350">
    <img src="букет9.jpg" alt="photo" width="350" height="350">
</p>
<p>
    <img src="букет10.jpg" alt="photo" "width="350" height="350">
    <img src="букет11.jpg" alt="photo" width="350" height="350">
    <img src="букет12.jpg" alt="photo" width="350" height="350">
</p>
<p>
    <img src="букет13.jpg" alt="photo" "width="350" height="350">
    <img src="букет14.jpg" alt="photo" width="350" height="350">
    <img src="букет15.jpg" alt="photo" width="350" height="350">
</p>
 
</body>
</html>

Вот код css для менюшки( на всякий случай)

CSS

@import url('https://fonts.googleapis.com/css?family=Arimo');
.top-menu {
  background: rgba(255,255,255,.5);
  box-shadow: 3px 0 7px rgba(0,0,0,.3);
  padding: 20px;
}
.top-menu:after {
  content: "";
  display: table;
  clear: both;
}
.navbar-logo {display: inline-block;}
.menu-main {
  list-style: none;
  margin: 0;
  padding: 0;
  float: right;
}
.menu-main li {display: inline-block;}
.menu-main a {
  text-decoration: none;
  display: block;
  position: relative;
  line-height: 61px;
  padding-left: 20px;
  font-size: 30px;
  letter-spacing: 2px;
  font-family: 'Arimo', sans-serif;
  font-weight: bold;
  color: #ff5c77;
  transition:.3s linear;
}
.menu-main a:before {
  content: "";
  width: 9px;
  height: 9px;
  background: #ff5c77;
  position: absolute;
  left: 50%;
  transform: rotate(45deg) translateX(6.5px);
  opacity: 0;
  transition: .3s linear;
}
.menu-main a:hover:before {opacity: 1;}
@media (max-width: 660px) {
.menu-main {
  float: none;
  padding-top: 20px;
}
.top-menu {
  text-align: center;
  padding: 20px 0 0 0;
}
.menu-main a {padding: 0 10px;}
.menu-main a:before {transform: rotate(45deg) translateX(-6px);}
}
@media (max-width: 600px) {
.menu-main li {display: block;}
}

Вернуться к обсуждению:
Простой сайт на html через блокнот HTML, CSS

Следующий ответ