Skip to content

First commit #5

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

First commit #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
94af154
First commit
Subhash143222 Mar 17, 2024
8da21ae
Update style.css
Subhash143222 Mar 27, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
175 changes: 175 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,175 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="homePageNav">
<div>
<div >
<div id="nav-bar-container"><a id="nav-bar-cn-logo" href="index.html"><img src="Media/cnlogo-icon.png" alt="cn"></a>


<div class="_nav-bar-buttons"> <a href="#" class="_nav-bar-button-text">GAMES<span >v</span></a>

</div>
<div class="_nav-bar-dividers"></div>
<div class="_nav-bar-buttons"> <a href="#" class="_nav-bar-button-text">VIDEO <span >v</span></a>
</div>
<div class="_nav-bar-dividers _nav-bar-buttons-dividers"></div>
<div id="nav-bar-button-apps" class="_nav-bar-buttons"><a href="#" class="_nav-bar-button-text">APPS</a></div>
<div class="_nav-bar-dividers _nav-bar-buttons-dividers" id="last-divider"></div>
<div class="_nav-bar-desktop-items">
<form id="nav-bar-icon-search" class="_nav-bar-icons" type="submit">
<input id="nav-bar-icon-searchBox" name="keywords" type="text" value="SEARCH" autocomplete="off" aria-label="SEARCH">
<input id="nav-bar-icon-search-icon" type="submit" value="" aria-label="SEARCH">
<div id="searchDropdown" class="hidden"></div>
</form>
</div>
</div>
</div>
</div>

</div>
<div class="m"></div>

<div class="hero1">
<div class="main-line">

<h1> <img src="images/headericon_video_white_180x180_4.png" class="main-png" width="65px" alt=""> UNLOCKED FULL EPISODES</h1>
</div>
<div id="cssportal-grid1">
<div id="div01" class="grid-item">
<a href="#"><img src="Media/Image-1.webp" class="imagg" alt="cn"> </a>
<div class="bottom-div">

<h3>YOU'RE FIRED</h3>

<P>Teen Titans Go!</P>
</div>
</div>
<div id="div02" class="grid-item">
<a href="#"><img src="Media/Image-2.jpeg" class="imagg" alt="cn"> </a>
<div class="bottom-div">
<h3 style="color: #FFB2CD;">THE BROOD</h3>
<p>Crain of the Creek</p>
</div>
</div>
<div id="div03" class="grid-item">
<a href="#"><img src="Media/Image-3.webp" class="imagg" alt="cn"> </a>
<div class="bottom-div">
<h3 style="color: #FFB2CD;">THE ROBOT</h3>
<p>The Amazing World of Gumball</p>
</div>
</div>
<div id="div04" class="grid-item">
<a href="#"><img src="images/mobile_app.png" alt="cn"></a><h1>mobile app</h1>


</div>
<div id="div05" class="grid-item">
<img src="images/unlocked.png" alt=""> <h1>unlocked!</h1>
</div>
</div>
<br>
<button class="hero2-btn rbtn">ALL VIDEO</button>
</div>



<div class="hero2">
<div class="h11">

