<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="style.css" />
<title>Lisbon Chair Shop</title>
</head>
<body>
<div class="container">
<header>
<div class="header-text-box">
<h1>We design and build better chairs, for a better life</h1>
<p class="header-text">
In a small shop in the heart of Lisbon, we spend our days
relentlessly perfecting the chair. The result is a perfect blend of
beauty and comfort, that will have a lasting impact on your health.
</p>
<a class="btn btn--big" href="#">Shop chairs</a>
</div>
<img src="https://images.unsplash.com/photo-1616628198434-72867dbf467a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=552&q=80" alt="Photo" />
</header>
<section>
<h2>What makes our chairs special</h2>
<div class="grid-3-cols">
<div>
<svg
xmlns="http://www.w3.org/2000/svg"
class="features-icon"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"
/>
</svg>
<p class="features-title"><strong>Science meets design</strong></p>
<p class="features-text">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Natus
similique adipisci praesentium.
</p>
</div>
<div>
<svg
xmlns="http://www.w3.org/2000/svg"
class="features-icon"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
<p class="features-title">
<strong>Maximal comfort</strong>
</p>
<p class="features-text">
Reprehenderit optio placeat quasi excepturi architecto, explicabo
facilis perspiciatis error maxime magnam.
</p>
</div>
<div>
<svg
xmlns="http://www.w3.org/2000/svg"
class="features-icon"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
/>
</svg>
<p class="features-title">
<strong>Ethical and sustainable</strong>
</p>
<p class="features-text">
Deleniti recusandae quidem nesciunt, eos dolorum iure, quaerat
omnis est laudantium voluptatem voluptas!
</p>
</div>
</div>
</section>
<section class="testimonial-section">
<div class="grid-3-cols">
<img src="https://images.unsplash.com/photo-1524758870432-af57e54afa26?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80" alt="People sitting on chairs" />
<div class="testimonial-box">
<h2>"We couldn't live without these chairs anymore"</h2>
<blockquote class="testimonial-text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor
repellat at, nesciunt quia cum minima ipsum culpa totam sapiente
recusandae earum debitis doloribus in quasi voluptatibus!
</blockquote>
<p class="testimonial-author">— Mary and Sarah Johnson</p>
</div>
</div>
</section>
<section>
<h2>Our bestselling chairs</h2>
<div class="grid-3-cols">
<figure class="chair">
<img src="https://images.unsplash.com/photo-1598300056393-4aac492f4344?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1668&q=80"alt="Chair" />
<div class="chair-box">
<h3>The Laid Back</h3>
<ul class="chair-details">
<li>
<svg
xmlns="http://www.w3.org/2000/svg"
class="chair-icon"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"
/>
</svg>
<!-- Span is a generic INLINE text element, it doesn't have any meaning. It's like a div element, but inline -->
<span>Leisure and relaxing</span>
</li>
<li>
<svg
xmlns="http://www.w3.org/2000/svg"
class="chair-icon"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
<span>Comfortable for 4h</span>
</li>
<li>
<svg
xmlns="http://www.w3.org/2000/svg"
class="chair-icon"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
<span>Vegan leather</span>
</li>
<li>
<svg
xmlns="http://www.w3.org/2000/svg"
class="chair-icon"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"
/>
</svg>
<span>Weighs 16 kg</span>
</li>
</ul>
<div class="chair-price">
<strong>250€</strong>
<a href="#" class="btn btn--small">Add to cart</a>
</div>
</div>
</figure>
<figure class="chair">
<img src="https://images.unsplash.com/photo-1517705008128-361805f42e86?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=787&q=80" alt="Chair" />
<div class="chair-box">
<h3>The Worker Bee</h3>
<ul class="chair-details">
<li>
<svg
xmlns="http://www.w3.org/2000/svg"
class="chair-icon"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"
/>
</svg>
<span>Work</span>
</li>
<li>
<svg
xmlns="http://www.w3.org/2000/svg"
class="chair-icon"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
<span>Comfortable for 8h</span>
</li>
<li>
<svg
xmlns="http://www.w3.org/2000/svg"
class="chair-icon"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
<span>Vegan leather</span>
</li>
<li>
<svg
xmlns="http://www.w3.org/2000/svg"
class="chair-icon"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"
/>
</svg>
<span>Weighs 22 kg</span>
</li>
</ul>
<div class="chair-price">
<strong>525€</strong>
<a href="#" class="btn btn--small">Add to cart</a>
</div>
</div>
</figure>
<figure class="chair">
<img src="https://images.unsplash.com/photo-1555041469-a586c61ea9bc?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80" alt="Chair" />
<div class="chair-box">
<h3>The Chair 4/2</h3>
<ul class="chair-details">
<li>
<svg
xmlns="http://www.w3.org/2000/svg"
class="chair-icon"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"
/>
</svg>
<span>Leisure and relaxing</span>
</li>
<li>
<svg
xmlns="http://www.w3.org/2000/svg"
class="chair-icon"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
<span>Comfortable all day!</span>
</li>
<li>
<svg
xmlns="http://www.w3.org/2000/svg"
class="chair-icon"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
<span>Organic cotton</span>
</li>
<li>
<svg
xmlns="http://www.w3.org/2000/svg"
class="chair-icon"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"
/>
</svg>
<span>Weighs 80 kg</span>
</li>
</ul>
<div class="chair-price">
<strong>1450€</strong>
<a href="#" class="btn btn--small">Add to cart</a>
</div>
</div>
</figure>
</div>
</section>
<footer>
Copyright © 2027 by Jonas Schmedtmann. Part of "Build Responsive
Real-World Websites with HTML and CSS" online course. Use for learning
purposes only.
</footer>
</div>
</body>
</html>
/*
SPACING SYSTEM (px)
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128
FONT SIZE SYSTEM (px)
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98
*/
/*
main color: #087f5b
Grey Color: #343a40
*/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* ------------------------ */
/* GENERAL STYLES */
/* ------------------------ */
body {
font-family: "Inter", sans-serif;
color: #343a40;
border-bottom: 8px solid #087f5b;
}
.container {
width: 960px;
margin: 0 auto;
}
header,
section {
margin-bottom: 96px;
}
h2 {
margin-bottom: 48px;
font-size: 36px;
/* 24/30/36 */
letter-spacing: -0.5;
}
.grid-3-cols {
display: grid;
grid-template-columns: repeat(3, 1fr);
column-gap: 80px;
}
.btn:link,
.btn:visited {
background-color: #087f5b;
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-weight: 500px;
display: inline-block;
border-radius: 100px;
}
.btn:hover,
.btn:active {
background-color: #099268;
}
.btn--big {
font-size: 18px;
padding: 16px 32px;
}
.btn--small {
font-size: 14px;
padding: 8px 12px;
}
img {
border-radius: 12px;
}
/* ------------------------ */
/* COMPONENT STYLES */
/* ------------------------ */
/* HEADER */
header {
display: grid;
grid-template-columns: repeat(2, 1fr);
column-gap: 80px;
margin-top: 64px;
}
.header-text-box {
align-self: center;
}
h1 {
margin-bottom: 32px;
font-size: 44px;
/* font: 44/52/62 */
line-height: 1.1;
letter-spacing: -1px;
/* text-shadow: 0 5px 5px rgba(0, 0, 0, 0.2); */
}
.header-text {
margin-bottom: 24px;
font-size: 18px;
line-height: 1.7;
}
img {
width: 100%;
}
/* FEATURES */
.features-icon {
stroke: #087f5b;
width: 32px;
height: 32px;
margin-bottom: 24px;
}
.features-title {
margin-bottom: 16px;
font-size: 20px;
}
.features-text {
font-size: 18px;
line-height: 1.7;
}
/* TESTIMONIAL */
.testimonial-section {
background-color: #087f5b;
color: #fff;
padding: 24px;
border-radius: 12px;
}
.testimonial-box {
grid-column: 2 / -1;
align-self: center;
}
.testimonial-box h2 {
margin-bottom: 24px;
/* 20 /24 / 30 */
font-size: 24px;
}
.testimonial-text {
font-style: italic;
margin-bottom: 24px;
font-size: 18px;
line-height: 1.7;
color: #e6fcf5;
}
.testimonial-author {
color: #c3fae8;
}
/* CHAIRS */
.chair {
box-shadow: 0 20px 30px 0 rgba(0, 0, 0, 0.07); /* (1, horizontal) (2,vertical) (3,blur) (4, scale) (5, color) */
border-radius: 12px;
}
.chair img {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.chair-box {
padding: 32px;
}
h3 {
margin-bottom: 24px;
font-size: 20px;
}
.chair-details {
list-style: none;
margin-bottom: 48px;
}
.chair-details li {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 16px;
}
.chair-details li:last-child {
margin-bottom: 0;
}
.chair-icon {
stroke: #087f5b;
/* fill: yellow; */
width: 24px;
height: 24px;
}
.chair-price {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 20px;
}
footer {
margin-bottom: 48px;
font-size: 14px;
color: #495057;
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.