qkrlnt/PIbd-22_Ulybin_A.A._InternetProgramming
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: qkrlnt:main
Branches Tags
qkrlnt:main qkrlnt:lab2.1 qkrlnt:lab_6 qkrlnt:lab_4 qkrlnt:lab_5 qkrlnt:lab_3 qkrlnt:lab_2 qkrlnt:lab_1
..
compare: qkrlnt:lab_2
Branches Tags
qkrlnt:lab2.1 qkrlnt:lab_6 qkrlnt:lab_4 qkrlnt:lab_5 qkrlnt:lab_3 qkrlnt:lab_2 qkrlnt:main qkrlnt:lab_1

3 Commits
main ... lab_2

Author SHA1 Message Date
qkrlnt
baeb13067f отчет 2025-05-28 16:47:04 +04:00
qkrlnt
0f37299eab lab_2_done 2025-05-20 14:03:18 +04:00
qkrlnt
f09fa6e113 lab_1_done 2025-05-20 13:21:40 +04:00
27 changed files with 677 additions and 0 deletions
Expand all files Collapse all files

1
.gitignore vendored Normal file
View File

@@ -0,0 +1 @@
node_modules

54
Account.html Normal file
View File

@@ -0,0 +1,54 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<title>Интернет-магазин: ЛК</title>
<link rel="stylesheet" href="css/style.css"/>
</head>
<body>
<header>
<img src="images/logo.jpg" alt="'Название магазина'">
<a href="newSite.html"><h1><b>"Название магазина"</b></h1></a>
<navbar>
<div class="dropdown">
<span>Навигация ▾</span>
<ul class="links">
<li><a href="Basket.html">Корзина</a></li>
<li><a href="Order.html">Заказы</a></li>
<li><a href="Favorites.html">Избранное</a></li>
<li><a href="Account.html">Личный кабинет</a></li>
</ul>
</div>
</navbar>
</header>
<div class="account-container">
<div class="account">
<img src="images/бананы.jpg">
<h3>Имя Фамилия</h3>
<p>Описание</p>
</div>
</div>
<footer>
<div class="contacts">
<p>Помощь:</p>
<div class="contact-item">
<img src="images/phone.png" alt="Phone">
<p>8 (800)-555-35-35</p>
</div>
<div class="contact-item">
<img src="images/vk.png" alt="VK">
<p>vk.com</p>
</div>
<div class="contact-item">
<img src="images/telegram.png" alt="Telegram">
<p>tg.me</p>
</div>
<div class="contact-item">
<img src="images/gmail.png" alt="Gmail">
<p>ozon-zon-zon@mail.joke</p>
</div>
</div>
</footer>
</body>
</html>

60
Basket.html Normal file
View File

@@ -0,0 +1,60 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<title>Интернет-магазин: Корзина</title>
<link rel="stylesheet" href="css/style.css"/>
</head>
<body>
<header>
<img src="images/logo.jpg" alt="'Название магазина'">
<a href="newSite.html"><h1><b>"Название магазина"</b></h1></a>
<navbar>
<div class="dropdown">
<span>Навигация ▾</span>
<ul class="links">
<li><a href="Basket.html">Корзина</a></li>
<li><a href="Order.html">Заказы</a></li>
<li><a href="Favorites.html">Избранное</a></li>
<li><a href="Account.html">Личный кабинет</a></li>
</ul>
</div>
</navbar>
</header>
<div class="basket">
<h1>Корзина</h1>
<ol>
<li><img src="images/glasses.jpg">Очки<p>349 руб.</p></li>
<li><img src="images/chery.jpg">Chery Tiggo 7 Pro Max 64gb 128mp<p>5 руб.</p></li>
<li><img src="images/vanadiy.jpg">Ванадий<p>2099 руб.</p></li>
</ol>
</div>
<div class="buy">
<a href="https://xn----7sbon6aucai8a.xn--p1ai/wa-data/public/shop/products/98/27/2798/images/6060/6060.970.jpg" target="_blank">
Оплатить
</a>
</div>
<footer>
<div class="contacts">
<p>Помощь:</p>
<div class="contact-item">
<img src="images/phone.png" alt="Phone">
<p>8 (800)-555-35-35</p>
</div>
<div class="contact-item">
<img src="images/vk.png" alt="VK">
<p>vk.com</p>
</div>
<div class="contact-item">
<img src="images/telegram.png" alt="Telegram">
<p>tg.me</p>
</div>
<div class="contact-item">
<img src="images/gmail.png" alt="Gmail">
<p>ozon-zon-zon@mail.joke</p>
</div>
</div>
</footer>
</body>
</html>