<h1 class="hero2-hed"><img src="images/white_gameicon.png" width="50px" class="gamelogo" alt="">GAMES</h1>
<div id="cssportal-grid2">
<div id="div1">
<a href="#"><img src="Media/image-7.webp" class="imgg" alt="cn"> </a>
<h2>BEN 10</h2>
<h2>alien rivals</h2>
</div>
<div id="div2">
<a href="#"><img src="Media/Image-8.webp" class="imgg" alt="cn"> </a>
</div>
<div id="div3">
<a href="#"><img src="Media/Image-9.webp" class="imgg" alt="cn"> </a>
</div>
<div id="div4">
<a href="#"><img src="Media/Image-10.webp" class="imgg" alt="cn"> </a>
</div>
<div id="div5">
<a href="#"><img src="Media/Image-11.webp" class="imgg" alt="cn"> </a>
</div>
<div id="div6">
<a href="#"><img src="Media/Image-12.webp" class="imgg" alt="cn"> </a>
</div>
<div id="div7">
<a href="#"><img src="Media/Image-13.webp" class="imgg" alt="cn"> </a>
</div>
<div id="div8">
<a href="#"><img src="Media/Image-14.jpeg" class="imgg" alt="cn"> </a>
</div>
<div id="div9">
<a href="#"><img src="Media/Image-15.jpeg" class="imgg" alt="cn"> </a>
</div>
<div id="div10">
<P class="gamm" >TEEN TITAN GO! GAMES</P>
<a href="#" class="play-btn" >PLAY NOW</a>
</div>
<div id="div11">
<pc class="gamm">GUMBALL GAMES</p>
<a href="#" class="play-btn" >PLAY NOW</a>
</div>
<div id="div12">

<p>A D V E R T I S M E N T </p>
<img src="Media/Image-16(ad).png" alt="">
</div>
</div>
<button class="hero2-btn rbtn">ALL GAMES</button>
</div>
</div>

<div id="footer-container">
<div class="footer-wrapper">
<div id="footer-navigation">
<ul class="footer-nav-column-1">
<li><a href="#" id="privacy-link"><span class="footer-nav-text">Privacy Policy</span></a></li>
<li><a href="#"><span class="footer-nav-text">Terms of Use</span></a></li>
<li><a href="#" target="_blank"><span class="footer-nav-text">Closed Captioning</span></a></li>
<li><a href="#"><span class="footer-nav-text">TVE Parental Controls</span></a></li>
</ul>
<ul class="footer-nav-column-2">
<li><a href="#" target="_blank"><span class="footer-nav-text">Help</span></a></li>
<li><a href="#"><span class="footer-nav-text">Contact Us</span></a></li>
</ul>
</div>
<div id="footer-content" class="seo-text">
<a href="#"><img src="Media/SBSU_logo.png" class="footer-content-image-sbsu" alt="Stop Bullying: Speak Up Logo"></a>
<a href="#"><img src="Media/cartoonito-logo-white.png" class="footer-content-image-cartoonito" alt="Cartoonito"></a>
<p class="footer-content-legal-large">
Cartoon Network is home to your favorite cartoons, full episodes, video clips and free games. Play with your favorite Cartoon Network characters in Teen Titans GO! games, Adventure Time games, Gumball games and more. Watch episodes and video clips of your favorite TV shows like Adventure Time, Craig of the Creek, The Amazing World of Gumball, Teen Titans GO!, Steven Universe, We Bare Bears, Clarence and more.

</p>

<p class="footer-content-legal-small">Use of this site signifies your agreement to the Terms of Use. TM ∓ © 2024 Cartoon Network. All Rights Reserved. CartoonNetwork.com is part of Turner Entertainment Digital which is part of the Turner Sports ∓ Entertainment Digital Network. </p>
<p class="footer-content-images">
<img src="Media/CN_checkerboard_logo.png" class="footer-content-image-cartoon-network-logo" alt="Cartoon Network Logo">
<img src="Media/TV-PG.jpg" class="footer-content-image-rating" alt="This site has a rating of TV-PG">
<a href="#" target="_blank">
<img src="Media/georgia.png" class="footer-content-image-georgia" alt="Made in Georgia Logo">
</a>
<a href="#" target="_blank">
<img src="Media/kid-safe logo.png" alt="CartoonNetwork.com is certified by the kidSAFE Seal Program." class="footer-content-image-kids-safe-seal" >
</a>
</p>
<p class="footer-content-ga-tax">
This project was completed with assistance from the Georgia Film Office, a division of the Georgia Department of Economic Development.
</p>
</div>
</div>
</div>
</body>
</html>
96 changes: 48 additions & 48 deletions readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,48 +1,48 @@
# Re-code the Past - Event Rules

## Event Rules

