Compare commits
2 Commits
main
...
lab2-branc
| Author | SHA1 | Date | |
|---|---|---|---|
|
653a660636 | ||
|
|
0dd5c03d7d |
14
.gitignore
vendored
14
.gitignore
vendored
@@ -1,14 +0,0 @@
|
||||
# ---> VisualStudioCode
|
||||
.vscode/*
|
||||
!.vscode/settings.json
|
||||
!.vscode/tasks.json
|
||||
!.vscode/launch.json
|
||||
!.vscode/extensions.json
|
||||
!.vscode/*.code-snippets
|
||||
|
||||
# Local History for Visual Studio Code
|
||||
.history/
|
||||
|
||||
# Built Visual Studio Code Extensions
|
||||
*.vsix
|
||||
|
||||
Binary file not shown.
BIN
LabWork2Report.docx
Normal file
BIN
LabWork2Report.docx
Normal file
Binary file not shown.
38
catalog.html
38
catalog.html
@@ -1,38 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<head>
|
||||
<title>Каталог</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h3>Тут разбита музыка на жанры</h3>
|
||||
<p>Инфа будет +- такая</p>
|
||||
<div class="list">
|
||||
<ul class="punk-list">
|
||||
<li>
|
||||
<div class="item">
|
||||
<img class="catalog" src="pankrock.jpg" alt="Панк-Рок" width=200>
|
||||
<a href="punkrock.html">Панк-Рок</a>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="item">
|
||||
<img class="catalog" src="psy.png" alt="Психоделический рок" width=200>
|
||||
<a href="">Психоделика</a>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="item">
|
||||
<img class="catalog" src="garajnipunk.jpg" alt="Гаражный-панк" width=200>
|
||||
<a href="">Гражный-панк</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<a href="index.html"> Вернуться назад</a>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
28
index.html
28
index.html
@@ -1,28 +0,0 @@
|
||||
//index
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<title>Панкуха</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="content">
|
||||
<h1>Стриминговый сервис <em>"Панкуха"</em></h1>
|
||||
<img src="res/logo.png" alt="Эмблема" width="200">
|
||||
<div class="main">
|
||||
<div class="description">
|
||||
<p><span style="background-color: blueviolet;">Какие страницы я реализовал:</span></p>
|
||||
</div>
|
||||
<ol class = "spisok">
|
||||
<a href="index.html"><li class="spisok_el">Главная страница</li></a>
|
||||
<a href="grob.html"><li>Страница исполнителя</li></a>
|
||||
<li><a href="grobKaifIliBolshe.html">Страница песни</a></li>
|
||||
<a href="catalog.html"><li>Каталог</li></a>
|
||||
<a href="punkrock.html"><li>Страница каталога</li></a>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,21 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<head>
|
||||
<title>Панк-рок</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h3>Тут будет перечень исполнителей, принадлежащих жанру</h3>
|
||||
<p>Инфа будет +- такая</p>
|
||||
<ul class="autors">
|
||||
<li><a href="grob.html">Гражданская Оборона</a></li>
|
||||
<li><a href="">Король и Шут</a></li>
|
||||
<li><a href="">Наив</a></li>
|
||||
|
||||
</ul>
|
||||
|
||||
</body>
|
||||
<br><a href="index.html"> Вернуться назад</a>
|
||||
|
||||
</html>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 80 KiB |
BIN
res/grob.jpg
BIN
res/grob.jpg
Binary file not shown.
|
Before Width: | Height: | Size: 91 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 240 KiB |
BIN
res/pankrock.jpg
BIN
res/pankrock.jpg
Binary file not shown.
|
Before Width: | Height: | Size: 34 KiB |
BIN
res/psy.png
BIN
res/psy.png
Binary file not shown.
|
Before Width: | Height: | Size: 969 KiB |
121
styles.css
121
styles.css
@@ -1,121 +0,0 @@
|
||||
body{
|
||||
background-color: #474444;
|
||||
color: white;
|
||||
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
|
||||
font-size: medium;
|
||||
}
|
||||
a{
|
||||
color: aliceblue;
|
||||
text-decoration: none;
|
||||
font-size: 15pt;
|
||||
}
|
||||
a:hover{
|
||||
color:lightblue;
|
||||
}
|
||||
img{
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.description{
|
||||
font-size: 20pt;
|
||||
}
|
||||
.reviews{
|
||||
background-color: rgb(96, 89, 89);
|
||||
margin: 15pt;
|
||||
font-size: 20pt;
|
||||
}
|
||||
|
||||
.catalog{
|
||||
margin: 10pt;
|
||||
}
|
||||
.text{
|
||||
text-align: center;
|
||||
}
|
||||
.text li{
|
||||
list-style: none;
|
||||
}
|
||||
.descriptionForSong{
|
||||
font-size: 20pt;
|
||||
background-color: beige;
|
||||
color: black;
|
||||
}
|
||||
.punk-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.punk-list li {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.item img {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.list {
|
||||
font-size: 17pt;
|
||||
color: black;
|
||||
}
|
||||
.autors {
|
||||
list-style: none;
|
||||
}
|
||||
.main{
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
.main li{
|
||||
list-style: none;
|
||||
margin: 15pt;
|
||||
border-width: 5pt;
|
||||
padding-bottom: 1pt;
|
||||
border-color: aliceblue;
|
||||
border: 1pt solid white;
|
||||
}
|
||||
|
||||
|
||||
footer{
|
||||
text-align: center;
|
||||
background-color: grey;
|
||||
}
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between; /* Логотип и навигация по краям */
|
||||
align-items: center; /* Выравнивание по вертикали */
|
||||
background-color: #333; /* Цвет фона */
|
||||
padding: 10px 20px; /* Отступы внутри шапки */
|
||||
color: white; /* Цвет текста */
|
||||
}
|
||||
|
||||
|
||||
.logo img {
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
|
||||
.nav ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.nav a {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.nav a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
Binary file not shown.
BIN
~$bWork2Report.docx
Normal file
BIN
~$bWork2Report.docx
Normal file
Binary file not shown.
68
лаб2/catalog.html
Normal file
68
лаб2/catalog.html
Normal file
@@ -0,0 +1,68 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<head>
|
||||
<title>Каталог</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
</head>
|
||||
<body>
|
||||
<header class="header">
|
||||
<a href="index.html">
|
||||
<div class="logo">
|
||||
<img src="logo.png" alt="Логотип">
|
||||
</div>
|
||||
</a>
|
||||
<h1 class="site-title">Панкуха</h1>
|
||||
<nav class="nav">
|
||||
<ul class="menu">
|
||||
<li class="dropdown">
|
||||
<span>Страницы</span>
|
||||
<ul class="features-menu">
|
||||
<li><a href="index.html">Главная страница</a></li>
|
||||
<li><a href="catalog.html">Каталог</a></li>
|
||||
<li><a href="grobKaifIliBolshe.html">Песня</a></li>
|
||||
<li><a href="punkrock.html">Исполнители</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="https://vk.com/kadyshevever">Контакты</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<h3>Тут разбита музыка на жанры</h3>
|
||||
<p>Инфа будет +- такая</p>
|
||||
<div class="list">
|
||||
<ul class="punk-list">
|
||||
<li>
|
||||
<div class="item">
|
||||
<img class="catalog" src="pankrock.jpg" alt="Панк-Рок" width=200>
|
||||
<a href="punkrock.html">Панк-Рок</a>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="item">
|
||||
<img class="catalog" src="psy.png" alt="Психоделический рок" width=200>
|
||||
<a href="">Психоделика</a>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="item">
|
||||
<img class="catalog" src="garajnipunk.jpg" alt="Гаражный-панк" width=200>
|
||||
<a href="">Гражный-панк</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
<footer>
|
||||
<p>© 2025. Все права защищены.</p>
|
||||
<nav>
|
||||
<a href="#">Политика конфиденциальности</a>
|
||||
<a href="https://vk.com/kadyshevever"><div class="logo">
|
||||
<img src="vk.png" alt="Логотип">
|
||||
</div></a>
|
||||
</nav>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
Before Width: | Height: | Size: 80 KiB After Width: | Height: | Size: 80 KiB |
@@ -1,43 +1,73 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<head>
|
||||
<title>Гражданская оборона</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>Здесь можно почитать инфу про исполнителя и перейти на песню</p>
|
||||
<img src = "grob.jpg" alt="Гражданская оборона" width= 500>
|
||||
<div class="descriptionForSong">
|
||||
<p>
|
||||
«Гражданская Оборона» — культовая советская и российская рок-группа, основанная в 1984 году в Омске Егором Летовым.
|
||||
Коллектив стал одним из самых влиятельных в андеграундной среде, а его творчество оказало огромное влияние
|
||||
на развитие русского рока. Группа известна своими резкими, часто провокационными текстами, которые затрагивали
|
||||
темы социального протеста, экзистенциальных переживаний и критики общества.
|
||||
</p>
|
||||
<p>
|
||||
Музыка «Гражданской Обороны» сочетает в себе элементы панк-рока, гаражного рока и лоу-фая.
|
||||
Несмотря на минималистичный подход к звучанию, группа смогла создать уникальный стиль, который
|
||||
стал узнаваемым и вдохновил множество последующих исполнителей.
|
||||
</p>
|
||||
<p>
|
||||
Среди самых известных альбомов группы — «Тоталитаризм», «Мышеловка», «Здорово и вечно»,
|
||||
«Русское поле экспериментов» и «Инструкция по выживанию». Творчество «Гражданской Обороны»
|
||||
остается актуальным и по сей день, а Егор Летов считается одной из ключевых фигур в истории
|
||||
русской рок-музыки.
|
||||
</p>
|
||||
</div>
|
||||
<p>
|
||||
Песни:
|
||||
<ul>
|
||||
<li><a href = "grobKaifIliBolshe.html">Кайф или больше</a></li>
|
||||
<li><a href = "">Зоопарк</a></li>
|
||||
<li><a href = "">Новая патриотическая</a></li>
|
||||
</ul>
|
||||
</p>
|
||||
|
||||
<a href="index.html"> Вернуться назад</a>
|
||||
|
||||
</body>
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<head>
|
||||
<title>Гражданская оборона</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
</head>
|
||||
<body>
|
||||
<header class="header">
|
||||
<a href="index.html">
|
||||
<div class="logo">
|
||||
<img src="logo.png" alt="Логотип">
|
||||
</div>
|
||||
</a>
|
||||
<h1 class="site-title">Панкуха</h1>
|
||||
<nav class="nav">
|
||||
<ul class="menu">
|
||||
<li class="dropdown">
|
||||
<span>Страницы</span>
|
||||
<ul class="features-menu">
|
||||
<li><a href="index.html">Главная страница</a></li>
|
||||
<li><a href="catalog.html">Каталог</a></li>
|
||||
<li><a href="grobKaifIliBolshe.html">Песня</a></li>
|
||||
<li><a href="punkrock.html">Исполнители</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="https://vk.com/kadyshevever">Контакты</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<p>Здесь можно почитать инфу про исполнителя и перейти на песню</p>
|
||||
<img src = "grob.jpg" alt="Гражданская оборона" width= 500>
|
||||
<div class="descriptionForSong">
|
||||
<p>
|
||||
«Гражданская Оборона» — культовая советская и российская рок-группа, основанная в 1984 году в Омске Егором Летовым.
|
||||
Коллектив стал одним из самых влиятельных в андеграундной среде, а его творчество оказало огромное влияние
|
||||
на развитие русского рока. Группа известна своими резкими, часто провокационными текстами, которые затрагивали
|
||||
темы социального протеста, экзистенциальных переживаний и критики общества.
|
||||
</p>
|
||||
<p>
|
||||
Музыка «Гражданской Обороны» сочетает в себе элементы панк-рока, гаражного рока и лоу-фая.
|
||||
Несмотря на минималистичный подход к звучанию, группа смогла создать уникальный стиль, который
|
||||
стал узнаваемым и вдохновил множество последующих исполнителей.
|
||||
</p>
|
||||
<p>
|
||||
Среди самых известных альбомов группы — «Тоталитаризм», «Мышеловка», «Здорово и вечно»,
|
||||
«Русское поле экспериментов» и «Инструкция по выживанию». Творчество «Гражданской Обороны»
|
||||
остается актуальным и по сей день, а Егор Летов считается одной из ключевых фигур в истории
|
||||
русской рок-музыки.
|
||||
</p>
|
||||
</div>
|
||||
<p>
|
||||
Песни:
|
||||
<ul>
|
||||
<li><a href = "grobKaifIliBolshe.html">Кайф или больше</a></li>
|
||||
<li><a href = "">Зоопарк</a></li>
|
||||
<li><a href = "">Новая патриотическая</a></li>
|
||||
</ul>
|
||||
</p>
|
||||
|
||||
|
||||
<footer>
|
||||
<p>© 2025. Все права защищены.</p>
|
||||
<nav>
|
||||
<a href="#">Политика конфиденциальности</a>
|
||||
<a href="https://vk.com/kadyshevever"><div class="logo">
|
||||
<img src="vk.png" alt="Логотип">
|
||||
</div></a>
|
||||
</nav>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
Before Width: | Height: | Size: 91 KiB After Width: | Height: | Size: 91 KiB |
@@ -1,49 +1,78 @@
|
||||
//grobKaifIliBolshe
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<head>
|
||||
<title>Гражданская оборона - "Кайф или больше"</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h3>Тут будет типа песня</h3>
|
||||
<img src = "nekrofilia.jpg" alt = "Обложка" width="500" >
|
||||
<h2>Кайф или больше</h2>
|
||||
<a href="grob.html">Гражданская оборона</a>
|
||||
<p>Описание</p>
|
||||
<ul>
|
||||
<li>Была выпущена в 1987 году</li>
|
||||
<li>Входит в альбом некрофилия</li>
|
||||
</ul>
|
||||
<div class = "text">
|
||||
<p>Текст песни:
|
||||
<br> [Куплет 1]
|
||||
<br>Рука повисла в небе, полном до краёв
|
||||
<br>Мои ошибки устилают мой позор
|
||||
<br>Я сочно благодарен, словно кошкин блёв
|
||||
<br>И смачно богомолен, словно приговор
|
||||
|
||||
<br>[Припев]
|
||||
<br>Но мне придётся выбирать
|
||||
<br>Кайф или больше
|
||||
<br>Рай или больше
|
||||
<br>Свет или больше… Хей-йо
|
||||
|
||||
<br>[Куплет 2]
|
||||
<br>Я буду ласковым, как тёплый банный лист
|
||||
<br>Я буду вежливым, как битое окно
|
||||
<br>Я буду благотворен, словно онанист
|
||||
<br>Я буду зазеркален, словно всё равно
|
||||
|
||||
<br>[Припев]
|
||||
<br>Но мне придётся выбирать
|
||||
<br>Кайф или больше
|
||||
<br>Рай или больше
|
||||
<br>Свет или больше...хей-йо
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
<a href="index.html"> Вернуться назад</a>
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<head>
|
||||
<title>Гражданская оборона - "Кайф или больше"</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
</head>
|
||||
<body>
|
||||
<header class="header">
|
||||
<a href="index.html">
|
||||
<div class="logo">
|
||||
<img src="logo.png" alt="Логотип">
|
||||
</div>
|
||||
</a>
|
||||
<h1 class="site-title">Панкуха</h1>
|
||||
<nav class="nav">
|
||||
<ul class="menu">
|
||||
<li class="dropdown">
|
||||
<span>Страницы</span>
|
||||
<ul class="features-menu">
|
||||
<li><a href="index.html">Главная страница</a></li>
|
||||
<li><a href="catalog.html">Каталог</a></li>
|
||||
<li><a href="grobKaifIliBolshe.html">Песня</a></li>
|
||||
<li><a href="punkrock.html">Исполнители</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="https://vk.com/kadyshevever">Контакты</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<h3>Тут будет типа песня</h3>
|
||||
<img src = "nekrofilia.jpg" alt = "Обложка" width="500" >
|
||||
<h2>Кайф или больше</h2>
|
||||
<a href="grob.html">Гражданская оборона</a>
|
||||
<p>Описание</p>
|
||||
<ul>
|
||||
<li>Была выпущена в 1987 году</li>
|
||||
<li>Входит в альбом некрофилия</li>
|
||||
</ul>
|
||||
<div class = "text">
|
||||
<p>Текст песни:
|
||||
<br> [Куплет 1]
|
||||
<br>Рука повисла в небе, полном до краёв
|
||||
<br>Мои ошибки устилают мой позор
|
||||
<br>Я сочно благодарен, словно кошкин блёв
|
||||
<br>И смачно богомолен, словно приговор
|
||||
|
||||
<br>[Припев]
|
||||
<br>Но мне придётся выбирать
|
||||
<br>Кайф или больше
|
||||
<br>Рай или больше
|
||||
<br>Свет или больше… Хей-йо
|
||||
|
||||
<br>[Куплет 2]
|
||||
<br>Я буду ласковым, как тёплый банный лист
|
||||
<br>Я буду вежливым, как битое окно
|
||||
<br>Я буду благотворен, словно онанист
|
||||
<br>Я буду зазеркален, словно всё равно
|
||||
|
||||
<br>[Припев]
|
||||
<br>Но мне придётся выбирать
|
||||
<br>Кайф или больше
|
||||
<br>Рай или больше
|
||||
<br>Свет или больше...хей-йо
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
<footer>
|
||||
<p>© 2025. Все права защищены.</p>
|
||||
<nav>
|
||||
<a href="#">Политика конфиденциальности</a>
|
||||
<a href="https://vk.com/kadyshevever"><div class="logo">
|
||||
<img src="vk.png" alt="Логотип">
|
||||
</div></a>
|
||||
</nav>
|
||||
</footer>
|
||||
</html>
|
||||
62
лаб2/index.html
Normal file
62
лаб2/index.html
Normal file
@@ -0,0 +1,62 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<title>Панкуха</title>
|
||||
</head>
|
||||
<body>
|
||||
<header class="header">
|
||||
<a href="index.html">
|
||||
<div class="logo">
|
||||
<img src="logo.png" alt="Логотип">
|
||||
</div>
|
||||
</a>
|
||||
<h1 class="site-title">Панкуха</h1>
|
||||
<nav class="nav">
|
||||
<ul class="menu">
|
||||
<li class="dropdown">
|
||||
<span>Страницы</span>
|
||||
<ul class="features-menu">
|
||||
<li><a href="index.html">Главная страница</a></li>
|
||||
<li><a href="catalog.html">Каталог</a></li>
|
||||
<li><a href="grobKaifIliBolshe.html">Песня</a></li>
|
||||
<li><a href="punkrock.html">Исполнители</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="https://vk.com/kadyshevever">Контакты</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<div class="content">
|
||||
<h1>Стриминговый сервис <em>"Панкуха"</em></h1>
|
||||
<img src="logo.png" alt="Эмблема" width="200">
|
||||
<div class="main">
|
||||
<div class="description">
|
||||
<p><span style="background-color: blueviolet;">Какие страницы я реализовал:</span></p>
|
||||
</div>
|
||||
<ol class = "spisok">
|
||||
<a href="index.html"><li class="spisok_el">Главная страница</li></a>
|
||||
<a href="grob.html"><li>Страница исполнителя</li></a>
|
||||
<li><a href="grobKaifIliBolshe.html">Страница песни</a></li>
|
||||
<a href="catalog.html"><li>Каталог</li></a>
|
||||
<a href="punkrock.html"><li>Страница каталога</li></a>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="footer">
|
||||
<p>© 2025. Все права защищены.</p>
|
||||
<nav>
|
||||
<a href="#">Политика конфиденциальности</a>
|
||||
<a href="https://vk.com/kadyshevever">
|
||||
<div class="logo">
|
||||
<img src="vk.png" alt="Логотип">
|
||||
</div>
|
||||
</a>
|
||||
</nav>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
Before Width: | Height: | Size: 89 KiB After Width: | Height: | Size: 89 KiB |
|
Before Width: | Height: | Size: 240 KiB After Width: | Height: | Size: 240 KiB |
|
Before Width: | Height: | Size: 34 KiB After Width: | Height: | Size: 34 KiB |
|
Before Width: | Height: | Size: 969 KiB After Width: | Height: | Size: 969 KiB |
51
лаб2/punkrock.html
Normal file
51
лаб2/punkrock.html
Normal file
@@ -0,0 +1,51 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<head>
|
||||
<title>Панк-рок</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
</head>
|
||||
<body>
|
||||
<header class="header">
|
||||
<a href="index.html">
|
||||
<div class="logo">
|
||||
<img src="logo.png" alt="Логотип">
|
||||
</div>
|
||||
</a>
|
||||
<h1 class="site-title">Панкуха</h1>
|
||||
<nav class="nav">
|
||||
<ul class="menu">
|
||||
<li class="dropdown">
|
||||
<span>Страницы</span>
|
||||
<ul class="features-menu">
|
||||
<li><a href="index.html">Главная страница</a></li>
|
||||
<li><a href="catalog.html">Каталог</a></li>
|
||||
<li><a href="grobKaifIliBolshe.html">Песня</a></li>
|
||||
<li><a href="punkrock.html">Исполнители</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="https://vk.com/kadyshevever">Контакты</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<div class = "content">
|
||||
<h3>Тут будет перечень исполнителей, принадлежащих жанру</h3>
|
||||
<p>Инфа будет +- такая</p>
|
||||
<ul class="autors">
|
||||
<li><a href="grob.html">Гражданская Оборона</a></li>
|
||||
<li><a href="">Король и Шут</a></li>
|
||||
<li><a href="">Наив</a></li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</body>
|
||||
<footer>
|
||||
<p>© 2025. Все права защищены.</p>
|
||||
<nav>
|
||||
<a href="#">Политика конфиденциальности</a>
|
||||
<a href="https://vk.com/kadyshevever"><div class="logo">
|
||||
<img src="vk.png" alt="Логотип">
|
||||
</div></a>
|
||||
</nav>
|
||||
</footer>
|
||||
</html>
|
||||
348
лаб2/styles.css
Normal file
348
лаб2/styles.css
Normal file
@@ -0,0 +1,348 @@
|
||||
/* Общие стили */
|
||||
body {
|
||||
background-color: #474444;
|
||||
color: white;
|
||||
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
|
||||
font-size: medium;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
a {
|
||||
color: aliceblue;
|
||||
text-decoration: none;
|
||||
font-size: 15pt;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: lightblue;
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.description {
|
||||
font-size: 20pt;
|
||||
}
|
||||
|
||||
.reviews {
|
||||
background-color: rgb(96, 89, 89);
|
||||
margin: 15pt;
|
||||
font-size: 20pt;
|
||||
}
|
||||
|
||||
.catalog {
|
||||
margin: 10pt;
|
||||
}
|
||||
|
||||
.text {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.text li {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.descriptionForSong {
|
||||
font-size: 20pt;
|
||||
background-color: beige;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.punk-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.punk-list li {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.item img {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.list {
|
||||
font-size: 17pt;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.autors {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.main {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.main li {
|
||||
list-style: none;
|
||||
margin: 15pt;
|
||||
border-width: 5pt;
|
||||
padding-bottom: 1pt;
|
||||
border-color: aliceblue;
|
||||
border: 1pt solid white;
|
||||
}
|
||||
|
||||
footer {
|
||||
text-align: center;
|
||||
background-color: grey;
|
||||
padding: 10px;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background-color: #333;
|
||||
padding: 10px 20px;
|
||||
color: white;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.logo img {
|
||||
height: 50px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.nav ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.nav a {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.nav a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.site-title {
|
||||
margin: 0;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
font-family: Verdana, Geneva, Tahoma, sans-serif;
|
||||
}
|
||||
|
||||
.nav {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.nav ul li {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.nav ul li a,
|
||||
.nav ul li span {
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.dropdown>span {
|
||||
z-index: 2;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.dropdown .features-menu {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
background-color: #333;
|
||||
border: 1px solid #ccc;
|
||||
box-shadow: 0 4px 8px rgba(205, 26, 26, 0.1);
|
||||
padding: 10px 0;
|
||||
min-width: 150px;
|
||||
z-index: 1000;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.dropdown:hover .features-menu {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.features-menu li {
|
||||
padding: 5px 10px;
|
||||
}
|
||||
|
||||
.features-menu li a {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.features-menu li a:hover {
|
||||
background-color: #555;
|
||||
}
|
||||
|
||||
.dropdown span::after {
|
||||
content: " ▾";
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.spisok li {
|
||||
|
||||
text-align: center;
|
||||
transition: 1s;
|
||||
}
|
||||
|
||||
.spisok li:hover {
|
||||
background-color:blueviolet
|
||||
}
|
||||
/* Мобилка */
|
||||
@media (max-width: 768px) {
|
||||
.header {
|
||||
|
||||
align-items: center;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.site-title {
|
||||
font-size: 18px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.logo img {
|
||||
height: 40px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.nav ul {
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.nav ul li {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.nav a {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.dropdown .features-menu {
|
||||
position: static;
|
||||
background-color: #444;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
padding: 0;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.dropdown:hover .features-menu {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.dropdown span::after {
|
||||
content: " ▾";
|
||||
}
|
||||
|
||||
.description,
|
||||
.reviews,
|
||||
.descriptionForSong {
|
||||
font-size: 16pt;
|
||||
}
|
||||
|
||||
.main li {
|
||||
margin: 10pt;
|
||||
padding: 5pt;
|
||||
}
|
||||
|
||||
.punk-list {
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.item img {
|
||||
width: 100%;
|
||||
max-width: 200px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
footer {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
p{
|
||||
margin-left: 10px;
|
||||
}
|
||||
h3{
|
||||
margin-left: 10px;
|
||||
}
|
||||
h1{
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.description {
|
||||
font-size: 20pt;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.spisok {
|
||||
list-style-position: inside;
|
||||
padding: 0;
|
||||
margin: 0 auto;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.spisok li {
|
||||
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
p{
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
h3{
|
||||
margin-left: 10px;
|
||||
}
|
||||
h2{
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
Before Width: | Height: | Size: 40 KiB After Width: | Height: | Size: 40 KiB |
BIN
лаб2/~$bWork2Report.docx
Normal file
BIN
лаб2/~$bWork2Report.docx
Normal file
Binary file not shown.
Reference in New Issue
Block a user