Nikotro/First
1
0
Fork 0
mirror of https://github.com/Nikotro/First.git synced 2024-12-24 15:04:38 +03:00
Code Issues Projects Releases Wiki Activity

rename

Browse Source
This commit is contained in:
Nikita Senev 2022-04-16 16:51:02 +03:00
parent 49fb858b2a
commit 5628e5abdc
2 changed files with 181 additions and 128 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

215
css/style.css
View File

@ -10,57 +10,71 @@ body {
a { a {
color: #000; color: #000;
text-decoration: none; text-decoration: none;
position: relative;
} }
.container { .container {
padding-top: 50px;
width: 100%; width: 100%;
max-width: 1150px; max-width: 1150px;
display: flex;
margin: 0 auto; margin: 0 auto;
box-sizing: border-box; box-sizing: border-box;
} }
.welcome { .header-welcome {
width: 100%; width: 100%;
height: 30px; height: 30px;
background-color: #d9e1e6; background-color: #d9e1e6;
color: #868f93; color: #868f93;
} }
.close { .header-welcome__close {
float: right; float: right;
padding-right: 5px; padding-right: 5px;
font-size: 100%; font-size: 100%;
font-weight: 600; font-weight: 600;
} }
.welcome_msg { .header-welcome__msg {
line-height: 30px; line-height: 30px;
max-width: 1150px;
margin-left: auto;
margin-right: auto;
text-align: center; text-align: center;
font-size: 10px; font-size: 10px;
text-transform: uppercase; text-transform: uppercase;
} }
/*logo line*/ /*logo line*/
.logo_line { .header-line {
height: 97px; height: 97px;
text-transform: uppercase; text-transform: uppercase;
color: #000; color: #000;
display: flex; display: flex;
justify-content: center; justify-content: space-evenly;
align-items: center; align-items: center;
margin-left: auto;
margin-right: auto;
column-gap: 25px; column-gap: 25px;
border-bottom: 2px solid #e1e1e1;
}
.header-line:last-child
{
height: 70px;
} }
.logo { .header-line__logo {
font-size: 24px; font-size: 24px;
font-family: 'Intro demo'; font-family: 'Intro demo';
} }
.cart { .header-line__cart {
line-height: 40px; line-height: 40px;
border: 2px solid; border: 2px solid;
font-size: 12px; font-size: 12px;
@ -80,12 +94,16 @@ a {
.link_content { .link_content {
display: flex; display: flex;
width: 100%;
max-width: 1150px;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-left: auto;
margin-right: auto;
width: 100%; width: 100%;
} }
.nav_group { .header-line__nav {
max-width: 545px; max-width: 545px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -93,20 +111,42 @@ a {
} }
.nav_link { .header-line__link {
font-size: 12px; font-size: 12px;
margin: 0 25px; margin: 0 25px;
} }
.link_content div { a:after {
float: left; display: block;
position: absolute;
left: 0;
width: 0;
height: 1px;
background-color: #5b5b5b;
content: "";
transition: width 0.3s ease-out;
} }
.icons { a:hover:after,
line-height: 28px; a:focus:after {
width: 100%;
} }
.heart {
.header-line__icons
{
display: flex;
}
.icon {
font-size: 16px;
}
.header-line__heart {
content: ""; content: "";
border-right: 1px dashed #999999; border-right: 1px dashed #999999;
border-right-width: 1px; border-right-width: 1px;
@ -114,7 +154,7 @@ a {
} }
.search { .header-line__search {
padding: 0 14px; padding: 0 14px;
} }
@ -126,12 +166,12 @@ a {
} }
.main_image { .container__main-img {
height: 683px; height: 683px;
width: 657px; width: 657px;
} }
.alt_images { .container-photos-alt {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
width: 146px; width: 146px;
@ -140,75 +180,84 @@ a {
} }
.alt_image { .container__alt-img {
width: 146px; width: 146px;
height: 170px; height: 170px;
margin-right: 24px; margin-right: 24px;
} }
.alt_image:hover { .container__alt-img:hover {
box-shadow: 1px 1px 1px #cbcdce; box-shadow: 1px 1px 1px #cbcdce;
} }
.exit {
/*Container text*/
.container-text
{
margin-left: 29px;
font-size: 14px; font-size: 14px;
} }
.text { .container-text__product_name h2
margin-left: 29px; {
}
.product_name h2 {
line-height: 36px; line-height: 36px;
font-size: 24px; font-size: 24px;
margin-bottom: 0; margin-bottom: 0;
} }
.review { .container-text__review
{
line-height: 25px; line-height: 25px;
font-size: 14px; font-size: 14px;
color: #555555; color: #555555;
} }
.review a { .fa-star
{
color: #ded3aa;
}
.container-text__review a
{
font-size: 12px; font-size: 12px;
color: #000; color: #000;
} }
.price { .container-text__price {
margin-top: 15px; margin-top: 15px;
font-size: 24px; font-size: 24px;
color: #68899a; color: #68899a;
} }
.inform { .container-text__inform {
font-size: 14px; font-size: 14px;
line-height: 24px; line-height: 24px;
margin-top: 18px; margin-top: 18px;
} }
.inform p { .container-text__inform p
{
margin: 0 0; margin: 0 0;
} }
.inform a { .container-text__inform a {
color: #68899a; color: #68899a;
} }
.about { .container-text__about {
margin-top: 30px; margin-top: 30px;
font-size: 14px; font-size: 14px;
color: #555555; color: #555555;
} }
.about ul { .container-text__about ul {
padding-left: 0; padding-left: 0;
list-style-position: inside; list-style-position: inside;
} }
.selectors { .container-text-selectors {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
@ -219,16 +268,11 @@ a {
} }
.color { .container-text-selectors__selector {
width: 196px; width: 196px;
} }
.size { .container-text-selectors__selector select {
width: 196px;
}
.selectors select {
font-size: 13px; font-size: 13px;
color: #707070; color: #707070;
width: 168px; width: 168px;
@ -244,6 +288,11 @@ a {
appearance: none; appearance: none;
} }
select, input
{
outline: none;
}
select:not([multiple]) { select:not([multiple]) {
padding-right: 1.2em; padding-right: 1.2em;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -266,14 +315,25 @@ input {
text-align: center; text-align: center;
} }
.qty_counter { .container-text-selectors__counter {
display: flex; display: flex;
align-items: center; align-items: center;
} }
.container-text-selectors__counter input {
padding: 5px;
font-size: 13px;
color: #707070;
width: 34px;
height: 33px;
padding: 0;
border-radius: 0;
border: 1px solid #e1e1e1;
}
.buttons {
.container-text-selectors__buttons {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
border-radius: 0; border-radius: 0;
@ -281,19 +341,19 @@ input {
border-left: none; border-left: none;
} }
.buttons button { .container-text-selectors__buttons button {
border-radius: 0; border-radius: 0;
border: 0px; border: 0px;
background-color: #fff; background-color: #fff;
height: 16.5px; height: 16.5px;
} }
.buttons button:first-child { .container-text-selectors__buttons button:first-child {
border-bottom: 0.5px solid #e1e1e1; border-bottom: 0.5px solid #e1e1e1;
} }
.buttons button:last-child { .container-text-selectors__buttons button:last-child {
border-top: 0.5px solid #e1e1e1; border-top: 0.5px solid #e1e1e1;
} }
@ -316,16 +376,7 @@ input {
border-top: 2px solid #cccccc; 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;
}
footer { footer {
@ -338,7 +389,7 @@ footer {
} }
@media screen and (max-width: 1150px) { @media screen and (max-width: 1420px) {
.container { .container {
@ -346,66 +397,66 @@ footer {
padding-right: 5px; padding-right: 5px;
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
flex-direction: column;
} }
.icon
{
padding-left:15px ;
padding-right:15px;
}
.val { .header-line {
display: flex;
justify-content: space-between;
}
.header-line__val {
width: auto; width: auto;
} }
.cart { .header-line__cart {
width: 100%; width: 100%;
max-width: 124px; max-width: 124px;
min-width: 80px; min-width: 80px;
} }
.link_content { .header-line__nav {
display: flex;
justify-content: space-between;
}
.nav_group {
display: none; display: none;
} }
.photos { .container-photos {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
} }
.container__main-img {
.main_image {
width: 90%; width: 90%;
max-width: 657px; max-width: 657px;
height: auto; height: auto;
} }
.alt_images { .container-photos-alt
{
width: 100%; width: 100%;
overflow-x: scroll; overflow-x: scroll;
padding-bottom: 10px; padding-bottom: 10px;
} }
.alt_image { .container_alt-img {
width: 100%; width: 100%;
max-width: 146px; max-width: 146px;
height: auto; height: auto;
} }
.alt_image:last-child { .container_alt-img:last-child {
margin-right: 0; margin-right: 0;
} }
.main_content { .container-text {
display: flex;
flex-direction: column;
align-items: center;
}
.text {
padding-top: 25px; padding-top: 25px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -413,7 +464,7 @@ footer {
margin-left: 7px; margin-left: 7px;
} }
.selectors { .container-text-selectors {
display: flex; display: flex;
flex-direction: column; flex-direction: column;

92
index.html
View File

@ -13,56 +13,54 @@
</head> </head>
<body> <body>
<header class="header"> <header>
<div class="welcome"> <div class="header-welcome">
<div class="welcome_msg"> <div class="header-welcome__msg">
start selling your products or buy them from anywhere! <span class="close">&times;</span> start selling your products or buy them from anywhere <span class="header-welcome__close">&times;</span>
</div> </div>
</div> </div>
<div class="logo_line"> <div class="header-line">
<div class="val">USD</div> <div class="header-line__val">USD</div>
<div class="logo"><h1><b>bonfire</b></h1></div> <div class="header-line__logo"><h1><b>bonfire</b></h1></div>
<a href="#" class="cart"><b>cart(3)</b></a> <a href="#" class="header-line__cart"><b>cart(3)</b></a>
</div> </div>
<div class="link_line"> <div class="header-line">
<div class="link_content"> <div class="header-line__menu icon"><i class="fa-solid fa-bars"></i></div>
<div class="menu"><i class="fa-solid fa-bars"></i></div> <nav class="header-line__nav">
<nav class="nav_group"> <a class="header-line__link" href="#">home</a>
<a class="nav_link" href="#">home</a> <a class="header-line__link" href="#">men</a>
<a class="nav_link" href="#">men</a> <a class="header-line__link" href="#">women</a>
<a class="nav_link" href="#">women</a> <a class="header-line__link" href="#">lookbook</a>
<a class="nav_link" href="#">lookbook</a> <a class="header-line__link" href="#">about</a>
<a class="nav_link" href="#">about</a> <a class="header-line__link" href="#">blog</a>
<a class="nav_link" href="#">blog</a>
</nav> </nav>
<div class="icons"> <div class="header-line__icons">
<div class="heart"><i class="fa-regular fa-heart"></i></div> <div class="header-line__heart icon"><i class="fa-regular fa-heart"></i></div>
<div class="search"><i class="fa-solid fa-magnifying-glass"></i></div> <div class="header-line__search icon"><i class="fa-solid fa-magnifying-glass"></i></div>
</div>
</div> </div>
</div> </div>
</header> </header>
<div class="container"> <div class="container">
<div class="main_content"> <div class="container-photos">
<div class="photos"> <img src="https://d13qso5xfejx18.cloudfront.net/product-media/57Y3/1000/1000/IMG6939.jpg" alt="" class="container__main-img">
<img src="https://d13qso5xfejx18.cloudfront.net/product-media/57Y3/1000/1000/IMG6939.jpg" alt="" class="main_image"> <div class="container-photos-alt">
<div class="alt_images"> <img src="https://d13qso5xfejx18.cloudfront.net/product-media/57Y3/1000/1000/IMG6939.jpg" alt="" class="container__alt-img">
<img src="https://d13qso5xfejx18.cloudfront.net/product-media/57Y3/1000/1000/IMG6939.jpg" alt="" class="alt_image"> <img src="https://image1.superdry.com/static/images/optimised/zoom/upload9223368955665604291.jpg" alt="" class="container__alt-img">
<img src="https://image1.superdry.com/static/images/optimised/zoom/upload9223368955665604291.jpg" alt="" class="alt_image"> <img src="https://image1.superdry.com/static/images/optimised/zoom/upload9223368955665604289.jpg" alt="" class="container__alt-img">
<img src="https://image1.superdry.com/static/images/optimised/zoom/upload9223368955665604289.jpg" alt="" class="alt_image"> <img src="https://image1.superdry.com/static/images/optimised/zoom/upload9223368955665604287.jpg" alt="" class="container__alt-img">
<img src="https://image1.superdry.com/static/images/optimised/zoom/upload9223368955665604287.jpg" alt="" class="alt_image">
</div> </div>
</div> </div>
<div class="text"> <div class="container-text">
<a href="#" class="exit">Back to Woman</a> <a href="#">Back to Woman</a>
<div class="product_name"><h2>The Atelier Tailored Coat</h2></div> <div class="container-text__product_name"><h2>The Atelier Tailored Coat</h2></div>
<div class="review">Star 3 Review(s) | <b><u><a href="#">ADD A REVIEV</a></u></b></div> <div class="container-text__review"><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i> 3 Review(s) | <b><u><a href="#">ADD A REVIEV</a></u></b></div>
<div class="price"><b>$499.00</b></div> <div class="container-text__price"><b>$499.00</b></div>
<div class="inform"> <div class="container-text__inform">
<p><b>Availability :</b> <a href="#">In stock</a></p> <p><b>Availability :</b> <a href="#">In stock</a></p>
<p><b>Product Code :</b> <a href="#">#4657</a></p> <p><b>Product Code :</b> <a href="#">#4657</a></p>
<p><b>Tags :</b> <a href="#">Fashion, Hood, Classic</a></p> <p><b>Tags :</b> <a href="#">Fashion, Hood, Classic</a></p>
<div class="about">Sleek, polished, and boasting an impeccably modern fit, this blue, 2-but- <div class="container-text__about">Sleek, polished, and boasting an impeccably modern fit, this blue, 2-but-
ton Lazio suit features a notch lapel, flap pockets, and accompanying flat ton Lazio suit features a notch lapel, flap pockets, and accompanying flat
front trousers—all in pure wool by Vitale Barberis Canonico. front trousers—all in pure wool by Vitale Barberis Canonico.
<ul> <ul>
@ -73,9 +71,9 @@
</ul> </ul>
</div> </div>
</div> </div>
<div class="selectors"> <div class="container-text-selectors">
<div class="color"><b>color</b> <div class="container-text-selectors__selector"><b>color</b>
<p><select name="color"> <p><select name="color">
<option value="" selected hidden>Select Color</option> <option value="" selected hidden>Select Color</option>
<option value="gray">Gray</option> <option value="gray">Gray</option>
@ -83,7 +81,7 @@
<option value="yellow">Yellow</option> <option value="yellow">Yellow</option>
</select></p> </select></p>
</div> </div>
<div class="size"><b>size</b> <div class="container-text-selectors__selector"><b>size</b>
<p><select name="size"> <p><select name="size">
<option selected hidden value="">Select Size</option> <option selected hidden value="">Select Size</option>
<option value="51">51</option> <option value="51">51</option>
@ -92,10 +90,10 @@
</select> </select>
</p> </p>
</div> </div>
<div class="qty"><b>qty</b> <div class="container-text-selectors__selector"><b>qty</b>
<div class="qty_counter"> <div class="container-text-selectors__counter">
<p><input type="number" name="qty" min="1" max="10" value="1"> <p><input type="number" name="qty" min="1" max="10" value="1">
<div class="buttons"> <div class="container-text-selectors__buttons">
<button> <button>
<div class="count_up"></div> <div class="count_up"></div>
</button> </button>
@ -107,10 +105,14 @@
</div> </div>
</div> </div>
</div> </div>
<div class="product_buttons"></div> <div class="container-text-buttons">
<div class="buttons">
button.button
</div>
</div>
<div class="share"></div> <div class="share"></div>
</div> </div>
</div>
</div> </div>