В этом уроке мы собираемся создать страницу товара для сайта с использованием HTML, CSS3 и jQuery. Вы можете использовать ее, чтобы показать товары на сайте вашего интернет-магазина.
В уроке, мы будем использовать шрифты Google, Roboto если точно. Убедитесь, что шрифт подключен, прежде чем начинать.
HTML
Первым шагом, мы создадим HTML структуру. Вот то, что нам нужно:
Две колонки
- Изображения наушников (**слева**)
- Описание и конфигурации наушников (**справа**)
- В правой колонке будет больше элементов (**кнопки, радиокнопки, ссылки**)
Окей, давайте обернем всё классом `.container`.
Вот наша разметка:
<!-- Left Column / Headphones Image --></pre> <div class="left-column"><img src="images/black.png" alt="" data-image="black" /> <img src="images/blue.png" alt="" data-image="blue" /> <img class="active" src="images/red.png" alt="" data-image="red" /></div> <pre> <!-- Right Column --></pre> <div class="right-column"><!-- Product Description --> <div class="product-description">Headphones <h1>Beats EP</h1> The preferred choice of a vast range of acclaimed DJs. Punchy, bass-focused sound and high isolation. Sturdy headband and on-ear cushions suitable for live performance</div> <!-- Product Configuration --> <div class="product-configuration"><!-- Product Color --> <div class="product-color">Color <div class="color-choose"> <div><input id="red" checked="checked" name="color" type="radio" value="red" data-image="red" /> <label for="red"></label></div> <div><input id="blue" name="color" type="radio" value="blue" data-image="blue" /> <label for="blue"></label></div> <div><input id="black" name="color" type="radio" value="black" data-image="black" /> <label for="black"></label></div> </div> </div> <!-- Cable Configuration --> <div class="cable-config">Cable configuration <div class="cable-choose"><button>Straight</button> <button>Coiled</button> <button>Long-coiled</button></div> <a href="#">How to configurate your headphones</a></div> </div> <!-- Product Pricing --> <div class="product-price">148$ <a class="cart-btn" href="#">Add to cart</a></div> </div> <pre>
Теперь, давайте перейдем к следующему шагу и настроим внешний вид.
CSS
Добавляем основные стили для body.
/* Basic Styling */
html, body {
height: 100%;
width: 100%;
margin: 0;
font-family: 'Roboto', sans-serif;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 15px;
display: flex;
}
Обратите внимание, что классу `.container` задано свойство `display: flex` для выравнивания колонок.
Теперь, давайте добавим некоторую ширину колонкам и свойство `position: relative` для класса `.left-column`, потому что мы будем использовать свойство `position: absolute` для абсолютного позиционирования изображений.
/* Columns */
.left-column {
width: 65%;
position: relative;
}
.right-column {
width: 35%;
margin-top: 60px;
}
Здорово! Теперь добавим стили для первой колонки с классом `.left-column`. В этой колонке у нас есть три изображения, трех наушников с разным цветом. Прописываем изображениям свойство `opacity: 0`, также изображениям нужно добавить класс `.active` и прописать свойство `opacity: 1`, нам понадобится это позже, когда мы будем работать с jQuery.
/* Left Column */
.left-column img {
width: 100%;
position: absolute;
left: 0;
top: 0;
opacity: 0;
transition: all 0.3s ease;
}
.left-column img.active {
opacity: 1;
}
Теперь настроим стиль для правой колонки с классом `.right-column`. Начнем с класса `.product-description`, где расположено описание товара.
/* Product Description */
.product-description {
border-bottom: 1px solid #E1E8EE;
margin-bottom: 20px;
}
.product-description span {
font-size: 12px;
color: #358ED7;
letter-spacing: 1px;
text-transform: uppercase;
text-decoration: none;
}
.product-description h1 {
font-weight: 300;
font-size: 52px;
color: #43484D;
letter-spacing: -2px;
}
.product-description p {
font-size: 16px;
font-weight: 300;
color: #86939E;
line-height: 24px;
}
Теперь, нам нужно настроить стили цветовых конфигураций товара.
Здесь у нас есть три радиокнопки, давайте оформим их, чтобы они выглядели красиво. Каждая радиокнопка будет иметь цвет, который соответствует цвету наушников. Мы будем использовать `: checked` для добавления отмеченной иконки,`: checked` — это замечательное псевдосостояние, которое предоставляет CSS.
/* Product Color */
.product-color {
margin-bottom: 30px;
}
.color-choose div {
display: inline-block;
}
.color-choose input[type="radio"] {
display: none;
}
.color-choose input[type="radio"] + label span {
display: inline-block;
width: 40px;
height: 40px;
margin: -1px 4px 0 0;
vertical-align: middle;
cursor: pointer;
border-radius: 50%;
}
.color-choose input[type="radio"] + label span {
border: 2px solid #FFFFFF;
box-shadow: 0 1px 3px 0 rgba(0,0,0,0.33);
}
.color-choose input[type="radio"]#red + label span {
background-color: #C91524;
}
.color-choose input[type="radio"]#blue + label span {
background-color: #314780;
}
.color-choose input[type="radio"]#black + label span {
background-color: #323232;
}
.color-choose input[type="radio"]:checked + label span {
background-image: url(images/check-icn.svg);
background-repeat: no-repeat;
background-position: center;
}
Отлично! Теперь, давайте зададим стили классу `.cable-configuration`, раздела конфигураций. Здесь у нас есть три кнопки и ссылка. Давайте настроим стили состояний и сделаем их красивыми.
/* Cable Configuration */
.cable-choose {
margin-bottom: 20px;
}
.cable-choose button {
border: 2px solid #E1E8EE;
border-radius: 6px;
padding: 13px 20px;
font-size: 14px;
color: #5E6977;
background-color: #fff;
cursor: pointer;
transition: all .5s;
}
.cable-choose button:hover,
.cable-choose button:active,
.cable-choose button:focus {
border: 2px solid #86939E;
outline: none;
}
.cable-config {
border-bottom: 1px solid #E1E8EE;
margin-bottom: 20px;
}
.cable-config a {
color: #358ED7;
text-decoration: none;
font-size: 12px;
position: relative;
margin: 10px 0;
display: inline-block;
}
.cable-config a:before {
content: "?";
height: 15px;
width: 15px;
border-radius: 50%;
border: 2px solid rgba(53, 142, 215, 0.5);
display: inline-block;
text-align: center;
line-height: 16px;
opacity: 0.5;
margin-right: 5px;
}
Последнее, что нужно сделать в этой колонке, настроить стиль секции с ценой товара, ей задан класс `.product-price`.
/* Product Price */
.product-price {
display: flex;
align-items: center;
}
.product-price span {
font-size: 26px;
font-weight: 300;
color: #43474D;
margin-right: 20px;
}
.cart-btn {
display: inline-block;
background-color: #7DC855;
border-radius: 6px;
font-size: 16px;
color: #FFFFFF;
text-decoration: none;
padding: 12px 30px;
transition: all .5s;
}
.cart-btn:hover {
background-color: #64af3d;
}
Замечательно! Вот финальный результат того, что мы делали:
Также давайте добавим адаптивность.
/* Responsive */
@media (max-width: 940px) {
.container {
flex-direction: column;
margin-top: 60px;
}
.left-column,
.right-column {
width: 100%;
}
.left-column img {
width: 300px;
right: 0;
top: -65px;
left: initial;
}
}
@media (max-width: 535px) {
.left-column img {
width: 220px;
top: -85px;
}
}
JS
Последнее, что мы должны сделать, это настроить смену изображения, когда мы нажимаем на цвет, так чтобы при изменении цвета радиокнопки, он соответствовал цвету наушников. Здесь используется jQuery, поэтому убедитесь, вы включили его в проект. Мы будем использовать атрибуты данных для работы с ним.
Обратите внимание, что мы добавляем класс `.active`. Как я упоминал ранее, каждый раз при нажатии на соответствующий цвет.
$(document).ready(function() {
$('.color-choose input').on('click', function() {
var headphonesColor = $(this).attr('data-image');
$('.active').removeClass('active');
$('.left-column img[data-image = ' + headphonesColor + ']').addClass('active');
$(this).addClass('active');
});
});
Посмотреть демо и скачать страницу товара веб-сайта
🔗 Посмотреть демо | 🔗 Скачать бесплатно
Потрясающе! Мы закончили! Не стесняйтесь использовать исходники в своих проектах. Взгляните на демонстрацию и сообщите нам, что вы об этом думаете в комментариях.
