Skip to content

started icons #16

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

Merged
merged 1 commit into from
Mar 8, 2022
Merged

started icons #16

Show file tree
Hide file tree
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
316 changes: 165 additions & 151 deletions projectfolder/Design/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,162 +1,176 @@
<!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" />
<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=Poppins:wght@400;500;600&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="hero.jpg" alt="Photo" />
</header>

<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="hero.jpg" alt="Photo" />
</header>
<section>
<h2>What makes our chairs special</h2>
<div class="grid-3-cols">
<div>
<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>

<section>
<h2>What makes our chairs special</h2>
<div class="grid-3-cols">
<div>
<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>
<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>
<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>
<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>

<div>
<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="customers.jpg" 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">
&mdash; Mary and Sarah Johnson
</p>
</div>
</div>
</section>

<section class="testimonial-section">
<div class="grid-3-cols">
<img src="customers.jpg" 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">&mdash; Mary and Sarah Johnson</p>
</div>
</div>
</section>
<section>
<h2>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>
<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>
</ul>
<div class="chair-price">
<strong>250€</strong>
<a href="#" class="btn btn--small">Add to cart</a>
</div>
</div>
</figure>

<section>
<h2>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>
<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>
</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="chair-2.jpg" alt="Chair" />
<div class="chair-box">
<h3>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>
</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="chair-2.jpg" alt="Chair" />
<div class="chair-box">
<h3>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>
</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="chair-3.jpg" alt="Chair" />
<div class="chair-box">
<h3>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>
</ul>
<div class="chair-price">
<strong>1450€</strong>
<a href="#" class="btn btn--small">Add to cart</a>
</div>
</div>
</figure>
</div>
</section>

<figure class="chair">
<img src="chair-3.jpg" alt="Chair" />
<div class="chair-box">
<h3>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>
</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>
<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>
Loading