54
Favorites.html Normal file
View File

@@ -0,0 +1,54 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<title>Интернет-магазин: Избранное</title>
<link rel="stylesheet" href="css/style.css"/>
</head>
<body>
<header>
<img src="images/logo.jpg" alt="'Название магазина'">
<a href="newSite.html"><h1><b>"Название магазина"</b></h1></a>
<navbar>
<div class="dropdown">
<span>Навигация ▾</span>
<ul class="links">
<li><a href="Basket.html">Корзина</a></li>
<li><a href="Order.html">Заказы</a></li>
<li><a href="Favorites.html">Избранное</a></li>
<li><a href="Account.html">Личный кабинет</a></li>
</ul>
</div>
</navbar>
</header>
<div class="favourites">
<h2>Избранное</h2>
<ol>
<li><img src ="images/masha.jpg">Женщина<p>бесценна</p></li>
<li><img src ="images/screwdriver.jpg">Отвертка<p>219 руб</p></li>
</ol>
</div>
<footer>
<div class="contacts">
<p>Помощь:</p>
<div class="contact-item">
<img src="images/phone.png" alt="Phone">
<p>8 (800)-555-35-35</p>
</div>
<div class="contact-item">
<img src="images/vk.png" alt="VK">
<p>vk.com</p>
</div>
<div class="contact-item">
<img src="images/telegram.png" alt="Telegram">
<p>tg.me</p>
</div>
<div class="contact-item">
<img src="images/gmail.png" alt="Gmail">
<p>ozon-zon-zon@mail.joke</p>
</div>
</div>
</footer>
</body>
</html>

65
Order.html Normal file
View File

@@ -0,0 +1,65 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<title>Интернет-магазин: Заказы</title>
<link rel="stylesheet" href="css/style.css"/>
</head>
<body>
<header>
<img src="images/logo.jpg" alt="'Название магазина'">
<a href="newSite.html"><h1><b>"Название магазина"</b></h1></a>
<navbar>
<div class="dropdown">
<span>Навигация ▾</span>
<ul class="links">
<li><a href="Basket.html">Корзина</a></li>
<li><a href="Order.html">Заказы</a></li>
<li><a href="Favorites.html">Избранное</a></li>
<li><a href="Account.html">Личный кабинет</a></li>
</ul>
</div>
</navbar>
</header>
<div class="orders"><h1>Заказы</h1></div>
<div class="typeOfOrder">
<div class="inProcess">
<h2>В процессе</h2>
<ol>
<li><img src="images/spoon.jpg">Ложка</li>
<li><img src="images/fork.jpg">Вилка</li>
<li><img src="images/knife.jpg">Нож</li>
</ol>
</div>
<div class="done">
<h2>Завершённые</h2>
<ol>
<li><img src="images/iron.jpg">Утюг</li>
<li><img src="images/bananas.jpg">Бананы</li>
</ol>
</div>
</div>
<footer>
<div class="contacts">
<p>Помощь:</p>
<div class="contact-item">
<img src="images/phone.png" alt="Phone">
<p>8 (800)-555-35-35</p>
</div>
<div class="contact-item">
<img src="images/vk.png" alt="VK">
<p>vk.com</p>
</div>
<div class="contact-item">
<img src="images/telegram.png" alt="Telegram">
<p>tg.me</p>
</div>
<div class="contact-item">
<img src="images/gmail.png" alt="Gmail">
<p>ozon-zon-zon@mail.joke</p>
</div>
</div>
</footer>
</body>
</html>

