code-along.html

<!DOCTYPE html>
<html>
<head>
    <title>Code Along</title>
</head>
<body>
    <div class="navbar">
        <a href="index.html">Do Now</a>
        <a href="code-along.html">Code Along</a>
        <a href="code-solo.html">Code Solo</a>
      </div>

    <h1>Class Favorite Movies</h1>

<!-- 1. Let's put the name of someone's favorite movie inside of an <a> tag.
    Write out the <a> tag including the href attribute. For the content, put 
    the title of the favorite movie of someone in the class. Don't worry about 
    the link for now! -->


    <!-- 2. Search the movie on Google and go to the IMBD or Wiki page. Put 
        this link for the href attribute. -->

    <!-- 3. Now let's add an image of the movies. Write out the <img> tag 
        including the src attribute. Find an image that you want to use from
        a search and copy the Image Address to use as the src link. -->

    
</body>
</html>


 <!-- The code below styles the page. DO NOT EDIT. -->
<style>
@import url('<link href="https://fonts.googleapis.com/css2?family=Koulen&display=swap" rel="stylesheet">');

.navbar {
    overflow: hidden;
    background-color: #333;
    }
  
.navbar a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}
  
.navbar a:hover {
    background: #ddd;
    color: black;
}

img {
    width: 200px;
}

a {
    color: limegreen;
}

html {
    display: flex;
    align-items: center;
}

body {
    width: 100%;
    margin: 24px;
    font-family: 'Roboto Mono', monospace;
    color: lightblue;
    font-size: 24px;
    background-image: url('https://images.cdn4.stockunlimited.net/preview1300/cinema-background-with-movie-objects_1823382.jpg');
}

section {
    border-radius: 0px;
    background-color: #3f3f3f;
    padding: 24px;
    min-height: 500px;
    border: 8px gray inset;
}

section.on:after {
    content: '_';
    position: absolute;
}

</style>