Skip to content

Commit 1befcf0

Browse files
NekshaDeSilvaNekshaDeSilva
committed
updated
1 parent 0f3e393 commit 1befcf0

File tree

2 files changed

+278
-3
lines changed

2 files changed

+278
-3
lines changed

‎index.html‎

Lines changed: 81 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -41,10 +41,10 @@
4141

4242
<ul class="nav-menu">
4343
<li><a href="#home" class="nav-link active">Home</a></li>
44-
<li><a href="#about" class="nav-link">About</a></li>
45-
<li><a href="#projects" class="nav-link">Projects</a></li>
46-
<li><a href="#community" class="nav-link">Community</a></li>
44+
<li><a href="/about.html" class="nav-link" >About</a></li>
45+
4746
<li><a href="#hackclub-daydream" class="nav-link hackclub-highlight">🎮 DayDream SL</a></li>
47+
<li><a href="#news" class="nav-link">News</a></li>
4848
<li><a href="#events" class="nav-link">Events</a></li>
4949
<li><a href="join.html" class="nav-link">Join</a></li>
5050
</ul>
@@ -519,6 +519,84 @@ <h3 class="feature-title">Official Contact</h3>
519519
</div>
520520
</section>
521521

522+
<!-- News & Updates Section -->
523+
<section id="news" class="news-section">
524+
<div class="section-header">
525+
<h2 class="section-title">Latest <span class="text-gradient">Updates</span></h2>
526+
<p class="section-subtitle">
527+
Stay up to date with OpenRockets announcements, project updates, and community highlights.
528+
</p>
529+
</div>
530+
531+
<div class="news-container">
532+
<div class="news-content">
533+
<div class="twitter-timeline-container">
534+
<h3 class="timeline-title">
535+
<i class="fab fa-twitter"></i>
536+
Recent Announcements
537+
</h3>
538+
<div class="twitter-embed">
539+
<a class="twitter-timeline"
540+
data-height="400"
541+
data-theme="dark"
542+
data-chrome="noheader nofooter noborders transparent"
543+
href="https://twitter.com/OpenRockets?ref_src=twsrc%5Etfw">
544+
Tweets by OpenRockets
545+
</a>
546+
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
547+
</div>
548+
</div>
549+
550+
<div class="quick-links">
551+
<h3 class="quick-links-title">
552+
<i class="fas fa-bolt"></i>
553+
Quick Updates
554+
</h3>
555+
<div class="update-items">
556+
<div class="update-item">
557+
<div class="update-icon">
558+
<i class="fas fa-gamepad"></i>
559+
</div>
560+
<div class="update-content">
561+
<h4>HackClub DayDream SL</h4>
562+
<p>Game jam happening September 27th - Join the WhatsApp channel for updates!</p>
563+
<a href="https://whatsapp.com/channel/0029VbBBU1p3mFY2WbU2xL0v" target="_blank" class="update-link">
564+
<i class="fab fa-whatsapp"></i> Join Channel
565+
</a>
566+
</div>
567+
</div>
568+
569+
<div class="update-item">
570+
<div class="update-icon">
571+
<i class="fab fa-github"></i>
572+
</div>
573+
<div class="update-content">
574+
<h4>OpenSocial Platform</h4>
575+
<p>Active development continues - contribute and win free domains!</p>
576+
<a href="https://github.com/OpenRockets/opensocial" target="_blank" class="update-link">
577+
<i class="fas fa-code"></i> Contribute
578+
</a>
579+
</div>
580+
</div>
581+
582+
<div class="update-item">
583+
<div class="update-icon">
584+
<i class="fab fa-discord"></i>
585+
</div>
586+
<div class="update-content">
587+
<h4>Discord Community</h4>
588+
<p>Join our active community for daily coding discussions and collaboration.</p>
589+
<a href="https://bit.ly/openrockets-discord" target="_blank" class="update-link">
590+
<i class="fab fa-discord"></i> Join Discord
591+
</a>
592+
</div>
593+
</div>
594+
</div>
595+
</div>
596+
</div>
597+
</div>
598+
</section>
599+
522600
<!-- CTA Section -->
523601
<section class="cta">
524602
<div class="cta-content">

‎styles/hackclub-style.css‎

