🖥️ Cloning an early 00's website using modern HTML + CSS
Tags: html, css, retro, story
Published: 2021-04-27 20:13:59

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:

![](https://media.giphy.com/media/pNREvhpaRaFCA9S6z2/giphy.gif)
<center>...</center>
![](https://media.giphy.com/media/it6W8D4FfvaPC/source.gif)


But I wanted my pages to look more like these:

![retro example dragon ball z screenshot](https://raw.githubusercontent.com/Lmendev/CartoonNetwork-2000-Clone/main/assets/retro-examples/dragon-ball-z.jpg)

![retro example fox kids screenshot](https://raw.githubusercontent.com/Lmendev/CartoonNetwork-2000-Clone/main/assets/retro-examples/fox-kids.jpg)

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


## The design

Using [Wayback Machine](https://archive.org/) I chose this Cartoon Network version:

![](https://raw.githubusercontent.com/Lmendev/CartoonNetwork-2000-Clone/main/assets/retro-examples/cn-wbmachine.jpg)


## Identifying the structure

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

![](https://raw.githubusercontent.com/Lmendev/CartoonNetwork-2000-Clone/main/assets/retro-examples/cn-wbmachine-structure.jpg)

## 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](https://github.com/Lmendev/CartoonNetwork-2000-Clone) (if you want to check it out), the result is this:

![](https://raw.githubusercontent.com/Lmendev/CartoonNetwork-2000-Clone/main/assets/screenshots/cn-2000-desktop.png)

## Mobile version.. Why not?

Also I created a mobile version. 

![](https://raw.githubusercontent.com/Lmendev/CartoonNetwork-2000-Clone/main/assets/screenshots/cn-2000-mobile.png)

If we had smartphones in the 00's, it would have looked something like this. I think, who knows?...

![](https://media.giphy.com/media/l36kU80xPf0ojG0Erg/giphy.gif)

You can compare original vs clone here:
[Original](https://web.archive.org/web/20001019035652/http://www.cartoonnetwork.com/index.getflash.html) vs [Clone](https://lmendev.github.io/CartoonNetwork-2000-Clone/)


Thanks a lot for reading my post and code!
![](https://media.giphy.com/media/Z9hnT4PsD3fwisOfHP/giphy.gif)

## Links
Repo: [Github](https://github.com/Lmendev/CartoonNetwork-2000-Clone)
Deploy: [Webpage Clone](https://lmendev.github.io/CartoonNetwork-2000-Clone/)

## Social
Follow me on my social networks
I usually share code and some memes

<a href="https://twitter.com/intent/follow?screen_name=Lmendev" target="_blank">
  <img src="https://user-images.githubusercontent.com/7629661/87821427-202e0280-c870-11ea-9e38-8c7c74856753.png" width="144" alt="Follow @Lmendev on Twitter" title="Follow @lmendoza92 on Twitter">
</a>


Like and comment to stay in touch! 😃