Web Design I

Class 09: Pages

Topics

Week 09 Responsive Site (subpages) Lab
Bootstrap Formatting
Subpages
Color Trends

09 Responsive Site (subpages) Lab

09 Responsive Site (subpages) Lab:

With the homepage complete it is easy to create the subpages. We will duplicate the homepage, rename it, and change it around to create the subpages. There will be at least two subpages created.

You will be graded on the following:

File/Folder & Document Structure
- Master folder created with correct sub folders.
- All files named and placed correctly.
- Basic HTML and CSS structure produced.
- Code is formatted properly (indents, spacing, caps, etc.).
Lab Specific Requirements
- Bootstrap Layout.
- Bootstrap Components.
- Formatted Bootstrap Components (beyond default styling).
- Two Subpages Connected.
Craftsmanship
- Clean, professional quality work.
- Descriptive and well-written informative text.
- Properly formatted images incorporated.
Creativity
- Appealing, interesting and novel.
- Text is captivating.
- Images draw attention.

Bootstrap Formatting

Bootstrap comes preformatted with its own design imposed. This is great because it makes your elements modern but it also means that it automatically has a generic look. Therefore, we must change the styling. This can be difficult because you basically have to fight against the CSS in Bootstrap.

The Navbar:

The default navbar is robust but also very generic. You must customize it if you want to stand out.

browser view

The Carousel:

The bootstrap carousel is an awesome component but it is not unique in any way.

browser view

