diff --git a/projecthearthstone.in/index.html b/projecthearthstone.in/index.html index 6bc3947..25f16f4 100644 --- a/projecthearthstone.in/index.html +++ b/projecthearthstone.in/index.html @@ -3,22 +3,92 @@ - Project Hearthstone - Home Page + Home - Project Hearthstone - - -
-

Hackathon Updates!

-
- -
-
+
+ + + +
+
+

Project Hearthstone

+

Because Communication Is a Right, Not a Privilege.

+ Learn More +
+
+ +
+
+
+
+ +

The Exigency

+

What if your voice could not be heard?

+

+ 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. +

+

+ There are nearly 70 million deaf and non-verbal individuals worldwide. 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. +

+

+ Silence should never mean invisibility. That is why Project Hearthstone exists. +

+
+
+ +

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

+ + + +
+

Hackathon Updates!

+
+ +
+
+
+ +
+
+
+ + diff --git a/projecthearthstone.in/style.css b/projecthearthstone.in/style.css index 65843ce..cec4a9d 100644 --- a/projecthearthstone.in/style.css +++ b/projecthearthstone.in/style.css @@ -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 { - font-family: cooper-hewitt; - background-color: var(--bg-color); + margin: 0; + padding: 0; + font-family: 'Cooper Hewitt'; + color: #f8f8ff; +} + +/* Navigation Bar */ +nav { + 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 */ +@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; @@ -198,4 +402,4 @@ body { .left-shadow, .right-shadow { display: none !important; -} \ No newline at end of file +}