🖥️ Cloning an early 00's website using modern HTML + CSS

#html #css #retro #story

2000's were a chaotic-beautiful decade to be a web dev.

A retro story

When I was young, I usually tried to write some HTML with Inline Styles using a book that an uncle lent me.

I used to go to my computer, open notepads and write code like this everyday after school:


 html
<html>
<head>
    <title>Famous Dinosaurs</title>
</head>
<body style="background: darkgreen; color: white;">
    <h1>The Top 10 Famous Dinosaurs</h1>

    <img src="link/to/some/amazing-banner.jpg" 
        alt="Oops something went wrong!">

    <!--how to forget the marquee 💚 -->
    <marquee>Woo, its moving :O :D</marquee> 

    <p>Dinosaurs are awesome and the best are:</p>

    <ul>
        <li>T-Rex</li>
        <li>Velociraptor</li>
        <li>Triceratops</li>
    </ul>

</body>
</html>

Results of those days:

...

But I wanted my pages to look more like these:

So.. I studied computer science and 20 years later I come here to not disappoint my 2000 self version. 😠

The design

Using Wayback Machine I chose this Cartoon Network version:

Identifying the structure

Mainly, the website has its header, nav, main, and footer sections.

The Code

Now, this is the basic HTML code


 html
<h1>Cartoon Network 2000 Clone</h1>

<header>    
    <section id="header-banner"> .. </section>

    <section id="plugins"> .. </section>

    <nav>
        <section id="characters-search">
            <label for="characters">
                Choose a character:
                <select name="characters" id="characters">
                    <option value="" selected disabled>Choose</option>
                    <option value="Bugs Bunny">Bugs Bunny</option> 
                                .. 
                    <option value="Scooby-Doo">Scooby-Doo</option>
                </select>
            </label>

            <label for="search">
                Search:
                <input type="text" name="search" id="search">
                <button>Go</button>
            </label>
        </section>

        <ul id="nav-menu">
            <li><a href="#">Home</a></li>
                        ..
            <li><a href="#">Tv</a></li>
        </ul>
    </nav>
</header>

<main>
    <section id="spotlight"> .. </section>

    <section id="characters"> .. </section>

    <section id="featured">
        <article>
            <img src="./assets/img/shop-cn.gif" alt="">
            <p>Free shipping on Your First Order <a href="#">Click Here for Details</a></p>    
        </article>
            ..
        <article>
            <img src="./assets/img/jbvo.gif" alt="">
            <p><a href="#">Click Here!</a></p>
        </article>
    </section>
</main>

<footer>
    <section id="legalities"> .. </section>
    <section id="footer-banner"> .. </section>
    <section id="copyright-information"> .. </section>
</footer>

And adding some magic CSS that is all available on the GitHub Repository (if you want to check it out), the result is this: