scrimba
HTML & CSS Challenges
Solution 9: Creating columns
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

Solution 9: Creating columns
AboutCommentsNotes
Solution 9: Creating columns
Expand for more info
index.html
run
preview
console
<!DOCTYPE html>
<html>
<head>
<title>All about lizards</title>
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<header>
<h1>All About Lizards</h1>
</header>

<main>
<div class="container">
<div class="columns">
<section class="main-content">

<h2 class="subhead">Lizards are <span class="white-text">awesome</span></h2>

<img src="images/chameleon.jpg" alt="a chameleon climbing a branch">

<p>Lectus diam adipiscing faucibus consequat, auctor molestie a mauris. Cras libero risus ut enim, in purus tellus scelerisque. Nibh mattis dignissim lorem morbi molestie. Mauris elit at sociis varius leo, facilisis convallis quis. Facilisis velit, eget dolor sit arcu rhoncus urna quisque.</p>

<!-- insert the unordered list here -->
<ul>
<li>dui ultricies integer</li>
<li>eget amet consectetur</li>
<li>interdum mattis</li>
<li>aenean nulla diam</li>
<li>pellentesque pellentesque duis</li>
</ul>

<p>Adipiscing dui ultricies integer interdum mattis convallis diam nascetur. Aliquet vel egestas egestas a, eget amet consectetur. Sodales velit volutpat eget eget fames elit consectetur. Lectus aenean nulla diam pellentesque pellentesque duis pulvinar malesuada. </p>
</section>

<aside class="sidebar">
<h2 class="subhead">Best lizards for <span class="white-text">pets</span></h2>
<!-- insert the ordered list here -->
<ol>
<li>Bearded Dragon</li>
<li>Leopard Gecko</li>
<li>Crested Gecko</li>
<li>Blue-Tongue Skink</li>
<li>Green Anole</li>
<li>Argentine Black and White Tegu</li>
<li>Uromastyx</li>
<li>African Fat-Tailed Gecko</li>
<li>Chinese Water Dragon</li>
<li>Gold-Dust Day Gecko</li>
</ol>
<p>*source: everythingreptiles.com</p>
</aside>
</div> <!-- close columns -->
</div> <!-- close container -->
</main>

</body>
</html>
Console
/index.html
-4:45