Как сделать эко-сайт в 2022 году [с исходным кодом]

17 потрясающих веб-приложений, которые стоит использовать для повышения производительности

07.02.2022

Добавьте в закладки эти 8 интерфейсных веб-сайтов прямо сейчас!

08.02.2022

В данной статье мы научимся создавать веб-сайт электронной коммерции с использованием HTML, CSS и JS. Это часть полнофункционального веб-сайта. В данной части мы создадим только пользовательский интерфейс страницы. Сначала мы сделаем домашнюю страницу, затем страницы продукта, поиска и страницу 404, которые можете увидеть в руководстве YT.

Чтобы узнать подробнее, как это сделать, необходимо посмотреть видео-урок ниже:

Видеоурок

Код

Ниже вы можете увидеть структуру папок проекта.

Скачать изображения , получить исходный код

Итак, начнем.

Домашняя страница

Чтобы создать домашнюю страницу, откройте index.htmlфайл и начните с базового шаблона HTML 5. После этого свяжите style.cssс ним файл. А также ссылку Cinzel, Latoна гугл шрифты.

Теперь сделаем headerсечение.

<h1 class="header-heading"><span>premium</span> quality</h1>

</header>

И давайте придадим ему несколько стилей.

margin: 0;

padding: 0;

box-sizing: border-box;

}

body{

font-family: 'cinzel', serif;

}

.header-section{

width: 100%;

height: 100vh;

background: url(../img/header.png);

background-size: cover;

display: flex;

justify-content: center;

align-items: center;

}

.header-heading{

font-size: 100px;

text-transform: capitalize;

color: #fff;

}

.header-heading span{

color: #d5be8b;

}

Посмотрим на результат

Итак, теперь давайте сделаем панель навигации.

Навбар

<li class="link-item"><a href="#" class="link">product</a></li>

<li class="link-item"><a href="#" class="link">about</a></li>

<li class="link-item"><a href="#" class="link">contact</a></li>

</ul>

</div>

</div>

</nav>

Теперь стиль.

.navbar{

width: 100%;

height: 80px;

position: fixed;

top: 0;

left: 0;

display: flex;

justify-content: center;

z-index: 9;

transition: .5s;

}

.navbar.bg{

background: #fff;

}

.links-container{

display: flex;

align-items: center;

list-style: none;

}

.link-item{

margin: 10px;

}

.link{

font-size: 20px;

color: #fff;

text-decoration: none;

padding: 10px;

opacity: 0.7;

transition: .5s;

}

.navbar.bg .link{

color: #000;

opacity: 0.5;

}

.link.active, .link:hover, .navbar.bg .link:hover, .navbar.bg .link.active{

opacity: 1;

}

.user-interactions{

display: flex;

position: absolute;

right: 5vw;

top: 50%;

transform: translateY(-50%);

}

.cart, .user{

width: 30px;

height: 30px;

position: relative;

margin: 10px;

cursor: pointer;

}

.cart-icon, .user-icon{

width: 100%;

height: 100%;

object-fit: cover;

}

.cart-item-count{

font-family: 'lato', sans-serif;

color: #d5be8b;

padding: 5px;

font-size: 15px;

border-radius: 50%;

background: #190c05;

position: absolute;

bottom: -12px;

left: -12px;

}

Вы можете заметить, что у нас также есть .navbar.bgприведенный выше код CSS. Мы сделали данный стиль, чтобы легко было установить белый цвет навигационной панели при прокрутке вниз.

Выглядит очень хорошо. Теперь сделайте карточку продукта или раздел самого продаваемого продукта.

Раздел самых продаваемых товаров

<h1 class="section-title">best selling products</h1>

<p class="product-name">lights →</p>

</div>

// +3 more product cards

</div>

</section>

Его стилизация.

/* best selling product */

.best-selling-product-section{

position: relative;

padding: 60px 5vw;

}

.section-title{

text-transform: capitalize;

font-size: 30px;

margin-bottom: 30px;

}

.product-container{

display: flex;

justify-content: space-between;

}

.product-card{

border: 15px solid #d5be8b;

width: 300px;

height: 300px;

overflow: hidden;

position: relative;

background: #d5be8b;

}

.product-card:nth-child(even){

border-color: #190c05;

background: #190c05;

}

.product-img{

width: 100%;

height: 100%;

object-fit: cover;

transition: .5s;

}

.product-name{

position: absolute;

color: #fff;

text-transform: capitalize;

font-family: 'lato', sans-serif;

font-size: 25px;

bottom: 20px;

left: 50%;

transform: translateX(-50%);

opacity: 0;

transition: .5s;

}

.product-card:hover .product-name{

opacity: 1;

}

.product-card:hover .product-img{

opacity: 0.5;

}

Результат

После раздела с самыми продаваемыми продуктами у нас есть своего рода средний раздел, который в основном рассказывает о компании в ключевых моментах. Итак, давайте сделаем это сейчас.

Средняя часть

<h1 class="title">premium quality in <span>affordable</span> price</h1>

<p class="info">lorem 15</p>

</div>

</section>

/* mid section */

.mid-section{

width: 100%;

height: 800px;

padding: 40px 5vw;

}

.section-item-container{

width: 100%;

height: 100%;

position: relative;

padding: 20px;

}

.section-bg{

width: 100%;

height: 100%;

position: absolute;

z-index: -1;

top: 0;

left: 0;

}

.section-info{

width: 50%;

height: 100%;

background: #fff;

display: block;

margin-left: auto;

padding: 50px;

text-align: center;

}