Lines changed: 197 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1701,3 +1701,200 @@ body.nav-open {
17011701
color: #ff8c37;
17021702
font-weight: 600;
17031703
}
1704+
1705+
/* News & Updates Section */
1706+
.news-section {
1707+
background: linear-gradient(135deg, #1a1a1a 0%, #252429 50%, #1f2d3d 100%);
1708+
padding: 4rem 2rem;
1709+
margin: 2rem 0;
1710+
border-radius: 24px;
1711+
max-width: 1200px;
1712+
margin: 2rem auto;
1713+
border: 1px solid rgba(255, 255, 255, 0.1);
1714+
}
1715+
1716+
.news-container {
1717+
max-width: 1000px;
1718+
margin: 0 auto;
1719+
}
1720+
1721+
.news-content {
1722+
display: grid;
1723+
grid-template-columns: 1fr 1fr;
1724+
gap: 3rem;
1725+
align-items: start;
1726+
}
1727+
1728+
.twitter-timeline-container {
1729+
background: rgba(255, 255, 255, 0.03);
1730+
border-radius: 16px;
1731+
padding: 2rem;
1732+
border: 1px solid rgba(255, 255, 255, 0.1);
1733+
backdrop-filter: blur(5px);
1734+
}
1735+
1736+
.timeline-title {
1737+
color: #1DA1F2;
1738+
font-size: 1.5rem;
1739+
font-weight: 700;
1740+
margin-bottom: 1.5rem;
1741+
display: flex;
1742+
align-items: center;
1743+
gap: 0.75rem;
1744+
}
1745+
1746+
.timeline-title i {
1747+
font-size: 1.3rem;
1748+
}
1749+
1750+
.twitter-embed {
1751+
border-radius: 12px;
1752+
overflow: hidden;
1753+
background: #000;
1754+
}
1755+
1756+
.quick-links {
1757+
background: rgba(255, 255, 255, 0.03);
1758+
border-radius: 16px;
1759+
padding: 2rem;
1760+
border: 1px solid rgba(255, 255, 255, 0.1);
1761+
backdrop-filter: blur(5px);
1762+
}
1763+
1764+
.quick-links-title {
1765+
color: #ff8c37;
1766+
font-size: 1.5rem;
1767+
font-weight: 700;
1768+
margin-bottom: 1.5rem;
1769+
display: flex;
1770+
align-items: center;
1771+
gap: 0.75rem;
1772+
}
1773+
1774+
.quick-links-title i {
1775+
font-size: 1.3rem;
1776+
}
1777+
1778+
.update-items {
1779+
display: flex;
1780+
flex-direction: column;
1781+
gap: 1.5rem;
1782+
}
1783+
1784+
.update-item {
1785+
display: flex;
1786+
gap: 1rem;
1787+
background: rgba(255, 255, 255, 0.05);
1788+
border-radius: 12px;
1789+
padding: 1.5rem;
1790+
border: 1px solid rgba(255, 255, 255, 0.1);
1791+
transition: all 0.3s ease;
1792+
}
1793+
1794+
.update-item:hover {
1795+
background: rgba(255, 255, 255, 0.08);
1796+
transform: translateY(-2px);
1797+
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
1798+
}
1799+
1800+
.update-icon {
1801+
background: linear-gradient(135deg, var(--hc-red), var(--hc-orange));
1802+
width: 50px;
1803+
height: 50px;
1804+
border-radius: 12px;
1805+
display: flex;
1806+
align-items: center;
1807+
justify-content: center;
1808+
color: white;
1809+
font-size: 1.2rem;
1810+
flex-shrink: 0;
1811+
}
1812+
1813+
.update-content h4 {
1814+
color: #f9fafc;
1815+
font-size: 1.1rem;
1816+
font-weight: 600;
1817+
margin-bottom: 0.5rem;
1818+
}
1819+
1820+
.update-content p {
1821+
color: #8492a6;
1822+
font-size: 0.9rem;
1823+
line-height: 1.5;
1824+
margin-bottom: 1rem;
1825+
}
1826+
1827+
.update-link {
1828+
display: inline-flex;
1829+
align-items: center;
1830+
gap: 0.5rem;
1831+
color: var(--hc-red);
1832+
text-decoration: none;
1833+
font-weight: 600;
1834+
font-size: 0.9rem;
1835+
transition: all 0.3s ease;
1836+
}
1837+
1838+
.update-link:hover {
1839+
color: var(--hc-orange);
1840+
transform: translateX(5px);
1841+
}
1842+
1843+
.update-link i {
1844+
font-size: 0.8rem;
1845+
}
1846+
1847+
/* Responsive Design for News Section */
1848+
@media (max-width: 768px) {
1849+
.news-section {
1850+
padding: 2rem 1rem;
1851+
margin: 1rem;
1852+
border-radius: 16px;
1853+
}
1854+
1855+
.news-content {
1856+
grid-template-columns: 1fr;
1857+
gap: 2rem;
1858+
}
1859+
1860+
.twitter-timeline-container,
1861+
.quick-links {
1862+
padding: 1.5rem;
1863+
}
1864+
1865+
.timeline-title,
1866+
.quick-links-title {
1867+
font-size: 1.3rem;
1868+
}
1869+
1870+
.update-item {
1871+
padding: 1rem;
1872+
}
1873+
1874+
.update-icon {
1875+
width: 40px;
1876+
height: 40px;
1877+
font-size: 1rem;
1878+
}
1879+
}
1880+
1881+
@media (max-width: 480px) {
1882+
.news-section {
1883+
padding: 1.5rem 0.75rem;
1884+
}
1885+
1886+
.twitter-timeline-container,
1887+
.quick-links {
1888+
padding: 1rem;
1889+
}
1890+
1891+
.update-item {
1892+
flex-direction: column;
1893+
text-align: center;
1894+
gap: 1rem;
1895+
}
1896+
1897+
.update-icon {
1898+
align-self: center;
1899+
}
1900+
}

0 commit comments

Comments
 (0)