Видео верстка торговой страницы используя только HTML и CSS

20.10.2024, 17:41

14 просмтотров

(0)

Видео верстка торговой страницы используя только HTML и CSS

Узнайте, как создать сайт для покупок, используя HTML и CSS. Простой способ создать сайт для покупок, используя только HTML и CSS. Я также предоставляю вам HTML и CSS-код, который поможет вам понять это руководство.

Вы можете посмотреть видео демонстрацию, попробовать сверстать самому по видео или скачать архив с готовым кодом. Если это видео оказалось для вас полезным, оставьте комментарий со своими мыслями или вопросами. Ваши отзывы помогают нам создавать более ценный контент.

В архиве находится:

Все демонстрационные изображения
Исходные файлы HTML
Исходные файлы CSS
Исходные файлы jаvascript
Иконки шрифтов
Файлы библиотеки и плагинов

HTML КОД:

<!--doctype html-->
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--title=================================================-->
<title>Shopping Website</title>
<!--stylesheet============================================-->
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<!--fav-icon==============================================-->
<link rel="shortcut icon" href="images/fav-icon.png"/>
<!--using FontAwesome=====================================-->
<script src="https://kit.fontawesome.com/c8e4d183c2.js" crossorigin="anonymous"></script>
</head>
<body>
<!--==navigation-bar==============================================-->
<nav class="navigation">
<!--logo------->
<a href="index.html" class="logo">logo</a>
<!--menu-btn----->
<input type="checkbox" class="menu-btn" id="menu-btn">
<label for >
<span class="nav-icon">
<i class="fas fa-bars"></i></span>
</label>
<!--menu------->
<ul class="menu">
<li><a href="#" class="active">Home</a></li>
<li><a href="#">Shop</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Contact</a></li>
</ul>
<!--right-->
<div class="right-elements">
<!--search-->
<a href="#" class="search"><i class="fas fa-search"></i></a>
<!--cart---->
<a href ></i></a>
<!--user---->
<a href="#" class="user"><i class="far fa-user"></i></a>
</div>
</nav>
<!--main===============================================================-->
<section id="main">
<!--main-content----------------------------->
<div class="main-content">
<!--text------------>
<div class="main-text">

<h1>Comfortable T-Shirts with Great Comfort</h1>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Veniam, eveniet necessitatibus id cum cumque corrupti delectus, eligendi labore possimus beatae.</p>
<a href="#">Shop Now</a>
</div>
<!--img------------->
<div class="main-img">
<img alt="shirt" src="images/main.png">
</div>
</div>
</section>
<!--==Categories==============================================-->
<section id="categories">
<h2>Categories</h2>
<div class="category-container">
<!--box------------------------>
<a href="#" class="category-box">
<img alt="shirts" src="images/c-1.png">
<span>Shirts</span>
</a>
<!--box------------------------>
<a href="#" class="category-box">
<img alt="pents" src="images/c-2.png">
<span>Pents</span>
</a>
<!--box------------------------>
<a href="#" class="category-box">
<img alt="jackets" src="images/c-3.png">
<span>Jackets</span>
</a>
<!--box------------------------>
<a href="#" class="category-box">
<img alt="shoes" src="images/c-4.png">
<span>Shoes</span>
</a>
</div>
</section>
<!--==Feature=product===============================================================-->
<section id="feature-product">
<h1>Feature Product</h1>
<div class="feature-product-container">

<!--box-1---------------------->
<div class="feature-product-box">
<!--img------------------>
<div class="product-feature-img">
<img alt="shirt" src="images/p-1.png">
</div>
<!--text-contaier--------->
<div class="product-feature-text-container">
<!--text-->
<div class="product-feature-text">
<strong>Unique Collection</strong>
<span>$239.00</span>
</div>
<!--cart-like-->
<div class="cart-like">
<a href="#"><i class="fas fa-shopping-cart"></i></a>
<a href="#"><i class="far fa-heart"></i></a>
</div>