<!DOCTYPE html>
<html>
    <head>
        <title>Teach Me Cone</title>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial=scale=1.0" />
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        <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=Anton&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
        <style>
            h1, h2, h3, h4, h5, h6 {
                font-family: "Anton", sans-serif;
                font-weight: 400;
                font-style: normal;}

            body, p, q, li {
                font-family: "Raleway", sans-serif;
                font-optical-sizing: auto;
                font-weight: 400;
                font-style: normal;}
            body {
                background-color: #d5d5d5;
            }
            footer {
                text-align: center;}
            iframe {
                aspect-ratio: 16/9;
                height: auto;
                width: 100%;}
            .logoGraphic {
                width: 4em;}
            .navbar {
                background-color: rgb(39, 39, 39);}
            .navbar a:link {
                color: white;}
            #currentPage {
                color: #C77530;}
            .fa-caret-left, .fa-caret-right {
                color: #c77430a0;
                font-size:5em;}
            .card {
                height: 100%;}
            .card-body .btn-primary {
                background-color: rgb(39, 39, 39);
                border-style: none;}
        </style>
    </head>
    <body data-rsssl=1 data-rsssl=1>
        <header class="container-fluid">
            <section class="row">
                <article class="col">
                    <nav class="navbar navbar-expand-lg">
                        <div class="container-fluid">
                            <a class="navbar-brand" href="index.html"><!--<i class="fa fa-home" style="font-size:36px"></i>--><img src="images/tmcLogo.svg" class="logoGraphic"/></a>
                            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                            <span class="navbar-toggler-icon"></span>
                            </button>
                            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                                <li class="nav-item">
                                <a class="nav-link" id="currentPage" aria-current="page" href="#">Home</a>
                                </li>
                                <li class="nav-item">
                                <a class="nav-link" href="#">about</a>
                                </li>
                                <li class="nav-item dropdown">
                                <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                                    Courses
                                </a>
                                <ul class="dropdown-menu">
                                    <li><a class="dropdown-item" href="#">VCP 144 Web Design I</a></li>
                                    <li><a class="dropdown-item" href="#">VCP 244 Web Design II</a></li>
                                    <li><a class="dropdown-item" href="#">VCP 116/117 Digital Imaging I/II</a></li>
                                    <li><a class="dropdown-item" href="#">VCP 136 Multimedia Production I</a></li>
                                    <li><a class="dropdown-item" href="#">VCP 151 Introduction to Game Design</a></li>
                                </ul>
                                </li>
                            </ul>
                            </div>
                        </div>
                    </nav>
                </article>                
            </section>
        </header>

        <main class="container">
            <section class="row">
                <article class="col-xl-8 offset-xl-2">                    
                    <div id="carouselExampleCaptions" class="carousel slide">
                        <div class="carousel-indicators">
                          <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
                          <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
                          <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
                        </div>
                        <div class="carousel-inner">
                          <div class="carousel-item active">
                            <img src="images/kevin-jarrett-rip5luxidKI-unsplash.jpg" class="d-block w-100" alt="...">
                            <div class="carousel-caption d-none d-md-block">
                              <h5>First slide label</h5>
                              <p>Some representative placeholder content for the first slide.</p>
                            </div>
                          </div>
                          <div class="carousel-item">
                            <img src="images/kevin-jarrett-rip5luxidKI-unsplash.jpg" class="d-block w-100" alt="...">
                            <div class="carousel-caption d-none d-md-block">
                              <h5>Second slide label</h5>
                              <p>Some representative placeholder content for the second slide.</p>
                            </div>
                          </div>
                          <div class="carousel-item">
                            <img src="images/kevin-jarrett-rip5luxidKI-unsplash.jpg" class="d-block w-100" alt="...">
                            <div class="carousel-caption d-none d-md-block">
                              <h5>Third slide label</h5>
                              <p>Some representative placeholder content for the third slide.</p>
                            </div>
                          </div>
                        </div>
                        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
                            <i class="fa fa-caret-left" ></i>
                          <span class="visually-hidden">Previous</span>
                        </button>
                        <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
                            <i class="fa fa-caret-right" ></i>
                          <span class="visually-hidden">Next</span>
                        </button>
                    </div>
                </article>
            </section>

            <section class="row">
                <article class="col-xl-3 col-md-6">
                    <div class="card">
                        <img src="images/_3a75f318-0112-47a5-94ef-2b4302ea7c13.jpg" class="card-img-top" alt="...">
                        <div class="card-body">
                            <h5 class="card-title">2D Animation</h5>
                          <p class="card-text">Traditional hand-drawn animation using modern technology and techniques</p>
                          <a href="#" class="btn btn-primary">VCP 136 Multimedia Production I</a>
                        </div>
                    </div>
                </article>
                <article class="col-xl-3 col-md-6">
                    <div class="card">
                        <img src="images/_cbc2522a-da9a-4b97-adc7-29ec52f62d19.jpg" class="card-img-top" alt="...">
                        <div class="card-body">
                            <h5 class="card-title">Character Design</h5>
                            <p class="card-text">Character creation for 2D and 3D media</p>
                            <a href="#" class="btn btn-primary">VCP 219 Character Creation</a>
                        </div>
                    </div>
                </article>
                <article class="col-xl-3 col-md-6">
                    <div class="card">
                        <img src="images/_fc443157-c104-454c-98c2-e041ae9bcb99.jpg" class="card-img-top" alt="...">
                        <div class="card-body">
                            <h5 class="card-title">3D Animation</h5>
                            <p class="card-text">3D animation short film production</p>
                            <a href="#" class="btn btn-primary">VCP 218 Introduction to 3D Modeling and Animation</a>
                        </div>
                    </div>
                </article>
                <article class="col-xl-3 col-md-6">
                    <div class="card">
                        <img src="images/_3a75f318-0112-47a5-94ef-2b4302ea7c13.jpg" class="card-img-top" alt="...">
                        <div class="card-body">
                            <h5 class="card-title">2D Animation</h5>
                            <p class="card-text">Traditional hand-drawn animation using modern technology and techniques</p>
                            <a href="#" class="btn btn-primary">VCP 136 Multimedia Production I</a>
                        </div>
                    </div>
                </article>
            </section>

            <section class="row">
                <article class="col col-lg-6 col-sm-12">
                    <div class="row">
                        <div class="col-xl-8">
                            <figure>
                                <iframe src="https://www.youtube.com/embed/gwkkyHBbnZw?si=EP7O_E6H5OsrsZkI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
                                <figcaption>
                                    <p>Jon Cone Demo Reel</p>
                                </figcaption>
                            </figure>  
                        </div>
                        <div class="col-xl-4">
                            <p>Jon Cone has taught animation and digital imaging for over 15 years. He teaches, graphic design, web design, interactive media, game design, 2D animation, and 3D animation.</p>
                        </div>
                    </div>                    
                </article>

                <article class="col col-lg-6 col-sm-12">
                    <div class="row">
                        <div class="col-xl-8">
                            <figure>
                                <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3072.3871508934863!2d-75.95910462337045!3d39.6410007715748!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c7b0f19cc33215%3A0x36d4f10a671a795e!2sCecil%20College!5e0!3m2!1sen!2sus!4v1728062802650!5m2!1sen!2sus" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                                <figcaption>
                                    <p>1 Seahawk Dr, North East, MD 21901</p>
                                </figcaption>
                            </figure>  
                        </div>
                        <div class="col-xl-4">
                            <p>Cecil College offers a variety of courses. The very best one's are Cone's!</p>
                        </div>
                    </div>                    
                </article>
            </section>
        </main>

        <footer class="container-fluid">
            <section class="row">
                <article class="col-4 offset-4">
                    <p>© TeachMeCone. All Rights reserved. Privacy Policy</p>
                </article>
            </section>

            <section class="row">
                <article class="col">
                    <div class="row">
                        <div class="offset-4 col-1">
                            <i class="fa fa-facebook-square" style="font-size:3em"></i>
                        </div>
                        <div class="col-1">
                            <i class="fa fa-twitter-square" style="font-size:3em"></i>
                        </div>
                        <div class="col-1">
                            <i class="fa fa-linkedin-square" style="font-size:3em"></i>
                        </div>
                        <div class="col-1">
                            <i class="fa fa-instagram" style="font-size:3em"></i>
                        </div>
                    </div>
                </article>
            </section>
        </footer>

        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
    </body>
