Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update index.html #64

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Update index.html #64

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
171 changes: 65 additions & 106 deletions starter/05-Design/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,157 +6,116 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<link rel="stylesheet" href="style.css" />
<title>Lisbon Chair Shop</title>
<title>Lisbon Chair Shop | Quality Furniture for Life</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>
<!-- Header -->
<header class="main-header">
<div class="header-content">
<div class="header-text-box">
<h1 class="main-title">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--primary btn--large" href="#bestsellers">Shop Chairs</a>
</div>
<div class="header-image">
<img src="hero.jpg" alt="Showcase of designer chairs" class="responsive-img" />
</div>
</div>
<img src="hero.jpg" alt="Photo" />
</header>

<section>
<h2>What makes our chairs special</h2>
<!-- Features Section -->
<section class="features-section">
<h2 class="section-title">What makes our chairs special</h2>
<div class="grid-3-cols">
<div>
<p class="features-title"><strong>Science meets design</strong></p>
<div class="feature-item">
<h3 class="features-title">Science meets design</h3>
<p class="features-text">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Natus
similique adipisci praesentium.
Our chairs are developed with cutting-edge ergonomic research to optimize your posture and provide long-term comfort.
</p>
</div>

<div>
<p class="features-title">
<strong>Maximal comfort</strong>
</p>
<div class="feature-item">
<h3 class="features-title">Maximal comfort</h3>
<p class="features-text">
Reprehenderit optio placeat quasi excepturi architecto, explicabo
facilis perspiciatis error maxime magnam.
Our designs prioritize both function and form, ensuring that you can sit for hours without discomfort, whether at work or rest.
</p>
</div>

<div>
<p class="features-title">
<strong>Ethical and sustainable</strong>
</p>
<div class="feature-item">
<h3 class="features-title">Ethical and sustainable</h3>
<p class="features-text">
Deleniti recusandae quidem nesciunt, eos dolorum iure, quaerat
omnis est laudantium voluptatem voluptas!
We source our materials from sustainable suppliers, ensuring our products are environmentally friendly and socially responsible.
</p>
</div>
</div>
</section>

<!-- Testimonial Section -->
<section class="testimonial-section">
<div class="grid-3-cols">
<img src="customers.jpg" alt="People sitting on chairs" />
<div class="grid-2-cols">
<div class="testimonial-image">
<img src="customers.jpg" alt="Happy customers sitting on our chairs" class="responsive-img" />
</div>
<div class="testimonial-box">
<h2>"We couldn't live without these chairs anymore"</h2>
<h2 class="testimonial-title">"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!
These chairs have transformed our home. Not only are they beautiful, but they've made a noticeable difference in our comfort and well-being. We highly recommend them!
</blockquote>
<p class="testimonial-author">&mdash; Mary and Sarah Johnson</p>
</div>
</div>
</section>

<section>
<h2>Our bestselling chairs</h2>
<!-- Bestselling Chairs Section -->
<section class="bestselling-section" id="bestsellers">
<h2 class="section-title">Our Bestselling Chairs</h2>
<div class="grid-3-cols">
<figure class="chair">
<img src="chair-1.jpg" alt="Chair" />
<div class="chair-box">
<h3>The Laid Back</h3>
<figure class="chair-item">
<img src="chair-1.jpg" alt="The Laid Back chair" class="responsive-img" />
<figcaption class="chair-box">
<h3 class="chair-title">The Laid Back</h3>
<ul class="chair-details">
<li>
<!-- 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>
<span>Comfortable for 4h</span>
</li>
<li>
<span>Vegan leather</span>
</li>
<li>
<span>Weighs 16 kg</span>
</li>
<li><span>Perfect for leisure and relaxing</span></li>
<li><span>Comfortable for up to 4 hours</span></li>
<li><span>Made with vegan leather</span></li>
<li><span>Weight: 16 kg</span></li>
</ul>
<div class="chair-price">
<strong>250€</strong>
<a href="#" class="btn btn--small">Add to cart</a>
<a href="#" class="btn btn--secondary">Add to Cart</a>
</div>
</div>
</figcaption>
</figure>

<figure class="chair">
<img src="chair-2.jpg" alt="Chair" />
<div class="chair-box">
<h3>The Worker Bee</h3>
<figure class="chair-item">
<img src="chair-2.jpg" alt="The Worker Bee chair" class="responsive-img" />
<figcaption class="chair-box">
<h3 class="chair-title">The Worker Bee</h3>
<ul class="chair-details">
<li>
<span>Work</span>
</li>
<li>
<span>Comfortable for 8h</span>
</li>
<li>
<span>Vegan leather</span>
</li>
<li>
<span>Weighs 22 kg</span>
</li>
<li><span>Ideal for work and productivity</span></li>
<li><span>Comfortable for up to 8 hours</span></li>
<li><span>Made with vegan leather</span></li>
<li><span>Weight: 22 kg</span></li>
</ul>
<div class="chair-price">
<strong>525€</strong>
<a href="#" class="btn btn--small">Add to cart</a>
<a href="#" class="btn btn--secondary">Add to Cart</a>
</div>
</div>
</figcaption>
</figure>

<figure class="chair">
<img src="chair-3.jpg" alt="Chair" />
<div class="chair-box">
<h3>The Chair 4/2</h3>
<figure class="chair-item">
<img src="chair-3.jpg" alt="The Chair 4/2" class="responsive-img" />
<figcaption class="chair-box">
<h3 class="chair-title">The Chair 4/2</h3>
<ul class="chair-details">
<li>
<span>Leisure and relaxing</span>
</li>
<li>
<span>Comfortable all day!</span>
</li>
<li>
<span>Organic cotton</span>
</li>
<li>
<span>Weighs 80 kg</span>
</li>
<li><span>Leisure and relaxing</span></li>
<li><span>Comfortable for the entire day</span></li>
<li><span>Made with organic cotton</span></li>
<li><span>Weight: 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 &copy; 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>
<strong>1450€