scrimba

Watch in fullscreen

To see this lesson you need to be logged in. Joining Scrimba is free and gives you access to 20+ courses.Sign up

Putting it all together - the CSS

by Kevin Powell

About

Comments

Notes

Putting it all together - the CSS

by Kevin Powell

Expand for more info

index.html

run

preview

console

<!DOCTYPE html>
<html>
    <head>
        <title>We did it!</title>
    </head>
    
    <body>
        <header>
            <div class="container">
                <h1>CSS is a lot of fun</h1>
            </div>
        </header>
        
        <section class="section-one">
            <div class="container">
                <h2>Section One Title.</h2>
                <img src="images/boardwalk.png" alt="foggy boardwalk with man walking away in the distance">
                <p>Netus et malesuada fames ac. <a href="#">Sed cras ornare arcu</a> dui vivamus. <strong>Elementum integer enim neque</strong> volutpat ac tincidunt vitae semper.</p>
            </div>
        </section>
        
        <section class="section-two">
            <div class="container">
                <h2>Section Two Title.</h2>
                <p>Netus et malesuada fames ac. Sed cras ornare arcu dui vivamus. Elementum integer enim neque volutpat ac tincidunt vitae semper.</p>
                <p>Lorem <a href="#">ipsum dolor sit amet</a>, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt <strong>ut labore et dolore</strong>. </p>
                <a href="#" class="btn btn-accent">contact us</a>
                <a href="#" class="btn btn-white">more info</a>
            </div>
        </section>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</div>

</header>

<h2>Section One Title.</h2>

<img src="images/boardwalk.png" alt="foggy boardwalk with man walking away in the

distance">

<p>Netus et malesuada fames ac. <a href="#">Sed cras ornare arcu</a> dui vivamus.

<strong>Elementum integer enim neque</strong> volutpat ac tincidunt vitae

semper.</p>

</div>

</section>

<h2>Section Two Title.</h2>

<p>Netus et malesuada fames ac. Sed cras ornare arcu dui vivamus. Elementum integer

enim neque volutpat ac tincidunt vitae semper.</p>

<p>Lorem <a href="#">ipsum dolor sit amet</a>, consetetur sadipscing elitr, sed

diam nonumy eirmod tempor invidunt <strong>ut labore et dolore</strong>. </p>

<a href="#" class="btn btn-accent">contact us</a>

</div>

</section>

</body>

</html>

-17:42