Loading…
Everything will be ready in few seconds
- Theory
- Theory
- Comments
Changing the site footer in PHP
All we have left to do is to make one more change: write a notice in the website footer that our studio was responsible for developing the site. This way customers will know who they can contact if they would like to order such quality work themselves. We follow the same procedure that we did when updating the menu item: add a paragraph with the text © Muffin, 2019 in components/footer.php, which will update the footer on all pages where it is included.
By the way, the components from the components folder that we work with are templates. Templates store code placeholders. A template can be static or dynamic, that is, it can include variable data. Our components are currently static, but we will make some of them dynamic. We will soon receive a new assignment from Dumpo.
In the meantime, add copyright information to the footer and make sure that it actually appears on all of our store pages.
Let’s go!
Files
<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>
<?php
require('components/header.php');
require('components/company_info.php');
require('components/footer.php');
<?php
require('components/header.php');
require('components/products_list.php');
require('components/footer.php');
?>
<?php
require('components/header.php');
require('components/product_info.php');
require('components/footer.php');
<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">
<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=""Mseyulida" 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=" "Rmaeribi" 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>
</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>
<!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>
<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=""Mseyulida" 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=" "Rmaeribi" 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=""Nnulm" 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=""Asusmer" 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=""Tre" furniture set">
</a>
</li>
</ul>
</div>
</section>
<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>
.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;
}
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