Loading…
Everything will be ready in few seconds
- Theory
- Theory
- Comments
Built-in functions
We did a great job with the shipment status page, so Dumpo assigned us the task of working on the main page for the online store. We need to display listings with three random promo items on the page. By promo items, we mean all of the new products and the five cheapest ones.
“Asusmer” hanging bed
$10,000
“Rmaeribi” sofa
$15,000
Premium Compact Cassette
$200
Dumpo has already written code that displays all of the product listings on the page. This code can be found in the components/promo.php template. We need to include this template on the main page so that the product listings can appear there.
We have already included files using the require command:
require('file.php');In order to include a file, we need to write the command name and then specific the file address in parentheses. Doesn’t it remind you of the function call and how we passed the argument to it? Of course it does. That’s because the require command is a function. But we did not declare it, and it is not something that Muffin’s studio developed. So where did it come from? Straight from PHP. It is a built-in function.
Built-in functions are the functions that were created by the creators of PHP. They form part of the language, and for that reason they do not need to be declared before you can use them. PHP contains thousands of predefined functions. There is no need to memorize them. After all, you can always look them up in the documentation.
We worked with the count command in the previous chapter. This is also a built-in function. It takes an array as an argument and returns its length. PHP has many built-in functions for working with arrays. We will need some of them in order to complete the assignment and display listings with random promo items on the page.
But first, we need to include the components/promo.php template on the main page of the online store.
Files
<?php
require('products_db.php');
$products = get_products();
require('components/header.php');
// Include the file with the promo items here
require('components/company_info.php');
require('components/footer.php');
<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.php">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>
<!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.php">Delivery</a></li>
<li><a href="contacts.html">Contact us</a></li>
</ul>
</nav>
</header>
<section class="intro">
<div class="container">
<h1 class="intro-title">Comfort and coziness in <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">
<?php foreach($products as $id => $product): ?>
<li>
<a class="product-card" href="product.php?product_id=<?= $id ?>">
<h3><?= get_product_title($id)?></h3>
<div class="product-options">
<span class="price">$<?= get_product_price($id) ?></span>
</div>
<img src="<?= get_img_url($id) ?>" width="156" height="120" alt="<?= get_product_title($id) ?>">
</a>
</li>
<?php endforeach; ?>
</ul>
</div>
</section>
<section class="brands">
<div class="container">
<h2 class="brands-title">Introducing products from <b>global</b> brands</h2>
<ul class="brands-list">
<?php $brands = ['ehm', 'cubic', 'tehnodom', 'dg'];
foreach($brands as $value): ?>
<li class="brands-<?= $value ?>"></li>
<?php endforeach; ?>
</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 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>
<?php
function get_products() {
return [
'1' => [
'title' => 'Asusmer hanging bed',
'img_url' => 'img/item-asusmer.jpg',
'price' => 10000,
'discount' => 1000,
'is_new' => true,
'is_last' => false,
'type' => 'furniture',
'colors' => ['blue'],
'features' => ['Pleases cats', 'Inspires envy', 'Hangs firmly', 'Soft', 'Stylish', 'Yours', 'Doesn’t swing like a baby’s cradle', 'Waits for you at home']
],
'2' => [
'title' => 'Badeta armchair',
'img_url' => 'img/item-badeta.jpg',
'price' => 3500,
'discount' => 0,
'is_new' => false,
'is_last' => false,
'type' => 'furniture',
'colors' => ['blue', 'black'],
'features' => ['Shakes the apartment', 'Cozy', 'Hangs firmly', 'It’s just as if grandma knitted it']
],
'3' => [
'title' => 'Blempere stickers',
'img_url' => 'img/item-blempere.jpg',
'price' => 500,
'discount' => 0,
'is_new' => false,
'is_last' => true,
'type' => 'other',
'colors' => ['blue', 'black', 'red'],
'features' => ['Adhere permanently', 'Bright', 'Funny', 'Stylish', 'Do not launder']
],
'4' => [
'title' => 'Bletub chandelier',
'img_url' => 'img/item-bletub.jpg',
'price' => 4000,
'discount' => 0,
'is_new' => true,
'is_last' => true,
'type' => 'lighting',
'colors' => ['red'],
'features' => ['The cat cannot reach it', 'It hangs firmly in place', 'Shines brightly']
],
'5' => [
'title' => 'Breirbury organizer',
'img_url' => 'img/item-breirberi.jpg',
'price' => 5000,
'discount' => 3000,
'is_new' => true,
'is_last' => true,
'type' => 'other',
'colors' => ['yellow'],
'features' => ['So that your junk is always an arm’s reach away', 'Convenient', 'You can cook and watch a movie at the same time']
],
'6' => [
'title' => 'Mseyulida lamp',
'img_url' => 'img/item-mseyulida.jpg',
'price' => 4000,
'discount' => 500,
'is_new' => true,
'is_last' => false,
'type' => 'lighting',
'colors' => ['orange', 'green', 'yellow', 'blue', 'black'],
'features' => ['Suitable for any interior', 'Sturdy']
],
'7' => [
'title' => 'Rmaeribi sofa',
'img_url' => 'img/item-rmaeribi.jpg',
'price' => 15000,
'discount' => 4500,
'is_new' => true,
'is_last' => true,
'type' => 'furniture',
'colors' => ['green', 'black', 'red', 'blue'],
'features' => ['Soft', 'Cozy', 'Cats and children love it', 'Hides stains', 'Easy to clean']
],
'8' => [
'title' => 'Nnulm desk',
'img_url' => 'img/item-nnulm.jpg',
'price' => 5000,
'discount' => 0,
'is_new' => true,
'is_last' => false,
'type' => 'furniture',
'colors' => ['green'],
'features' => ['Eco-friendly', 'Lots of drawers', 'It has room for a mug and a pile of papers']
],
'9' => [
'title' => 'Tre furniture set',
'img_url' => 'img/item-tre.jpg',
'price' => 20000,
'discount' => 3000,
'is_new' => true,
'is_last' => true,
'type' => 'furniture',
'colors' => ['yellow', 'black'],
'features' => ['Relaxes', 'Doesn’t creak', 'Looks cool']
],
'10' => [
'title' => 'Granny style chandelier',
'img_url' => 'img/item-default-old-lamp.jpg',
'price' => 7000,
'discount' => 2000,
'is_new' => false,
'is_last' => true,
'type' => 'lighting',
'colors' => ['blue', 'black'],
'features' => ['Nostalgic', 'Fits into any interior', 'Your neighbors will envy it', 'Stylish']
],
'11' => [
'title' => 'Do lamp',
'img_url' => 'img/item-do.jpg',
'price' => 3500,
'discount' => 500,
'is_new' => true,
'is_last' => false,
'type' => 'lighting',
'colors' => ['black'],
'features' => ['Looks beautiful', 'Shines']
],
'12' => [
'title' => 'Tueta panel',
'img_url' => 'img/item-tueta.jpg',
'price' => 5000,
'discount' => 20,
'is_new' => true,
'is_last' => true,
'type' => 'textile',
'colors' => ['red'],
'features' => ['Will surprise your guests', 'It makes you want to touch it', 'Eye-catching']
],
'13' => [
'title' => 'Nmiao pillow',
'img_url' => 'img/item-nmyao.jpg',
'price' => 1500,
'discount' => 0,
'is_new' => false,
'is_last' => false,
'type' => 'textile',
'colors' => ['orange'],
'features' => ['Cozy for the cat', 'Comfortable for you', 'Fun for your kid']
],
'14' => [
'title' => 'Kel lamp',
'img_url' => 'img/item-kel.jpg',
'price' => 3000,
'discount' => 20,
'is_new' => true,
'is_last' => false,
'type' => 'lighting',
'colors' => ['orange', 'blue'],
'features' => ['Helps you read at night', 'Small', 'Exudes a cozy glow', 'Doesn’t bother others']
],
'15' => [
'title' => 'Omase pillow',
'img_url' => 'img/item-omase.jpg',
'price' => 2000,
'discount' => 100,
'is_new' => true,
'is_last' => true,
'type' => 'textile',
'colors' => ['grey', 'black'],
'features' => ['Brightly colored', 'Square', 'Soft']
],
'16' => [
'title' => 'Ormu basket',
'img_url' => 'img/item-ormu.jpg',
'price' => 2200,
'discount' => 20,
'is_new' => true,
'is_last' => false,
'type' => 'other',
'colors' => ['blue'],
'features' => ['Everything fits', 'You can plant a flower in it', 'Hides the cat']
],
'17' => [
'title' => 'Pinas paperclips',
'img_url' => 'img/item-pinas.jpg',
'price' => 100,
'discount' => 0,
'is_new' => true,
'is_last' => true,
'type' => 'other',
'colors' => ['blue', 'black'],
'features' => ['Do not rust', 'Strong', 'You get a bunch of them', 'There is enough to last a long time']
],
'18' => [
'title' => 'Preum compact cassette',
'img_url' => 'img/item-preum.jpg',
'price' => 200,
'discount' => 20,
'is_new' => true,
'is_last' => false,
'type' => 'other',
'colors' => ['blue', 'black'],
'features' => ['Soothing', 'Surprise your teen', 'You can rewind the tape with a pencil']
],
'19' => [
'title' => 'Rmob souvenir',
'img_url' => 'img/item-rmob.jpg',
'price' => 1500,
'discount' => 20,
'is_new' => false,
'is_last' => false,
'type' => 'other',
'colors' => ['green', 'orange', 'yellow'],
'features' => ['For the Marvel fan', 'You can plant a flower', 'Glorious', 'Makes you smile']
],
'20' => [
'title' => 'Tkuoko chandelier',
'img_url' => 'img/item-tkuoko.jpg',
'price' => 2100,
'discount' => 1000,
'is_new' => false,
'is_last' => false,
'type' => 'lighting',
'colors' => ['green', 'orange'],
'features' => ['Glitters', 'Shines', 'Looks expensive', 'Can be hung']
],
'21' => [
'title' => 'Briatuo armchairs',
'img_url' => 'img/item-briatuo.jpg',
'price' => 7000,
'discount' => 5500,
'is_new' => false,
'is_last' => true,
'type' => 'furniture',
'colors' => ['blue'],
'features' => ['Vivid', 'Deep', 'Beautiful', 'Relaxing', 'Comfortable for your back']
]
];
}
function get_filters() {
return [
0 => [
'url' => 'all',
'name' => 'All products',
],
1 => [
'url' => 'lighting',
'name' => 'Lighting',
],
2 => [
'url' => 'furniture',
'name' => 'Furniture',
],
3 => [
'url' => 'textile',
'name' => 'Textile',
],
4 => [
'url' => 'other',
'name' => 'Other',
]
];
}
function get_product_attribute($id, $attr) {
$products = get_products();
$result = $products[$id][$attr] ?? null;
return $result;
}
function get_product_price($id) {
return get_product_attribute($id, 'price');
}
function get_product_title($id) {
return get_product_attribute($id, 'title');
}
function get_img_url($id) {
return get_product_attribute($id, 'img_url');
}
function get_product_discount($id) {
return get_product_attribute($id, 'discount');
}
function get_product_is_new($id) {
return get_product_attribute($id, 'is_new');
}
function get_product_is_last($id) {
return get_product_attribute($id, 'is_last');
}
function get_product_features($id) {
return get_product_attribute($id, 'features');
}
.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: 160px;
margin-bottom: 0;
padding: 20px 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;
}
.brands-title b,
.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,
.order {
padding-top: 15px;
padding-bottom: 10px;
}
.delivery-title,
.custom-title,
.contacts-title,
.catalog-title,
.order-title {
padding: 0;
margin: 5px 0;
font-family: "Georgia", "Times", serif;
font-size: 28px;
line-height: 36px;
font-weight: 400;
}
.filters {
display: flex;
flex-wrap: wrap;
margin: 10px -10px -10px 0;
padding: 0;
list-style: none;
}
.filter {
display: flex;
padding: 8px 16px;
margin: 0 10px 10px 0;
color: #ff8a00;
border: 1px solid #ff8a00;
border-radius: 4px;
cursor: pointer;
}
.filter:focus,
.filter:hover {
color: #ffffff;
background-color: #ff8a00;
}
.filter:active {
box-shadow: inset 0 2px 10px #c86c00;
}
.filter.filter-current {
color: #ffffff;
background-color: #ff8a00;
box-shadow: inset 0 2px 10px #c86c00;
cursor: default;
}
.custom-columns {
display: flex;
flex-grow: 0;
}
.custom-columns img {
display: flex;
flex-shrink: 0;
align-items: center;
margin: 20px 20px 20px 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;
}
.product-options {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-top: auto;
}
.cost,
.price {
margin-right: 10px;
flex-shrink: 1;
font-weight: 700;
font-size: 15px;
color: #ff8a00;
}
.colors-list {
display: flex;
margin: 4px 0 0 -4px;
padding: 0;
list-style: none;
}
.colors-list li {
box-sizing: border-box;
width: 10px;
height: 10px;
margin-left: 4px;
border-radius: 50%;
}
.color-orange {
background-color: orange;
}
.color-yellow {
background-color: yellow;
}
.color-green {
background-color: green;
}
.color-red {
background-color: red;
}
.color-blue {
background-color: blue;
}
.color-black {
background-color: black;
}
.color-white {
background-color: white;
border: 1px solid #c0c0c0;
}
.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 {
display: flex;
flex-shrink: 0;
align-items: center;
margin: 20px 0 30px;
min-height: 200px;
}
.item-title {
display: inline-block;
vertical-align: baseline;
padding-right: 50px;
margin: 5px 0 0;
font-family: "Georgia", "Times", serif;
font-size: 28px;
line-height: 36px;
font-weight: 400;
}
.item-new .item-title {
position: relative;
}
.item-new .item-title::after {
position: absolute;
content: "new";
width: 38px;
height: 16px;
top: 13px;
right: 0;
font-family: "Arial", "Helvetica", sans-serif;
font-size: 15px;
font-weight: 700;
line-height: 14px;
color: #ffffff;
text-align: center;
background-color: #ff8a00;
border-radius: 4px;
}
.item-container {
display: flex;
}
.item-img {
display: flex;
flex-shrink: 0;
margin: 20px 0;
}
.item-hot .item-img {
position: relative;
padding-top: 36px;
}
.item-hot .item-img::before {
position: absolute;
content: "";
width: 290px;
height: 36px;
top: 0;
left: 0;
background-color: #fff3e5;
background-image: url("img/icon-hot.svg");
background-repeat: no-repeat;
background-size: 11px 14px;
background-position: 62px 10px;
}
.item-hot .item-img::after {
position: absolute;
content: "The product will soon sell out!";
top: 10px;
left: 80px;
}
.item-info {
margin: 8px 0 10px 20px;
flex-grow: 1;
}
.title-advantages {
margin: 10px 0 8px;
font-family: "Georgia", "Times", serif;
font-size: 15px;
line-height: 22px;
font-weight: 400;
}
.item-advantages {
margin: 0;
padding-left: 14px;
padding-bottom: 12px;
border-bottom: 1px solid #e2e2e2;
font-family: "Georgia", "Times", serif;
font-style: italic;
list-style: none;
}
.item-advantages li {
position: relative;
margin-bottom: 6px;
}
.item-advantages li::before {
position: absolute;
content: "";
width: 6px;
height: 6px;
top: 6px;
left: -14px;
background-color: #000000;
border-radius: 50%;
}
.item-buy {
display: flex;
flex-wrap: wrap;
margin: 16px 0 0;
}
.item-buy .price {
display: flex;
flex-wrap: wrap;
align-items: baseline;
position: relative;
max-width: 510px;
margin-top: -2px;
margin-bottom: 10px;
flex-shrink: 0;
}
.item-buy p {
margin: 0 30px 10px 0;
word-wrap: break-word;
}
.item-buy i {
display: block;
margin-bottom: 2px;
font-family: "Georgia", "Times", serif;
font-style: italic;
font-size: 13px;
font-weight: 400;
color: #000000;
}
.price-old i {
margin-bottom: 3px;
}
p.price-new {
margin-right: 0;
font-weight: 700;
font-size: 18px;
color: #ff8a00;
}
.button {
display: flex;
flex-shrink: 0;
max-width: 462px;
padding: 8px 24px 7px;
margin-bottom: 40px;
text-align: center;
color: #ffffff;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
background-color: #ff8a00;
border-radius: 4px;
box-shadow: 0 4px 4px rgba(255, 138, 0, 0.4);
}
.button:hover,
.button:focus {
background-color: #ff9900;
box-shadow: 0 6px 8px rgba(255, 138, 0, 0.4);
}
.button:active {
background-color: #ff8a00;
box-shadow: 0 2px 2px rgba(255, 138, 0, 0.6);
}
.order-list {
width: 100%;
margin: 10px 0 20px;
border-collapse: collapse;
text-align: left;
}
.order-list img {
width: 68px;
height: 52px;
margin-bottom: -5px;
}
.order-list tr {
border-bottom: 1px solid #e2e2e2;
}
.order-list td {
padding: 10px 20px 10px 0;
}
.order-list th:last-child {
width: 140px;
}
.order-list th {
padding: 10px 20px 10px 0;
font-family: "Georgia", "Times", serif;
font-style: italic;
font-weight: 400;
vertical-align: bottom;
}
.order-list td:last-child,
.order-list th:last-child {
padding-right: 0;
}
.contacts-info {
margin: -10px 0 20px;
}
.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 20px;
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;
}
.brands {
padding-top: 20px;
padding-bottom: 4px;
background-color: #f8f8f8;
}
.brands-list {
display: flex;
padding: 0;
margin: 16px -20px 0 0;
flex-wrap: wrap;
list-style: none;
}
.brands-list li {
position: relative;
width: 112px;
margin: 0 20px 16px 0;
padding-top: 58px;
}
.brands-list li::before {
position: absolute;
content: "";
top: 0;
left: 0;
width: 112px;
height: 50px;
background-repeat: no-repeat;
}
.brands-ehm::before {
background-image: url("img/brands-ehm-grey.svg");
}
.brands-cubic::before {
background-image: url("img/brands-cubic-grey.svg");
}
.brands-tehnodom::before {
background-image: url("img/brands-tehnodom-grey.svg");
}
.brands-dg::before {
background-image: url("img/brands-dg-grey.svg");
}
.brands-ehm:hover::before {
background-image: url("img/brands-ehm.svg");
}
.brands-cubic:hover::before {
background-image: url("img/brands-cubic.svg");
}
.brands-tehnodom:hover::before {
background-image: url("img/brands-tehnodom.svg");
}
.brands-dg:hover::before {
background-image: url("img/brands-dg.svg");
}
.features {
padding-top: 20px;
padding-bottom: 10px;
}
.brands-title,
.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;
}
Thanks! We’ll fix everything at once!
The code has changed, click “Refresh” or turn autorun on.
You’ve gone to a different page
An error has occurred
due to a lack of resources or an error in the program, try to fix the code to restart it
100%
Console
Console
Comments