</div>
</div>
<!--box-2---------------------->
<div class="feature-product-box">
<!--img------------------>
<div class="product-feature-img">
<img alt="shirt" src="images/p-2.png">
</div>
<!--text-contaier--------->
<div class="product-feature-text-container">
<!--text-->
<div class="product-feature-text">
<strong>Unique Collection</strong>
<span>$239.00</span>
</div>
<!--cart-like-->
<div class="cart-like">
<a href="#"><i class="fas fa-shopping-cart"></i></a>
<a href="#"><i class="far fa-heart"></i></a>
</div>

</div>
</div>
<!--box-3---------------------->
<div class="feature-product-box">
<!--img------------------>
<div class="product-feature-img">
<img alt="shirt" src="images/p-3.png">
</div>
<!--text-contaier--------->
<div class="product-feature-text-container">
<!--text-->
<div class="product-feature-text">
<strong>Unique Collection</strong>
<span>$239.00</span>
</div>
<!--cart-like-->
<div class="cart-like">
<a href="#"><i class="fas fa-shopping-cart"></i></a>
<a href="#"><i class="far fa-heart"></i></a>
</div>

</div>
</div>
<!--box-4---------------------->
<div class="feature-product-box">
<!--img------------------>
<div class="product-feature-img">
<img alt="shirt" src="images/p-4.png">
</div>
<!--text-contaier--------->
<div class="product-feature-text-container">
<!--text-->
<div class="product-feature-text">
<strong>Unique Collection</strong>
<span>$239.00</span>
</div>
<!--cart-like-->
<div class="cart-like">
<a href="#"><i class="fas fa-shopping-cart"></i></a>
<a href="#"><i class="far fa-heart"></i></a>
</div>

</div>
</div>

</div>
</section>
<!--==banner==============================================================-->
<section id="banner">
<!--text------>
<div class="banner-text">
<strong>Beautifull Sofa</strong>
<span>From $239</span>
<p>Long Lasting and Confortable to use. This is only for you.</p>
<a href="#">Shop Now</a>
</div>
<!--img------->
<div class="banner-img">
<img alt="" src="images/banner.png">
</div>
</section>
<!--==products=============================================================-->
<section id="products">
<!--heading------------------------------------------------->
<div class="product-heading">
<h3>Our Product</h3>
</div>
<!--product-container--------------------------------------->
<div class="feature-product-container">

<!--box-1---------------------->
<div class="feature-product-box">

<!--img------------------>
<div class="product-feature-img">
<img alt="shirt" src="images/pro-1.png">
</div>

<!--text-contaier--------->
<div class="product-feature-text-container">
<!--text-->
<div class="product-feature-text">
<strong>Unique Collection</strong>
<span>$239.00</span>
</div>
<!--cart-like-->
<div class="cart-like">
<a href="#"><i class="fas fa-shopping-cart"></i></a>
<a href="#"><i class="far fa-heart"></i></a>
</div>

</div>

</div>



<!--box-2---------------------->
<div class="feature-product-box">

<!--img------------------>
<div class="product-feature-img">
<img alt="shirt" src="images/pro-2.png">
</div>

<!--text-contaier--------->
<div class="product-feature-text-container">
<!--text-->
<div class="product-feature-text">
<strong>Unique Collection</strong>
<span>$239.00</span>
</div>
<!--cart-like-->
<div class="cart-like">
<a href="#"><i class="fas fa-shopping-cart"></i></a>
<a href="#"><i class="far fa-heart"></i></a>
</div>

</div>

</div>




<!--box-3---------------------->
<div class="feature-product-box">

<!--img------------------>
<div class="product-feature-img">
<img alt="shirt" src="images/pro-3.png">
</div>

<!--text-contaier--------->
<div class="product-feature-text-container">
<!--text-->
<div class="product-feature-text">
<strong>Unique Collection</strong>
<span>$239.00</span>
</div>
<!--cart-like-->
<div class="cart-like">
<a href="#"><i class="fas fa-shopping-cart"></i></a>
<a href="#"><i class="far fa-heart"></i></a>
</div>

</div>

</div>




<!--box-4---------------------->
<div class="feature-product-box">

<!--img------------------>
<div class="product-feature-img">
<img alt="shirt" src="images/pro-4.png">
</div>

<!--text-contaier--------->
<div class="product-feature-text-container">
<!--text-->
<div class="product-feature-text">
<strong>Unique Collection</strong>
<span>$239.00</span>
</div>
<!--cart-like-->
<div class="cart-like">
<a href="#"><i class="fas fa-shopping-cart"></i></a>
<a href="#"><i class="far fa-heart"></i></a>
</div>

