scrimba
Frontend Career Path
Responsive design
Build a Responsive Site
Responsive site intro
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

AboutCommentsNotes
Responsive site intro
Expand for more info
index.html
run
preview
console
<html>
<head>
<title>NFT Site</title>
<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=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="index.css">
</head>

<body>
<header>
<div class="container">
<h1>
Wildly Expensive JPEGs
<span class="subheading">(Also known as NFTs)</span>
</h1>
</div>
</header>
<main>
<section>
<div class="container">
<h2>Meta-Pigeon Sneaker NFT: $33,000</h2>
<img src="images/sneakers-purple.png" alt="Purple and silver sneakers" class="main-image">
<h3>At $33k, this NFT sneaker is super good value!</h3>
<p>If you've got lots of money and you're a bit silly, NFTs are a great way to pay for something that doesn't have any intrinsic value or even exist. Tech fashionistas are jumping on the NFT bandwagon and spending eye-watering sums of money on crypto images. Our advice: spend the weekend <a href="#">crafting an NFT</a>, and by this time next week, you'll be a millionaire.</p>
<a href="#" class="btn btn-dark">Buy NFTs</a>
<a href="#" class="btn btn-mid">More info</a>
</div>
</section>

<section class="section-two">
<div class="container">
<h2>For the true Crypto-connoisseur</h2>
<div class="section-two-image-container">
<img src="images/crypto-punk.jpg" alt="punk with blach hair and red and blue glasses" class="feature-image">
<img src="images/bag.svg" alt="Seven items from a game listed in white on a black background" class="feature-image">
</div>
<p>Is $33k for sneakers too basic for you? No problem! This CryptoPunk (left) is a steal at $6.6 million, making Bag #748 (right) a total bargain at $1.4 million. And by the way, that's not a VS Code screenshot we included by mistake. Those eight lines of white text on a black background is the actual NFT we're selling.</p>
<a href="#" class="btn btn-light">About Us</a>
<a href="#" class="btn btn-mid">Contact</a>
<p>Still not convinced? To be honest, nor are we. That's why we're selling them, not buying them.</p>
</div>
</section>

<footer>
<p>&copy; 2022 FoolsGold.com</p>
</footer>
</main>
</body>
</html>
Console
/index.html
-2:03