From b4f8e2921e64e7d995caa980191bcb4ee03c5964 Mon Sep 17 00:00:00 2001 From: Anika Bindal Date: Wed, 25 Feb 2026 20:39:05 +0530 Subject: [PATCH 1/3] Added navbar HTML + CSS I have a query and I am not quite sure how to implement the code for this - I have observed that, when scrolling, in the OakMUN and Codefest websites, the navbar swiftly changes shape into an oval. What is the code behind that? Plus, I have started grassroots work on the hero section. --- projecthearthstone.in/index.html | 36 +++++++++++++++++++++++++++++++- projecthearthstone.in/style.css | 34 +++++++++++++++++++++++++++--- 2 files changed, 66 insertions(+), 4 deletions(-) diff --git a/projecthearthstone.in/index.html b/projecthearthstone.in/index.html index 46ff5ab..60b58ff 100644 --- a/projecthearthstone.in/index.html +++ b/projecthearthstone.in/index.html @@ -7,6 +7,40 @@ - +
+ + + +
+
+

Project Hearthstone

+

COMMUNICATION IS A RIGHT, NOT A PRIVILEGE.

+
+
+
+
+ +
+
+ +
+
+ +
+
+ +
+ diff --git a/projecthearthstone.in/style.css b/projecthearthstone.in/style.css index 5d941a9..2e7f67e 100644 --- a/projecthearthstone.in/style.css +++ b/projecthearthstone.in/style.css @@ -1,9 +1,37 @@ /* Cooper Hewitt Font Family */ @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: 400; + 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'); /* Link: https://fontsource.org/fonts/cooper-hewitt/cdn */ } -body { +* { /* Universal Selector */ font-family: cooper-hewitt; } + +/* Navigation Bar */ +ul { + position: fixed; /* Keeps the navbar at the top of the screen when scrolling */ + margin: 0; /* Resets default browser margins */ + padding: 0; /* Resets default browser paddings */ + overflow: hidden; /* Prevents content from spilling outside the box */ + background-color: #000080; /* Navy */ + width: 100%; + + display: flex; /* Allows for flexible & responsive arrangement of container items */ + justify-content: center; + align-items: center; +} + +ul li { + list-style-type: none; +} + +ul li a { + display: block; /* The link becomes a rectangle box & looks like a button in the navbar */ + color: #f8f8ff; /* GhostWhite */ + padding: 16px 16px; /* padding: vertical (top & bottom) horizontal (left & right) */ + text-decoration: none; +} From 9947f1e9dd6e1e0fc7a040370373315228c1c780 Mon Sep 17 00:00:00 2001 From: Anika Bindal Date: Wed, 4 Mar 2026 20:49:07 +0530 Subject: [PATCH 2/3] Homepage HTML & CSS Fully coded navbar & hero section with subtle animations + full homepage blueprint with sample text (P.S. I have added a ton of HTML & CSS comments for my understanding as I am revisiting quite a few of these concepts after a really long time. Please ignore those!) --- projecthearthstone.in/index.html | 77 ++++++++---- projecthearthstone.in/style.css | 198 ++++++++++++++++++++++++++++--- 2 files changed, 235 insertions(+), 40 deletions(-) diff --git a/projecthearthstone.in/index.html b/projecthearthstone.in/index.html index 60b58ff..ddf6cae 100644 --- a/projecthearthstone.in/index.html +++ b/projecthearthstone.in/index.html @@ -3,44 +3,79 @@ - Project Hearthstone - Home Page + Home - Project Hearthstone + +
- -
-
-

Project Hearthstone

-

COMMUNICATION IS A RIGHT, NOT A PRIVILEGE.

+ +
+
+

Project Hearthstone

+

Because Communication Is a Right, Not a Privilege.

+ Learn More
-
+
+ +
+
-
+
+

The Exigency

+

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.

+
-
- +
+ +

What is Project Hearthstone?

+

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.

-
+
+

Our Mission & Vision

+
+
+

Mission

+

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.

+
+
+

Vision

+

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.

+
+
+
+
+ +

Our Products

+

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.

-
- +
+ +

Updates: What We're Working On

+
-