- You can participate in teams of up to 3 members.
- You will be provided with a screenshot of a legacy website and not the hyperlink.
- A Figma file showing the exact dimensions and colors is also provided.
- Your objective is to replicate the website's functionality and visual elements using your framework of choice.
- Required assets, such as images and fonts, will be provided.
- The winner will be determined by the degree to which the participants have successfully recreated the original website, encompassing both functionality and visual fidelity.
- If you are caught opening the website on your browser, you will be announced as disqualified.
- If we find that you have used code from the original website, you will be disqualified.
- You are allowed to use the internet and dev mode in Figma.

## Figma Mockup to Web Page

### Objective

Turn this Figma mockup into a web page: [Figma Mockup Link](https://www.figma.com/file/C66TNPatZDL3PYogZ80BvX/Recode-the-Past?type=design&node-id=0%3A1&mode=dev&t=a4xCcsVlcLTqBKM0-1)

### Prerequisites

- HTML
- CSS
- VS Code

### Step 1: Inspect the design mockup using Figma

- Open the above link and create an account or sign in to view the page in Figma.
- Inspect the dimensions and styles of various components in the div mode on Figma.
- Identify the fonts used on the page and find them on Google Fonts for later use.
- Export the images on the page as PNG or JPEG files for use within your web page, which is provided to you.

### Step 2: Set up basic page structure and styles

- Create a folder on your desktop and open it up in VS Code.
- Create an `index.html` file, a `styles.css` file, and copy over images (recommended).
- Add basic HTML tags (head, title, link, body, section-wise divs, etc.).
- Set up basic styles (header & body font family, text size, background, etc.).

### Step 3: Implement the web page section by section

- Add the content for each section one by one using HTML (recommended).
- Use Figma's "Inspect" tab to check values of CSS properties (recommended).
- Add styles for each completed section one by one using CSS (recommended).
- Try to replicate the mockup as closely & precisely as possible (recommended).

Best of Luck
# Re-code the Past - Event Rules
## Event Rules
- You can participate in teams of up to 3 members.
- You will be provided with a screenshot of a legacy website and not the hyperlink.
- A Figma file showing the exact dimensions and colors is also provided.
- Your objective is to replicate the website's functionality and visual elements using your framework of choice.
- Required assets, such as images and fonts, will be provided.
- The winner will be determined by the degree to which the participants have successfully recreated the original website, encompassing both functionality and visual fidelity.
- If you are caught opening the website on your browser, you will be announced as disqualified.
- If we find that you have used code from the original website, you will be disqualified.
- You are allowed to use the internet and dev mode in Figma.
## Figma Mockup to Web Page
### Objective
Turn this Figma mockup into a web page: [Figma Mockup Link](https://www.figma.com/file/C66TNPatZDL3PYogZ80BvX/Recode-the-Past?type=design&node-id=0%3A1&mode=dev&t=a4xCcsVlcLTqBKM0-1)
### Prerequisites
- HTML
- CSS
- VS Code
### Step 1: Inspect the design mockup using Figma
- Open the above link and create an account or sign in to view the page in Figma.
- Inspect the dimensions and styles of various components in the div mode on Figma.
- Identify the fonts used on the page and find them on Google Fonts for later use.
- Export the images on the page as PNG or JPEG files for use within your web page, which is provided to you.
### Step 2: Set up basic page structure and styles
- Create a folder on your desktop and open it up in VS Code.
- Create an `index.html` file, a `styles.css` file, and copy over images (recommended).
- Add basic HTML tags (head, title, link, body, section-wise divs, etc.).
- Set up basic styles (header & body font family, text size, background, etc.).
### Step 3: Implement the web page section by section
- Add the content for each section one by one using HTML (recommended).
- Use Figma's "Inspect" tab to check values of CSS properties (recommended).
- Add styles for each completed section one by one using CSS (recommended).
- Try to replicate the mockup as closely & precisely as possible (recommended).
Best of Luck
Loading