.title{

font-size: 60px;

line-height: 100px;

}

.title span{

color: #d5be8b;

}

.info{

font-family: 'lato', sans-serif;

font-size: 25px;

line-height: 45px;

margin-top: 30px;

opacity: 0.5;

}

Результат

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

Коллаж изображений

</div>

</section>

/* image collage */

.image-mid-section{

width: 100%;

height: 600px;

padding: 50px 5vw;

}

.image-collage{

width: 100%;

height: 100%;

background: url(../img/bg-1.png);

background-size: cover;

}

.image-collection{

position: relative;

display: block;

width: 50%;

height: 100%;

background: #fff;

margin: auto;

}

.collage-img{

position: absolute;

object-fit: cover;

transition: .5s;

}

.collage-img:nth-child(1){

width: 350px;

height: 350px;

top: 20px;

left: 40px;

}

.collage-img:nth-child(2){

width: 250px;

height: 250px;

top: 200px;

left: 200px;

}

.collage-img:nth-child(3){

width: 250px;

height: 250px;

top: 100px;

left: 350px;

}

.collage-img:hover{

transform: translateY(-10px);

}

В приведенном выше примере мы добавили эффект наведения в файлы .collage-img. Но мы не добавили эффект размытия, мы сделаем это из JS.

Итак, откройте home.jsфайл и свяжите его с домашней страницей, используя scriptтег.

А потом написать JS.

// image collage

const collageImages = [...document.querySelectorAll('.collage-img')]

collageImages.map((item, i) => {

item.addEventListener('mouseover', () => {

collageImages.map((image, index) => {

if(index != i){

image.style.filter = `blur(10px)`;

item.style.zIndex = 2;

}

})

item.addEventListener('mouseleave', () => {

collageImages.map((image, index) => {

image.style = null;

})

Приведенный выше код очень прост для понимания, просто необходимо выбрать все изображения и перебрать каждое из них, используя mapметод. Затем добавить mouseoverи mouseleaveсобытия к изображению.

Результат

Далее попробуем сделать раздел обзора.

Раздел обзора

<h1 class="section-title">what our <span>customers</span> says about us</h1>

<h2 class="review-title">best quality more than my expectation</h2>

<p class="review">Lorem15</p>

</div>

+3 more reviews

</div>

</section>

/* review section */

.review-section{

padding: 50px 5vw;

}

.section-title span{

color: #d5be8b;

}

.review-container{

margin: 50px;

margin-bottom: 0;

display: flex;

justify-content: space-between;

}

.review-card{

width: 250px;

height: auto;

font-family: 'lato', sans-serif;

}

.user-dp{

width: 100px;

height: 100px;

border-radius: 50%;

position: relative;

}

.user-dp img{

width: 100%;

height: 100%;

object-fit: cover;

}

.user-dp::before{

content: '';

position: absolute;

top: 10px;

left: 10px;

right: 10px;

bottom: 10px;

border: 4px solid #fff;

border-radius: 50%;

}

.user-dp::after{

content: attr(data-rating);

position: absolute;

bottom: 0;

right: -20px;

padding: 5px 20px;

border-radius: 20px;

background: #d5be8b;

}

.review-title{

font-size: 20px;

line-height: 25px;

margin: 30px 0;

text-transform: capitalize;

}

.review{

opacity: 0.7;

}

Результат

Итак, последний раздел в основном является копией нашего среднего раздела. так что вы можете скопировать его и вставить после раздела обзора. Тогда просто измените classnamesнемного.

Конец раздела

<h1 class="title">order <span>now</span></h1>

<p class="info">Lorem15.</p>

</div>

</section>

<footer>made by modern web</footer>

Также сделайте нижний колонтитул.

.end-section .section-info{

margin: 0;

}

.end-section .title{

font-size: 100px;

line-height: 150px;

margin: 50px;

}

footer{

font-family: 'lato', sans-serif;

color: #d5be8b;

background: #190c05;

width: 100%;

height: 50px;

line-height: 50px;

text-align: center;

text-transform: capitalize;

font-size: 20px;

}

Результат

И последнее, что нужно сделать, чтобы «навигационная панель» изменил свой фон на белый при прокрутке.

home.js

// navbar

const navbar = document.querySelector('.navbar');

window.addEventListener('scroll', () => {

if(scrollY >= 180){

navbar.classList.add('bg');

} else{

navbar.classList.remove('bg');

}

})

Результат

Мы закончили с домашней страницей.

Теперь мы можем сделать страницу поиска, продукта и страницу 404.

Таким образом, вы можете сделать эти страницы из видео.https://www.youtube.com/embed/vHCSnaUdNkE

Сайт электронной коммерции не так прост, но очень интересен в написании.

Статьи, которые могут быть вам полезны:

Источник статьи: http://dev.to/

Как сделать эко-сайт в 2022 году [с исходным кодом]

17 потрясающих веб-приложений, которые стоит использовать для повышения производительности

Добавьте в закладки эти 8 интерфейсных веб-сайтов прямо сейчас!

Видеоурок

Код

Домашняя страница

Навбар

Раздел самых продаваемых товаров

Результат

Средняя часть

Результат

Коллаж изображений

Результат

Раздел обзора

Результат

Конец раздела

Результат

home.js

Статьи, которые могут быть вам полезны:

AnnaKvando

Related posts

Плохие привычки разработчиков React среднего уровня

(Неизвестно): ошибка сценария в JavaScript

Все, что вам нужно знать о React 18 RC

Добавить комментарий Отменить ответ