1
0
mirror of https://github.com/Nikotro/First.git synced 2024-12-23 22:52:58 +03:00

Add files via upload

This commit is contained in:
Nikotro 2022-04-10 19:01:28 +03:00 committed by GitHub
parent db369b950b
commit f27dea7b8a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 143 additions and 13 deletions

View File

@ -115,7 +115,8 @@ a{
.heart .heart
{ {
border-right: 1px dotted #999999; content: "";
border-right: 1px dashed #999999;
border-right-width: 1px; border-right-width: 1px;
padding: 0 14px; padding: 0 14px;
@ -237,12 +238,133 @@ a{
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
background-color: #fff;
border-color: #e1e1e1;
text-transform: uppercase;
font-size: 14px;
}
.color
{
width: 196px;
}
.size
{
width: 196px;
}
.selectors select
{
font-size: 13px;
color: #707070;
width: 168px;
height: 35px;
border-radius: 0%;
border-color: #e1e1e1;
padding-left: 12px;
font: inherit;
letter-spacing: inherit;
word-spacing: inherit;
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
}
select:not([multiple]) {
padding-right: 1.2em;
background-repeat: no-repeat;
background-position: calc(100% - 0.25em) 0.8499999999999932em;
background-size: 1.2499999999999991em auto;
background-image: url("../images/icon.png");
}
input[type="number"]
{
-webkit-appearance: textfield;
-moz-appearance: textfield;
appearance: textfield;
}
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button
{
-webkit-appearance: none;
}
input
{
text-align: center;
}
.qty_counter
{
display: flex;
align-items: center;
} }
.buttons
{
display: flex;
flex-direction: column;
border-radius: 0;
border: 1px solid #e1e1e1;
border-left: none;
}
.buttons button
{
border-radius: 0;
border: 0px ;
background-color: #fff;
height: 16.5px;
}
.buttons button:first-child
{
border-bottom: 0.5px solid #e1e1e1;
}
.buttons button:last-child
{
border-top: 0.5px solid #e1e1e1;
}
.count_up {
width: 0;
height: 0;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
border-bottom: 2px solid #cccccc;
}
.count_down {
width: 0;
height: 0;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
border-top: 2px solid #cccccc;
}
.selectors .qty input
{
padding: 5px;
font-size: 13px;
color: #707070;
width: 34px;
height: 33px;
padding: 0;
border-radius: 0;
border: 1px solid #e1e1e1;
}

BIN
images/icon.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

View File

@ -2,6 +2,7 @@
<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">
<script src="https://kit.fontawesome.com/1559834886.js" crossorigin="anonymous"></script> <script src="https://kit.fontawesome.com/1559834886.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/style.css">
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
@ -31,7 +32,7 @@
<div class="link_line"> <div class="link_line">
<div class="container"> <div class="container">
<div class="link_content"> <div class="link_content">
<div class="menu">m</div> <div class="menu"><i class="fa-solid fa-bars"></i></div>
<nav class="nav_group"> <nav class="nav_group">
<a class="nav_link" href="#">home</a> <a class="nav_link" href="#">home</a>
<a class="nav_link" href="#">men</a> <a class="nav_link" href="#">men</a>
@ -41,8 +42,8 @@
<a class="nav_link" href="#">blog</a> <a class="nav_link" href="#">blog</a>
</nav> </nav>
<div class="icons"> <div class="icons">
<div class="heart">h</div> <div class="heart"><i class="fa-regular fa-heart"></i></div>
<div class="search">s</div> <div class="search"><i class="fa-solid fa-magnifying-glass"></i></div>
</div> </div>
</div> </div>
</div> </div>
@ -80,26 +81,33 @@
</div> </div>
</div> </div>
<div class="selectors"> <div class="selectors">
<div class="color"><b>color</b> <div class="color"><b>color</b>
<p><select name="color" size="3"> <p><select name="color">
<option selected value="gray">Gray</option> <option value="" selected hidden>Select Color</option>
<option value="gray">Gray</option>
<option value="black">Black</option> <option value="black">Black</option>
<option value="yellow">Yellow</option> <option value="yellow">Yellow</option>
</select></p> </select></p>
</div> </div>
<div class="size"><b>size</b> <div class="size"><b>size</b>
<p><select name="size" size="3"> <p><select name="size">
<option selected value="51">51</option> <option selected hidden value="">Select Size</option>
<option value="51">51</option>
<option value="54">54</option> <option value="54">54</option>
<option value="60">60</option> <option value="60">60</option>
</select></p></div> </select></p></div>
<div class="qty"><b>qty</b> <div class="qty"><b>qty</b>
<p><select name="qty" size="3"> <div class="qty_counter">
<option selected value="1">1</option> <p><input type="number" name="qty" min="1" max="10" value="1">
<option value="2">2</option> <div class="buttons">
<option value="3">3</option> <button><div class="count_up"></div></button>
</select></p></div> <button><div class="count_down"></div></button>
</div>
</p></div>
</div>
</div> </div>
<div class="product_buttons"></div> <div class="product_buttons"></div>
<div class="share"></div> <div class="share"></div>
</div> </div>