Skip to content

Homepage HTML & CSS #51

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

Closed
NoobSlayer28 wants to merge 5 commits into from
Closed

Homepage HTML & CSS #51

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
b4f8e29
Added navbar HTML + CSS
NoobSlayer28 Feb 25, 2026
9947f1e
Homepage HTML & CSS
NoobSlayer28 Mar 4, 2026
256f322
Merge branch 'main' into main
LearnPRG-py Mar 4, 2026
2aa4c5e
.html - Replaced dummy text with commented text (with formatting), .c…
NoobSlayer28 Mar 5, 2026
c138109
Merge branch 'LearnPRG-py:main' into main
NoobSlayer28 Mar 25, 2026
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
94 changes: 82 additions & 12 deletions projecthearthstone.in/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,22 +3,92 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Project Hearthstone - Home Page</title>
<title>Home - Project Hearthstone</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<script src="script.js"></script>
<!-- UPDATES SECTION -->
<section id="updates-section" class="updates-dark">
<h2 class="countdown-title" style="width: 100%; text-align: center;">Hackathon Updates!</h2>
<div class="updates-viewport">
<button class="nav-btn left" aria-label="Scroll left">&lt;</button>
<div class="updates-mask">
<div class="updates-track" id="updates-track" role="list"></div>
<header>
<!-- Horizontal Navigation Menu -->
<nav>
<div class="logo">Project Hearthstone</div>
<ul>
Comment thread
LearnPRG-py marked this conversation as resolved.
<li><a class="active" href="index.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="products.html">Our Products</a></li>
<li><a href="asl-learning-course">Learn ASL!</a></li>
<li><a class="btn" href="contact.html">Contact</a></li>
</ul>
</nav>
<!-- Hero Section -->
<section class="hero">
<div class="hero-content">
<h1 class="fade-in">Project Hearthstone</h1>
<p class="fade-in-delay">Because Communication Is a Right, Not a Privilege.</p>
<a class="hero-btn">Learn More</a>
</div>
<div class="hero-image">

</div>
</section>
</header>
<section class="content">
<!-- The Problem -->
<h2>The Exigency</h2>
<p class="hook">What if your voice could not be heard?</p>
<p>
Communication is a basic human need. Yet every day, millions of people struggle to be heard—not because they have nothing to say, but because society cannot understand their language.
</p>
<p>
There are nearly <a class="link" href="https://www.un.org/en/observances/sign-languages-day#:~:text=According%20to%20the%20World%20Federation,than%20300%20different%20sign%20languages">70 million deaf and non-verbal individuals worldwide</a>. In emergencies, classrooms, hospitals, and public spaces, communication barriers can become dangerous and socially ostracizing. This gap can lead to confusion, isolation, and missed opportunities.
</p>
<p>
<strong>Silence should never mean invisibility.</strong> That is why <strong>Project Hearthstone</strong> exists.
</p>
</section>
<section class="content light">
<!-- Introduction - About Project Hearthstone -->
<h2>What is Project Hearthstone?</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<section class="content">
<!-- Mission & Vision -->
<h2>Our Mission & Vision</h2>
<div class="container">
<div class="box left">
<h3>Mission</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="box right">
<h3>Vision</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<button class="nav-btn right" aria-label="Scroll right">&gt;</button>
</div>
</section>

<section class="content light">
<!-- Our Products -->
<h2>Our Products</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<section class="content">
<!-- Progress Updates -->
Comment thread
LearnPRG-py marked this conversation as resolved.
<h2>Updates: What We're Working On</h2>
<!-- Update Cards -->
<script src="script.js"></script>

<section id="updates-section" class="updates-dark">
<h2 class="countdown-title" style="width: 100%; text-align: center;">Hackathon Updates!</h2>
<div class="updates-viewport">
<button class="nav-btn left" aria-label="Scroll left">&lt;</button>
<div class="updates-mask">
<div class="updates-track" id="updates-track" role="list"></div>
</div>
<button class="nav-btn right" aria-label="Scroll right">&gt;</button>
</div>
</section>
</section>
<!-- Footer Section -->
<footer class="content light">
<p>&copy; 2026 Project Hearthstone. All rights reserved.</p>
</footer>
</body>
</html>
218 changes: 211 additions & 7 deletions projecthearthstone.in/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,219 @@
/* Cooper Hewitt Font Family */
@import url(Common/styles.css);
/* Color Scheme Media Specifications */
:root {
--dark-blue: #131c4e;
--mid-blue: #5b86b6;
--light-blue: #bbdbff;

--smoky-black: #0e0e0e;
}

