Loading…
Everything will be ready in few seconds
- Theory
- Theory
- Comments
Adding count to the template
Great job! Now we know how to obtain the length of the array using the count command.
Add count($features) directly to the loop condition in the template. Check that all of the product features from this array are displayed on the page for any length array.
It might seem that using the command directly in the loop condition is not very efficient. After all, it will be triggered again at every iteration, and it will calculate the length of the array. Wouldn’t it be easier to save the length of the array to a variable and just use it in the template? Yes, we can do just that, but these kinds of processes have already been well optimized in PHP. Assuming that the array doesn’t consist of thousands of elements, there will be no performance problems.
Add the command count to the template, and check to make sure that it was added!
Files
<?php
require('products_db.php');
require('components/header.php');
$id = $_GET['product_id'];
$title = get_product_title($id);
$img_url = get_img_url($id);
$price = get_product_price($id);
$discount = get_product_discount($id);
$is_new = get_product_is_new($id);
$is_last = get_product_is_last($id);
$product_class = 'item';
$features = ['Pleases cats', 'Inspires envy', 'Hangs firmly', 'Soft', 'Stylish', 'Yours', 'Doesn’t swing like a baby’s cradle', 'Waits for you at home'];
if ($discount > 0) {
$price_with_discount = $price - $discount;
}
if ($discount > 1400 || $is_last) {
$product_class = $product_class . ' item-hot';
};
if ($is_new) {
$product_class = $product_class . ' item-new';
}
require('components/product_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.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>
<!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>
</ul>
</nav>
</header>
<section class="<?= $product_class ?>">
<div class="container">
<h1 class="item-title"><?= $title ?></h1>
<div class="item-container">
<div class="item-img">
<img src="<?= $img_url ?>" width="290" height="222" alt="<?= $title ?>">
</div>
<div class="item-info">
<h2 class="title-advantages">Product advantages:</h2>
<ul class="item-advantages">
<?php $index = 0; ?>
<?php while ($index < 6): ?>
<li><?= $features[$index] ?></li>
<?php $index = $index + 1 ?>
<?php endwhile;?>
</ul>
<div class="item-buy">
<p class="price-old"><i>Price </i>$<?= $price ?></p>
<?php if ($discount > 0): ?>
<p class="price-new"><i>New price </i>$<?= $price_with_discount ?></p>
<?php endif; ?>
</div>
</div>
</div>
</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;
}
.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
- Change the number from
6tocount($features)in the loop condition on line 12 of thecomponents/product_info.phptemplate. - Delete the last element in the array on line 14 of
product.phpincluding the comma:, 'Waits for you at home'. Make sure that all array elements are displayed on the page.
Comments