</div>

</div>
<!--box-5---------------------->
<div class="feature-product-box">

<!--img------------------>
<div class="product-feature-img">
<img alt="shirt" src="images/pro-5.png">
</div>

<!--text-contaier--------->
<div class="product-feature-text-container">
<!--text-->
<div class="product-feature-text">
<strong>Unique Collection</strong>
<span>$239.00</span>
</div>
<!--cart-like-->
<div class="cart-like">
<a href="#"><i class="fas fa-shopping-cart"></i></a>
<a href="#"><i class="far fa-heart"></i></a>
</div>

</div>

</div>
<!--box-6---------------------->
<div class="feature-product-box">

<!--img------------------>
<div class="product-feature-img">
<img alt="shirt" src="images/pro-6.png">
</div>

<!--text-contaier--------->
<div class="product-feature-text-container">
<!--text-->
<div class="product-feature-text">
<strong>Unique Collection</strong>
<span>$239.00</span>
</div>
<!--cart-like-->
<div class="cart-like">
<a href="#"><i class="fas fa-shopping-cart"></i></a>
<a href="#"><i class="far fa-heart"></i></a>
</div>

</div>

</div>
<!--box-7---------------------->
<div class="feature-product-box">

<!--img------------------>
<div class="product-feature-img">
<img alt="shirt" src="images/pro-7.png">
</div>

<!--text-contaier--------->
<div class="product-feature-text-container">
<!--text-->
<div class="product-feature-text">
<strong>Unique Collection</strong>
<span>$239.00</span>
</div>
<!--cart-like-->
<div class="cart-like">
<a href="#"><i class="fas fa-shopping-cart"></i></a>
<a href="#"><i class="far fa-heart"></i></a>
</div>

</div>

</div>
<!--box-8---------------------->
<div class="feature-product-box">

<!--img------------------>
<div class="product-feature-img">
<img alt="shirt" src="images/pro-8.png">
</div>

<!--text-contaier--------->
<div class="product-feature-text-container">
<!--text-->
<div class="product-feature-text">
<strong>Unique Collection</strong>
<span>$239.00</span>
</div>
<!--cart-like-->
<div class="cart-like">
<a href="#"><i class="fas fa-shopping-cart"></i></a>
<a href="#"><i class="far fa-heart"></i></a>
</div>

</div>

</div>

</div>
</section>
<!--==banner==============================================================-->
<section id="banner" class="banner-reverse">
<!--text------>
<div class="banner-text">
<strong>Beautifull Sofa</strong>
<span>From $239</span>
<p>Long Lasting and Confortable to use. This is only for you.</p>
<a href="#">Shop Now</a>
</div>
<!--img------->
<div class="banner-img">
<img alt="" src="images/banner-2.png">
</div>
</section>
<!--==Latest-News=========================================================-->
<section id="news">
<!--heading-------->
<div class="news-heading">
<h3>Latest News</h3>
</div>
<!--container------>
<div class="news-box-container">

<!--box------>
<div class="news-box">
<!--img--->
<div class="news-img">
<img alt="news" src="images/pro-7.png">
<!--label-->
<div class="news-label">
New
</div>
</div>
<!--text-->
<div class="news-text">
<strong>We Provide You The Best Things</strong>
<span>Admin | Products</span>
<a href="#">Read More</a>
</div>
</div>
<!--box------>
<div class="news-box">
<!--img--->
<div class="news-img">
<img alt="news" src="images/pro-2.png">
<!--label-->
<div class="news-label">
New
</div>
</div>
<!--text-->
<div class="news-text">
<strong>We Provide You The Best Things</strong>
<span>Admin | Products</span>
<a href="#">Read More</a>
</div>
</div>
<!--box------>
<div class="news-box">
<!--img--->
<div class="news-img">
<img alt="news" src="images/news-3.png">
<!--label-->
<div class="news-label">
New
</div>
</div>
<!--text-->
<div class="news-text">
<strong>We Provide You The Best Things</strong>
<span>Admin | Products</span>
<a href="#">Read More</a>
</div>
</div>
</div>
</section>
<!--==footer=================================================================-->
<footer>
<div class="footer-container">