</html>

Subpages

Multi-Page Site Setup:

The easiest way to start your subpages is to utilize what you have already created.

Externalize CSS

Internal embedded CSS is appropriate for a single page site but is not beneficial for multiple pages.
You must:

Create a new folder named CSS (if it does not already exist) in your root site folder
create a new document and save it as style.css in the CSS folder
copy your internal CSS rules and paste it into the your new CSS document
Delete any remaining tags (<style>) and link the external CSS style sheet.

external CSS linkage

<!--external CSS document example-->

<link href="css/styles.css" type="text/css" rel="stylesheet" />

Duplicate HTML

Since most sites have generally the same backgrounds and menus in all pages it makes sense to simply duplicate the homepage as a starter template for the remaining sub-pages.

You must:

Copy (ctrl + c or cmd + c) and Paste (ctrl + v or cmd + v) index.html (homepage)
Rename the subpages appropriately (ex. about.html, contactUs.html, etc.)
Delete the main content of the documents while leaving the menu and other elements that should remain the same.

root

(site name)

index.html

(homepage)

about.html

(subpage)

contactUs.html

(subpage)

css

images

Creating Subpages

Instructions:

Now that the homepage appears how we want it, it’s time to make some subpages.

index.html

<!DOCTYPE html>
<html>
    <head>
        <title>Teach Me Cone - Home</title>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial=scale=1.0" />
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        <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=Anton&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
        <link href="css/styles.css" type="text/css" rel="stylesheet" />

    </head>
    <body data-rsssl=1 data-rsssl=1>
        <header class="container-fluid">
            <section class="row">
                <article class="col">
                    <nav class="navbar navbar-expand-lg">
                        <div class="container-fluid">
                            <a class="navbar-brand" href="index.html"><img src="images/tmcLogo.svg" class="logoGraphic" /></a>
                            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                            <span class="navbar-toggler-icon"></span>
                            </button>
                            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                                <li class="nav-item">
                                    <a class="nav-link" id="currentPage" aria-current="page" href="index.html">Home</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="about.html">About</a>
                                </li>
                                <li class="nav-item dropdown">
                                <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                                    Courses
                                </a>
                                <ul class="dropdown-menu">
                                    <li><a class="dropdown-item" href="#">VCP 144 Web Design I</a></li>
                                    <li><a class="dropdown-item" href="#">VCP 244 Web Design II</a></li>
                                    <li><a class="dropdown-item" href="#">VCP 116/117 Digital Imaging I/II</a></li>
                                    <li><a class="dropdown-item" href="#">VCP 136 Multimedia Production I</a></li>
                                </ul>
                                </li>
                            </ul>
                            </div>
                        </div>
                    </nav>
                </article>                
            </section>
        </header>

        <main class="container">
            <section class="row">
                <article class="col-xl-8 offset-xl-2">                    
                    <div id="carouselExampleCaptions" class="carousel slide">
                        <div class="carousel-indicators">
                          <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
                          <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
                          <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
                          <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="3" aria-label="Slide 4"></button>
                        </div>
                        <div class="carousel-inner">

                          <div class="carousel-item active">
                            <img src="images/kevin-jarrett-rip5luxidKI-unsplash.jpg" class="d-block w-100" alt="...">
                            <div class="carousel-caption d-none d-md-block">
                              <h5>First slide label</h5>
                              <p>Some representative placeholder content for the first slide.</p>
                            </div>
                          </div>

                          <div class="carousel-item">
                            <img src="images/kevin-jarrett-rip5luxidKI-unsplash.jpg" class="d-block w-100" alt="...">
                            <div class="carousel-caption d-none d-md-block">
                              <h5>Second slide label</h5>
                              <p>Some representative placeholder content for the second slide.</p>
                            </div>
                          </div>

                          <div class="carousel-item">
                            <img src="images/kevin-jarrett-rip5luxidKI-unsplash.jpg" class="d-block w-100" alt="...">
                            <div class="carousel-caption d-none d-md-block">
                              <h5>Third slide label</h5>
                              <p>Some representative placeholder content for the third slide.</p>
                            </div>
                          </div>

                          <div class="carousel-item">
                            <img src="images/kevin-jarrett-rip5luxidKI-unsplash.jpg" class="d-block w-100" alt="...">
                            <div class="carousel-caption d-none d-md-block">
                              <h5>Fourth slide label</h5>
                              <p>Some representative placeholder content for the third slide.</p>
                            </div>
                          </div>

                        </div>
                        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
                          <i class="fa fa-chevron-circle-left"></i>
                          <span class="visually-hidden">Previous</span>
                        </button>
                        <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
                            <i class="fa fa-chevron-circle-right"></i>
                          <span class="visually-hidden">Next</span>
                        </button>
                    </div>
                </article>
            </section>

            <section class="row">
                <article class="col-xl-3 col-md-6">
                    <div class="card">
                        <img src="images/_3a75f318-0112-47a5-94ef-2b4302ea7c13.jpg" class="card-img-top" alt="...">
                        <div class="card-body">
                          <h5 class="card-title">2D Animation</h5>
                          <p class="card-text">Traditional hand-drawn animation using modern technology and techniques</p>
                          <a href="#" class="btn btn-primary">VCP 136 Multimedia Production I</a>
                        </div>
                    </div>
                </article>
                <article class="col-xl-3 col-md-6">
                    <div class="card">
                        <img src="images/_cbc2522a-da9a-4b97-adc7-29ec52f62d19.jpg" class="card-img-top" alt="...">
                        <div class="card-body">
                            <h5 class="card-title">Character Design</h5>
                            <p class="card-text">Character creation for 2D and 3D media</p>
                            <a href="#" class="btn btn-primary">VCP 219 Character Creation</a>
                        </div>
                    </div>
                </article>
                <article class="col-xl-3 col-md-6">
                    <div class="card">
                        <img src="images/_fc443157-c104-454c-98c2-e041ae9bcb99.jpg" class="card-img-top" alt="...">
                        <div class="card-body">
                            <h5 class="card-title">3D Animation</h5>
                            <p class="card-text">3D animation short film production</p>
                            <a href="#" class="btn btn-primary">VCP 218 Introduction to 3D Modeling and Animation</a>
                        </div>
                    </div>
                </article>
                <article class="col-xl-3 col-md-6">
                    <div class="card">
                        <img src="images/_8af64613-0b2c-463b-a00c-a9b8a3fdeab3.jpg" class="card-img-top" alt="...">
                        <div class="card-body">
                          <h5 class="card-title">Game Creation</h5>
                          <p class="card-text">Create a platformer and first person game with your own artwork and code, utilizing the Unity game engine</p>
                          <a href="#" class="btn btn-primary">VCP 151 Introduction to Game Design</a>
                        </div>
                    </div>
                </article>
            </section>

            <section class="row">

                <article class="col col-lg-6 col-sm-12">
                    <div class="row">
                        <div class="col-xl-8">
                            <figure>
                                <iframe src="https://www.youtube.com/embed/gwkkyHBbnZw?si=EP7O_E6H5OsrsZkI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
                                <figcaption>
                                    <p>Jon Cone Demo Reel</p>
                                </figcaption>
                            </figure>  
                        </div>
                        <div class="col-xl-4">
                            <p>Jon Cone has taught animation and digital imaging for over 15 years. He teaches, graphic design, web design, interactive media, game design, 2D animation, and 3D animation.</p>
                        </div>
                    </div>                    
                </article>

                <article class="col col-lg-6 col-sm-12">
                    <div class="row">
                        <div class="col-xl-8">
                            <figure>
                                <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3072.3871508934863!2d-75.95910462337045!3d39.6410007715748!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c7b0f19cc33215%3A0x36d4f10a671a795e!2sCecil%20College!5e0!3m2!1sen!2sus!4v1728062802650!5m2!1sen!2sus" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                                <figcaption>
                                    <p>1 Seahawk Dr, North East, MD 21901</p>
                                </figcaption>
                            </figure>  
                        </div>
                        <div class="col-xl-4">
                            <p>Cecil College offers a variety of courses. The very best one's are Cone's!</p>
                        </div>
                    </div>                    
                </article>
            </section>
        </main>

        <footer class="container-fluid">
            <section class="row">
                <article class="col-4 offset-4">
                    <p>© TeachMeCone. All Rights reserved. Privacy Policy</p>
                </article>
            </section>

            <section class="row">
                <article class="col">
                    <div class="row">
                        <div class="offset-4 col-1">
                            <a href="#"><i class="fa fa-facebook-square" style="font-size:3em"></i></a>
                        </div>
                        <div class="col-1">
                            <a href="#"><i class="fa fa-twitter-square" style="font-size:3em"></i></a>
                        </div>
                        <div class="col-1">
                            <a href="#"><i class="fa fa-linkedin-square" style="font-size:3em"></i></a>
                        </div>
                        <div class="col-1">
                            <a href="#"><i class="fa fa-instagram" style="font-size:3em"></i></a>
                        </div>
                    </div>
                </article>
            </section>
        </footer>

        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
    </body>
