Плюс модная эстетика веб-дизайна.
Приветооо 👋
Сегодня мы кодируем тренды. Это простой быстрый эксперимент с кодом, за которым вы можете следить на видео ниже:
Также вы можете найти исходный код здесь 👀:
Часть 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/