scrimba
UI Design
Responsive Design
Responsive Design Challenge 1
Go Pro!Bootcamp

Bootcamp

Study group

Collaborate with peers in your dedicated #study-group channel.

Code reviews

Submit projects for review using the /review command in your #code-reviews channel

Responsive Design Challenge 1
AboutCommentsNotes
Responsive Design Challenge 1
Expand for more info
index.html
run
preview
console
<html>
<head>
<link rel="stylesheet" href="index.css">
</head>
<body>
<span id="width" class="width-container"></span>
<header class="wrapper">
<a href="#" class="logo">tastybites</a>
<nav>
<ul>
<li><a href="#">home</a></li>
<li><a href="#">about</a></li>
<li><a href="#">contact</a></li>
</ul>
</nav>
</header>

<div class="hero-left wrapper">
<h1>Absolutely Tasty Bites</h1>
<p>Get all of the best food without tasting their nastiness</p>
<a href="#" class="cta-btn">Download app</a>
</div>
<img src="healthyfood.jpg">

<section class="wrapper">
<ul class="testimonials">
<li>
<blockquote>
<p>"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor"</p>
<footer>- John Doe</footer>
</blockquote>
</li>
<li>
<blockquote>
<p>"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor"</p>
<footer>- John Doe</footer>
</blockquote>
</li>
<li>
<blockquote>
<p>"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor"</p>
<footer>- John Doe</footer>
</blockquote>
</li>
</ul>
</section>
<script src="index.js"></script>
</body>
</html>
Console
/index.html
-6:49