/* Cooper Hewitt Font Family
Link: https://fontsource.org/fonts/cooper-hewitt/cdn */
@font-face {
font-family: 'Cooper Hewitt';
font-style: normal;
font-display: swap;
font-weight: 400; /* Body text */
src:
url(https://cdn.jsdelivr.net/fontsource/fonts/cooper-hewitt@latest/latin-400-normal.woff2) format('woff2'),
url(https://cdn.jsdelivr.net/fontsource/fonts/cooper-hewitt@latest/latin-400-normal.woff) format('woff');
}

@font-face {
font-family: cooper-hewitt;
src: url("C:\Users\DELL\Downloads\cooper-hewitt.zip")
font-family: 'Cooper Hewitt';
font-style: normal;
font-display: swap;
font-weight: 600; /* Semi-Bold / Demi-Bold thickness */
src:
url(https://cdn.jsdelivr.net/fontsource/fonts/cooper-hewitt@latest/latin-600-normal.woff2) format('woff2'),
url(https://cdn.jsdelivr.net/fontsource/fonts/cooper-hewitt@latest/latin-600-normal.woff) format('woff');
}

body {
Copy link
Copy Markdown
Owner

@LearnPRG-py LearnPRG-py Mar 5, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cut the commenting to inflate lines added.

font-family: cooper-hewitt;
background-color: var(--bg-color);
margin: 0;
padding: 0;
font-family: 'Cooper Hewitt';
color: #f8f8ff;
}

/* Navigation Bar */
nav {
Comment thread
LearnPRG-py marked this conversation as resolved.
background-color: #1a1a1a;
position: fixed;
width: 100%;
top: 0;
left: 0;
z-index: 100;

display: flex;
align-items: center;
}

.logo {
font-size: 20px;
padding-left: 50px;
}

nav ul {
list-style-type: none;
margin: 0;
padding: 0;

display: flex;
align-items: center;
gap: 25px;
margin-left: auto;
margin-right: 50px;
}

nav ul li a {
display: block;
padding: 20px 0;
text-decoration: none;
transition: color 0.3s ease;
}

nav ul li a:hover {
color: var(--light-blue);
}

.btn {
padding: 8px 14px;
background-color: var(--mid-blue);
border-radius: 5px;
}

/* Hero Section */
.hero {
height: 100vh;
width: 100%;
/* Placeholder background until the Art & Design members of the Marketing Department create a graphic image for the Hero Section */
background: linear-gradient(to bottom right, var(--smoky-black), var(--dark-blue));
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}

.hero h1 {
font-size: 64px;
margin-bottom: 15px;
}

.hero p {
font-size: 20px;
color: var(--light-blue);
margin-bottom: 30px;
}

.hero-btn {
display: inline-block;
padding: 12px 28px;
background-color: var(--mid-blue);
border-radius: 10px;
cursor: pointer;
transition: transform 0.3s ease, background 0.3s ease;
}

.hero-btn:hover {
transform: scale(1.05);
background-color: var(--light-blue);
color: #000;
}

/* Sections */
.content {
padding: 50px 20%;
background-color: var(--smoky-black);
}

.content h2,
.content h3 {
color: var(--light-blue);
margin-bottom: 20px;
}

.content h3 {
font-size: 20px;
}

/* The Exigency Section */
.hook {
font-size: 1.25rem;
font-weight: 600;
}

/* Link styling */
.link {
color: var(--light-blue);
text-decoration: none;
font-weight: 600;
border-bottom: 1px solid transparent;
transition: color 0.25s ease, border-bottom 0.25s ease;
}

.link:hover {
color: var(--mid-blue);
border-bottom: 1px solid var(--mid-blue);
}

/* Strong emphasis text */
strong {
color: var(--light-blue);
font-weight: 700;
}

/* Our Mission & Vision Section */
.container {
display: flex;
gap: 20px;
}

.box {
flex: 1;
padding: 20px;
border: thick solid var(--light-blue);
border-radius: 10px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Levitation effect on hover */
.box:hover {
transform: translateY(-5px);
box-shadow: 0 0 20px var(--light-blue);
}

/* Responsive web design */
Comment thread
LearnPRG-py marked this conversation as resolved.
@media (max-width: 768px) {
.container {
flex-direction: column;
}
}

/* Footer */
footer p {
text-align: center;
}

/* Animations */
.fade-in {
opacity: 0; /* Invisible */
animation: fadeIn 1.2s forwards;
}

.fade-in-delay {
opacity: 0;
animation: fadeIn 1.2s forwards;
animation-delay: 0.5s; /* Appears after h1 */
}

@keyframes fadeIn {
to {
opacity: 1; /* Visible */
}
}

/* Progress Updates Section - Update Cards */
#updates-section,
.updates-dark {
width: 100vw;
Expand Down Expand Up @@ -198,4 +402,4 @@ body {
.left-shadow,
.right-shadow {
display: none !important;
}
}
Loading