<div class="footer-logo-container">
<!--logo-------------->
<div class="footer-logo">
LOGO
</div>
<span>© 2021 PeachPay, Inc.</span>
<!--social-links------>
<div class="footer-social">
<a href="#"><i class="fab fa-linkedin-in"></i></a>
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
</div>
</div>





<!--footer-menu---------------------------------------->
<div class="footer-menu">

<!--footer-menu-box----->
<div class="footer-menu-box">
<strong>Product</strong>
<ul>
<li><a href="#">Women</a></li>
<li><a href="#">Latest Kids Clothes</a></li>
<li><a href="#">New Men Shoes</a></li>
</ul>
</div>

<!--footer-menu-box----->
<div class="footer-menu-box">
<strong>Contact</strong>
<ul>
<li>info@peachpay.app</li>
<li>1-415-562-8258</li>
</ul>
</div>

<!--footer-menu-box----->
<div class="footer-menu-box">
<strong>Company</strong>
<ul>
<li><a href="#">Merch Store</a></li>
<li><a href="#">Privacy Policy</a></li>
</ul>
</div>
<!--footer-menu-box----->
<div class="footer-menu-box">
<strong>Company 2</strong>
<ul>
<li><a href="#">Merch Store</a></li>
<li><a href="#">Privacy Policy</a></li>
</ul>
</div>
</div>



</div>
</footer>
<span class="copyright">Copyright 2021 - GoingToInternet</span>

</body>
</html>

CSS КОД:

<style>
body{
margin: 0px;
padding: 0px;
font-family: poppins;
}
ul{
list style: none;
}
a{
text-decoration: none;
}

::selection{
backgroundcolor: #dd4242;
color: #ffffff;
}

/*====navigation=====================================*/
.navigation{
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 10%;
margin: auto;
position: fixed;
left: 0px;
top: 0px;
width: 100%;
z-index: 100;
background color: #ffffff;
border: 1px solid rgba(0, 0, 0, 0.03);

}
.logo{
font-size: 2.1rem;
color: #414141;
text-transform: uppercase;
letter: 0.5px;
font-weight: 600;
}

.menu{
display: flex;
}
.menu li a{
margin: 5px;
padding: 5px 20px;
color: #2e2e2e;
font-weight: 500;
letter-: 1px;
opacity: 0.4;
transition: all ease 0.2s;
}
.menu .active{
opacity: 1;
}

.right-elements{
display: flex;
justify-content: center;
align-items: center;
}
.right-elements a{
margin: 0px 10px;
}
.right-elements a i{
color: #2c2c2c;
}
.right-elements a:hover i{
color: #cf2728;
transition: all ease 0.2s;
}
.menu li a:hover{
opacity: 1;
transition: all ease 0.3s;
}

/*==main========================================*/

#main{
background-color: #ffffff;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
margin-top: 30px;
}
.main-content{
display: flex;
justify-content: space-between;
align-items: center;
width: 80%;
margin: 50px auto;
}
.main-text{
max-width: 500px;
}
.main-img{
height: 500px;
width: 500px;
}
.main-img img{
width: 100%;
height: 100%;
object-position: center;
object-fit: contain;
}

.main-text span{
text-transform: uppercase;
font-weight: 600;
color: #e74444;
letter-spacing: 2px;
}
.main-text h1{
font-size: 2.3rem;
font-weight: 500;
line-height: 45px;
}
.main-text p{
margin: 20px 0px;
color: #747474;
}
.main-text a{
width: 180px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid rgba(0,0,0,0.14);
color: #f8f8f8;
background-color: #e74444;
}
.main-text a:hover,
.banner-text a:hover,
.cart-like a:hover{
background-color: #cf2728;
color: #ffffff;
transition: all ease 0.3s;
border: none;
}
.cart-like a:hover i{
color: #ffffff;
}

