LabWork_02 2.0
This commit is contained in:
parent
193f73aea8
commit
15b4df471a
24
LabWork_02/.gitignore
vendored
Normal file
24
LabWork_02/.gitignore
vendored
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
|
node_modules
|
||||||
|
dist
|
||||||
|
dist-ssr
|
||||||
|
*.local
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.vscode/*
|
||||||
|
!.vscode/extensions.json
|
||||||
|
.idea
|
||||||
|
.DS_Store
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
0
LabWork_02/Report.docx
Normal file
0
LabWork_02/Report.docx
Normal file
@ -1,25 +1,25 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<script src="js/bootstrap.min.js"></script>
|
<script type="module" src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
||||||
<link rel="stylesheet" href="css/bootstrap.min.css">
|
<link href="./node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
|
||||||
<link rel="stylesheet" href="css/all.min.css">
|
<link href="./node_modules/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet"/>
|
||||||
<link href="https://fonts.googleapis.com/css?family=Montserrat:regular,500,600,700,800,900&display=swap" rel="stylesheet" />
|
<link href="https://fonts.googleapis.com/css?family=Montserrat:regular,500,600,700,800,900&display=swap" rel="stylesheet"/>
|
||||||
<link rel="stylesheet" href="css/style.css">
|
<link rel="stylesheet" href="src/css/style.css">
|
||||||
<link rel="stylesheet" href="css/about_us.css">
|
<link rel="favicon" href="public/favicon/favicon.ico">
|
||||||
<link rel="shortcut icon" href="img/logo.png">
|
|
||||||
<title>Bookshelf</title>
|
<title>Bookshelf</title>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div class="wrapper">
|
<div class="wrapper">
|
||||||
|
|
||||||
<header class="header">
|
<header class="header">
|
||||||
<div class="header__container _container">
|
<div class="header__container _container">
|
||||||
<div class="header__logo logo">
|
<div class="header__logo logo">
|
||||||
<div class="logo__img">
|
<div class="logo__img">
|
||||||
<img src="img/logo.png" alt="logo.png">
|
<img src="public/images/logo.png" alt="logo.png">
|
||||||
</div>
|
</div>
|
||||||
<div class="logo__nametag">
|
<div class="logo__nametag">
|
||||||
<div class="nametag__title">Bookshelf</div>
|
<div class="nametag__title">Bookshelf</div>
|
||||||
@ -50,23 +50,21 @@
|
|||||||
</nav>
|
</nav>
|
||||||
<div class="account">
|
<div class="account">
|
||||||
<div class="account__img">
|
<div class="account__img">
|
||||||
<img src="img/avatar.png" alt="avatar.png">
|
<img src="public/images/avatar.png" alt="avatar.png">
|
||||||
</div>
|
</div>
|
||||||
<a class="account__link" href="account.html">My account</a>
|
<a class="account__link" href="account.html">My account</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<main class="main">
|
<main class="main_about">
|
||||||
<div class="main__container _container">
|
<div class="main__container _container">
|
||||||
<div class="main__about">
|
<div class="main__about">
|
||||||
<div class="main__info">
|
<p class="main__about_info">
|
||||||
<p>
|
Welcome to our online library! We are a team of enthusiasts who are committed to making reading accessible to all. We know how important enchantment books are for Minecraft, but due to the variety of types of enchantments and the vastness of their application, even experienced players cannot intelligently choose the enchantments they need.<br>
|
||||||
Welcome to our online library! We are a team of enthusiasts who are committed to making reading accessible to all. We know how important enchantment books are for Minecraft, but due to the variety of types of enchantments and the vastness of their application, even experienced players cannot intelligently choose the enchantments they need.<br>
|
Our goal is to make the possibility of enchanting accessible and convenient for everyone, and our book selector can help you with that. Go to the desired section and select the books you need - that's all you need to do!<br>
|
||||||
Our goal is to make the possibility of enchanting accessible and convenient for everyone, and our book selector can help you with that. Go to the desired section and select the books you need - that's all you need to do!<br>
|
Our app is the only one of its kind. All ideas are patented and copyrighted. Any borrowing or use of materials from our labor must be negotiated with our managers, otherwise a lawsuit will follow in your side.
|
||||||
Our app is the only one of its kind. All ideas are patented and copyrighted. Any borrowing or use of materials from our labor must be negotiated with our managers, otherwise a lawsuit will follow in your side.
|
</p>
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
@ -88,7 +86,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
@ -1,25 +1,26 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<script src="js/bootstrap.min.js"></script>
|
<script type="module" src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
||||||
<link rel="stylesheet" href="css/bootstrap.min.css">
|
<link href="./node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
|
||||||
<link rel="stylesheet" href="css/all.min.css">
|
<link href="./node_modules/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet" />
|
||||||
<link href="https://fonts.googleapis.com/css?family=Montserrat:regular,500,600,700,800,900&display=swap" rel="stylesheet" />
|
<link href="https://fonts.googleapis.com/css?family=Montserrat:regular,500,600,700,800,900&display=swap"
|
||||||
<link rel="stylesheet" href="css/style.css">
|
rel="stylesheet" />
|
||||||
<link rel="stylesheet" href="css/account.css">
|
<link rel="stylesheet" href="src/css/style.css">
|
||||||
<link rel="shortcut icon" href="img/logo.png">
|
<link rel="favicon" href="public/favicon/favicon.ico">
|
||||||
<title>Bookshelf</title>
|
<title>Bookshelf</title>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div class="wrapper">
|
<div class="wrapper">
|
||||||
|
|
||||||
<header class="header">
|
<header class="header">
|
||||||
<div class="header__container _container">
|
<div class="header__container _container">
|
||||||
<div class="header__logo logo">
|
<div class="header__logo logo">
|
||||||
<div class="logo__img">
|
<div class="logo__img">
|
||||||
<img src="img/logo.png" alt="logo.png">
|
<img src="public/images/logo.png" alt="logo.png">
|
||||||
</div>
|
</div>
|
||||||
<div class="logo__nametag">
|
<div class="logo__nametag">
|
||||||
<div class="nametag__title">Bookshelf</div>
|
<div class="nametag__title">Bookshelf</div>
|
||||||
@ -50,7 +51,7 @@
|
|||||||
</nav>
|
</nav>
|
||||||
<div class="account">
|
<div class="account">
|
||||||
<div class="account__img">
|
<div class="account__img">
|
||||||
<img src="img/avatar.png" alt="avatar.png">
|
<img src="public/images/avatar.png" alt="avatar.png">
|
||||||
</div>
|
</div>
|
||||||
<a class="account__link" href="account.html">My account</a>
|
<a class="account__link" href="account.html">My account</a>
|
||||||
</div>
|
</div>
|
||||||
@ -63,7 +64,7 @@
|
|||||||
<h2 class="form__title">Sign in</h2>
|
<h2 class="form__title">Sign in</h2>
|
||||||
<h3 class="form__subtitle">in to your account</h3>
|
<h3 class="form__subtitle">in to your account</h3>
|
||||||
<div class="form__fields fields">
|
<div class="form__fields fields">
|
||||||
<input class="fields__nubmer" type="number" placeholder="Enter your phone number" name="number" id="number">
|
<input class="fields__number" type="number" placeholder="Enter your phone number" name="number" id="number">
|
||||||
<input class="fields__password" type="password" placeholder="Enter your password" name="password" id="password">
|
<input class="fields__password" type="password" placeholder="Enter your password" name="password" id="password">
|
||||||
<input class="fields__password_repeat" type="password" placeholder="Repeat your password" name="password_repeat" id="password_repeat">
|
<input class="fields__password_repeat" type="password" placeholder="Repeat your password" name="password_repeat" id="password_repeat">
|
||||||
<input class="fields__submit" type="submit" value="Sign up" id="submit">
|
<input class="fields__submit" type="submit" value="Sign up" id="submit">
|
||||||
@ -77,132 +78,253 @@
|
|||||||
<div class="cart__column">Price</div>
|
<div class="cart__column">Price</div>
|
||||||
<div class="cart__column">Clear</div>
|
<div class="cart__column">Clear</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="cart__row">
|
<div class="cart__products">
|
||||||
<div class="cart__column">
|
<div class="cart__row">
|
||||||
<div class="cart__name">Protection 3</div>
|
<div class="cart__column">
|
||||||
|
<div class="cart__name">Protection 3</div>
|
||||||
|
</div>
|
||||||
|
<div class="cart__column">
|
||||||
|
<button class="cart__button_decrement" id="button_decrement"
|
||||||
|
onclick="setAmount(this)">-</button>
|
||||||
|
<input class="cart__amount" type="number" id="amount" min="0" max="100" step="1"
|
||||||
|
value="1" readonly>
|
||||||
|
<button class="cart__button_increment" id="button_increment"
|
||||||
|
onclick="setAmount(this)">+</button>
|
||||||
|
</div>
|
||||||
|
<div class="cart__column">
|
||||||
|
<div class="cart__price">150</div>
|
||||||
|
</div>
|
||||||
|
<div class="cart__column">
|
||||||
|
<button class="cart__button_close" id="button_close">x</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="cart__column">
|
<div class="cart__row">
|
||||||
<button class="cart__button_decrement" id="button_decrement" onclick="setAmount(this)">-</button>
|
<div class="cart__column">
|
||||||
<input class="cart__amount" type="number" id="amount" min="0" max="100" step="1" value="1" readonly>
|
<div class="cart__name">Protection 3</div>
|
||||||
<button class="cart__button_increment" id="button_increment" onclick="setAmount(this)">+</button>
|
</div>
|
||||||
|
<div class="cart__column">
|
||||||
|
<button class="cart__button_decrement" id="button_decrement"
|
||||||
|
onclick="setAmount(this)">-</button>
|
||||||
|
<input class="cart__amount" type="number" id="amount" min="0" max="100" step="1"
|
||||||
|
value="1">
|
||||||
|
<button class="cart__button_increment" id="button_increment"
|
||||||
|
onclick="setAmount(this)">+</button>
|
||||||
|
</div>
|
||||||
|
<div class="cart__column">
|
||||||
|
<div class="cart__price">150</div>
|
||||||
|
</div>
|
||||||
|
<div class="cart__column">
|
||||||
|
<button class="cart__button_close" id="button_close">x</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="cart__column">
|
<div class="cart__row">
|
||||||
<div class="cart__price">150</div>
|
<div class="cart__column">
|
||||||
|
<div class="cart__name">Protection 3</div>
|
||||||
|
</div>
|
||||||
|
<div class="cart__column">
|
||||||
|
<button class="cart__button_decrement" id="button_decrement"
|
||||||
|
onclick="setAmount(this)">-</button>
|
||||||
|
<input class="cart__amount" type="number" id="amount" min="0" max="100" step="1"
|
||||||
|
value="1">
|
||||||
|
<button class="cart__button_increment" id="button_increment"
|
||||||
|
onclick="setAmount(this)">+</button>
|
||||||
|
</div>
|
||||||
|
<div class="cart__column">
|
||||||
|
<div class="cart__price">150</div>
|
||||||
|
</div>
|
||||||
|
<div class="cart__column">
|
||||||
|
<button class="cart__button_close" id="button_close">x</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="cart__column">
|
<div class="cart__row">
|
||||||
<button class="cart__button_close" id="button_close">x</button>
|
<div class="cart__column">
|
||||||
|
<div class="cart__name">Protection 3</div>
|
||||||
|
</div>
|
||||||
|
<div class="cart__column">
|
||||||
|
<button class="cart__button_decrement" id="button_decrement"
|
||||||
|
onclick="setAmount(this)">-</button>
|
||||||
|
<input class="cart__amount" type="number" id="amount" min="0" max="100" step="1"
|
||||||
|
value="1">
|
||||||
|
<button class="cart__button_increment" id="button_increment"
|
||||||
|
onclick="setAmount(this)">+</button>
|
||||||
|
</div>
|
||||||
|
<div class="cart__column">
|
||||||
|
<div class="cart__price">150</div>
|
||||||
|
</div>
|
||||||
|
<div class="cart__column">
|
||||||
|
<button class="cart__button_close" id="button_close">x</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="cart__row">
|
||||||
<div class="cart__row">
|
<div class="cart__column">
|
||||||
<div class="cart__column">
|
<div class="cart__name">Protection 3</div>
|
||||||
<div class="cart__name">Protection 3</div>
|
</div>
|
||||||
|
<div class="cart__column">
|
||||||
|
<button class="cart__button_decrement" id="button_decrement"
|
||||||
|
onclick="setAmount(this)">-</button>
|
||||||
|
<input class="cart__amount" type="number" id="amount" min="0" max="100" step="1"
|
||||||
|
value="1">
|
||||||
|
<button class="cart__button_increment" id="button_increment"
|
||||||
|
onclick="setAmount(this)">+</button>
|
||||||
|
</div>
|
||||||
|
<div class="cart__column">
|
||||||
|
<div class="cart__price">150</div>
|
||||||
|
</div>
|
||||||
|
<div class="cart__column">
|
||||||
|
<button class="cart__button_close" id="button_close">x</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="cart__column">
|
<div class="cart__row">
|
||||||
<button class="cart__button_decrement" id="button_decrement" onclick="setAmount(this)">-</button>
|
<div class="cart__column">
|
||||||
<input class="cart__amount" type="number" id="amount" min="0" max="100" step="1" value="1">
|
<div class="cart__name">Protection 3</div>
|
||||||
<button class="cart__button_increment" id="button_increment" onclick="setAmount(this)">+</button>
|
</div>
|
||||||
|
<div class="cart__column">
|
||||||
|
<button class="cart__button_decrement" id="button_decrement"
|
||||||
|
onclick="setAmount(this)">-</button>
|
||||||
|
<input class="cart__amount" type="number" id="amount" min="0" max="100" step="1"
|
||||||
|
value="1">
|
||||||
|
<button class="cart__button_increment" id="button_increment"
|
||||||
|
onclick="setAmount(this)">+</button>
|
||||||
|
</div>
|
||||||
|
<div class="cart__column">
|
||||||
|
<div class="cart__price">150</div>
|
||||||
|
</div>
|
||||||
|
<div class="cart__column">
|
||||||
|
<button class="cart__button_close" id="button_close">x</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="cart__column">
|
<div class="cart__row">
|
||||||
<div class="cart__price">150</div>
|
<div class="cart__column">
|
||||||
|
<div class="cart__name">Protection 3</div>
|
||||||
|
</div>
|
||||||
|
<div class="cart__column">
|
||||||
|
<button class="cart__button_decrement" id="button_decrement"
|
||||||
|
onclick="setAmount(this)">-</button>
|
||||||
|
<input class="cart__amount" type="number" id="amount" min="0" max="100" step="1"
|
||||||
|
value="1">
|
||||||
|
<button class="cart__button_increment" id="button_increment"
|
||||||
|
onclick="setAmount(this)">+</button>
|
||||||
|
</div>
|
||||||
|
<div class="cart__column">
|
||||||
|
<div class="cart__price">150</div>
|
||||||
|
</div>
|
||||||
|
<div class="cart__column">
|
||||||
|
<button class="cart__button_close" id="button_close">x</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="cart__column">
|
<div class="cart__row">
|
||||||
<button class="cart__button_close" id="button_close">x</button>
|
<div class="cart__column">
|
||||||
|
<div class="cart__name">Protection 3</div>
|
||||||
|
</div>
|
||||||
|
<div class="cart__column">
|
||||||
|
<button class="cart__button_decrement" id="button_decrement"
|
||||||
|
onclick="setAmount(this)">-</button>
|
||||||
|
<input class="cart__amount" type="number" id="amount" min="0" max="100" step="1"
|
||||||
|
value="1">
|
||||||
|
<button class="cart__button_increment" id="button_increment"
|
||||||
|
onclick="setAmount(this)">+</button>
|
||||||
|
</div>
|
||||||
|
<div class="cart__column">
|
||||||
|
<div class="cart__price">150</div>
|
||||||
|
</div>
|
||||||
|
<div class="cart__column">
|
||||||
|
<button class="cart__button_close" id="button_close">x</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="cart__row">
|
||||||
<div class="cart__row">
|
<div class="cart__column">
|
||||||
<div class="cart__column">
|
<div class="cart__name">Protection 3</div>
|
||||||
<div class="cart__name">Protection 3</div>
|
</div>
|
||||||
|
<div class="cart__column">
|
||||||
|
<button class="cart__button_decrement" id="button_decrement"
|
||||||
|
onclick="setAmount(this)">-</button>
|
||||||
|
<input class="cart__amount" type="number" id="amount" min="0" max="100" step="1"
|
||||||
|
value="1">
|
||||||
|
<button class="cart__button_increment" id="button_increment"
|
||||||
|
onclick="setAmount(this)">+</button>
|
||||||
|
</div>
|
||||||
|
<div class="cart__column">
|
||||||
|
<div class="cart__price">150</div>
|
||||||
|
</div>
|
||||||
|
<div class="cart__column">
|
||||||
|
<button class="cart__button_close" id="button_close">x</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="cart__column">
|
<div class="cart__row">
|
||||||
<button class="cart__button_decrement" id="button_decrement" onclick="setAmount(this)">-</button>
|
<div class="cart__column">
|
||||||
<input class="cart__amount" type="number" id="amount" min="0" max="100" step="1" value="1">
|
<div class="cart__name">Protection 3</div>
|
||||||
<button class="cart__button_increment" id="button_increment" onclick="setAmount(this)">+</button>
|
</div>
|
||||||
|
<div class="cart__column">
|
||||||
|
<button class="cart__button_decrement" id="button_decrement"
|
||||||
|
onclick="setAmount(this)">-</button>
|
||||||
|
<input class="cart__amount" type="number" id="amount" min="0" max="100" step="1"
|
||||||
|
value="1">
|
||||||
|
<button class="cart__button_increment" id="button_increment"
|
||||||
|
onclick="setAmount(this)">+</button>
|
||||||
|
</div>
|
||||||
|
<div class="cart__column">
|
||||||
|
<div class="cart__price">150</div>
|
||||||
|
</div>
|
||||||
|
<div class="cart__column">
|
||||||
|
<button class="cart__button_close" id="button_close">x</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="cart__column">
|
<div class="cart__row">
|
||||||
<div class="cart__price">150</div>
|
<div class="cart__column">
|
||||||
|
<div class="cart__name">Protection 3</div>
|
||||||
|
</div>
|
||||||
|
<div class="cart__column">
|
||||||
|
<button class="cart__button_decrement" id="button_decrement"
|
||||||
|
onclick="setAmount(this)">-</button>
|
||||||
|
<input class="cart__amount" type="number" id="amount" min="0" max="100" step="1"
|
||||||
|
value="1">
|
||||||
|
<button class="cart__button_increment" id="button_increment"
|
||||||
|
onclick="setAmount(this)">+</button>
|
||||||
|
</div>
|
||||||
|
<div class="cart__column">
|
||||||
|
<div class="cart__price">150</div>
|
||||||
|
</div>
|
||||||
|
<div class="cart__column">
|
||||||
|
<button class="cart__button_close" id="button_close">x</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="cart__column">
|
<div class="cart__row">
|
||||||
<button class="cart__button_close" id="button_close">x</button>
|
<div class="cart__column">
|
||||||
|
<div class="cart__name">Protection 3</div>
|
||||||
|
</div>
|
||||||
|
<div class="cart__column">
|
||||||
|
<button class="cart__button_decrement" id="button_decrement"
|
||||||
|
onclick="setAmount(this)">-</button>
|
||||||
|
<input class="cart__amount" type="number" id="amount" min="0" max="100" step="1"
|
||||||
|
value="1">
|
||||||
|
<button class="cart__button_increment" id="button_increment"
|
||||||
|
onclick="setAmount(this)">+</button>
|
||||||
|
</div>
|
||||||
|
<div class="cart__column">
|
||||||
|
<div class="cart__price">150</div>
|
||||||
|
</div>
|
||||||
|
<div class="cart__column">
|
||||||
|
<button class="cart__button_close" id="button_close">x</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="cart__row">
|
||||||
<div class="cart__row">
|
<div class="cart__column">
|
||||||
<div class="cart__column">
|
<div class="cart__name">Protection 3</div>
|
||||||
<div class="cart__name">Protection 3</div>
|
</div>
|
||||||
</div>
|
<div class="cart__column">
|
||||||
<div class="cart__column">
|
<button class="cart__button_decrement" id="button_decrement"
|
||||||
<button class="cart__button_decrement" id="button_decrement" onclick="setAmount(this)">-</button>
|
onclick="setAmount(this)">-</button>
|
||||||
<input class="cart__amount" type="number" id="amount" min="0" max="100" step="1" value="1">
|
<input class="cart__amount" type="number" id="amount" min="0" max="100" step="1"
|
||||||
<button class="cart__button_increment" id="button_increment" onclick="setAmount(this)">+</button>
|
value="1">
|
||||||
</div>
|
<button class="cart__button_increment" id="button_increment"
|
||||||
<div class="cart__column">
|
onclick="setAmount(this)">+</button>
|
||||||
<div class="cart__price">150</div>
|
</div>
|
||||||
</div>
|
<div class="cart__column">
|
||||||
<div class="cart__column">
|
<div class="cart__price">150</div>
|
||||||
<button class="cart__button_close" id="button_close">x</button>
|
</div>
|
||||||
</div>
|
<div class="cart__column">
|
||||||
</div>
|
<button class="cart__button_close" id="button_close">x</button>
|
||||||
<div class="cart__row">
|
</div>
|
||||||
<div class="cart__column">
|
|
||||||
<div class="cart__name">Protection 3</div>
|
|
||||||
</div>
|
|
||||||
<div class="cart__column">
|
|
||||||
<button class="cart__button_decrement" id="button_decrement" onclick="setAmount(this)">-</button>
|
|
||||||
<input class="cart__amount" type="number" id="amount" min="0" max="100" step="1" value="1">
|
|
||||||
<button class="cart__button_increment" id="button_increment" onclick="setAmount(this)">+</button>
|
|
||||||
</div>
|
|
||||||
<div class="cart__column">
|
|
||||||
<div class="cart__price">150</div>
|
|
||||||
</div>
|
|
||||||
<div class="cart__column">
|
|
||||||
<button class="cart__button_close" id="button_close">x</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="cart__row">
|
|
||||||
<div class="cart__column">
|
|
||||||
<div class="cart__name">Protection 3</div>
|
|
||||||
</div>
|
|
||||||
<div class="cart__column">
|
|
||||||
<button class="cart__button_decrement" id="button_decrement" onclick="setAmount(this)">-</button>
|
|
||||||
<input class="cart__amount" type="number" id="amount" min="0" max="100" step="1" value="1">
|
|
||||||
<button class="cart__button_increment" id="button_increment" onclick="setAmount(this)">+</button>
|
|
||||||
</div>
|
|
||||||
<div class="cart__column">
|
|
||||||
<div class="cart__price">150</div>
|
|
||||||
</div>
|
|
||||||
<div class="cart__column">
|
|
||||||
<button class="cart__button_close" id="button_close">x</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="cart__row">
|
|
||||||
<div class="cart__column">
|
|
||||||
<div class="cart__name">Protection 3</div>
|
|
||||||
</div>
|
|
||||||
<div class="cart__column">
|
|
||||||
<button class="cart__button_decrement" id="button_decrement" onclick="setAmount(this)">-</button>
|
|
||||||
<input class="cart__amount" type="number" id="amount" min="0" max="100" step="1" value="1">
|
|
||||||
<button class="cart__button_increment" id="button_increment" onclick="setAmount(this)">+</button>
|
|
||||||
</div>
|
|
||||||
<div class="cart__column">
|
|
||||||
<div class="cart__price">150</div>
|
|
||||||
</div>
|
|
||||||
<div class="cart__column">
|
|
||||||
<button class="cart__button_close" id="button_close">x</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="cart__row">
|
|
||||||
<div class="cart__column">
|
|
||||||
<div class="cart__name">Protection 3</div>
|
|
||||||
</div>
|
|
||||||
<div class="cart__column">
|
|
||||||
<button class="cart__button_decrement" id="button_decrement" onclick="setAmount(this)">-</button>
|
|
||||||
<input class="cart__amount" type="number" id="amount" min="0" max="100" step="1" value="1">
|
|
||||||
<button class="cart__button_increment" id="button_increment" onclick="setAmount(this)">+</button>
|
|
||||||
</div>
|
|
||||||
<div class="cart__column">
|
|
||||||
<div class="cart__price">150</div>
|
|
||||||
</div>
|
|
||||||
<div class="cart__column">
|
|
||||||
<button class="cart__button_close" id="button_close">x</button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -226,9 +348,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script src="js/script.js"></script>
|
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
0
LabWork_02/admin.html
Normal file
0
LabWork_02/admin.html
Normal file
@ -1,25 +1,25 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<script src="js/bootstrap.min.js"></script>
|
<script type="module" src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
||||||
<link rel="stylesheet" href="css/bootstrap.min.css">
|
<link href="./node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
|
||||||
<link rel="stylesheet" href="css/all.min.css">
|
<link href="./node_modules/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet"/>
|
||||||
<link href="https://fonts.googleapis.com/css?family=Montserrat:regular,500,600,700,800,900&display=swap" rel="stylesheet" />
|
<link href="https://fonts.googleapis.com/css?family=Montserrat:regular,500,600,700,800,900&display=swap" rel="stylesheet"/>
|
||||||
<link rel="stylesheet" href="css/style.css">
|
<link rel="stylesheet" href="src/css/style.css">
|
||||||
<link rel="stylesheet" href="css/armor.css">
|
<link rel="favicon" href="public/favicon/favicon.ico">
|
||||||
<link rel="shortcut icon" href="img/logo.png">
|
|
||||||
<title>Bookshelf</title>
|
<title>Bookshelf</title>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div class="wrapper">
|
<div class="wrapper">
|
||||||
|
|
||||||
<header class="header">
|
<header class="header">
|
||||||
<div class="header__container _container">
|
<div class="header__container _container">
|
||||||
<div class="header__logo logo">
|
<div class="header__logo logo">
|
||||||
<div class="logo__img">
|
<div class="logo__img">
|
||||||
<img src="img/logo.png" alt="logo.png">
|
<img src="public/images/logo.png" alt="logo.png">
|
||||||
</div>
|
</div>
|
||||||
<div class="logo__nametag">
|
<div class="logo__nametag">
|
||||||
<div class="nametag__title">Bookshelf</div>
|
<div class="nametag__title">Bookshelf</div>
|
||||||
@ -50,20 +50,20 @@
|
|||||||
</nav>
|
</nav>
|
||||||
<div class="account">
|
<div class="account">
|
||||||
<div class="account__img">
|
<div class="account__img">
|
||||||
<img src="img/avatar.png" alt="avatar.png">
|
<img src="public/images/avatar.png" alt="avatar.png">
|
||||||
</div>
|
</div>
|
||||||
<a class="account__link" href="account.html">My account</a>
|
<a class="account__link" href="account.html">My account</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<main class="main">
|
<main class="main_armor">
|
||||||
<div class="main__container _container">
|
<div class="main__container _container">
|
||||||
<div class="main__banner banner">
|
<div class="main__banner banner">
|
||||||
<div class="banner__square1"></div>
|
<div class="banner__square1"></div>
|
||||||
<div class="banner__square2">
|
<div class="banner__square2">
|
||||||
<div class="banner__img">
|
<div class="banner__img">
|
||||||
<img src="img/armor.png" alt="armor.png">
|
<img src="public/images/armor.png" alt="armor.png">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -155,7 +155,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="table__cell">
|
<div class="table__cell">
|
||||||
<input class="table__radio" type="radio" name="soul_speed" id="soul_speed2">
|
<input class="table__radio" type="radio" name="soul_speed" id="soul_speed2">
|
||||||
<label for="soul_speed2" class="table__label">Soul Speedn 2</label>
|
<label for="soul_speed2" class="table__label">Soul Speed 2</label>
|
||||||
</div>
|
</div>
|
||||||
<div class="table__cell">
|
<div class="table__cell">
|
||||||
<input class="table__radio" type="radio" name="soul_speed" id="soul_speed1">
|
<input class="table__radio" type="radio" name="soul_speed" id="soul_speed1">
|
||||||
@ -183,7 +183,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
@ -1,25 +1,25 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<script src="js/bootstrap.min.js"></script>
|
<script type="module" src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
||||||
<link rel="stylesheet" href="css/bootstrap.min.css">
|
<link href="./node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
|
||||||
<link rel="stylesheet" href="css/all.min.css">
|
<link href="./node_modules/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet"/>
|
||||||
<link href="https://fonts.googleapis.com/css?family=Montserrat:regular,500,600,700,800,900&display=swap" rel="stylesheet" />
|
<link href="https://fonts.googleapis.com/css?family=Montserrat:regular,500,600,700,800,900&display=swap" rel="stylesheet"/>
|
||||||
<link rel="stylesheet" href="css/style.css">
|
<link rel="stylesheet" href="src/css/style.css">
|
||||||
<link rel="stylesheet" href="css/contact_us.css">
|
<link rel="favicon" href="public/favicon/favicon.ico">
|
||||||
<link rel="shortcut icon" href="img/logo.png">
|
|
||||||
<title>Bookshelf</title>
|
<title>Bookshelf</title>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div class="wrapper">
|
<div class="wrapper">
|
||||||
|
|
||||||
<header class="header">
|
<header class="header">
|
||||||
<div class="header__container _container">
|
<div class="header__container _container">
|
||||||
<div class="header__logo logo">
|
<div class="header__logo logo">
|
||||||
<div class="logo__img">
|
<div class="logo__img">
|
||||||
<img src="img/logo.png" alt="logo.png">
|
<img src="public/images/logo.png" alt="logo.png">
|
||||||
</div>
|
</div>
|
||||||
<div class="logo__nametag">
|
<div class="logo__nametag">
|
||||||
<div class="nametag__title">Bookshelf</div>
|
<div class="nametag__title">Bookshelf</div>
|
||||||
@ -50,14 +50,14 @@
|
|||||||
</nav>
|
</nav>
|
||||||
<div class="account">
|
<div class="account">
|
||||||
<div class="account__img">
|
<div class="account__img">
|
||||||
<img src="img/avatar.png" alt="avatar.png">
|
<img src="public/images/avatar.png" alt="avatar.png">
|
||||||
</div>
|
</div>
|
||||||
<a class="account__link" href="account.html">My account</a>
|
<a class="account__link" href="account.html">My account</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<main class="main">
|
<main class="main_contact">
|
||||||
<div class="main__container _container">
|
<div class="main__container _container">
|
||||||
<div class="main__form form">
|
<div class="main__form form">
|
||||||
<h2 class="form__header">Contact us</h2>
|
<h2 class="form__header">Contact us</h2>
|
||||||
@ -68,10 +68,10 @@
|
|||||||
<input class="fields__submit" type="submit" value="Send message" id="submit">
|
<input class="fields__submit" type="submit" value="Send message" id="submit">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="main__info info">
|
<div class="main__info info_table">
|
||||||
<div class="info__row">
|
<div class="info_table__row">
|
||||||
<div class="info_column">
|
<div class="info_table__column">
|
||||||
<div class="info__banner banner">
|
<div class="info_table__banner banner">
|
||||||
<div class="banner__square1"></div>
|
<div class="banner__square1"></div>
|
||||||
<div class="banner__square2">
|
<div class="banner__square2">
|
||||||
<div class="banner__contacts">
|
<div class="banner__contacts">
|
||||||
@ -81,8 +81,8 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="info_column">
|
<div class="info_table__column">
|
||||||
<div class="info__banner banner">
|
<div class="info_table__banner banner">
|
||||||
<div class="banner__square1"></div>
|
<div class="banner__square1"></div>
|
||||||
<div class="banner__square2">
|
<div class="banner__square2">
|
||||||
<div class="banner__contacts">
|
<div class="banner__contacts">
|
||||||
@ -94,9 +94,9 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="info__row">
|
<div class="info_table__row">
|
||||||
<div class="info_column">
|
<div class="info_table__column">
|
||||||
<div class="info__banner banner">
|
<div class="info_table__banner banner">
|
||||||
<div class="banner__square1"></div>
|
<div class="banner__square1"></div>
|
||||||
<div class="banner__square2">
|
<div class="banner__square2">
|
||||||
<div class="banner__contacts">
|
<div class="banner__contacts">
|
||||||
@ -106,8 +106,8 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="info_column">
|
<div class="info_table__column">
|
||||||
<div class="info__banner banner">
|
<div class="info_table__banner banner">
|
||||||
<div class="banner__square1"></div>
|
<div class="banner__square1"></div>
|
||||||
<div class="banner__square2">
|
<div class="banner__square2">
|
||||||
<div class="banner__contacts">
|
<div class="banner__contacts">
|
||||||
@ -140,7 +140,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
@ -1,20 +0,0 @@
|
|||||||
/* Main */
|
|
||||||
.main__container {
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Info */
|
|
||||||
.main__about {
|
|
||||||
max-width: 1395px;
|
|
||||||
margin-top: 90px;
|
|
||||||
background-color: #2c2a2a;
|
|
||||||
border-radius: 70px;
|
|
||||||
border: solid 5px;
|
|
||||||
border-color: #a721fa;
|
|
||||||
}
|
|
||||||
.main__info {
|
|
||||||
color: #fff;
|
|
||||||
font-size: 32px;
|
|
||||||
padding: 77px 44px;
|
|
||||||
line-height: 1.3;
|
|
||||||
}
|
|
||||||
@ -1,122 +0,0 @@
|
|||||||
/* Main */
|
|
||||||
.main__container {
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Form */
|
|
||||||
.form {
|
|
||||||
height: 600px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
margin-top: 90px;
|
|
||||||
border: solid 5px;
|
|
||||||
border-radius: 70px;
|
|
||||||
border-color: #a721fa;
|
|
||||||
color: #fff;
|
|
||||||
background-color: #2c2a2a;
|
|
||||||
}
|
|
||||||
.form__title {
|
|
||||||
text-align: center;
|
|
||||||
font-size: 24px;
|
|
||||||
font-weight: 800;
|
|
||||||
padding-top: 30px;
|
|
||||||
}
|
|
||||||
.form__subtitle {
|
|
||||||
text-align: center;
|
|
||||||
font-size: 24px;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
.fields {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
margin: 60px 84px 60px 84px;
|
|
||||||
gap: 20px;
|
|
||||||
}
|
|
||||||
@media (max-width: 420px) {
|
|
||||||
.fields {
|
|
||||||
margin: 60px 70px 60px 70px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.fields__nubmer {
|
|
||||||
height: 50px;
|
|
||||||
border-radius: 30px;
|
|
||||||
}
|
|
||||||
.fields__password {
|
|
||||||
height: 50px;
|
|
||||||
border-radius: 30px;
|
|
||||||
}
|
|
||||||
.fields__password_repeat {
|
|
||||||
height: 50px;
|
|
||||||
border-radius: 30px;
|
|
||||||
}
|
|
||||||
.fields__submit {
|
|
||||||
height: 50px;
|
|
||||||
margin-top: 10px;
|
|
||||||
border-radius: 30px;
|
|
||||||
font-size: 20px;
|
|
||||||
font-weight: 600;
|
|
||||||
color: #fff;
|
|
||||||
background-color: #a721fa;
|
|
||||||
}
|
|
||||||
.form__warning {
|
|
||||||
text-align: center;
|
|
||||||
font-size: 10px;
|
|
||||||
font-weight: 400;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Cart */
|
|
||||||
.cart {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
margin-top: 90px;
|
|
||||||
padding: 30px 30px;
|
|
||||||
gap: 10px;
|
|
||||||
border: solid 5px;
|
|
||||||
border-radius: 70px;
|
|
||||||
border-color: #a721fa;
|
|
||||||
color: #fff;
|
|
||||||
background-color: #2c2a2a;
|
|
||||||
}
|
|
||||||
.cart__row_header {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
font-size: 24px;
|
|
||||||
font-weight: 700;
|
|
||||||
}
|
|
||||||
.cart__column {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
width: 200px;
|
|
||||||
height: 50px;
|
|
||||||
}
|
|
||||||
.cart__row {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
font-size: 20px;
|
|
||||||
font-weight: 600;
|
|
||||||
border-radius: 30px;
|
|
||||||
background-color: #363434;
|
|
||||||
}
|
|
||||||
.cart__button_decrement {
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
.cart__amount {
|
|
||||||
-moz-appearance: textfield;
|
|
||||||
text-align: center;
|
|
||||||
font-size: 24px;
|
|
||||||
font-weight: 600;
|
|
||||||
border: none;
|
|
||||||
color: #fff;
|
|
||||||
background-color: #363434;
|
|
||||||
}
|
|
||||||
.cart__button_increment {
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
.cart__button_close {
|
|
||||||
font-size: 30px;
|
|
||||||
font-weight: 800;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
5
LabWork_02/css/all.min.css
vendored
5
LabWork_02/css/all.min.css
vendored
File diff suppressed because one or more lines are too long
@ -1,73 +0,0 @@
|
|||||||
/* Main */
|
|
||||||
.main__container {
|
|
||||||
flex-wrap: nowrap;
|
|
||||||
}
|
|
||||||
@media (max-width: 1000px) {
|
|
||||||
.main__container {
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Image */
|
|
||||||
.banner__square1 {
|
|
||||||
margin-left: 0px;
|
|
||||||
}
|
|
||||||
.banner__square2 {
|
|
||||||
margin-left: 50px;
|
|
||||||
margin-top: 50px;
|
|
||||||
}
|
|
||||||
.banner__img {
|
|
||||||
max-width: 219px;
|
|
||||||
max-height: 436px;
|
|
||||||
transform: scaleX(-1);
|
|
||||||
}
|
|
||||||
@media (max-width: 650px) {
|
|
||||||
.banner__img {
|
|
||||||
max-width: 119px;
|
|
||||||
max-height: 346px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Table */
|
|
||||||
.table {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
margin-top: 90px;
|
|
||||||
margin-left: 160px;
|
|
||||||
gap: 20px;
|
|
||||||
padding: 60px 60px;
|
|
||||||
border: solid 5px;
|
|
||||||
border-radius: 70px;
|
|
||||||
border-color: #a721fa;
|
|
||||||
color: #fff;
|
|
||||||
background-color: #2c2a2a;
|
|
||||||
}
|
|
||||||
@media (max-width: 1000px) {
|
|
||||||
.table {
|
|
||||||
margin: 30px 30px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.table__row {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 20px;
|
|
||||||
border-radius: 30px;
|
|
||||||
background-color: #363434;
|
|
||||||
}
|
|
||||||
.table__radio {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.table__radio:checked + .table__label {
|
|
||||||
background-color: #a721fa;
|
|
||||||
}
|
|
||||||
.table__label {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
width: 120px;
|
|
||||||
height: 50px;
|
|
||||||
font-size: 12px;
|
|
||||||
font-weight: 500;
|
|
||||||
border-radius: 30px;
|
|
||||||
background-color: #fff;
|
|
||||||
}
|
|
||||||
6
LabWork_02/css/bootstrap.min.css
vendored
6
LabWork_02/css/bootstrap.min.css
vendored
File diff suppressed because one or more lines are too long
@ -1,107 +0,0 @@
|
|||||||
/* Main */
|
|
||||||
.main__container {
|
|
||||||
flex-wrap: nowrap;
|
|
||||||
}
|
|
||||||
@media (max-width: 1250px) {
|
|
||||||
.main__container {
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Form */
|
|
||||||
.form {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
margin-top: 90px;
|
|
||||||
border: solid 5px;
|
|
||||||
border-radius: 70px;
|
|
||||||
border-color: #a721fa;
|
|
||||||
color: #fff;
|
|
||||||
background-color: #2c2a2a;
|
|
||||||
}
|
|
||||||
.form__header {
|
|
||||||
text-align: center;
|
|
||||||
font-size: 24px;
|
|
||||||
font-weight: 800;
|
|
||||||
padding-top: 30px;
|
|
||||||
}
|
|
||||||
.fields {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
width: 377px;
|
|
||||||
margin: 60px 84px 60px 84px;
|
|
||||||
gap: 20px;
|
|
||||||
}
|
|
||||||
@media (max-width: 570px) {
|
|
||||||
.fields {
|
|
||||||
width: 300px;
|
|
||||||
margin: 60px 30px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.fields__name {
|
|
||||||
height: 50px;
|
|
||||||
border-radius: 30px;
|
|
||||||
}
|
|
||||||
.fields__email {
|
|
||||||
height: 50px;
|
|
||||||
border-radius: 30px;
|
|
||||||
}
|
|
||||||
.fields__message {
|
|
||||||
height: 260px;
|
|
||||||
border-radius: 30px;
|
|
||||||
}
|
|
||||||
.fields__submit {
|
|
||||||
height: 50px;
|
|
||||||
border-radius: 30px;
|
|
||||||
font-size: 20px;
|
|
||||||
font-weight: 600;
|
|
||||||
color: #fff;
|
|
||||||
background-color: #a721fa;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Contact info */
|
|
||||||
.info {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
margin-top: 90px;
|
|
||||||
gap: 50px;
|
|
||||||
}
|
|
||||||
.info__row {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 50px;
|
|
||||||
}
|
|
||||||
.banner {
|
|
||||||
min-width: 295px;
|
|
||||||
min-height: 295px;
|
|
||||||
}
|
|
||||||
.banner__square1 {
|
|
||||||
min-width: 275px;
|
|
||||||
min-height: 275px;
|
|
||||||
margin-left: 20px;
|
|
||||||
}
|
|
||||||
.banner__square2 {
|
|
||||||
min-width: 275px;
|
|
||||||
min-height: 275px;
|
|
||||||
margin-top: 20px;
|
|
||||||
}
|
|
||||||
.banner__contacts {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
.banner__header {
|
|
||||||
font-size: 24px;
|
|
||||||
font-weight: 700;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
.banner__info {
|
|
||||||
text-align: center;
|
|
||||||
font-size: 20px;
|
|
||||||
font-weight: 500;
|
|
||||||
color: #fff;
|
|
||||||
white-space: normal;
|
|
||||||
margin-top: 10px;
|
|
||||||
}
|
|
||||||
@ -1,56 +0,0 @@
|
|||||||
/* Info */
|
|
||||||
.main__product {
|
|
||||||
max-width: 752px;
|
|
||||||
min-height: 530px;
|
|
||||||
margin-top: 90px;
|
|
||||||
padding-bottom: 30px;
|
|
||||||
}
|
|
||||||
.info__title {
|
|
||||||
color: #a721fa;
|
|
||||||
font-size: 90px;
|
|
||||||
font-weight: 800;
|
|
||||||
}
|
|
||||||
@media (max-width: 767px) {
|
|
||||||
.info__title {
|
|
||||||
margin-top: 30px;
|
|
||||||
font-size: 50px;
|
|
||||||
}
|
|
||||||
}@media (max-width: 479px) {
|
|
||||||
.info__title {
|
|
||||||
font-size: 30px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.info__text {
|
|
||||||
margin-top: 30px;
|
|
||||||
color: #fff;
|
|
||||||
font-size: 25px;
|
|
||||||
font-weight: 500;
|
|
||||||
line-height: 1.3;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Button */
|
|
||||||
.main__button {
|
|
||||||
max-width: 263px;
|
|
||||||
min-height: 60px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
background-color: #a721fa;
|
|
||||||
margin-top: 50px;
|
|
||||||
color: #fff;
|
|
||||||
font-size: 20px;
|
|
||||||
font-weight: 700;
|
|
||||||
border-radius: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Image */
|
|
||||||
.banner__img {
|
|
||||||
max-width: 400px;
|
|
||||||
max-height: 377px;
|
|
||||||
}
|
|
||||||
@media (max-width: 650px) {
|
|
||||||
.banner__img {
|
|
||||||
max-width: 219px;
|
|
||||||
max-height: 177px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,241 +0,0 @@
|
|||||||
.root {
|
|
||||||
--color1: #363434;
|
|
||||||
--color2: #2c2a2a;
|
|
||||||
--color3: #a721fa;
|
|
||||||
}
|
|
||||||
*, *::before, *::after {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
border: 0;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
a {
|
|
||||||
text-decoration: none;
|
|
||||||
color: inherit;
|
|
||||||
transition: .4s;
|
|
||||||
}
|
|
||||||
input {
|
|
||||||
padding-left: 20px;
|
|
||||||
}
|
|
||||||
input::placeholder {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 400;
|
|
||||||
padding-top: 16px;
|
|
||||||
padding-left: 20px;
|
|
||||||
color: #363434;
|
|
||||||
}
|
|
||||||
button {
|
|
||||||
display: block;
|
|
||||||
border: none;
|
|
||||||
background-color: transparent;
|
|
||||||
font: inherit;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: .4s;
|
|
||||||
}
|
|
||||||
ul, ol, li {
|
|
||||||
list-style: none;
|
|
||||||
padding-left: 0;
|
|
||||||
}
|
|
||||||
img {
|
|
||||||
max-width: 100%;
|
|
||||||
max-height: 100%;
|
|
||||||
vertical-align: top;
|
|
||||||
}
|
|
||||||
h1, h2, h3, h4, h5, h6 {
|
|
||||||
font-weight: inherit;
|
|
||||||
font-size: inherit;
|
|
||||||
}
|
|
||||||
html, body {
|
|
||||||
height: 100%;
|
|
||||||
line-height: 1;
|
|
||||||
font-family: Montserrat;
|
|
||||||
background-color: #363434;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wrapper {
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
min-height: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
._container {
|
|
||||||
max-width: 1680px;
|
|
||||||
margin: 0px auto;
|
|
||||||
padding: 0px 15px;
|
|
||||||
box-sizing: content-box;
|
|
||||||
}
|
|
||||||
@media (max-width: 420px) {
|
|
||||||
._container {
|
|
||||||
padding: 0px 0px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Header */
|
|
||||||
.header {
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
background-color: #2c2a2a;
|
|
||||||
}
|
|
||||||
.header__container {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items:center;
|
|
||||||
min-height: 150px;
|
|
||||||
}
|
|
||||||
.header__logo {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
.logo__img {
|
|
||||||
max-width: 100px;
|
|
||||||
max-height: 100px;
|
|
||||||
}
|
|
||||||
.logo__nametag {
|
|
||||||
margin: 0px 0px 0px 30px;
|
|
||||||
line-height: 1.2;
|
|
||||||
}
|
|
||||||
@media (max-width: 992px) {
|
|
||||||
.logo__nametag {
|
|
||||||
margin: 0px 0px 0px 15px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media (max-width: 479px) {
|
|
||||||
.logo__nametag {
|
|
||||||
margin: 0px 0px 0px 0px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.nametag__title {
|
|
||||||
font-size: 50px;
|
|
||||||
font-weight: 700;
|
|
||||||
color: #a721fa;
|
|
||||||
}
|
|
||||||
@media (max-width: 992px) {
|
|
||||||
.nametag__title {
|
|
||||||
font-size: 30px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.nametag__subtitle {
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: 700;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
.nav__list {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
.nav__item:not(:last-child) {
|
|
||||||
margin-right: 50px;
|
|
||||||
}
|
|
||||||
@media (max-width: 479px) {
|
|
||||||
.nav__item.nav__item:not(:last-child) {
|
|
||||||
margin-right: 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.nav__link {
|
|
||||||
color: #fff;
|
|
||||||
font-size: 20px;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
.nav__link:hover {
|
|
||||||
color: #a721fa;
|
|
||||||
}
|
|
||||||
.account {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
.account__img {
|
|
||||||
width: 50px;
|
|
||||||
height: 50px;
|
|
||||||
}
|
|
||||||
.account__link {
|
|
||||||
color: #fff;
|
|
||||||
font-size: 20px;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
.account__link:hover {
|
|
||||||
color: #a721fa;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Main */
|
|
||||||
.main {
|
|
||||||
flex: 1 1 auto;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
.main__container {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
margin-top: 150px;
|
|
||||||
min-height: 830px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Image */
|
|
||||||
.main__banner {
|
|
||||||
min-width: 596px;
|
|
||||||
min-height: 596px;
|
|
||||||
margin-top: 90px;
|
|
||||||
}
|
|
||||||
@media (max-width: 650px) {
|
|
||||||
.main__banner {
|
|
||||||
min-width: 375px;
|
|
||||||
max-height: 375px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.banner__square1 {
|
|
||||||
position: absolute;
|
|
||||||
min-width: 546px;
|
|
||||||
min-height: 546px;
|
|
||||||
margin-left: 50px;
|
|
||||||
background-color: #fff;
|
|
||||||
border-radius: 70px;
|
|
||||||
}
|
|
||||||
@media (max-width: 650px) {
|
|
||||||
.banner__square1 {
|
|
||||||
min-width: 325px;
|
|
||||||
min-height: 325px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.banner__square2 {
|
|
||||||
position: absolute;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
min-width: 546px;
|
|
||||||
min-height: 546px;
|
|
||||||
margin-top: 50px;
|
|
||||||
background-color: #a721fa;
|
|
||||||
border-radius: 70px;
|
|
||||||
border: solid 5px;
|
|
||||||
border-color: #fff;
|
|
||||||
}
|
|
||||||
@media (max-width: 650px) {
|
|
||||||
.banner__square2 {
|
|
||||||
min-width: 325px;
|
|
||||||
min-height: 325px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Footer */
|
|
||||||
.footer {
|
|
||||||
width: 100%;
|
|
||||||
background-color: #2c2a2a;
|
|
||||||
}
|
|
||||||
.footer__container {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
min-height: 100px;
|
|
||||||
}
|
|
||||||
.footer__privacy {
|
|
||||||
color: #fff;
|
|
||||||
font-size: 20px;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
@ -1,25 +1,25 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<script src="js/bootstrap.min.js"></script>
|
<script type="module" src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
||||||
<link rel="stylesheet" href="css/bootstrap.min.css">
|
<link href="./node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
|
||||||
<link rel="stylesheet" href="css/all.min.css">
|
<link href="./node_modules/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet"/>
|
||||||
<link href="https://fonts.googleapis.com/css?family=Montserrat:regular,500,600,700,800,900&display=swap" rel="stylesheet" />
|
<link href="https://fonts.googleapis.com/css?family=Montserrat:regular,500,600,700,800,900&display=swap" rel="stylesheet"/>
|
||||||
<link rel="stylesheet" href="css/style.css">
|
<link rel="stylesheet" href="src/css/style.css">
|
||||||
<link rel="stylesheet" href="css/index.css">
|
<link rel="favicon" href="public/favicon/favicon.ico">
|
||||||
<link rel="shortcut icon" href="img/logo.png">
|
|
||||||
<title>Bookshelf</title>
|
<title>Bookshelf</title>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div class="wrapper">
|
<div class="wrapper">
|
||||||
|
|
||||||
<header class="header">
|
<header class="header">
|
||||||
<div class="header__container _container">
|
<div class="header__container _container">
|
||||||
<div class="header__logo logo">
|
<div class="header__logo logo">
|
||||||
<div class="logo__img">
|
<div class="logo__img">
|
||||||
<img src="img/logo.png" alt="logo.png">
|
<img src="public/images/logo.png" alt="logo.png">
|
||||||
</div>
|
</div>
|
||||||
<div class="logo__nametag">
|
<div class="logo__nametag">
|
||||||
<div class="nametag__title">Bookshelf</div>
|
<div class="nametag__title">Bookshelf</div>
|
||||||
@ -50,27 +50,27 @@
|
|||||||
</nav>
|
</nav>
|
||||||
<div class="account">
|
<div class="account">
|
||||||
<div class="account__img">
|
<div class="account__img">
|
||||||
<img src="img/avatar.png" alt="avatar.png">
|
<img src="public/images/avatar.png" alt="avatar.png">
|
||||||
</div>
|
</div>
|
||||||
<a class="account__link" href="account.html">My account</a>
|
<a class="account__link" href="account.html">My account</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<main class="main">
|
<main class="main_index">
|
||||||
<div class="main__container _container">
|
<div class="main__container _container">
|
||||||
<div class="main__product">
|
<div class="main__product">
|
||||||
<div class="main__info info">
|
<div class="main__info info">
|
||||||
<div class="info__title">The power of enchantments</div>
|
<div class="info__title">The power of enchantments</div>
|
||||||
<div class="info__text">Enchanting is a mechanic that augments armor, tools, weapons, and books with one or more of a variety of "enchantments" that improve an item's existing abilities or imbue them with additional abilities and uses. A special "glint" animation appears on items that are enchanted.</div>
|
<div class="info__text">Enchanting is a mechanic that augments armor, tools, weapons, and books with one or more of a variety of "enchantments" that improve an item's existing abilities or imbue them with additional abilities and uses. A special "glint" animation appears on items that are enchanted.</div>
|
||||||
</div>
|
</div>
|
||||||
<a href="" class="main__button">Start buying</a>
|
<a href="shop.html" class="main__button">Start buying</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="main__banner banner">
|
<div class="main__banner banner">
|
||||||
<div class="banner__square1"></div>
|
<div class="banner__square1"></div>
|
||||||
<div class="banner__square2">
|
<div class="banner__square2">
|
||||||
<div class="banner__img">
|
<div class="banner__img">
|
||||||
<img src="img/book.png" alt="book.png">
|
<img src="public/images/book.png" alt="book.png">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -94,7 +94,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
7
LabWork_02/js/bootstrap.min.js
vendored
7
LabWork_02/js/bootstrap.min.js
vendored
File diff suppressed because one or more lines are too long
@ -1,14 +0,0 @@
|
|||||||
const amount = document.getElementById("amount");
|
|
||||||
function setAmount(btn) {
|
|
||||||
let id = btn.getAttribute("id");
|
|
||||||
let min = amount.getAttribute("min");
|
|
||||||
let max = amount.getAttribute("max");
|
|
||||||
let step = amount.getAttribute("step");
|
|
||||||
let value = amount.getAttribute("value");
|
|
||||||
let calcStep = (id == "button_increment") ? (step * 1) : (step * -1);
|
|
||||||
let newAmount = parseInt(value) + calcStep;
|
|
||||||
|
|
||||||
if (newAmount >= min && newAmount <= max) {
|
|
||||||
amount.setAttribute("value", newAmount);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
2995
LabWork_02/package-lock.json
generated
2995
LabWork_02/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -1,12 +1,21 @@
|
|||||||
{
|
{
|
||||||
"name": "int-prog",
|
"name": "labwork_20",
|
||||||
"version": "1.0.0",
|
"private": true,
|
||||||
"main": "index.html",
|
"version": "0.0.0",
|
||||||
"scripts": {
|
"type": "module",
|
||||||
"start": "http-server -p 3000",
|
"scripts": {
|
||||||
"test": "echo \"Error: no test specified\" && exit 1"
|
"start": "vite",
|
||||||
},
|
"serve": "http-server -p 3000 ./dist/",
|
||||||
"devDependencies": {
|
"build": "vite build",
|
||||||
"http-server": "14.1.1"
|
"prod": "npm-run-all build serve"
|
||||||
}
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"bootstrap": "5.3.2",
|
||||||
|
"@fortawesome/fontawesome-free": "6.4.2"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"http-server": "14.1.1",
|
||||||
|
"vite": "4.4.9",
|
||||||
|
"npm-run-all": "4.1.5"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
BIN
LabWork_02/public/favicon/favicon.ico
Normal file
BIN
LabWork_02/public/favicon/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.9 KiB |
|
Before Width: | Height: | Size: 125 KiB After Width: | Height: | Size: 125 KiB |
|
Before Width: | Height: | Size: 1.0 KiB After Width: | Height: | Size: 1.0 KiB |
|
Before Width: | Height: | Size: 9.9 KiB After Width: | Height: | Size: 9.9 KiB |
BIN
LabWork_02/public/images/bookshelf.png
Normal file
BIN
LabWork_02/public/images/bookshelf.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
|
Before Width: | Height: | Size: 8.2 KiB After Width: | Height: | Size: 8.2 KiB |
|
Before Width: | Height: | Size: 606 B After Width: | Height: | Size: 606 B |
104
LabWork_02/shop.html
Normal file
104
LabWork_02/shop.html
Normal file
@ -0,0 +1,104 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<script type="module" src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
||||||
|
<link href="./node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
|
||||||
|
<link href="./node_modules/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet"/>
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Montserrat:regular,500,600,700,800,900&display=swap" rel="stylesheet"/>
|
||||||
|
<link rel="stylesheet" href="src/css/style.css">
|
||||||
|
<link rel="favicon" href="public/favicon/favicon.ico">
|
||||||
|
<title>Bookshelf</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div class="wrapper">
|
||||||
|
<header class="header">
|
||||||
|
<div class="header__container _container">
|
||||||
|
<div class="header__logo logo">
|
||||||
|
<div class="logo__img">
|
||||||
|
<img src="public/images/logo.png" alt="logo.png">
|
||||||
|
</div>
|
||||||
|
<div class="logo__nametag">
|
||||||
|
<div class="nametag__title">Bookshelf</div>
|
||||||
|
<div class="nametag__subtitle">Online-library</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<nav class="header__nav nav">
|
||||||
|
<ul class="nav__list">
|
||||||
|
<li class="nav__item">
|
||||||
|
<a href="index.html" class="nav__link">Home</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav__item">
|
||||||
|
<a href="armor.html" class="nav__link">Armor</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav__item">
|
||||||
|
<a href="" class="nav__link">Tools</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav__item">
|
||||||
|
<a href="" class="nav__link">Sword</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav__item">
|
||||||
|
<a href="" class="nav__link">Bow</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav__item">
|
||||||
|
<a href="" class="nav__link">Trident</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
<div class="account">
|
||||||
|
<div class="account__img">
|
||||||
|
<img src="public/images/avatar.png" alt="avatar.png">
|
||||||
|
</div>
|
||||||
|
<a class="account__link" href="account.html">My account</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main class="main_shop">
|
||||||
|
<div class="main__container _container">
|
||||||
|
<div class="main__banner banner">
|
||||||
|
<div class="banner__square1"></div>
|
||||||
|
<div class="banner__square2">
|
||||||
|
<div class="banner__img">
|
||||||
|
<img src="public/images/bookshelf.png" alt="armor.png">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="main__shop_form form">
|
||||||
|
<h2 class="form__title">Enter the title</h2>
|
||||||
|
<h3 class="form__subtitle">and we will find your book</h3>
|
||||||
|
<div class="form__fields fields">
|
||||||
|
<input class="fields__name" type="text" placeholder="Enter the title of the book" name="name" id="name">
|
||||||
|
<input class="fields__price" type="number" placeholder="Enter the price of the book" name="password" id="password">
|
||||||
|
<input class="fields__amount" type="number" placeholder="Enter the amount of books" name="amount" id="amount">
|
||||||
|
<input class="fields__submit" type="submit" value="Buy books" id="submit">
|
||||||
|
<div class="form__warning">With rare exceptions, our library may<br/>not contain the desired book.</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer class="footer">
|
||||||
|
<div class="footer__container _container">
|
||||||
|
<nav class="footer__nav nav">
|
||||||
|
<ul class="nav__list">
|
||||||
|
<li class="nav__item">
|
||||||
|
<a href="about_us.html" class="nav__link">About us</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav__item">
|
||||||
|
<a href="contact_us.html" class="nav__link">Contact us</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
<div class="footer__privacy">
|
||||||
|
© made by Factorino. All rights reserved.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
727
LabWork_02/src/css/style.css
Normal file
727
LabWork_02/src/css/style.css
Normal file
@ -0,0 +1,727 @@
|
|||||||
|
/* Обнуление стилей */
|
||||||
|
*, *::before, *::after {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
border: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: inherit;
|
||||||
|
transition: .4s;
|
||||||
|
}
|
||||||
|
input {
|
||||||
|
padding-left: 20px;
|
||||||
|
}
|
||||||
|
input[type="number"]::-webkit-inner-spin-button,
|
||||||
|
input[type="number"]::-webkit-outer-spin-button {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
input::placeholder {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 400;
|
||||||
|
padding-top: 16px;
|
||||||
|
padding-left: 20px;
|
||||||
|
color: #363434;
|
||||||
|
}
|
||||||
|
button {
|
||||||
|
display: block;
|
||||||
|
border: none;
|
||||||
|
background-color: transparent;
|
||||||
|
font: inherit;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: .4s;
|
||||||
|
}
|
||||||
|
ul, ol, li {
|
||||||
|
list-style: none;
|
||||||
|
padding-left: 0;
|
||||||
|
margin: 0px;
|
||||||
|
}
|
||||||
|
img {
|
||||||
|
max-width: 100%;
|
||||||
|
max-height: 100%;
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
h1, h2, h3, h4, h5, h6 {
|
||||||
|
font-weight: inherit;
|
||||||
|
font-size: inherit;
|
||||||
|
}
|
||||||
|
html, body {
|
||||||
|
height: 100%;
|
||||||
|
line-height: 1;
|
||||||
|
font-family: Montserrat;
|
||||||
|
background-color: #363434;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Полоса прокрутки */
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
width: 7px;
|
||||||
|
}
|
||||||
|
::-webkit-scrollbar-track {
|
||||||
|
background-color: #2c2a2a;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Обёртка */
|
||||||
|
.wrapper {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
min-height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
._container {
|
||||||
|
max-width: 1680px;
|
||||||
|
margin: 0px auto;
|
||||||
|
padding: 0px 15px;
|
||||||
|
box-sizing: content-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* Шапка */
|
||||||
|
/* Обертка шапки */
|
||||||
|
.header {
|
||||||
|
background-color: #2c2a2a;
|
||||||
|
padding: 20px 0;
|
||||||
|
}
|
||||||
|
.header__container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Логотип шапки */
|
||||||
|
.logo {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.logo__img img {
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
}
|
||||||
|
.logo__nametag {
|
||||||
|
margin-left: 30px;
|
||||||
|
}
|
||||||
|
/* Название логотипа */
|
||||||
|
.nametag__title {
|
||||||
|
font-size: 50px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #a721fa;
|
||||||
|
}
|
||||||
|
.nametag__subtitle {
|
||||||
|
font-size: 16px;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Навигация шапки */
|
||||||
|
.nav__list {
|
||||||
|
margin: 0px 10px;
|
||||||
|
display: flex;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.header *> .nav__item {
|
||||||
|
display: inline-block;;
|
||||||
|
width: calc(1/6 * 100%);
|
||||||
|
}
|
||||||
|
.nav__item:not(:last-child) {
|
||||||
|
margin-right: 20px;
|
||||||
|
}
|
||||||
|
.nav__link {
|
||||||
|
text-decoration: none;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
.nav__link:hover {
|
||||||
|
color: #a721fa;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Личный кабинет */
|
||||||
|
.account {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.account__img img {
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
.account__link {
|
||||||
|
text-decoration: none;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
.account__link:hover {
|
||||||
|
color: #a721fa;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Адаптив шапки */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.header__container {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nametag__title {
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header *> .nav {
|
||||||
|
margin: 10px 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header *> .nav__list {
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 20%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header *> .nav__item:not(:last-child) {
|
||||||
|
margin-right: 0px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav__link {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.account__link {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* Футер */
|
||||||
|
/* Обертка футера */
|
||||||
|
.footer {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
width: 100%;
|
||||||
|
padding: 30px 0px;
|
||||||
|
background-color: #2c2a2a;
|
||||||
|
}
|
||||||
|
.footer__container {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Права */
|
||||||
|
.footer__privacy {
|
||||||
|
color: #fff;
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Адаптив футера */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.footer {
|
||||||
|
padding: 10px 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer__container {
|
||||||
|
flex-direction: column;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer *> .nav__item {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer__privacy {
|
||||||
|
font-size: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* Основной контент */
|
||||||
|
/* Обертка основного контента */
|
||||||
|
.main__container {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
padding: 150px 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Баннер */
|
||||||
|
.banner {
|
||||||
|
width: 30%;
|
||||||
|
min-width: 300px;
|
||||||
|
min-height: 300px;
|
||||||
|
padding-bottom: 30%;
|
||||||
|
margin-bottom: 50px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.banner__square1, .banner__square2 {
|
||||||
|
width: 90%;
|
||||||
|
height: 90%;
|
||||||
|
border-radius: 12%;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
.banner__square1 {
|
||||||
|
right: 0;
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
.banner__square2 {
|
||||||
|
bottom: 0;
|
||||||
|
border: 5px solid #fff;
|
||||||
|
background-color: #a721fa;
|
||||||
|
}
|
||||||
|
.banner__img {
|
||||||
|
padding: 12%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Адаптив основного контента */
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
.main__container {
|
||||||
|
padding: 50px 15px;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* Home page (index) */
|
||||||
|
/* Информация */
|
||||||
|
.main__product {
|
||||||
|
width: 45%;
|
||||||
|
margin-right: 300px;
|
||||||
|
}
|
||||||
|
.info__title {
|
||||||
|
color: #a721fa;
|
||||||
|
font-size: 90px;
|
||||||
|
font-weight: 800;
|
||||||
|
}
|
||||||
|
.info__text {
|
||||||
|
width: 85%;
|
||||||
|
margin-top: 30px;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 25px;
|
||||||
|
font-weight: 500;
|
||||||
|
line-height: 1.3;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Кнопка */
|
||||||
|
.main__button {
|
||||||
|
width: 263px;
|
||||||
|
height: 60px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
background-color: #a721fa;
|
||||||
|
margin-top: 50px;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 700;
|
||||||
|
border-radius: 30px;
|
||||||
|
}
|
||||||
|
.main__button:hover {
|
||||||
|
transform: translateY(-3px);
|
||||||
|
box-shadow: 10px 10px rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
.main__button:active {
|
||||||
|
transform: translateY(-1px);
|
||||||
|
box-shadow: 10px 10px rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
/* Баннер */
|
||||||
|
.main_index *> .banner__square2 {
|
||||||
|
box-shadow: 10px -10px 10px 10px rgba(0, 0, 0, .2);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Адаптив главной страницы */
|
||||||
|
@media (max-width: 1240px) {
|
||||||
|
.main__button {
|
||||||
|
margin: 50px auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.main__product {
|
||||||
|
width: 100%;
|
||||||
|
margin-right: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info__title {
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info__text {
|
||||||
|
width: 100%;
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* Armor page */
|
||||||
|
/* Баннер */
|
||||||
|
.main_armor *> .banner__square1 {
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
.main_armor *> .banner__square2 {
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
box-shadow: -10px -10px 10px 10px rgba(0, 0, 0, .2);
|
||||||
|
}
|
||||||
|
.main_armor *> .banner__img {
|
||||||
|
width: 65%;
|
||||||
|
margin: 0 auto;
|
||||||
|
transform: scaleX(-1);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Таблица */
|
||||||
|
.table {
|
||||||
|
width: 50%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 20px;
|
||||||
|
padding: 3%;
|
||||||
|
border: solid 5px #a721fa;
|
||||||
|
border-radius: 70px;
|
||||||
|
color: #fff;
|
||||||
|
background-color: #2c2a2a;
|
||||||
|
}
|
||||||
|
.table__row {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 20px;
|
||||||
|
border-radius: 30px;
|
||||||
|
background-color: #363434;
|
||||||
|
}
|
||||||
|
.table__cell {
|
||||||
|
width: 17%;
|
||||||
|
}
|
||||||
|
.table__radio {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.table__radio:checked + .table__label {
|
||||||
|
background-color: #a721fa;
|
||||||
|
}
|
||||||
|
.table__label {
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 2.5;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 500;
|
||||||
|
border-radius: 30px;
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Адаптив Armor page */
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
.table {
|
||||||
|
width: 100%;
|
||||||
|
margin-bottom: 50px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.table {
|
||||||
|
border-radius: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table__row {
|
||||||
|
border-radius: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table__label {
|
||||||
|
height: 100%;
|
||||||
|
line-height: 1.5;
|
||||||
|
word-wrap: break-word;
|
||||||
|
font-size: 10px;
|
||||||
|
border-radius: 15px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* Account page */
|
||||||
|
/* Форма регистрации */
|
||||||
|
.form__title {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: 800;
|
||||||
|
padding-top: 30px;
|
||||||
|
}
|
||||||
|
.form__subtitle {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
.fields__number,
|
||||||
|
.fields__password,
|
||||||
|
.fields__password_repeat {
|
||||||
|
padding: 15px;
|
||||||
|
border-radius: 30px;
|
||||||
|
}
|
||||||
|
.form__warning {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 10px;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Корзина покупок */
|
||||||
|
.cart {
|
||||||
|
width: 50%;
|
||||||
|
padding: 3% 3%;
|
||||||
|
border: solid 5px #a721fa;
|
||||||
|
border-radius: 70px;
|
||||||
|
color: #fff;
|
||||||
|
background-color: #2c2a2a;
|
||||||
|
}
|
||||||
|
.cart__products {
|
||||||
|
max-height: 550px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
overflow-y: auto;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
.cart__row_header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
.cart__row {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 600;
|
||||||
|
border-radius: 30px;
|
||||||
|
background-color: #363434;
|
||||||
|
}
|
||||||
|
.cart__column {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
width: 25%;
|
||||||
|
height: 50px;
|
||||||
|
}
|
||||||
|
/* Индикатор количества товаров */
|
||||||
|
.cart__button_decrement {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.cart__amount {
|
||||||
|
-moz-appearance: textfield;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: 600;
|
||||||
|
border: none;
|
||||||
|
color: #fff;
|
||||||
|
background-color: #363434;
|
||||||
|
}
|
||||||
|
.cart__button_increment {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.cart__button_close {
|
||||||
|
font-size: 30px;
|
||||||
|
font-weight: 800;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Адаптив Account page */
|
||||||
|
@media (max-width: 1240px) {
|
||||||
|
.cart {
|
||||||
|
width: 100%;
|
||||||
|
margin-bottom: 50px;
|
||||||
|
border-radius: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cart__row {
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cart__name {
|
||||||
|
font-size: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cart__row_header {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cart__amount {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cart__button_close {
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* Shop page */
|
||||||
|
/* Баннер */
|
||||||
|
.main_shop *> .banner__square1 {
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
.main_shop *> .banner__square2 {
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
box-shadow: -10px -10px 10px 10px rgba(0, 0, 0, .2);
|
||||||
|
}
|
||||||
|
.main_shop *> .banner__img {
|
||||||
|
width: 100%;
|
||||||
|
margin: 3% 0% 0% -3%;
|
||||||
|
transform: scaleX(-1);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Форма выбора книги */
|
||||||
|
.main_shop *> .form {
|
||||||
|
margin-right: 0px;
|
||||||
|
}
|
||||||
|
.fields__name,
|
||||||
|
.fields__price,
|
||||||
|
.fields__amount {
|
||||||
|
padding: 15px;
|
||||||
|
border-radius: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* About us page */
|
||||||
|
/* Информация */
|
||||||
|
.main__about_info {
|
||||||
|
width: 80%;
|
||||||
|
margin: 0 auto;
|
||||||
|
background-color: #2c2a2a;
|
||||||
|
border: 5px solid #a721fa;
|
||||||
|
border-radius: 70px;
|
||||||
|
font-size: 32px;
|
||||||
|
padding: 77px 44px;
|
||||||
|
line-height: 1.3;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Адаптив About us page */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.main__about_info {
|
||||||
|
width: 100%;
|
||||||
|
margin-bottom: 50px;
|
||||||
|
padding: 30px 20px;
|
||||||
|
border-radius: 30px;
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* Contact us page */
|
||||||
|
/* Контактная форма */
|
||||||
|
.form {
|
||||||
|
width: 28%;
|
||||||
|
max-width: 550px;
|
||||||
|
margin-right: 50px;
|
||||||
|
border: solid 5px #a721fa;
|
||||||
|
border-radius: 70px;
|
||||||
|
color: #fff;
|
||||||
|
background-color: #2c2a2a;
|
||||||
|
}
|
||||||
|
.form__header {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: 800;
|
||||||
|
padding-top: 30px;
|
||||||
|
}
|
||||||
|
.fields {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
margin: 11% 15%;
|
||||||
|
gap: 20px;
|
||||||
|
}
|
||||||
|
.fields__name,
|
||||||
|
.fields__email {
|
||||||
|
padding: 15px;
|
||||||
|
border-radius: 30px;
|
||||||
|
}
|
||||||
|
.fields__message {
|
||||||
|
padding-top: 15px;
|
||||||
|
padding-bottom: 200px;
|
||||||
|
border-radius: 30px;
|
||||||
|
}
|
||||||
|
.fields__submit {
|
||||||
|
margin-top: 20px;
|
||||||
|
padding: 15px;
|
||||||
|
border-radius: 30px;
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #fff;
|
||||||
|
background-color: #a721fa;
|
||||||
|
}
|
||||||
|
.fields__submit:hover {
|
||||||
|
transform: translateY(-3px);
|
||||||
|
box-shadow: 10px 10px rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
.fields__submit:active {
|
||||||
|
transform: translateY(-1px);
|
||||||
|
box-shadow: 10px 10px rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Контактная информация */
|
||||||
|
.info_table {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 50px;
|
||||||
|
}
|
||||||
|
.info_table__row {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 50px;
|
||||||
|
}
|
||||||
|
.banner__contacts {
|
||||||
|
margin: 25% 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.main_contact *> .banner__square2 {
|
||||||
|
box-shadow: 5px -5px 10px 19px rgba(0, 0, 0, .2);
|
||||||
|
}
|
||||||
|
.banner__header {
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.banner__info {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #fff;
|
||||||
|
white-space: normal;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Адаптив Contact us page */
|
||||||
|
@media (max-width: 1180px) {
|
||||||
|
.form {
|
||||||
|
width: 100%;
|
||||||
|
margin-right: 0px;
|
||||||
|
margin-bottom: 50px;
|
||||||
|
border-radius: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info_table {
|
||||||
|
gap: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info_table__row {
|
||||||
|
gap: 25px;
|
||||||
|
}
|
||||||
|
}
|
||||||
0
LabWork_02/src/js/main.js
Normal file
0
LabWork_02/src/js/main.js
Normal file
17
LabWork_02/vite.config.js
Normal file
17
LabWork_02/vite.config.js
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
import { resolve } from 'path'
|
||||||
|
import { defineConfig } from 'vite'
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
build: {
|
||||||
|
rollupOptions: {
|
||||||
|
input: {
|
||||||
|
main: resolve(__dirname, 'index.html'),
|
||||||
|
armor: resolve(__dirname, 'armor.html'),
|
||||||
|
account: resolve(__dirname, 'account.html'),
|
||||||
|
shop: resolve(__dirname, 'shop.html'),
|
||||||
|
about: resolve(__dirname, 'about_us.html'),
|
||||||
|
contact: resolve(__dirname, 'contact_us.html')
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
})
|
||||||
Loading…
Reference in New Issue
Block a user