This page explains the HTML and CSS I used to build PHSYC'S CAGE.
This is my assasmenet 1's 2nd page (webdev1)progress list. with the help of w3school and inspiration from other's web preview i wanted to make a dark themed page called Phsyc's Cage I am still trying to learn more tags but for this website I searched for css layouts than i found this css lydout with dark theme than i emplemented extra css with the help of my friend in this website i tried to use basic and easy to understand and learn html and css . I first day I didn't know how to make a text button than i learnt it from w3 school .i visiit website and asked Gen ai "what is this explain me"after some days of knoledge gatharing I came to know about more css code like (btn,footer,btn animation then i emplemented those in my website
I used the header tag to create the top navigation bar of the website. It contains the logo, the site title, and all the menu links.
Sections helped me divide the webpage into different parts such as the banner, about area, cage selection, and the footer. It keeps the layout organized.
I used div tags as containers for grouping content together, such as images, text blocks, items inside the cage selection, and layout structures.
The img tag was used to display images for the cages and the profile picture in the navigation bar.
Anchor tags were used to create links — for navigation items, buttons, and the link to this second page.
I used the button tag for the “Explore More” button to make it interactive and clickable.
The footer tag is used at the bottom of the page to show the final message and copyright text.
below I am going to explain Why and where I used those tags in my html.
I started with the standard HTML5 structure to define the document type and load the CSS file(made with help of my friend ,Gen AI and youtube videos.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PHSYC'S CAGE</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
...
</body>
</html>
This header includes my profile picture, website name, and navigation menu links(Links not availabe because its a prototype).
<header class="topbar">
<div class="left-side">
<img src="images/profile pic.jpg" class="profile-pic">
<span class="creator-name">PHCYC'S CAGE</span>
</div>
<nav class="menu">
<a href="#">Home</a>
<a href="#">Posts</a>
<a href="#">Collections</a>
<a href="#">Chats</a>
<a href="#">About</a>
<a href="#" class="join-btn">Join now</a>
<a href="#">Log in</a>
</nav>
</header>
I styled the topbar using flexbox to align everything horizontally.
The banner is the large top section with the website title and description.
<section class="banner">
<div class="overlay"></div>
<div class="banner-content">
<h1 class="main-title">PHSYC'S CAGE</h1>
<p class="stats">0 members · 0 posts</p>
<p class="description">
“PHSYC’s Cage: Break free from the cages you never knew you lived in.”
</p>
<a href="#" class="member-btn">Become a Member</a>
</div>
</section>
The background image is set in CSS, and the overlay makes the text easier to read.
This section explains the meaning behind the website. It uses a two-column grid layout.
<section class="about-cage">
<div class="about-inner">
<div class="about-text">
<h3>About PHSYC's Cage</h3>
<p> ... website explanation ... </p>
<a href="#" class="btn-primary">Learn More</a>
</div>
<div class="about-image"></div>
</div>
</section>
These cards show different “cages” like music, nature, human, social media, etc.
<section class="collections">
<h2>Cage Selection</h2>
<div class="collection-box">
<div class="collection-item">
<img src="images/music2.jpg">
<h3>Music</h3>
</div>
...
</div>
</section>
The grid uses CSS Grid to create a clean 3-column layout.
The footer contains a message and the link to this page.
<footer class="ending-section">
<h2>Break Free From the Cage</h2>
<p> ... footer text ... </p>
<p>
If you want to know how I developed this website
<a href="webdev1.html">click here</a>
</p>
</footer>
After I finished the first version of PHSYC'S CAGE I started to add JavaScript to make the website more interactive. Here are the main scripts I used.
On the home page the Read More button smoothly scrolls down to the About section instead of jumping instantly.
<script>
const readMoreBtn = document.querySelector('.read-more-btn');
readMoreBtn.addEventListener('click', function (event) {
event.preventDefault();
document.querySelector('#about-section')
.scrollIntoView({ behavior: 'smooth' });
});
</script>
This script listens for a click on the button and then uses
scrollIntoView() with behavior: "smooth" to move the
page down in a soft scrolling effect.
On my login page I have both Log in and Sign up forms on the same page. JavaScript hides one form and shows the other when the user clicks the tab.
<script>
const tabButtons = document.querySelectorAll('.auth-tab');
const authForms = document.querySelectorAll('.auth-form');
tabButtons.forEach(button => {
button.addEventListener('click', () => {
tabButtons.forEach(b => b.classList.remove('active'));
authForms.forEach(f => f.classList.remove('active'));
button.classList.add('active');
const target = button.dataset.target; // "#login-form" or "#signup-form"
document.querySelector(target).classList.add('active');
});
});
</script>
I used a data-target attribute on each tab button to tell the
script which form to show. The active class is handled with CSS.
For the Terms and Policy I created a small popup window that opens when the user clicks the link next to the checkbox on the sign up form.
<script>
const termsLink = document.querySelector('.terms-link');
const termsModal = document.getElementById('terms-modal');
const closeBtn = document.querySelector('.close-terms');
termsLink.addEventListener('click', (e) => {
e.preventDefault();
termsModal.classList.add('show');
});
closeBtn.addEventListener('click', () => {
termsModal.classList.remove('show');
});
window.addEvent
⬅ Back to Home