Плюс модная эстетика веб-дизайна.

Приветооо 👋

Сегодня мы кодируем тренды. Это простой быстрый эксперимент с кодом, за которым вы можете следить на видео ниже:

Также вы можете найти исходный код здесь 👀:



dev-glowUp/codingTrends_3
Внесите свой вклад в разработку dev-glowUp/codingTrends_3, создав учетную запись на GitHub.github.com



Часть I. HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>dev.glowUp - CodingTrends #3</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
         <div class="hero">
            <h1 class="logo">
                <span>bed-weather</span>
            </h1>
         </div>
         <div class="section">
            <div class="product-description">
                <h2>lolita pillow</h2>
                <hr>
                <h2>30.99$ </h2>
                <p>
                    This plush velvet cushion will bring a sumptuous and decorative feel to your living area. It combines a generous feather filling with a soft cover to provide maximum comfort for your sofa and will blend in easily with your home decor.
                </p>
                <hr>
                <p>Cover is removable and washable.</p>
                <hr>
                <p>80% Organic cotton + 20% Polyester</p>
                <hr>
                <div class="color-change-dots">
                    <span class="dot" tag="Indigo"></span>
                    <span class="dot" tag="Anthracite"></span>
                    <span class="dot" tag="Dusty-Pink"></span>
                    <span class="dot" tag="Mustard"></span>
                    <span class="dot" tag="Silver"></span>
                    <span class="color-name">Indigo</span>
                </div>
                <a href="#">Add to Cart</a>
            </div>
    
            <div class="container-product">
                    <svg class="product-svg" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 596">
                        <path id="product-shape" d="(...) SVG CODE (...)" fill="#5c67e1"/>
                    </svg>
                    <img class="background-image" src="/Pillow_website_md.png" alt="Suede Throw Pillow">
              </div>
            </div>
    </div>
 </body>
</html>

Часть II. CSS

@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap');
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    vertical-align:top;
}
:root {
    /* COLOR */
    --backgroud: #e2e2e2;
    --text:  #2b2b2b;
    
    --indigo: #5c67e1;
    --anthracite: #484848;
    --dustyPink: #d898aa;
    --mustard: #dfa321;
    --silver: #bbb;
}
body {
    background-color: var(--backgroud);
    color: var(--text);
    font-family: 'Space Mono', monospace;
    font-size: 18px;
}
/* HERO / LOGO */
.logo {
    font-weight: 400;
    letter-spacing: -.025em;
    font-size: 15vw;
    line-height: 17vw;
    width: 100vw;
    overflow: hidden;
    text-align: center;
}
/* PRODUCT SECTION */
.section {
    margin: 40px 0px;
    display: grid;
    grid-template-columns: 1fr auto auto 1fr;
}
/* DESCRIPTION */
.product-description {
    grid-column-start: 2;
    padding: 0px 50px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 775px;
    max-width: 550px;
    letter-spacing: 0.35px;
    line-height: 30px;
}
h2 {
  font-size: 40px;
  font-weight: 400;
  text-align: right;
}
p {
    text-align: right;
}
hr {
    border: 1px solid var(--text);
  }
/* PRODUCT COLOR OPTIONS - DOT */
.dot {
  height: 40px;
  width: 40px;
  border-radius: 50%;
  margin-left: 10px;
  display: inline-block;
  cursor: pointer;
}
.dot:nth-child(1) {
  background-color: var(--indigo)
}
.dot:nth-child(2) {
  background-color: var(--anthracite);
}
.dot:nth-child(3) {
  background-color: var(--dustyPink);
}
.dot:nth-child(4) {
  background-color: var(--mustard);
}
.dot:nth-child(5) {
  background-color: var(--silver);
}
.color-name {
    text-transform: uppercase;
    margin-left: 10px;
}
.dot:hover {
    border: 3px solid var(--text);
    cursor: pointer;
}
/* ADD TO CART BUTON */
a {
  border: 2px solid var(--text);
  padding: 10px;
  text-align: center;
  text-decoration: none;
  font-size: 20px;
  line-height: 50px;
  color: var(--text);
}
a:hover {
    background-color: var(--text);
    color: var(--backgroud);
}
/* PRODUCT IMAGE */
.container-product {
    position: relative;
    grid-column-start: 3;
}
/* IMAGE */
.background-image {
    position: absolute;
    height: auto;
    top: 0px;
    left: 0px;
}
/* SVG */
.product-svg {
    position: relative;
    z-index: 2;
    mix-blend-mode: multiply;
    top: 0px;
    left: 0px;
    width: 650px;
}

Часть 3. JQuery

<script src="/Jquery/jquery-3.5.1.min.js"></script>
<script>
     $( ".dot" ).click(function(){
         // Change the color of the product on selection
                var $hex = $(this).css("backgroundColor");
                $("#product-shape").css({'fill' : $hex});
         // Change the name of the color on selection
                var $textTag = $(this).attr("tag");
                $(".color-name").html($textTag);
      });
</script>

Большое спасибо, что читаете ✨

Серия #CodingTrends | № 3 Изменение цвета продукта с помощью Jquery и SVG

✨Сайт: https://dev-glowup.myportfolio.com/

✨Гитхаб: https://github.com/dev-glowUp

✨Pinterest: https://www.pinterest.pt/dev_glowup/