Loading…
Everything will be ready in few seconds
- Theory
- Theory
- Comments
Assembling the product page
All we have left to do is to assemble the page with the product listing.
Here we already know everything. Create a new script: add a file; give it a name; write a PHP tag; and include the header, content, and footer using require. Each require statement must begin on a new line, and make sure to write a ; at the end of each line. Let’s check in the mini browser that the page has been assembled in the right form. All done!
We have already created a file for the product page. It is called product.php.
In the PHP language commands, semicolons, and file addresses are written in parentheses, because this is what the syntax requires. Syntax governs word order and the rules for writing words. The computer uses syntax in order to understand what we write. Every programming language has its own syntax.
By the way, sometimes the closing PHP tag can be omitted. Let’s try to write code without it and verify that nothing has broken. In the following assignments, we will encounter a situation where you cannot avoid using a closing tag.
Files
<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>
<footer class="site-footer">
<div class="container">
<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>
<?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');
?>
<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