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:
Mobile version.. Why not?
Also I created a mobile version.
If we had smartphones in the 00's, it would have looked something like this. I think, who knows?...
You can compare original vs clone here:
Original vs Clone
Thanks a lot for reading my post and code!
Links
Repo: Github
Deploy: Webpage Clone
Social
Follow me on my social networks
I usually share code and some memes
Like and comment to stay in touch! 😃
Top comments (3)
😂