/*===categories==========================================*/
#categories{
display: flex;
justify-content: center;
align-items: center;
margin: 20px 0px 50px 0px;
flex-direction: column;
}
#categories h2{
font-weight: 500;
padding: 2px 20px;
text-transform: uppercase;
letter-spacing: 2px;
margin: 20px 0px;
border: 1px solid rgba(0,0,0,0.14);
}
.category-container{
display: flex;
margin:auto;
width: 1200px;
justify-content: center;
align-items: center;
grid-gap: 20px;
padding: 20px;
border: 1px solid rgba(0, 0, 0, 0.04);
background-color: #f5f5f544;
}
.category-box{
position: relative;
padding: 20px;
}

.category-box img{
width: 220px;
height: 220px;
object-fit: contain;
object-position: center;
padding: 20px;
overflow: hidden;
background-color: #f5f5f5;
border: 1px solid rgba(0, 0, 0, 0.04);
transition: all ease 0.2s;
}

.category-box span{
text-align: center;
display: flex;
justify-content: center;
align-items: center;
font-weight: 600;
color: #2c2b2b;
padding: 2px 20px;
text-transform: uppercase;
}
.category-box:hover img{
transform: scale(1.02);
transition: all ease 0.2s;
box-shadow: 2px 2px 30px rgba(0, 0, 0, 0.05);
}
/*==feature-product==========================*/
#feature-product{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 50px 0px;
}
#feature-product h1{
color: #2e2e2e;
text-align: center;
font-size: 2rem;
font-weight: 500;
text-transform: uppercase;
position: relative;
padding-bottom: 10px;
}
#feature-product h1::after{
border-bottom: 1px solid #000;
width: 40%;
height: 1px;
background-color: #2e2e2e;
position: absolute;
content: '';
left: 50%;
transform: translateX(-50%);
bottom: -5px;
}

.feature-product-container{
display: flex;
justify-content: center;
flex-wrap: wrap;
align-items: center;
margin: 60px auto;
width: 1200px;
padding: 20px 0px;
background-color: #d6d6d60e;
border: 1px solid rgba(0, 0, 0, 0.04);
}
.feature-product-box{
width: auto;
height: auto;
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
margin: 20px 20px;
}

.product-feature-img{
width: 250px;
height: 280px;
display: flex;
justify-content: center;
align-items: center;
background-color: #f5f5f5;
border: 1px solid rgba(0, 0, 0, 0.04);
}
.product-feature-img img{
width: 90%;
height: 90%;
object-fit: contain;
object-position: center;
}
.product-feature-text-container{
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
.product-feature-text{
display: flex;
flex-direction: column;
margin-top: 10px;
}
.product-feature-text strong{
color: #272722;
font-weight: 600;
line-height: 20px;
}
.product-feature-text span{
color: #747474;
}
.cart-like{
display: flex;
}
.cart-like a{
width: 35px;
height: 35px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
border: 1px solid #747474;
margin: 0px 3px;
font-size: 0.9rem;
}
.cart-like a i{
color: #2c2c2c;
}
/*==banner====================================*/
#banner{
border:1px solid rgb(235, 235, 235);
max-width:1200px;
display: grid;
grid-template-columns: 0.7fr 1.4fr;
margin: auto;
grid-gap: 40px;
height: 300px;
background-color: #f5f5f5;
margin-bottom: 50px;
}

.banner-img{
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
height: 300px;
}

.banner-img img{
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
}

.banner-text{
display: flex;
justify-content: center;
flex-direction: column;
height: 300px;
padding: 20px 40px;
}
.banner-text strong{
font-size: 2rem;
font-weight: 500;
color: #292929;
}
.banner-text span{
color: #222222;
font-size: 1.2rem;
font-weight: 400;
}
.banner-text p{
color: #636363;
}
.banner-text a{
color: #ffffff;
background-color: #e74444;
width:140px;
height: 45px;
display: flex;
justify-content: center;
align-items: center;
margin-top: 20px;
border: 1px solid rgba(0,0,0,0.14);
}

/*==products=========================================*/

.product-heading h3{
color: #2e2e2e;
text-align: center;
font-size: 2rem;
font-weight: 500;
text-transform: uppercase;
position: relative;
padding-bottom: 10px;
margin: 80px 0px 50px 0px;
}
.product-heading h3::after{
border-bottom: 1px solid #000;
width:8%;
height: 1px;
background-color: #2e2e2e;
position: absolute;
content: '';
left: 50%;
transform: translateX(-50%);
bottom: -5px;
}