387
css/style.css Normal file
View File

@@ -0,0 +1,387 @@
/*Общие стили*/
body {
background-color: #edf7f6;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
a {
text-decoration: none;
color: black;
font-weight: bold;
}
h2 {
text-align: center;
}
img {
width: 180px;
height: 150px;
margin-right: 10px;
}
/*header*/
header {
display: flex;
flex-direction: column;
align-items: start;
margin-bottom: 50px;
}
header img {
width: 200px;
height: auto;
margin-right: 10px;
margin-bottom: 10px;
}
header h1 a{
text-align: left;
}
/*навигация*/
navbar {
display: flex;
gap: 15px;
position: fixed;
top: 40px;
right: 20px;
z-index: 3;
}
span{
top: 10px;
}
.dropdown > span {
z-index: 2;
position: relative;
cursor: pointer;
border: 2px solid black;
border-radius: 5px;
padding: 5px;
/*background: #edf7f6;*/
background: white;
margin-right: 0;
}
.dropdown:hover .links{
display: flex;
flex-direction: column;
background: white;
border-radius: 10px;
padding-right: 30px;
padding-top: 50px;
position: absolute;
top: -25px;
left: -115px;
z-index: 1;
}
.links {
display: none;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.links li {
list-style: none;
color: black;
width: 140px;
border: none;
}
/*Основной контент*/
.goods {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
margin-bottom: 70px;
gap: 15px;
}
.goods p {
text-align: center;
width: 270px;
height: 285px;
border: 2px solid black;
border-radius: 10px;
}
.goods img {
width: 250px;
height: 250px;
object-fit: cover;
margin: 0 auto;
}
/*Заказы*/
.typeOfOrder {
display: flex;
justify-content: space-around;
}
.typeOfOrder h2{
border: 2px solid black;
border-radius: 5px;
width: 180px;
margin-left: auto;
}
.inProcess h2{
background-color: yellow;
}
.done h2{
background-color: green;
}
/*Корзина и Избранное*/
.basket,
.favourites {
margin-left: 50px;
}
.basket h1,
.orders h1 {
margin-left: 50px;
}
li {
position: relative;
border: 2px solid black;
border-radius: 10px;
width: 400px;
display: flex;
font-size: large;
margin-bottom: 15px;
padding: 10px;
}
.basket p,
.favourites p {
position: absolute;
bottom: 5px;
right: 10px;
margin: 0;
font-weight: bold;
}
/*Кнопка опалты в корзине*/
.buy {
position: fixed;
bottom: 20px;
right: 20px;
background-color: greenyellow;
text-align: center;
border: 2px solid black;
border-radius: 10px;
width: 200px;
height: 60px;
display: flex;
transition: background-color 0.3s ease-in-out;
}
.buy a {
font-size: xx-large;
font-weight: bold;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.buy:hover {
background-color: lightgreen;
}
/*Личный кабинет*/
.account-container {
display: flex;
}
.account {
text-align: center;
margin: auto;
/*margin: 50px auto;*/
width: 300px;
padding: 20px;
border: 2px solid black;
border-radius: 15px;
background-color: #f9f9f9;
}
.account img {
width: 150px;
height: 150px;
object-fit: cover;
border-radius: 20px;
border: 3px solid black;
}
.account h3 {
font-weight: bold;
margin-top: 10px;
font-size: x-large;
}
/*Footer*/
footer {
margin-top: 50px;
text-align: center;
font-size: 14px;
}
.contacts {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
}
.contact-item {
display: flex;
align-items: center;
}
.contact-item p {
margin: 0;
}
.contact-item img {
width: 24px;
height: auto;
}
/* Адаптивная верстка */
@media only screen and (min-width: 961px) {
.goods {
justify-content: space-around;
}
.basket,
.favourites {
margin-left: 50px;
}
}
@media only screen and (min-width: 401px) and (max-width: 960px) {
.goods {
justify-content: center;
}
.typeOfOrder{
flex-direction: column;
}
.typeOfOrder h2 {
margin-left: 0;
}
li {
width: 50%;
flex-direction: column;
}
.basket,
.favourites {
margin-left: auto;
margin-right: auto;
}
.basket p,
.favourites p {
position: relative;
display: block;
bottom: -5px;
right: auto;
}
.buy {
width: 150px;
height: 50px;
}
}
@media only screen and (max-width: 400px) {
body {
font-size: 14px;
}
header {
flex-direction: column;
align-items: center;
}
navbar {
position: static;
flex-direction: column;
align-items: center;
gap: 10px;
}
.dropdown:hover .links {
top: 180px;
left: auto;
}
.goods p {
width: 100%;
height: auto;
}
.goods img {
width: 97%;
height: auto;
}
li {
width: auto;
flex-direction: column;
align-items: center;
}
.typeOfOrder{
flex-direction: column;
}
.typeOfOrder h2 {
margin-left: 5;
}
.basket,
.favourites {
width: 100%;
margin-left: auto;
margin-right: auto;
}
ol {
padding-inline-start: 0;
}
.basket p,
.favourites p {
position: relative;
display: block;
bottom: -5px;
}
.buy {
width: 110px;
height: 35px;
}
.buy a {
font-size: x-large;
}
.account {
width: 100%;
}
.contacts {
gap: 2px;
}
}

BIN
images/bananas.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.6 KiB

BIN
images/chery.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 280 KiB

BIN
images/child.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 337 KiB

BIN
images/fork.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

BIN
images/glasses.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 193 KiB

BIN
images/gmail.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 781 B

BIN
images/iron.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.6 KiB

BIN
images/knife.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

BIN
images/logo.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 33 KiB

BIN
images/masha.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 169 KiB

BIN
images/phone.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 595 B

BIN
images/screwdriver.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 49 KiB

BIN
images/skateboard.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 66 KiB

BIN
images/spoon.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

BIN
images/telegram.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
images/vanadiy.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.7 KiB

BIN
images/vk.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 715 B

BIN
images/бананы.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 128 KiB

56
newSite.html Normal file
View File

@@ -0,0 +1,56 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<title>Интернет-магазин</title>
<link rel="stylesheet" href="css/style.css"/>
</head>
<body>
<header>
<img src="images/logo.jpg" alt="'Название магазина'">
<a href="newSite.html"><h1><b>"Название магазина"</b></h1></a>
<navbar>
<div class="dropdown">
<span><b>Навигация ▾</b></span>
<ul class="links">
<li><a href="Basket.html">Корзина</a></li>
<li><a href="Order.html">Заказы</a></li>
<li><a href="Favorites.html">Избранное</a></li>
<li><a href="Account.html">Личный кабинет</a></li>
</ul>
</div>
</navbar>
</header>
<h2>Рекомендуемые товары:</h2>
<div class="goods">
<p><img src="images/iron.jpg">Утюг</p>
<p><img src="images/child.jpg">Ребёнок</p>
<p><img src="images/screwdriver.jpg">Отвертка</p>
<p><img src="images/skateboard.jpg">Скейтборд</p>
<p><img src="images/bananas.jpg">Бананы</p>
</div>
<footer>
<div class="contacts">
<p>Помощь:</p>
<div class="contact-item">
<img src="images/phone.png" alt="Phone">
<p>8 (800)-555-35-35</p>
</div>
<div class="contact-item">
<img src="images/vk.png" alt="VK">
<p>vk.com</p>
</div>
<div class="contact-item">
<img src="images/telegram.png" alt="Telegram">
<p>tg.me</p>
</div>
<div class="contact-item">
<img src="images/gmail.png" alt="Gmail">
<p>ozon-zon-zon@mail.joke</p>
</div>
</div>
<p><img src="images/бананы.jpg"></p>
</footer>
</body>
</html>

BIN
Отчет1.docx Normal file
View File

Binary file not shown.

BIN
Отчет2.docx Normal file
View File

Binary file not shown.