xysiboi/PIbd-23_Baryshev_D.A._InternetProgramming_cyxarukShop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

начало bootstrap

Browse Source
This commit is contained in:
Baryshev Dmitry
2025-05-16 23:18:50 +04:00
parent 1e887a95f4
commit b8882af0da
29 changed files with 253 additions and 1350 deletions
Download Patch File Download Diff File Expand all files Collapse all files

325
basket.css
View File

@@ -1,325 +0,0 @@
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
height: 100%;
}
body {
font-size: 18px;
font-family: sans-serif;
margin: 0;
padding: 0;
overflow: auto;
}
.content {
min-height: 100%;
display: flex;
flex-direction: column;
}
a {
text-decoration: none;
}
a:hover {
color: white;
}
a:visited,
a:link {
color: #dbe2ef;
}
.header {
position: fixed;
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
height: 90px;
background: #112d4e;
color: #dbe2ef;
top: 0;
left: 0;
padding: 0 20px;
z-index: 10;
}
.logo {
display: flex;
align-items: center;
}
.logo img {
width: 60px;
height: 60px;
border-radius: 15px;
}
.header h1 {
font-size: 1.5em;
margin-left: 20px;
}
.menu {
display: flex;
align-items: center;
list-style: none;
}
.menu li {
margin-left: 20px;
position: relative;
}
.features-menu {
display: none;
flex-direction: column;
background: #b2d6ff;
border-radius: 5px;
position: absolute;
top: 40px;
left: 0;
z-index: 1;
padding: 10px 0;
}
.features-menu a {
color: #112d4e;
}
.dropdown:hover .features-menu {
display: flex;
}
.features-menu li {
padding: 10px 20px;
text-align: center;
border-bottom: 1px solid #fff;
}
.features-menu li:last-child {
border-bottom: none;
}
.sad {
flex: 1;
padding-top: 150px;
color: #00264d;
text-align: center;
padding-bottom: 110px;
}
.footer {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
background-color: #00264d;
color: #b2d6ff;
}
.social-container {
display: flex;
align-items: center;
}
.social {
display: flex;
align-items: center;
margin-right: 20px;
}
.social h2, .social h1 {
margin-left: 10px;
}
.contact-info {
text-align: right;
margin-left: auto;
}
/* Мобильные устройства до 400px */
@media (max-width: 400px) {
.header {
flex-direction: column;
align-items: flex-start;
padding: 10px;
height: auto;
}
.logo {
display: flex;
align-items: center;
margin-bottom: 10px;
}
.logo img {
width: 45px;
height: 45px;
margin-left: 0;
margin-right: 10px;
}
.header h1 {
margin: 0;
font-size: 1.2em;
white-space: nowrap;
}
.menu {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
width: 100%;
margin-left: 0;
gap: 5px;
padding-left: 10px;
font-size: smaller;
}
.menu > li {
margin-right: 0;
}
.dropdown .features-menu {
position: absolute;
top: 100%;
left: 0;
background: #b2d6ff;
border-radius: 5px;
display: none;
flex-direction: column;
justify-content: center;
z-index: 1000;
padding: 10px 0;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
.dropdown:hover .features-menu {
display: flex;
flex-direction: column;
}
.sad h1 {
font-size: smaller;
}
.sad img {
width: 90%;
height: auto;
}
.footer {
flex-direction: column;
text-align: center;
font-size: smaller;
padding-bottom: 120px;
flex-shrink: 0;
}
.contact-info {
text-align: center;
margin-top: 10px;
}
}
/* Устройства от 400px до 767px */
@media (min-width: 400px) and (max-width: 767px) {
.header {
flex-direction: column;
align-items: flex-start;
padding: 10px;
height: auto;
}
.logo {
display: flex;
align-items: center;
margin-bottom: 10px;
}
.logo img {
width: 45px;
height: 45px;
}
.header h1 {
margin-left: 10px;
font-size: 1em;
white-space: nowrap;
}
.menu {
flex-wrap: wrap;
justify-content: flex-start;
width: 100%;
gap: 8px;
font-size: 0.85em;
padding-left: 10px;
}
.dropdown .features-menu {
position: static;
background: #b2d6ff;
display: none;
}
.dropdown:hover .features-menu {
display: flex;
flex-direction: column;
}
.sad img {
width: 90%;
height: auto;
}
.footer {
flex-direction: column;
text-align: center;
font-size: smaller;
padding-bottom: 120px;
flex-shrink: 0;
}
.contact-info {
text-align: center;
margin-top: 10px;
}
}
/* Планшеты */
@media (min-width: 768px) and (max-width: 1023px) {
.text-container h2 {
font-size: 2em;
}
.footer {
margin-top: 350px;
}
.sad img {
width: 80%;
height: auto;
}
}
/* Маленькие десктопы */
@media (min-width: 1024px) and (max-width: 1365px) {
.text-container h2 {
font-size: 2.5em;
}
}
/* Большие экраны */
@media (min-width: 1366px) {
.text-container h2 {
font-size: 3em;
}
}

15
basket.html
View File

@@ -4,12 +4,14 @@
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<title>cyxaruk shop catalog</title>
<link rel="stylesheet" href="basket.css" />
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<div class="header">
<a href="main.html" class="logo">
<img src="фотки/cyxaruk shop logo.jpg" alt="сухарик шоп">
<img src="img/cyxaruk shop logo.jpg" alt="сухарик шоп">
<h1>cyxaruk shop</h1>
</a>
<ul class="menu">
@@ -25,27 +27,27 @@
<li><a href="contacts.html">Contacts</a></li>
<li><a href="likes.html">Likes</a></li>
<li><a href="basket.html">
<img src="фотки/basket.png" width="50" height="50" alt="корзина">
<img src="img/basket.png" width="50" height="50" alt="корзина">
</a></li>
</ul>
</div>
<div class="sad">
<h1>Здесь будут лежать твои товары, <br/> а пока здесь так пусто...</h1>
<img src="фотки/sad1.jpg">
<img src="img/sad1.jpg">
</div>
<div class="footer">
<div class="social-container">
<div class="social">
<a href="https://t.me/cyxarukShop">
<img src="фотки/telega.png" width="100" height="100" alt="Telegram">
<img src="img/telega.png" width="100" height="100" alt="Telegram">
</a>
<h2>← also follow us on tg</h2>
</div>
<div class="social">
<a href="https://www.avito.ru/brands/6f43f8798e9eb61c3350f391762e98b3/all/odezhda_obuv_aksessuary?gdlkerfdnwq=101&page_from=from_item_card&iid=3935618105&sellerId=81d843720716be16ce230bba484bce75">
<img src="фотки/avito.png" width="80" height="80" alt="Avito">
<img src="img/avito.png" width="80" height="80" alt="Avito">
</a>
<h1>← and avito</h1>
</div>
@@ -55,5 +57,6 @@
<h2>Ulyanovsk, Russia</h2>
</div>
</div>
<script src="js/bootstrap.bundle.min.js"></script>
</body>
</html>

319
catalog.css
View File

@@ -1,319 +0,0 @@
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-size: 18px;
font-family: sans-serif;
margin: 0;
padding: 0;
height: 100%;
}
.content{
min-height: 100%;
display: flex;
flex-direction: column;
}
.main{
flex: 1 1 auto
}
a {
text-decoration: none;
}
a:hover {
color: white;
}
a:visited,
a:link {
color: #dbe2ef;
}
.header {
position: fixed;
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
height: 90px;
background: #112d4e;
color: #dbe2ef;
top: 0;
left: 0;
padding: 0 20px;
z-index: 10;
}
.logo{
display: flex;
align-items: center;
}
.logo img {
width: 60px;
height: 60px;
border-radius: 15px;
}
.header h1 {
font-size: 1.5em;
margin-left: 20px;
}
.menu {
display: flex;
align-items: center;
list-style: none;
}
.menu li {
margin-left: 20px;
position: relative;
}
.features-menu {
display: none;
flex-direction: column;
background: #b2d6ff;
border-radius: 5px;
position: absolute;
top: 40px;
left: 0;
z-index: 1;
padding: 10px 0;
}
.features-menu a {
color: #112d4e;
}
.dropdown:hover .features-menu {
display: flex;
}
.features-menu li {
padding: 10px 20px;
text-align: center;
border-bottom: 1px solid #fff;
}
.features-menu li:last-child {
border-bottom: none;
}
.card {
padding-top: 100px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
margin: 20px;
text-align: center;
font-family: arial;
}
.price {
color: grey;
font-size: 22px;
}
.card button {
border: none;
outline: 0;
padding: 12px;
color: white;
background-color: #00264d;
text-align: center;
cursor: pointer;
width: 100%;
font-size: 18px;
}
.card button:hover {
opacity: 0.7;
}
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
width: 100%;
justify-content: center;
justify-items: center;
column-gap: 60px;
row-gap: 40px;
margin: 0 auto;
padding-bottom: 50px;
padding-top: 50px;
}
.footer {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
padding: 20px;
background-color: #00264d;
color: #b2d6ff;
}
.social-container {
display: flex;
flex-wrap: wrap;
}
.social {
display: flex;
align-items: center;
margin-right: 20px;
}
.contact-info {
text-align: right;
margin-left: auto;
}
@media (max-width: 400px) {
.header {
flex-direction: column;
align-items: flex-start;
padding: 10px;
height: auto;
}
.logo {
display: flex;
align-items: center;
margin-bottom: 10px;
}
.logo img {
width: 45px;
height: 45px;
margin-left: 0;
margin-right: 10px;
}
.header h1 {
margin: 0;
font-size: 1.2em;
white-space: nowrap;
}
.menu {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
width: 100%;
margin-left: 0;
gap: 5px;
padding-left: 10px;
font-size: smaller
}
.menu > li {
margin-right: 0;
}
.dropdown .features-menu {
position: absolute;
top: 100%;
left: 0;
background: #b2d6ff;
border-radius: 5px;
display: none;
flex-direction: column;
justify-content: center;
z-index: 1000;
padding: 10px 0;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
.dropdown:hover .features-menu {
display: flex;
flex-direction: column;
}
}
@media (min-width: 400px) and (max-width: 767px) {
.header {
flex-direction: column;
align-items: flex-start;
padding: 10px;
height: auto;
}
.logo {
display: flex;
align-items: center;
margin-bottom: 10px;
}
.logo img {
width: 50px;
height: 50px;
margin-left: 0;
margin-right: 10px;
}
.header h1 {
margin: 0;
font-size: 1.2em;
white-space: nowrap;
}
.menu {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
width: 100%;
margin-left: 0;
gap: 10px;
padding-left: 10px;
}
.menu > li {
margin-right: 0;
}
.dropdown .features-menu {
position: absolute;
top: 100%;
left: 0;
background: #b2d6ff;
border-radius: 5px;
display: none;
flex-direction: column;
justify-content: center;
z-index: 1000;
padding: 10px 0;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
.dropdown:hover .features-menu {
display: flex;
flex-direction: column;
}
}
@media (min-width: 768px) and (max-width: 1023px) {
.text-container h2 {
font-size: 2em;
}
}
@media (min-width: 1024px) and (max-width: 1365px) {
.text-container h2 {
font-size: 2.5em;
}
}
@media (min-width: 1366px) {
.text-container h2 {
font-size: 3em;
}
}

25
catalog.html
View File

@@ -4,13 +4,15 @@
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>cyxaruk shop catalog</title>
<link rel="stylesheet" href="catalog.css" />
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<div class="content">
<div class="header">
<a href="main.html" class="logo">
<img src="фотки/cyxaruk shop logo.jpg" alt="сухарик шоп">
<img src="img/cyxaruk shop logo.jpg" alt="сухарик шоп">
<h1>cyxaruk shop</h1>
</a>
@@ -27,7 +29,7 @@
<li><a href="contacts.html">Contacts</a></li>
<li><a href="likes.html">Likes</a></li>
<li><a href="basket.html">
<img src="фотки/basket.png" width="50" height="50" alt="корзина">
<img src="img/basket.png" width="50" height="50" alt="корзина">
</a></li>
</ul>
</div>
@@ -35,7 +37,7 @@
<main class="main">
<div class="cards">
<div class="card">
<img src="фотки/stonik.jpg" alt="Стон" style="width:100%">
<img src="img/stonik.jpg" alt="Стон" style="width:100%">
<h1>Stone Island</h1>
<p class="price">$1999.99</p>
<p>super idol rovny pacan,<br/> groza rayona, mother's modnik,<br/> патч на месте</p>
@@ -43,7 +45,7 @@
</div>
<div class="card">
<img src="фотки/napapisaj.jpg" alt="Напапири" style="width:100%">
<img src="img/napapisaj.jpg" alt="Напапири" style="width:100%">
<h1>Napapisaj</h1>
<p class="price">$1499.99</p>
<p>super idol rovny pacan,<br/> groza rayona, mother's modnik,<br/> +rep from brothers</p>
@@ -51,7 +53,7 @@
</div>
<div class="card">
<img src="фотки/adidas.jpg" alt="адиадс" style="width:100%">
<img src="img/adidas.jpg" alt="адиадс" style="width:100%">
<h1>Adidas</h1>
<p class="price">$19.99</p>
<p>sportik, street,<br/> baskemtball, air, <br>old school</p>
@@ -59,7 +61,7 @@
</div>
<div class="card">
<img src="фотки/fred perry.jpg" alt="перри" style="width:100%">
<img src="img/fred perry.jpg" alt="перри" style="width:100%">
<h1>Fred Perry</h1>
<p class="price">$1299.99</p>
<p>style, nice, <br/>mother's modnik, cotton, <br/>the platypus</p>
@@ -67,7 +69,7 @@
</div>
<div class="card">
<img src="фотки/samba.png" alt="самба" style="width:100%">
<img src="img/samba.png" alt="самба" style="width:100%">
<h1>Adidas Samba</h1>
<p class="price">$449.99</p>
<p>super idol rovny pacan,<br/> groza rayona, mother's modnik,<br/> +rep from brothers</p>
@@ -75,7 +77,7 @@
</div>
<div class="card">
<img src="фотки/lacoste.png" alt="лакост" style="width:100%">
<img src="img/lacoste.png" alt="лакост" style="width:100%">
<h1>Lacoste</h1>
<p class="price">$299.99</p>
<p>style, nice, <br/>mother's modnik, cotton, <br/>krokodil</p>
@@ -88,13 +90,13 @@
<div class="social-container">
<div class="social">
<a href="https://t.me/cyxarukShop">
<img src="фотки/telega.png" width="100" height="100" alt="Telegram">
<img src="img/telega.png" width="100" height="100" alt="Telegram">
</a>
<h2>← also follow us on tg</h2>
</div>
<div class="social">
<a href="https://www.avito.ru/brands/6f43f8798e9eb61c3350f391762e98b3/all/odezhda_obuv_aksessuary?gdlkerfdnwq=101&page_from=from_item_card&iid=3935618105&sellerId=81d843720716be16ce230bba484bce75">
<img src="фотки/avito.png" width="80" height="80" alt="Avito">
<img src="img/avito.png" width="80" height="80" alt="Avito">
</a>
<h1>← and avito</h1>
</div>
@@ -105,5 +107,6 @@
</div>
</div>
</div>
<script src="js/bootstrap.bundle.min.js"></script>
</body>
</html>

213
contacts.css
View File

@@ -1,213 +0,0 @@
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
height: 100%;
font-family: sans-serif;
}
body {
display: flex;
flex-direction: column;
font-size: 18px;
}
.content {
flex: 1;
display: flex;
flex-direction: column;
min-height: 100vh;
}
a {
text-decoration: none;
color: #dbe2ef;
}
a:hover {
color: white;
}
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 90px;
display: flex;
align-items: center;
justify-content: space-between;
background: #112d4e;
color: #dbe2ef;
padding: 0 20px;
z-index: 1000;
}
.logo {
display: flex;
align-items: center;
}
.logo img {
width: 60px;
height: 60px;
border-radius: 15px;
}
.header h1 {
font-size: 1.5em;
margin-left: 20px;
}
.menu {
display: flex;
align-items: center;
list-style: none;
}
.menu li {
margin-left: 20px;
position: relative;
}
.features-menu {
display: none;
flex-direction: column;
background: #b2d6ff;
border-radius: 5px;
position: absolute;
top: 40px;
left: 0;
z-index: 1;
padding: 10px 0;
}
.dropdown:hover .features-menu {
display: flex;
}
.features-menu li {
padding: 10px 20px;
text-align: center;
border-bottom: 1px solid #fff;
}
.features-menu li:last-child {
border-bottom: none;
}
.main {
flex: 1;
padding: 130px 20px 20px;
}
.table-wrapper {
width: 100%;
padding: 100px 10px;
}
table {
width: 100%;
table-layout: fixed;
border-collapse: collapse;
background-color: #f0f8ff;
color: #00264d;
font-size: 1rem;
}
caption {
font-weight: bold;
font-size: 1.2em;
margin-bottom: 10px;
}
th, td {
border: 1px solid #ccc;
padding: 10px;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.footer {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
padding: 20px;
background-color: #00264d;
color: #b2d6ff;
}
.social-container {
display: flex;
align-items: center;
flex-wrap: wrap;
}
.social {
display: flex;
align-items: center;
margin-right: 20px;
}
.social h2, .social h1 {
margin-left: 10px;
}
.contact-info {
text-align: right;
margin-left: auto;
}
@media (max-width: 768px) {
.header {
flex-direction: column;
align-items: flex-start;
height: auto;
padding: 10px;
}
.logo {
margin-bottom: 10px;
}
.logo img {
width: 45px;
height: 45px;
}
.header h1 {
font-size: 1.2em;
margin-left: 10px;
}
.menu {
flex-wrap: wrap;
gap: 5px;
font-size: 0.9em;
}
table {
font-size: 0.85rem;
}
th, td {
padding: 6px;
}
.footer {
flex-direction: column;
text-align: center;
}
.contact-info {
text-align: center;
margin-top: 10px;
}
}

13
contacts.html
View File

@@ -4,13 +4,15 @@
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>cyxaruk shop contacts</title>
<link rel="stylesheet" href="contacts.css" />
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<div class="content">
<header class="header">
<a href="main.html" class="logo">
<img src="фотки/cyxaruk shop logo.jpg" alt="сухарик шоп" />
<img src="img/cyxaruk shop logo.jpg" alt="сухарик шоп" />
<h1>cyxaruk shop</h1>
</a>
<ul class="menu">
@@ -26,7 +28,7 @@
<li><a href="contacts.html">Contacts</a></li>
<li><a href="likes.html">Likes</a></li>
<li><a href="basket.html">
<img src="фотки/basket.png" width="50" height="50" alt="корзина" />
<img src="img/basket.png" width="50" height="50" alt="корзина" />
</a></li>
</ul>
</header>
@@ -71,13 +73,13 @@
<div class="social-container">
<div class="social">
<a href="https://t.me/cyxarukShop">
<img src="фотки/telega.png" width="100" height="100" alt="Telegram" />
<img src="img/telega.png" width="100" height="100" alt="Telegram" />
</a>
<h2>← also follow us on tg</h2>
</div>
<div class="social">
<a href="https://www.avito.ru/brands/6f43f8798e9eb61c3350f391762e98b3/all/odezhda_obuv_aksessuary">
<img src="фотки/avito.png" width="80" height="80" alt="Avito" />
<img src="img/avito.png" width="80" height="80" alt="Avito" />
</a>
<h1>← and avito</h1>
</div>
@@ -88,5 +90,6 @@
</div>
</footer>
</div>
<script src="js/bootstrap.bundle.min.js"></script>
</body>
</html>

7
css/bootstrap.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

320
main.css → css/styles.css
View File

@@ -1,18 +1,24 @@
/* Общие стили */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-size: 18px;
font-family: sans-serif;
margin: 0;
padding: 0;
html, body {
height: 100%;
font-family: sans-serif;
}
.content{
body {
font-size: 18px;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
.content {
min-height: 100%;
display: flex;
flex-direction: column;
@@ -20,17 +26,14 @@ body {
a {
text-decoration: none;
color: #dbe2ef;
}
a:hover {
color: white;
}
a:visited,
a:link {
color: #dbe2ef;
}
/* Шапка */
.header {
position: fixed;
display: flex;
@@ -43,10 +46,10 @@ a:link {
top: 0;
left: 0;
padding: 0 20px;
z-index: 10;
z-index: 1000;
}
.logo{
.logo {
display: flex;
align-items: center;
}
@@ -66,8 +69,6 @@ a:link {
display: flex;
align-items: center;
list-style: none;
position: relative;
z-index: 2;
}
.menu li {
@@ -81,7 +82,7 @@ a:link {
background: #b2d6ff;
border-radius: 5px;
position: absolute;
top: 100%;
top: 40px;
left: 0;
z-index: 1;
padding: 10px 0;
@@ -91,10 +92,6 @@ a:link {
color: #112d4e;
}
.dropdown {
position: relative;
}
.dropdown:hover .features-menu {
display: flex;
}
@@ -109,8 +106,10 @@ a:link {
border-bottom: none;
}
.main{
/* Главная страница */
.main {
flex: 1 1 auto;
padding-top: 90px;
}
.promo-section {
@@ -118,16 +117,16 @@ a:link {
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
padding: 100px 20px 20px;
padding: 20px;
background-color: #f9f9f9;
}
.image-container,
.image-container,
.text-container {
flex: 1 1 300px;
margin: 10px;
text-align: center;
color:#00264d
color: #00264d;
}
.image-container img {
@@ -154,7 +153,7 @@ a:link {
.page {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
padding-bottom: 20px;
padding: 20px;
}
.page img {
@@ -169,16 +168,11 @@ a:link {
background: #eef3f9;
}
.feedback h1 {
text-align: center;
margin-bottom: 20px;
}
.column {
background-color: #b2d6ff;
border-radius: 8px;
padding: 15px;
margin: 20px
margin: 20px;
}
.avatar {
@@ -189,6 +183,91 @@ a:link {
margin-bottom: 10px;
}
/* Каталог */
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
width: 100%;
justify-content: center;
justify-items: center;
column-gap: 60px;
row-gap: 40px;
margin: 0 auto;
padding: 30px 20px 50px;
}
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
text-align: center;
font-family: arial;
}
.price {
color: grey;
font-size: 22px;
}
.card button {
border: none;
outline: 0;
padding: 12px;
color: white;
background-color: #00264d;
text-align: center;
cursor: pointer;
width: 100%;
font-size: 18px;
}
.card button:hover {
opacity: 0.7;
}
/* Контакты */
.table-wrapper {
width: 100%;
padding: 100px 20px 20px;
}
table {
width: 100%;
table-layout: fixed;
border-collapse: collapse;
background-color: #f0f8ff;
color: #00264d;
font-size: 1rem;
}
caption {
font-weight: bold;
font-size: 1.2em;
margin-bottom: 10px;
}
th, td {
border: 1px solid #ccc;
padding: 10px;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Корзина и избранное */
.sad {
flex: 1;
padding: 150px 20px 110px;
color: #00264d;
text-align: center;
}
.sad img {
max-width: 100%;
height: auto;
margin-top: 20px;
}
/* Подвал */
.footer {
display: flex;
flex-wrap: wrap;
@@ -202,6 +281,7 @@ a:link {
.social-container {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.social {
@@ -210,54 +290,50 @@ a:link {
margin-right: 20px;
}
.contact-info {
margin-left: auto;
text-align: right;
.social h2, .social h1 {
margin-left: 10px;
}
.contact-info {
text-align: right;
margin-left: auto;
}
/* Адаптивность */
@media (max-width: 400px) {
.header {
flex-direction: column;
align-items: flex-start;
padding: 10px;
height: auto;
}
.logo {
display: flex;
align-items: center;
}
.logo {
margin-bottom: 10px;
}
.logo img {
}
.logo img {
width: 45px;
height: 45px;
margin-left: 0;
margin-right: 10px;
}
.header h1 {
}
.header h1 {
margin: 0;
font-size: 1.2em;
white-space: nowrap;
}
.menu {
display: flex;
}
.menu {
flex-wrap: wrap;
justify-content: flex-start;
width: 100%;
margin-left: 0;
gap: 5px;
padding-left: 10px;
font-size: smaller
}
.menu > li {
margin-right: 0;
}
.dropdown .features-menu {
font-size: smaller;
}
.dropdown .features-menu {
position: absolute;
top: 100%;
left: 0;
@@ -267,92 +343,72 @@ a:link {
flex-direction: column;
z-index: 1000;
padding: 10px 0;
min-width: 150px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
.dropdown:hover .features-menu {
display: flex;
flex-direction: column;
}
.promo-section{
padding-top: 150px;
}
footer{
font-size: small;
}
.dropdown:hover .features-menu {
display: flex;
}
.promo-section, .table-wrapper {
padding-top: 150px;
}
.sad {
padding-top: 150px;
}
.footer {
flex-direction: column;
text-align: center;
font-size: smaller;
}
.contact-info {
text-align: center;
margin: 10px 0 0;
}
.cards {
padding-top: 75px;
}
}
@media (min-width: 400px) and (max-width: 767px) {
.header {
flex-direction: column;
align-items: flex-start;
padding: 10px;
height: auto;
}
.logo {
display: flex;
align-items: center;
margin-bottom: 10px;
}
.logo img {
width: 50px;
height: 50px;
margin-left: 0;
margin-right: 10px;
}
.header h1 {
margin: 0;
font-size: 1.2em;
white-space: nowrap;
}
.menu {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
width: 100%;
margin-left: 0;
gap: 10px;
padding-left: 10px;
}
.menu > li {
margin-right: 0;
}
.dropdown .features-menu {
position: static;
background: #b2d6ff;
display: none;
}
.dropdown .features-menu {
position: absolute;
top: 100%;
left: 0;
background: #b2d6ff;
border-radius: 5px;
display: none;
flex-direction: column;
justify-content: center;
z-index: 1000;
padding: 10px 0;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
align-items: flex-start;
padding: 10px;
height: auto;
}
.promo-section{
.logo {
margin-bottom: 10px;
}
.logo img {
width: 50px;
height: 50px;
}
.menu {
flex-wrap: wrap;
gap: 8px;
font-size: 0.85em;
}
.promo-section, .table-wrapper {
padding-top: 150px;
}
}
.cards{
padding-top: 100px;
}
.footer {
flex-direction: column;
}
}
@media (min-width: 768px) and (max-width: 1023px) {
.text-container h2 {

0
фотки/adidas.jpg → img/adidas.jpg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 219 KiB

After

Width:  |  Height:  |  Size: 219 KiB

0
фотки/avito.png → img/avito.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 28 KiB

After

Width:  |  Height:  |  Size: 28 KiB

0
фотки/basket.png → img/basket.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 11 KiB

0
фотки/cyxaruk shop logo.jpg → img/cyxaruk shop logo.jpg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 38 KiB

After

Width:  |  Height:  |  Size: 38 KiB

BIN
img/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

0
фотки/fred perry.jpg → img/fred perry.jpg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 259 KiB

After

Width:  |  Height:  |  Size: 259 KiB

0
фотки/lacoste.png → img/lacoste.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.5 MiB

After

Width:  |  Height:  |  Size: 1.5 MiB

0
фотки/napapisaj.jpg → img/napapisaj.jpg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 260 KiB

After

Width:  |  Height:  |  Size: 260 KiB

0
фотки/sad1.jpg → img/sad1.jpg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 18 KiB

After

Width:  |  Height:  |  Size: 18 KiB

0
фотки/sad2.jpeg → img/sad2.jpeg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 131 KiB

After

Width:  |  Height:  |  Size: 131 KiB

0
фотки/samba.png → img/samba.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.2 MiB

After

Width:  |  Height:  |  Size: 1.2 MiB

0
фотки/stonik.jpg → img/stonik.jpg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 313 KiB

After

Width:  |  Height:  |  Size: 313 KiB

0
фотки/telega.png → img/telega.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 30 KiB

After

Width:  |  Height:  |  Size: 30 KiB

0
фотки/шмотки.jpg → img/шмотки.jpg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 200 KiB

After

Width:  |  Height:  |  Size: 200 KiB

0
фотки/шмотки2.jpg → img/шмотки2.jpg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 205 KiB

After

Width:  |  Height:  |  Size: 205 KiB

0
фотки/шмотки3.jpg → img/шмотки3.jpg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 149 KiB

After

Width:  |  Height:  |  Size: 149 KiB

0
фотки/шмотки31.jpg → img/шмотки31.jpg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 276 KiB

After

Width:  |  Height:  |  Size: 276 KiB

7
js/bootstrap.bundle.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

325
likes.css
View File

@@ -1,325 +0,0 @@
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
height: 100%;
}
body {
font-size: 18px;
font-family: sans-serif;
margin: 0;
padding: 0;
overflow: auto;
}
.content {
min-height: 100%;
display: flex;
flex-direction: column;
}
a {
text-decoration: none;
}
a:hover {
color: white;
}
a:visited,
a:link {
color: #dbe2ef;
}
.header {
position: fixed;
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
height: 90px;
background: #112d4e;
color: #dbe2ef;
top: 0;
left: 0;
padding: 0 20px;
z-index: 10;
}
.logo {
display: flex;
align-items: center;
}
.logo img {
width: 60px;
height: 60px;
border-radius: 15px;
}
.header h1 {
font-size: 1.5em;
margin-left: 20px;
}
.menu {
display: flex;
align-items: center;
list-style: none;
}
.menu li {
margin-left: 20px;
position: relative;
}
.features-menu {
display: none;
flex-direction: column;
background: #b2d6ff;
border-radius: 5px;
position: absolute;
top: 40px;
left: 0;
z-index: 1;
padding: 10px 0;
}
.features-menu a {
color: #112d4e;
}
.dropdown:hover .features-menu {
display: flex;
}
.features-menu li {
padding: 10px 20px;
text-align: center;
border-bottom: 1px solid #fff;
}
.features-menu li:last-child {
border-bottom: none;
}
.sad {
flex: 1;
padding-top: 150px;
color: #00264d;
text-align: center;
padding-bottom: 110px;
}
.footer {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
background-color: #00264d;
color: #b2d6ff;
}
.social-container {
display: flex;
align-items: center;
}
.social {
display: flex;
align-items: center;
margin-right: 20px;
}
.social h2, .social h1 {
margin-left: 10px;
}
.contact-info {
text-align: right;
margin-left: auto;
}
/* Мобильные устройства до 400px */
@media (max-width: 400px) {
.header {
flex-direction: column;
align-items: flex-start;
padding: 10px;
height: auto;
}
.logo {
display: flex;
align-items: center;
margin-bottom: 10px;
}
.logo img {
width: 45px;
height: 45px;
margin-left: 0;
margin-right: 10px;
}
.header h1 {
margin: 0;
font-size: 1.2em;
white-space: nowrap;
}
.menu {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
width: 100%;
margin-left: 0;
gap: 5px;
padding-left: 10px;
font-size: smaller;
}
.menu > li {
margin-right: 0;
}
.dropdown .features-menu {
position: absolute;
top: 100%;
left: 0;
background: #b2d6ff;
border-radius: 5px;
display: none;
flex-direction: column;
justify-content: center;
z-index: 1000;
padding: 10px 0;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
.dropdown:hover .features-menu {
display: flex;
flex-direction: column;
}
.sad h1 {
font-size: smaller;
}
.sad img {
width: 90%;
height: auto;
}
.footer {
flex-direction: column;
text-align: center;
font-size: smaller;
padding-bottom: 120px;
flex-shrink: 0;
}
.contact-info {
text-align: center;
margin-top: 10px;
}
}
/* Устройства от 400px до 767px */
@media (min-width: 400px) and (max-width: 767px) {
.header {
flex-direction: column;
align-items: flex-start;
padding: 10px;
height: auto;
}
.logo {
display: flex;
align-items: center;
margin-bottom: 10px;
}
.logo img {
width: 45px;
height: 45px;
}
.header h1 {
margin-left: 10px;
font-size: 1em;
white-space: nowrap;
}
.menu {
flex-wrap: wrap;
justify-content: flex-start;
width: 100%;
gap: 8px;
font-size: 0.85em;
padding-left: 10px;
}
.dropdown .features-menu {
position: static;
background: #b2d6ff;
display: none;
}
.dropdown:hover .features-menu {
display: flex;
flex-direction: column;
}
.sad img {
width: 90%;
height: auto;
}
.footer {
flex-direction: column;
text-align: center;
font-size: smaller;
padding-bottom: 120px;
flex-shrink: 0;
}
.contact-info {
text-align: center;
margin-top: 10px;
}
}
/* Планшеты */
@media (min-width: 768px) and (max-width: 1023px) {
.text-container h2 {
font-size: 2em;
}
.footer {
margin-top: 350px;
}
.sad img {
width: 80%;
height: auto;
}
}
/* Маленькие десктопы */
@media (min-width: 1024px) and (max-width: 1365px) {
.text-container h2 {
font-size: 2.5em;
}
}
/* Большие экраны */
@media (min-width: 1366px) {
.text-container h2 {
font-size: 3em;
}
}

15
likes.html
View File

@@ -4,13 +4,15 @@
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>cyxaruk shop catalog</title>
<link rel="stylesheet" href="likes.css" />
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<div class="content">
<div class="header">
<a href="main.html" class="logo">
<img src="фотки/cyxaruk shop logo.jpg" alt="сухарик шоп">
<img src="img/cyxaruk shop logo.jpg" alt="сухарик шоп">
<h1>cyxaruk shop</h1>
</a>
<ul class="menu">
@@ -26,27 +28,27 @@
<li><a href="contacts.html">Contacts</a></li>
<li><a href="user.html">User</a></li>
<li><a href="basket.html">
<img src="фотки/basket.png" width="50" height="50" alt="корзина">
<img src="img/basket.png" width="50" height="50" alt="корзина">
</a></li>
</ul>
</div>
<div class="sad">
<h1>Здесь будут лежать товары, которые тебе понравились, <br/> а пока здесь так пусто...</h1>
<img src="фотки/sad2.jpeg" width="500" height="300">
<img src="img/sad2.jpeg" width="500" height="300">
</div>
<div class="footer">
<div class="social-container">
<div class="social">
<a href="https://t.me/cyxarukShop">
<img src="фотки/telega.png" width="100" height="100" alt="Telegram">
<img src="img/telega.png" width="100" height="100" alt="Telegram">
</a>
<h2>← also follow us on tg</h2>
</div>
<div class="social">
<a href="https://www.avito.ru/brands/6f43f8798e9eb61c3350f391762e98b3/all/odezhda_obuv_aksessuary?gdlkerfdnwq=101&page_from=from_item_card&iid=3935618105&sellerId=81d843720716be16ce230bba484bce75">
<img src="фотки/avito.png" width="80" height="80" alt="Avito">
<img src="img/avito.png" width="80" height="80" alt="Avito">
</a>
<h1>← and avito</h1>
</div>
@@ -57,5 +59,6 @@
</div>
</div>
</div>
<script src="js/bootstrap.bundle.min.js"></script>
</body>
</html>

19
main.html
View File

@@ -3,14 +3,16 @@
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/styles.css" />
<title>cyxaruk shop</title>
<link rel="stylesheet" href="main.css" />
</head>
<body>
<div class="content">
<div class="header">
<a href="main.html" class="logo">
<img src="фотки/cyxaruk shop logo.jpg" alt="сухарик шоп">
<img src="img/cyxaruk shop logo.jpg" alt="сухарик шоп">
<h1>cyxaruk shop</h1>
</a>
<ul class="menu">
@@ -26,7 +28,7 @@
<li><a href="contacts.html">Contacts</a></li>
<li><a href="likes.html">Likes</a></li>
<li><a href="basket.html">
<img src="фотки/basket.png" width="50" height="50" alt="корзина">
<img src="img/basket.png" width="50" height="50" alt="корзина">
</a></li>
</ul>
</div>
@@ -34,7 +36,7 @@
<main class="main">
<div class="promo-section">
<div class="image-container">
<img src="фотки/шмотки2.jpg" alt="Шмотки">
<img src="img/шмотки2.jpg" alt="Шмотки">
</div>
<div class="text-container">
<h2> <em>Official cyxaruk shop website</em> </h2>
@@ -47,9 +49,9 @@
</div>
<div class="page">
<img src="фотки/шмотки.jpg" alt="шмотки1">
<img src="img/шмотки.jpg" alt="шмотки1">
<img src="фотки/шмотки31.jpg" alt="шмотки2">
<img src="img/шмотки31.jpg" alt="шмотки2">
</div>
@@ -104,13 +106,13 @@
<div class="social-container">
<div class="social">
<a href="https://t.me/cyxarukShop">
<img src="фотки/telega.png" width="100" height="100" alt="Telegram">
<img src="img/telega.png" width="100" height="100" alt="Telegram">
</a>
<h2>← also follow us on tg</h2>
</div>
<div class="social">
<a href="https://www.avito.ru/brands/...">
<img src="фотки/avito.png" width="80" height="80" alt="Avito">
<img src="img/avito.png" width="80" height="80" alt="Avito">
</a>
<h1>← and avito</h1>
</div>
@@ -121,5 +123,6 @@
</div>
</div>
</div>
<script src="js/bootstrap.bundle.min.js"></script>
</body>
</html>