0 added
0 removed
Original
2026-01-01
Modified
2026-03-09
1
<p><section class="intro"> <div class="container"> <h1 class="intro-title">Comfort and coziness in&nbsp;<b>your</b> apartment</h1> <p>A variety of home furnishings with delivery worldwide</p> </div> </section> <section class="popular-products"> <div class="container"> <h2 class="visually-hidden">Top sellers</h2> <ul class="products-list"> <li> <a class="product-card" href="product.php?product_id=1"> <h3>Mseyulida</h3> <p>floor lamp</p> <span class="price"><del>$289</del> $288</span> <img src="img/item-mseyulida.jpg" width="156" height="120" alt="&quot;Mseyulida&quot; floor lamp"> </a> </li> <li> <a class="product-card product-card-new" href="product.php?product_id=2"> <h3>Rmaeribi</h3> <p>three-seat sofa</p> <span class="price">$5870</span> <img src="img/item-rmaeribi.jpg" width="156" height="120" alt=" &quot;Rmaeribi&quot; three-seat sofa"> </a> </li> <li> <a class="product-card" href="product.php?product_id=3"> <h3>Bletub</h3> <p>ceiling chandelier</p> <span class="price">$1360</span> <img src="img/item-bletub.jpg" width="156" height="120" alt="&quot;Bletub&quot; ceiling chandelier"> </a> </li> </ul> </div> </section> <section class="features"> <div class="container"> <h2 class="features-title">What <b>sets</b> us apart from our competitors?</h2> <ul class="features-list"> <li class="feature-unique">Our unique products are&nbsp;unlike anything else on the market</li> <li class="feature-organic">We use only natural materials</li> <li class="feature-protected">Our furniture is resistant to cat teeth and claws</li> </ul> </div> </section></p>
1
<p><section class="intro"> <div class="container"> <h1 class="intro-title">Comfort and coziness in&nbsp;<b>your</b> apartment</h1> <p>A variety of home furnishings with delivery worldwide</p> </div> </section> <section class="popular-products"> <div class="container"> <h2 class="visually-hidden">Top sellers</h2> <ul class="products-list"> <li> <a class="product-card" href="product.php?product_id=1"> <h3>Mseyulida</h3> <p>floor lamp</p> <span class="price"><del>$289</del> $288</span> <img src="img/item-mseyulida.jpg" width="156" height="120" alt="&quot;Mseyulida&quot; floor lamp"> </a> </li> <li> <a class="product-card product-card-new" href="product.php?product_id=2"> <h3>Rmaeribi</h3> <p>three-seat sofa</p> <span class="price">$5870</span> <img src="img/item-rmaeribi.jpg" width="156" height="120" alt=" &quot;Rmaeribi&quot; three-seat sofa"> </a> </li> <li> <a class="product-card" href="product.php?product_id=3"> <h3>Bletub</h3> <p>ceiling chandelier</p> <span class="price">$1360</span> <img src="img/item-bletub.jpg" width="156" height="120" alt="&quot;Bletub&quot; ceiling chandelier"> </a> </li> </ul> </div> </section> <section class="features"> <div class="container"> <h2 class="features-title">What <b>sets</b> us apart from our competitors?</h2> <ul class="features-list"> <li class="feature-unique">Our unique products are&nbsp;unlike anything else on the market</li> <li class="feature-organic">We use only natural materials</li> <li class="feature-protected">Our furniture is resistant to cat teeth and claws</li> </ul> </div> </section></p>
2
<p><footer class="site-footer"> <div class="container"> <p class="copyright">© Muffin, 2019</p> <ul class="navigation-list"> <li><a href="catalog.php">Catalog</a></li> <li><a href="delivery.html">Delivery</a></li> <li><a href="contacts.html">Contact us</a></li> </ul> <ul class="social-list"> <li> <a class="social-link-twitter" href="https://twitter.com"> <span class="visually-hidden">Twitter</span> </a> </li> <li> <a class="social-link-instagram" href="https://instagram.com"> <span class="visually-hidden">Instagram</span> </a> </li> <li> <a class="social-link-facebook" href="https://facebook.com"> <span class="visually-hidden">Facebook</span> </a> </li> </ul> </div> </footer> </body> </html></p>
2
<p><footer class="site-footer"> <div class="container"> <p class="copyright">© Muffin, 2019</p> <ul class="navigation-list"> <li><a href="catalog.php">Catalog</a></li> <li><a href="delivery.html">Delivery</a></li> <li><a href="contacts.html">Contact us</a></li> </ul> <ul class="social-list"> <li> <a class="social-link-twitter" href="https://twitter.com"> <span class="visually-hidden">Twitter</span> </a> </li> <li> <a class="social-link-instagram" href="https://instagram.com"> <span class="visually-hidden">Instagram</span> </a> </li> <li> <a class="social-link-facebook" href="https://facebook.com"> <span class="visually-hidden">Facebook</span> </a> </li> </ul> </div> </footer> </body> </html></p>
3
<p><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Online store for home furnishings</title> <link href="style.css" rel="stylesheet"> </head> <body> <header class="site-header"> <nav class="site-navigation"> <a class="logo-link" href="index.php"> <img src="img/logo-full.svg" width="62" height="17" alt="Gloevk store logo"> </a> <ul class="navigation-list"> <li><a href="catalog.php">Catalog</a></li> <li><a href="delivery.html">Delivery</a></li> <li><a href="contacts.html">Contact us</a></li> <li><a href="blog.html">Blog</a></li> </ul> </nav> </header></p>
3
<p><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Online store for home furnishings</title> <link href="style.css" rel="stylesheet"> </head> <body> <header class="site-header"> <nav class="site-navigation"> <a class="logo-link" href="index.php"> <img src="img/logo-full.svg" width="62" height="17" alt="Gloevk store logo"> </a> <ul class="navigation-list"> <li><a href="catalog.php">Catalog</a></li> <li><a href="delivery.html">Delivery</a></li> <li><a href="contacts.html">Contact us</a></li> <li><a href="blog.html">Blog</a></li> </ul> </nav> </header></p>
4
<p><?php require('components/header.php'); require('components/company_info.php'); require('components/footer.php');</p>
4
<p><?php require('components/header.php'); require('components/company_info.php'); require('components/footer.php');</p>
5
<p><?php require('components/header.php'); require('components/products_list.php'); require('components/footer.php'); ?></p>
5
<p><?php require('components/header.php'); require('components/products_list.php'); require('components/footer.php'); ?></p>
6
<p><section class="catalog"> <div class="container"> <h1 class="catalog-title">Product catalog</h1> <ul class="products-list"> <li> <a class="product-card" href="product.php?product_id=1"> <h3>Mseyulida</h3> <p>floor lamp</p> <span class="price"><del>$289</del> $288</span> <img src="img/item-mseyulida.jpg" width="156" height="120" alt="&quot;Mseyulida&quot; floor lamp"> </a> </li> <li> <a class="product-card product-card-new" href="product.php?product_id=2"> <h3>Rmaeribi</h3> <p>three-seat sofa</p> <span class="price">$5870</span> <img src="img/item-rmaeribi.jpg" width="156" height="120" alt=" &quot;Rmaeribi&quot; three-seat sofa"> </a> </li> <li> <a class="product-card" href="product.php?product_id=3"> <h3>Bletub</h3> <p>ceiling chandelier</p> <span class="price">$1360</span> <img src="img/item-bletub.jpg" width="156" height="120" alt="Bletub ceiling chandelier"> </a> </li> <li> <a class="product-card" href="product.php?product_id=4"> <h3>Nnulm</h3> <p>desk</p> <span class="price">$6832</span> <img src="img/item-nnulm.jpg" width="156" height="120" alt="&quot;Nnulm&quot; computer desk"> </a> </li> <li> <a class="product-card" href="product.php?product_id=5"> <h3>Asusmer</h3> <p>hanging bed</p> <span class="price"><del>$21320</del>$19320</span> <img src="img/item-asusmer.jpg" width="156" height="120" alt="&quot;Asusmer&quot; hanging bed"> </a> </li> <li> <a class="product-card product-card-new" href="product.php?product_id=6"> <h3>Tre</h3> <p>furniture set</p> <span class="price">$32560</span> <img src="img/item-tre.jpg" width="156" height="120" alt="&quot;Tre&quot; furniture set"> </a> </li> </ul> </div> </section></p>
6
<p><section class="catalog"> <div class="container"> <h1 class="catalog-title">Product catalog</h1> <ul class="products-list"> <li> <a class="product-card" href="product.php?product_id=1"> <h3>Mseyulida</h3> <p>floor lamp</p> <span class="price"><del>$289</del> $288</span> <img src="img/item-mseyulida.jpg" width="156" height="120" alt="&quot;Mseyulida&quot; floor lamp"> </a> </li> <li> <a class="product-card product-card-new" href="product.php?product_id=2"> <h3>Rmaeribi</h3> <p>three-seat sofa</p> <span class="price">$5870</span> <img src="img/item-rmaeribi.jpg" width="156" height="120" alt=" &quot;Rmaeribi&quot; three-seat sofa"> </a> </li> <li> <a class="product-card" href="product.php?product_id=3"> <h3>Bletub</h3> <p>ceiling chandelier</p> <span class="price">$1360</span> <img src="img/item-bletub.jpg" width="156" height="120" alt="Bletub ceiling chandelier"> </a> </li> <li> <a class="product-card" href="product.php?product_id=4"> <h3>Nnulm</h3> <p>desk</p> <span class="price">$6832</span> <img src="img/item-nnulm.jpg" width="156" height="120" alt="&quot;Nnulm&quot; computer desk"> </a> </li> <li> <a class="product-card" href="product.php?product_id=5"> <h3>Asusmer</h3> <p>hanging bed</p> <span class="price"><del>$21320</del>$19320</span> <img src="img/item-asusmer.jpg" width="156" height="120" alt="&quot;Asusmer&quot; hanging bed"> </a> </li> <li> <a class="product-card product-card-new" href="product.php?product_id=6"> <h3>Tre</h3> <p>furniture set</p> <span class="price">$32560</span> <img src="img/item-tre.jpg" width="156" height="120" alt="&quot;Tre&quot; furniture set"> </a> </li> </ul> </div> </section></p>
7
<p><?php require('components/header.php'); // Create a variable here require('components/product_info.php'); require('components/footer.php');</p>
7
<p><?php require('components/header.php'); // Create a variable here require('components/product_info.php'); require('components/footer.php');</p>
8
<p><section class="item"> <div class="container"> <h1 class="item-title">Product name</h1> <img src="img/placeholder.png" width="510" height="392" alt="Placeholder for product photo"> </div> </section></p>
8
<p><section class="item"> <div class="container"> <h1 class="item-title">Product name</h1> <img src="img/placeholder.png" width="510" height="392" alt="Placeholder for product photo"> </div> </section></p>
9
<p>.visually-hidden:not(:focus):not(:active), input[type="checkbox"].visually-hidden, input[type="radio"].visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; border: 0; padding: 0; white-space: nowrap; clip-path: inset(100%); clip: rect(0 0 0 0); overflow: hidden; } body { min-width: 550px; padding: 0; margin: 0; font-family: "Arial", "Helvetica", sans-serif; font-size: 13px; line-height: 18px; } a { text-decoration: none; color: inherit; } .container { width: 510px; padding: 0 20px; margin: 0 auto; } .site-navigation { display: flex; width: 510px; padding: 0 20px; margin: 0 auto; justify-content: space-between; } .site-header { position: relative; z-index: 2; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); } .logo-link:hover, .logo-link:focus { opacity: 0.5; } .logo-link:active { opacity: 0.3; } .logo-link img { margin: 10px 0; } .navigation-list { display: flex; margin: 0 -15px 0 0; padding: 0; list-style: none; flex-wrap: wrap; justify-content: flex-end; } .navigation-list a:hover, .navigation-list a:focus { opacity: 0.5; } .navigation-list a:active { color: #ff8a00; } .navigation-list a { display: block; padding: 12px 15px 11px; color: #845927; } .intro .container { z-index: -1; min-height: 150px; margin-bottom: 20px; padding: 15px 0 0; box-sizing: border-box; background-image: url("img/index-background.jpg"); background-repeat: no-repeat; background-position: top right; } .intro-title { width: 240px; padding: 0; margin: 0; font-family: "Georgia", "Times", serif; font-size: 28px; line-height: 36px; font-weight: 400; } .intro-title b, .features-title b, .delivery-text b { font-weight: 400; color: #ff8a00; } .intro p { width: 210px; margin: 8px 0 10px; padding: 0; line-height: 20px; } .quote { display: block; position: relative; padding: 0 0 0 33px; margin: 20px 0 20px; font-family: "Georgia", "Times", serif; font-style: italic; } .quote p { padding: 0; margin: 0; font-size: 16px; line-height: 24px; quotes: none; } .quote::before { position: absolute; content: """; top: 0; left: 0; font-size: 36px; color: #ff8a00; } .author { display: block; padding: 0; margin: 4px 0; } .popular-products { margin: 0; background-color: #fff3e5; } .delivery, .custom, .contacts, .catalog, .item { margin: 15px 0 10px; } .delivery-title, .custom-title, .contacts-title, .catalog-title, .item-title { padding: 0; margin: 0; font-family: "Georgia", "Times", serif; font-size: 28px; line-height: 36px; font-weight: 400; } .custom-columns { display: flex; flex-grow: 0; } .custom-columns img { display: flex; flex-shrink: 0; align-items: center; margin: 20px 20px 30px 0; min-height: 200px; } .custom-columns div { margin: 5px 0 20px; } .products-list { display: flex; padding: 20px 0 0; margin: 0 0 0 -20px; flex-wrap: wrap; flex-shrink: 0; list-style: none; } .products-list li { display: flex; } .product-card { position: relative; display: flex; width: 132px; margin-bottom: 20px; margin-left: 20px; padding: 124px 12px 12px; flex-direction: column; background-color: #ffffff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); } .product-card-new { position: relative; } .product-card-new::after { position: absolute; content: "new"; width: 34px; height: 15px; top: 8px; right: -2px; font-weight: 700; line-height: 14px; color: #ffffff; text-align: center; background-color: #ff8a00; border-radius: 4px 0 0 4px; } .product-card:hover, .product-card:focus { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } .product-card:active { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); } .product-card img { position: absolute; top: 0; left: 0; order: -1; } .product-card h3 { margin: 0 0 2px 0; padding: 0; font-family: "Georgia", "Times", serif; font-size: 15px; line-height: 18px; font-weight: 400; } .product-card p { margin: 0 0 8px 0; padding: 0; font-family: "Georgia", "Times", serif; font-style: italic; font-size: 13px; line-height: 16px; } .price { margin-top: auto; font-weight: 700; font-size: 15px; color: #ff8a00; } .price del { margin-right: 2px; font-weight: 400; font-size: 13px; color: #000000; text-decoration: line-through; } .map-link { display: block; margin-top: -20px; margin-bottom: 30px; color: #845927; } .map-link:hover, .map-link:focus { opacity: 0.5; } .map-link:active { color: #ff8a00; } .contacts img, .item img { display: flex; flex-shrink: 0; align-items: center; margin: 20px 0 30px; min-height: 200px; } .contacts-info { margin: -10px 0 30px; } .contacts-info p { position: relative; padding-left: 16px; margin: 12px 0; } .contact-phone::before { position: absolute; content: ""; width: 10px; height: 13px; top: 2px; left: 0; background-image: url("img/icon-phone.svg"); } .contact-address::before { position: absolute; content: ""; width: 9px; height: 13px; top: 2px; left: 0; background-image: url("img/icon-pin.svg"); } .delivery-background { display: flex; flex-shrink: 0; align-items: center; margin: 20px 0 30px; min-height: 200px; background-image: url("img/delivery-background.jpg"); background-repeat: no-repeat; background-position: center left; } .delivery-text { width: 210px; margin-left: auto; padding: 16px 20px 20px; background-color: #ffffff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); } .delivery-text p { margin: 8px; padding: 0; } .features { padding-top: 20px; padding-bottom: 10px; } .features-title, .services-title, .products-title { margin: 0; padding: 0; font-family: "Georgia", "Times", serif; font-size: 20px; line-height: 24px; font-weight: 400; } .features-list { display: flex; padding: 0; margin: 14px 0 0; justify-content: space-between; flex-wrap: wrap; list-style: none; } .features-list li { position: relative; width: 142px; margin-bottom: 10px; } .features-list li::before { position: absolute; content: ""; top: 2px; left: 0; } .feature-unique { padding-left: 22px; } .feature-unique::before { width: 16px; height: 12px; background-image: url("img/feature-unique.svg"); } .feature-organic { padding-left: 25px; } .feature-organic::before { width: 19px; height: 12px; background-image: url("img/feature-organic.svg"); } .feature-protected { padding-left: 16px; } .feature-protected::before { width: 10px; height: 12px; background-image: url("img/feature-protected.svg"); } .site-footer { background-color: #847462; } .site-footer .container { display: flex; flex-grow: 1; justify-content: space-between; } .copyright { margin: auto 0; flex-shrink: 0; color: #ffffff; } .site-footer .navigation-list { margin-right: 15px; margin-left: -15px; justify-content: left; } .copyright + .navigation-list { justify-content: center; margin-left: 15px; } .site-footer a { display: block; margin: 0; padding: 14px 15px; color: #ffffff; } .social-list { display: flex; width: 110px; padding: 0; margin: 0 -10px 2px; justify-content: end; flex-shrink: 0; flex-wrap: wrap; align-items: center; list-style: none; } .social-list a { display: block; width: 14px; height: 14px; padding: 10px; background-repeat: no-repeat; background-position: center; } .social-link-twitter { background-image: url("img/icon-twitter.svg"); } .social-link-instagram { background-image: url("img/icon-instagram.svg"); } .social-link-facebook { background-image: url("img/icon-facebook.svg"); } .social-list a:hover, .social-list a:focus { opacity: 0.5; } .social-list a:active { opacity: 0.3; } /* Additional styles for an alternate homepage */ .intro-alt { min-height: 145px; margin-bottom: 20px; color: #ffffff; background: linear-gradient(#ffad4c 0%, #ea9b3e 80%, #ffad4c 100%); } .intro-alt .container { display: flex; justify-content: space-between; } .intro-text { flex-shrink: 0; padding: 20px 0; } .intro-item { display: flex; flex-direction: column; align-items: center; position: relative; width: 272px; padding-top: 58px; flex-shrink: 0; } .intro-item img { position: absolute; top: 14px; right: 0; } .intro-item p { margin-bottom: 2px; z-index: 2; } .intro-alt .intro-title { margin: 0; padding: 0 0 4px; font-family: "Georgia", "Times", serif; font-size: 32px; line-height: 36px; font-weight: 700; } .intro-description { margin: 0; padding: 0 0 16px; font-size: 15px; font-weight: 700; } .intro-info { margin: 0; line-height: 22px; } .intro-alt code { display: inline-block; vertical-align: baseline; margin: 0 8px; padding: 1px 8px; font-family: inherit; color: #000000; font-weight: 700; letter-spacing: 0.5px; background-color: #ffffff; border-radius: 4px; } .intro-price { z-index: 2; font-size: 15px; font-weight: 700; } .intro-price del { margin-right: 2px; font-weight: 400; font-size: 13px; color: #000000; text-decoration: line-through; } .services-list { display: flex; padding: 0; margin: 14px 0 0; justify-content: space-between; flex-wrap: wrap; list-style: none; } .services-list li { position: relative; width: 156px; margin-bottom: 20px; padding: 122px 0 0; } .services-list li::before { position: absolute; content: ""; top: 0; left: 0; width: 156px; height: 114px; background-repeat: no-repeat; } .service-cleaning::before { background-image: url("img/service-cleaning.jpg"); } .service-placing::before { background-image: url("img/service-placing.jpg"); } .service-decorating::before { background-image: url("img/service-decorating.jpg"); } .products-title { padding-top: 20px; } .product-card-wide { position: relative; display: flex; flex-wrap: wrap; width: 100px; min-height: 81px; margin-bottom: 30px; margin-left: 20px; padding: 15px 25px 15px 120px; background-color: #ffffff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); } .product-card-wide p { margin-bottom: 10px; }</p>
9
<p>.visually-hidden:not(:focus):not(:active), input[type="checkbox"].visually-hidden, input[type="radio"].visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; border: 0; padding: 0; white-space: nowrap; clip-path: inset(100%); clip: rect(0 0 0 0); overflow: hidden; } body { min-width: 550px; padding: 0; margin: 0; font-family: "Arial", "Helvetica", sans-serif; font-size: 13px; line-height: 18px; } a { text-decoration: none; color: inherit; } .container { width: 510px; padding: 0 20px; margin: 0 auto; } .site-navigation { display: flex; width: 510px; padding: 0 20px; margin: 0 auto; justify-content: space-between; } .site-header { position: relative; z-index: 2; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); } .logo-link:hover, .logo-link:focus { opacity: 0.5; } .logo-link:active { opacity: 0.3; } .logo-link img { margin: 10px 0; } .navigation-list { display: flex; margin: 0 -15px 0 0; padding: 0; list-style: none; flex-wrap: wrap; justify-content: flex-end; } .navigation-list a:hover, .navigation-list a:focus { opacity: 0.5; } .navigation-list a:active { color: #ff8a00; } .navigation-list a { display: block; padding: 12px 15px 11px; color: #845927; } .intro .container { z-index: -1; min-height: 150px; margin-bottom: 20px; padding: 15px 0 0; box-sizing: border-box; background-image: url("img/index-background.jpg"); background-repeat: no-repeat; background-position: top right; } .intro-title { width: 240px; padding: 0; margin: 0; font-family: "Georgia", "Times", serif; font-size: 28px; line-height: 36px; font-weight: 400; } .intro-title b, .features-title b, .delivery-text b { font-weight: 400; color: #ff8a00; } .intro p { width: 210px; margin: 8px 0 10px; padding: 0; line-height: 20px; } .quote { display: block; position: relative; padding: 0 0 0 33px; margin: 20px 0 20px; font-family: "Georgia", "Times", serif; font-style: italic; } .quote p { padding: 0; margin: 0; font-size: 16px; line-height: 24px; quotes: none; } .quote::before { position: absolute; content: """; top: 0; left: 0; font-size: 36px; color: #ff8a00; } .author { display: block; padding: 0; margin: 4px 0; } .popular-products { margin: 0; background-color: #fff3e5; } .delivery, .custom, .contacts, .catalog, .item { margin: 15px 0 10px; } .delivery-title, .custom-title, .contacts-title, .catalog-title, .item-title { padding: 0; margin: 0; font-family: "Georgia", "Times", serif; font-size: 28px; line-height: 36px; font-weight: 400; } .custom-columns { display: flex; flex-grow: 0; } .custom-columns img { display: flex; flex-shrink: 0; align-items: center; margin: 20px 20px 30px 0; min-height: 200px; } .custom-columns div { margin: 5px 0 20px; } .products-list { display: flex; padding: 20px 0 0; margin: 0 0 0 -20px; flex-wrap: wrap; flex-shrink: 0; list-style: none; } .products-list li { display: flex; } .product-card { position: relative; display: flex; width: 132px; margin-bottom: 20px; margin-left: 20px; padding: 124px 12px 12px; flex-direction: column; background-color: #ffffff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); } .product-card-new { position: relative; } .product-card-new::after { position: absolute; content: "new"; width: 34px; height: 15px; top: 8px; right: -2px; font-weight: 700; line-height: 14px; color: #ffffff; text-align: center; background-color: #ff8a00; border-radius: 4px 0 0 4px; } .product-card:hover, .product-card:focus { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } .product-card:active { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); } .product-card img { position: absolute; top: 0; left: 0; order: -1; } .product-card h3 { margin: 0 0 2px 0; padding: 0; font-family: "Georgia", "Times", serif; font-size: 15px; line-height: 18px; font-weight: 400; } .product-card p { margin: 0 0 8px 0; padding: 0; font-family: "Georgia", "Times", serif; font-style: italic; font-size: 13px; line-height: 16px; } .price { margin-top: auto; font-weight: 700; font-size: 15px; color: #ff8a00; } .price del { margin-right: 2px; font-weight: 400; font-size: 13px; color: #000000; text-decoration: line-through; } .map-link { display: block; margin-top: -20px; margin-bottom: 30px; color: #845927; } .map-link:hover, .map-link:focus { opacity: 0.5; } .map-link:active { color: #ff8a00; } .contacts img, .item img { display: flex; flex-shrink: 0; align-items: center; margin: 20px 0 30px; min-height: 200px; } .contacts-info { margin: -10px 0 30px; } .contacts-info p { position: relative; padding-left: 16px; margin: 12px 0; } .contact-phone::before { position: absolute; content: ""; width: 10px; height: 13px; top: 2px; left: 0; background-image: url("img/icon-phone.svg"); } .contact-address::before { position: absolute; content: ""; width: 9px; height: 13px; top: 2px; left: 0; background-image: url("img/icon-pin.svg"); } .delivery-background { display: flex; flex-shrink: 0; align-items: center; margin: 20px 0 30px; min-height: 200px; background-image: url("img/delivery-background.jpg"); background-repeat: no-repeat; background-position: center left; } .delivery-text { width: 210px; margin-left: auto; padding: 16px 20px 20px; background-color: #ffffff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); } .delivery-text p { margin: 8px; padding: 0; } .features { padding-top: 20px; padding-bottom: 10px; } .features-title, .services-title, .products-title { margin: 0; padding: 0; font-family: "Georgia", "Times", serif; font-size: 20px; line-height: 24px; font-weight: 400; } .features-list { display: flex; padding: 0; margin: 14px 0 0; justify-content: space-between; flex-wrap: wrap; list-style: none; } .features-list li { position: relative; width: 142px; margin-bottom: 10px; } .features-list li::before { position: absolute; content: ""; top: 2px; left: 0; } .feature-unique { padding-left: 22px; } .feature-unique::before { width: 16px; height: 12px; background-image: url("img/feature-unique.svg"); } .feature-organic { padding-left: 25px; } .feature-organic::before { width: 19px; height: 12px; background-image: url("img/feature-organic.svg"); } .feature-protected { padding-left: 16px; } .feature-protected::before { width: 10px; height: 12px; background-image: url("img/feature-protected.svg"); } .site-footer { background-color: #847462; } .site-footer .container { display: flex; flex-grow: 1; justify-content: space-between; } .copyright { margin: auto 0; flex-shrink: 0; color: #ffffff; } .site-footer .navigation-list { margin-right: 15px; margin-left: -15px; justify-content: left; } .copyright + .navigation-list { justify-content: center; margin-left: 15px; } .site-footer a { display: block; margin: 0; padding: 14px 15px; color: #ffffff; } .social-list { display: flex; width: 110px; padding: 0; margin: 0 -10px 2px; justify-content: end; flex-shrink: 0; flex-wrap: wrap; align-items: center; list-style: none; } .social-list a { display: block; width: 14px; height: 14px; padding: 10px; background-repeat: no-repeat; background-position: center; } .social-link-twitter { background-image: url("img/icon-twitter.svg"); } .social-link-instagram { background-image: url("img/icon-instagram.svg"); } .social-link-facebook { background-image: url("img/icon-facebook.svg"); } .social-list a:hover, .social-list a:focus { opacity: 0.5; } .social-list a:active { opacity: 0.3; } /* Additional styles for an alternate homepage */ .intro-alt { min-height: 145px; margin-bottom: 20px; color: #ffffff; background: linear-gradient(#ffad4c 0%, #ea9b3e 80%, #ffad4c 100%); } .intro-alt .container { display: flex; justify-content: space-between; } .intro-text { flex-shrink: 0; padding: 20px 0; } .intro-item { display: flex; flex-direction: column; align-items: center; position: relative; width: 272px; padding-top: 58px; flex-shrink: 0; } .intro-item img { position: absolute; top: 14px; right: 0; } .intro-item p { margin-bottom: 2px; z-index: 2; } .intro-alt .intro-title { margin: 0; padding: 0 0 4px; font-family: "Georgia", "Times", serif; font-size: 32px; line-height: 36px; font-weight: 700; } .intro-description { margin: 0; padding: 0 0 16px; font-size: 15px; font-weight: 700; } .intro-info { margin: 0; line-height: 22px; } .intro-alt code { display: inline-block; vertical-align: baseline; margin: 0 8px; padding: 1px 8px; font-family: inherit; color: #000000; font-weight: 700; letter-spacing: 0.5px; background-color: #ffffff; border-radius: 4px; } .intro-price { z-index: 2; font-size: 15px; font-weight: 700; } .intro-price del { margin-right: 2px; font-weight: 400; font-size: 13px; color: #000000; text-decoration: line-through; } .services-list { display: flex; padding: 0; margin: 14px 0 0; justify-content: space-between; flex-wrap: wrap; list-style: none; } .services-list li { position: relative; width: 156px; margin-bottom: 20px; padding: 122px 0 0; } .services-list li::before { position: absolute; content: ""; top: 0; left: 0; width: 156px; height: 114px; background-repeat: no-repeat; } .service-cleaning::before { background-image: url("img/service-cleaning.jpg"); } .service-placing::before { background-image: url("img/service-placing.jpg"); } .service-decorating::before { background-image: url("img/service-decorating.jpg"); } .products-title { padding-top: 20px; } .product-card-wide { position: relative; display: flex; flex-wrap: wrap; width: 100px; min-height: 81px; margin-bottom: 30px; margin-left: 20px; padding: 15px 25px 15px 120px; background-color: #ffffff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); } .product-card-wide p { margin-bottom: 10px; }</p>