/*===banner-2==============================*/
.banner-reverse{
display: flex !important;
justify-content: center;
align-items: center;
flex-direction: row-reverse;
margin: 100px auto !important;
}
/*==news===================================*/
#news{
margin: 60px 0px;}

.news-heading h3{
color: #2e2e2e;
text-align: center;
font-size: 2rem;
font-weight: 500;
text-transform: uppercase;
position: relative;
padding-bottom: 10px;
}
.news-heading h3::after{
border-bottom: 1px solid #000;
width: 10%;
height: 1px;
background-color: #2e2e2e;
position: absolute;
content: '';
left: 50%;
transform: translateX(-50%);
bottom: -5px;
}
.news-box-container{
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
margin-top: 20px;
}
.news-box{
width: 350px;
height: 350px;
background-color: #f5f5f5;
position: relative;
overflow: hidden;
margin: 20px;
}
.news-img{
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.news-img img{
width: 80%;
height: 80%;
object-fit: contain;
object-position: center;

}
.news-text{
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
display: flex;
justify-content:center;
flex-direction: column;
border: 4px solid #d6d6d6;
align-items: center;
background-color: rgba(0, 0, 0, 0.18);
padding: 20px;
display: none;
text-align: center;
}
.news-box:hover .news-text{
display: flex;
animation: fade 0.3s;
}
@keyframes fade{
0%{
opacity: 0;
}
100%{
opacity: 1;
}
}
.news-text strong{
color: #f1f1f1;
font-size: 1.2rem;
}
.news-text span{
color: #ffffff;
border: 1px solid #636363;
font-weight: 500;
padding: 0px 10px;
background-color: #292929;
}
.news-label{
position: absolute;
right: 20px;
top: 20px;
color: #ffffff;
background-color: #e74444;
padding: 3px 20px;
z-index: 2;
}
.news-text a{
color: #fdfcfc;
margin-top: 10px;
background-color: #cf2728;
padding: 2px 10px;
}
.news-text a:hover{
background-color: #b32222;
transition: all ease 0.3s;
}
/*==footer=====================================*/
footer{
background-color: #f5f5f5;
padding:60px 10px;
position: relative;
margin-top: 20px;
border-top: 1px solid rgb(236, 236, 236);
}

.footer-container{
display: flex;
justify-content: space-around;
align-items: center;
width:85%;
margin: 10px auto;
}
.footer-logo-container{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.footer-logo{
width:150px;
display: flex;
justify-content: center;
align-items: center;
font-size: 2rem;
color: #131313;
text-transform: uppercase;
font-weight: 700;
letter-spacing: 1px;
}
.footer-logo img{
width:100%;
height: 100%;
object-fit: contain;
object-position: center;
}
.footer-logo-container span{
color: #888888;
font-weight: 400;
margin: 10px;
font-size: 0.8rem;
}
.footer-social{
display: flex;
justify-content: center;
align-items: center;
}
.footer-social a{
margin: 0px 6px;
border-radius: 50%;
color: #212121;
background-color: #ffffff;
border: 1px solid rgba(0, 0, 0, 0.1);
width:30px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
}
.footer-social a:hover{
color: #ffffff;
background-color: #ff6c43;
transition: all ease 0.2s;
}
.footer-menu{
display: flex;
justify-content: center;
align-items: center;
}
.footer-menu-box{
display: flex;
flex-direction: column;
justify-content: center;
margin: 0px 30px;
}
.footer-menu-box strong{
color: #292929;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 5px;
}
.footer-menu-box ul li a,
.footer-menu-box ul li {
color: #888888;
font-size: 0.9rem;
margin: 5px 0px;
}
.footer-menu-box ul li a:hover{
color: #000000;
transition: all ease 0.3s;
}

.copyright{
padding: 15px;
color: #5a5a5a;
background-color: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid rgba(0, 0, 0, 0.06);
font-size: 0.9rem;
}

.menu-icon,
.menu-btn{
display: none;
}

@media(max-width:1200px){
.category-container{
width: 1000px;
flex-wrap: wrap;
}
.category-box img{
width: 150px;
height: 150px;
}
#feature-product h1{
margin-bottom: 40px;
}
.feature-product-container{
width: 1000px;
margin: auto;
}
.feature-product-box{
margin: 10px;
}
.feature-product-box{
width: 200px;
}
.product-feature-img{
width: 200px;
height: 230px;
}
#banner{
width:1000px;
min-width: none;
}
.news-box{
width: 300px;
height: 300px;
}
}
@media(max-width:1024px){
.navigation{
width: 100%;
}
.navigation{
justify-content: space-between;
height: 65px;
padding:35px 25px;

}

nav .menu{
display: none;
position: absolute;
top: 64px;
left: 0px;
background-color: #ffffff;
border-bottom: 1px solid #24242410;
width:100%;
padding:0px;
margin: 0px;
z-index: 100;
}
nav .menu li{
width:100%;
margin: 0px;
padding: 0px;
}
nav .menu li a{
width:100%;
height: 40px;
display: flex;
align-items: center;
margin: 0px;
padding: 25px 20px;
border: 1px solid rgba(211, 211, 211, 0.08);
}
nav .menu li a:hover{
color: #ffffff;
background-color: #e74444;
transition: 0.2s;
}
.menu-icon{
display: block;
}
.nav-icon {
font-size: 1.2rem;
cursor: pointer;
}
nav .menu-btn:checked ~ .menu{
display: block !important;
}

.main-img{
display: none;
}
#main{
min-height: auto;
margin-top: 100px;
}

