Друзья, всем привет! сегодня мы разберём код моей созданной программы.
Ссылку на исходный код, я оставлю ниже. Переходите оценивайте, ну, а мы начинаем.
У нас должно получиться вот это!
Разбирать мы будем, как HTML так и CSS часть!
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style/style.css">
<title>Магазин травника</title>
</head>
<body>
<div class="main">
<div class="header">
<div class="logo">
<div class="logo_text">
<a href="glavnoe_menu.htm"><h2>Магия природы</h2></a>//Название моего продукта
</div>
</div>
</div>
<div class="dropdown" style="float:left">
<button class="dropbtn">Категории</button>//Выпадающий список слева
<div class="dropdown-content" style="left: 20%">
<a href="sushka.htm">Сушка</a>
<a href="nastoyka.htm">Настойка</a>
</div>
</div>
<div class="dropdown" style="float: right;">
<button class="dropbtn"><a href="glavnoe_menu.htm">Товар</a></button>//Блок находиться с права
</div>
<div class="content-menu">
<div class="content-text">//Создаем максимальное количество рамок
<a href="krapiva.htm"><img src="https://www.pavelin.ru/images/stories/0000000foto/krapiva/krap_001.jpg" alt="Крапива"></a>
<hr>
<figcaption>Крапива</figcaption>
</div>
<div class="content-text">
<a href="themlanika.htm"><img src="https://get.pxhere.com/photo/blossom-plant-flower-bloom-spring-herb-produce-flora-wildflower-leaves-strawberries-flowering-plant-lantana-camara-strawberry-field-strawberry-plants-strawberry-flowers-annual-plant-land-plant-tanacetum-parthenium-thimbleberry-mock-strawberry-620858.jpg" alt="Земляника"></a>
<hr>
<figcaption>Земляника</figcaption>
</div>
</div>
<div class="content-menu">
<div class="content-text">
<a href="nastoy-sereni.htm"><img src="https://about-tea.ru/wp-content/uploads/b/3/d/b3d41479162da6509b743fc50ca8ea4d.jpeg" alt="Настойка серени"></a>
<hr>
<figcaption>Настойка серени</figcaption>
</div>
<div class="content-text">
<a href="krovoxlebka.htm"><img src="https://nagrunte.ru/wp-content/uploads/2019/03/krovohlebka_foto7.jpg" alt="Кровохлёбка"></a>
<hr>
<figcaption>Кровохлёбка</figcaption>
</div>
<div class="content-text">
<a href="romashka.htm"><img src="https://cdn.botanichka.ru/wp-content/uploads/2018/05/romashka-6.jpg" alt="Ромашка"></a>
<hr>
<figcaption>Ромашка</figcaption>
</div>
</div>
<div class="content-menu">
<div class="content-text">
<a href="vosilek.htm"><img src="https://vsegda-pomnim.com/uploads/posts/2022-04/1649767950_131-vsegda-pomnim-com-p-vasilki-tsveti-foto-142.jpg" alt="Восилёк"></a>
<hr>
<figcaption>Восилёк</figcaption>
</div>
<div class="content-text">
<a href="oduvanchik.htm"><img src="https://cdn.sibkray.ru/upload/resize/952081/bcb6330064569c9ae4ca1486d67c7386.jpg" alt="Одуванчик"></a>
<hr>
<figcaption>Одуванчик</figcaption>
</div>
<div class="content-text">
<a href="donnik.htm"><img src="http://tatbee.ru/wp-content/uploads/2019/03/donnik-zheltyj-tsvetki.jpg" alt="Донник"></a>
<hr>
<figcaption>Донник</figcaption>
</div>
</div>
<div class="content-menu">
<div class="content-text">
<a href="donnik-sux.htm"><img src="https://cmapywka.ru/_nw/1/07878129.jpg" alt="Донник Сухой"></a>
<hr>
<figcaption>Донник сухой</figcaption>
</div>
<div class="content-text">
<a href="oduvanchik-sux.htm"><img src="https://sovkusom.ru/wp-content/uploads/blog/u/uspokaivayushchiy-chay/3.jpg" alt="Одуванчик сухой"></a>
<hr>
<figcaption>Одуванчик сушенный</figcaption>
</div>
</div>
<div class="footer">
<img src="img/83440460d6c80279d06788a5b3dr.jpg" alt="Травник магия природы">//Картинка внизу по центру
<p>Автор: Печенёв Д. С.</p>//Находиться внизу по центру
</div>
</div>
Ссылка на исходный сайт: https://xwo6hfc966oer5y5pfsn3g.on.drv.tw/www.04t.ru/glavnoe_menu.htm.
Переходите не пожелеете.
Если хотите ещё больше разбора то, 2 лайка выходит новый разбор.
На этом всё сем пока.