</html>

about.html

<!DOCTYPE html>
<html>
    <head>
        <title>Teach Me Cone - About</title>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial=scale=1.0" />
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        <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=Anton&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
        <link href="css/styles.css" type="text/css" rel="stylesheet" />

    </head>
    <body data-rsssl=1 data-rsssl=1>
        <header class="container-fluid">
            <section class="row">
                <article class="col">
                    <nav class="navbar navbar-expand-lg">
                        <div class="container-fluid">
                            <a class="navbar-brand" href="index.html"><img src="images/tmcLogo.svg" class="logoGraphic" /></a>
                            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                            <span class="navbar-toggler-icon"></span>
                            </button>
                            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                                <li class="nav-item">
                                    <a class="nav-link" aria-current="page" href="index.html">Home</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" id="currentPage" href="about.html">About</a>
                                </li>
                                <li class="nav-item dropdown">
                                <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                                    Courses
                                </a>
                                <ul class="dropdown-menu">
                                    <li><a class="dropdown-item" href="#">VCP 144 Web Design I</a></li>
                                    <li><a class="dropdown-item" href="#">VCP 244 Web Design II</a></li>
                                    <li><a class="dropdown-item" href="#">VCP 116/117 Digital Imaging I/II</a></li>
                                    <li><a class="dropdown-item" href="#">VCP 136 Multimedia Production I</a></li>
                                </ul>
                                </li>
                            </ul>
                            </div>
                        </div>
                    </nav>
                </article>                
            </section>
        </header>

        <main class="container">
            <section class="row">
                <article class="col-xl-8 offset-xl-2">                    
                    <div class="accordion" id="accordionExample">
                        <div class="accordion-item">
                          <h2 class="accordion-header">
                            <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                              Accordion Item #1
                            </button>
                          </h2>
                          <div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
                            <div class="accordion-body">
                              <strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
                            </div>
                          </div>
                        </div>
                        <div class="accordion-item">
                          <h2 class="accordion-header">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                              Accordion Item #2
                            </button>
                          </h2>
                          <div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
                            <div class="accordion-body">
                              <strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
                            </div>
                          </div>
                        </div>
                        <div class="accordion-item">
                          <h2 class="accordion-header">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                              Accordion Item #3
                            </button>
                          </h2>
                          <div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
                            <div class="accordion-body">
                              <strong>This is the third item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
                            </div>
                          </div>
                        </div>
                      </div>
                </article>
            </section>

        </main>

        <footer class="container-fluid">
            <section class="row">
                <article class="col-4 offset-4">
                    <p>© TeachMeCone. All Rights reserved. Privacy Policy</p>
                </article>
            </section>

            <section class="row">
                <article class="col">
                    <div class="row">
                        <div class="offset-4 col-1">
                            <a href="#"><i class="fa fa-facebook-square" style="font-size:3em"></i></a>
                        </div>
                        <div class="col-1">
                            <a href="#"><i class="fa fa-twitter-square" style="font-size:3em"></i></a>
                        </div>
                        <div class="col-1">
                            <a href="#"><i class="fa fa-linkedin-square" style="font-size:3em"></i></a>
                        </div>
                        <div class="col-1">
                            <a href="#"><i class="fa fa-instagram" style="font-size:3em"></i></a>
                        </div>
                    </div>
                </article>
            </section>
        </footer>

        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
    </body>