.main-text{
max-width: 100%;
justify-content: center;
align-items: center;
display: flex;
flex-direction: column;
text-align: center;
}

#categories{
margin-top: 50px;
}
.category-container{
width: 90%;
}

#feature-product h1{
margin-bottom: 40px;
}
.feature-product-container{
width: 90%;
display: grid;
grid-template-columns: 1fr 1fr;
margin: auto;
padding: 30px;
grid-gap: 30px;
}
.feature-product-box{
margin: 0px;
}
.feature-product-box{
width:100%;
}
.product-feature-img{
width: 100%;
height: 120%;
}
#banner{
width:90%;
grid-template-columns: 1fr 1fr;

}
.news-box{
width: 300px;
height: 300px;
}
.footer-container{
flex-direction: column;
}
.footer-menu{
margin-top: 50px;
}
}
@media(max-width:800px){
#banner{
display: flex;
justify-content: center;
flex-direction: column-reverse;
height: auto;
padding: 20px;
}
.banner-text,
.banner-img{
height: auto;
margin: 0px;
padding: 0px;
}
}
@media(max-width:724px){
.logo{
font-size: 1.5rem;
}
.main-text h1{
font-size: 1.6rem;
line-height: 35px;
}
#categories h2,
#feature-product h1,
.banner-text strong,
.product-heading h3,
.news-heading h3{
font-size: 1.5rem;
}
.footer-menu{
display: grid;
grid-template-columns: 1fr 1fr;
}
}
@media(max-width:500px){
.category-container{
flex-direction: column;
}
.category-box,
.category-box img{
width: 100%;
height: 100%;
}
.feature-product-container{
grid-template-columns: 1fr;
}
}
@media(max-width:400px){
.footer-container{
justify-content: flex-start;
align-items: flex-start;
}
.footer-menu,
.footer-logo-container{
display: flex;
text-align: start;
flex-direction: column;
width: 100%;
justify-content: flex-start;
align-items: flex-start;
}
.footer-menu-box{
margin: 0px;
}
}
</style>

Скачать

Как создать клон YouTube используя HTML CSS и JavaScript

Как создать простую шапку для сайта используя только HTML и CSS

Создание интерактивной анимации изображения с помощью HTML и CSS

Карусель сообщений для блога с использованием HTML CSS JavaScript

Как создать адаптивное всплывающее модальное окно используя HTML, CSS и Javascript

Как создать адаптивную панель навигации с переключением на Темный и Светлый режим

Как создать слайдер с эффектом магического поворота изображения используя HTML, CSS и JavaScript

Отзывчивый раздел "Наши услуги" для любого сайта или проекта

Анимированный фон с использованием чистого CSS

🔥 V.I.P EXCLUSIVE 🔥

Адаптивная и качественная верстка проектов !!! Подпишись на boosty.to/monster-tem и скачивай любые файлы, скрипты, проекты и многое другое на MONSTERTEM.RU