</html>

styles.css

h1, h2, h3, h4, h5, h6 {
    font-family: "Anton", sans-serif;
    font-weight: 400;
    font-style: normal;}

body, p, q, li {
    font-family: "Raleway", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;}
body {
    background-color: #d5d5d5;}
footer {
    text-align: center;}
iframe {
    aspect-ratio: 16/9;
    height: auto;
    width: 100%;}
.logoGraphic {
    width: 4em;}
.fa-chevron-circle-left, .fa-chevron-circle-right {
    font-size: 5em;}
.navbar {
    background-color: #383838;}
.navbar a:link, .navbar a:visited {
    color: white;}
.navbar a:hover, .navbar a:active {
    color: #d5d5d5;}
#currentPage {
    color: #C77530;}
.dropdown-menu {
    background-color: #383838;}
.fa-chevron-circle-left, .fa-chevron-circle-right {
    color: #C77530;}
.card {
    height: 100%;}
.card-body .btn-primary{
    background-color: #383838;
    border-style: none;}
footer a:link, footer a:visited, footer a:hover {
    color: #383838;}

Color Trends

The internet is innately modern. This means the design of the sites must be as well. It is important to perform research on the brand and industry you are making a website for.

Lab assignment submission

Instructions:

Before you submit you should review your code and Save your file (File > Save), navigate to your file on your Desktop, and double-click it to open
Look for any errors. If there are any, look through your code and fix them. When you are happy, proceed
Your site is not just the single HTML document you have created but the root folder and all contents therein. You MUST submit the ENTIRE folder
You cannot submit folders on Canvas. Instead we can zip the folder and submit that. Navigate to the location of your site folder. Right-click over top of it and select Compress to zip file on Windows and Compress on MacOS. A new zipped file will be created
Lastly, log into Canvas (Here) and click on this course. Inside the course, under module Week 09, select Week 09: Responsive Site (subpages) Lab, then upload the zipped file.

You’re Done

Did you remember to?

Read through this webpage
Complete and submit the 09 Responsive Site (subpages) Lab on Canvas