Skip to content

Added Event page and done migration of styles #97

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

Merged
sanjay-kv merged 3 commits into from
Aug 5, 2024
Merged

Added Event page and done migration of styles #97

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6ab995b
added event page and some minor fixes
Asymtode712 Aug 5, 2024
fc3b3ce
resolved all conflicts and migrated styles
Asymtode712 Aug 5, 2024
65c117f
fixed logo in dark mode
Asymtode712 Aug 5, 2024
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
204 changes: 204 additions & 0 deletions events.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,204 @@
.timeline {
position: relative;
max-width: 1200px;
margin: 0 auto;
padding: 40px 0;
}

.timeline::after {
content: '';
position: absolute;
width: 6px;
background-color: #333;
top: 0;
bottom: 0;
left: 50%;
margin-left: -3px;
}

.timeline-item {
padding: 10px 40px;
position: relative;
width: calc(50% - 40px);
box-sizing: border-box;
}

.timeline-item::after {
content: '';
position: absolute;
width: 25px;
height: 25px;
background-color: #333;
border: 4px solid #555;
border-radius: 50%;
z-index: 1;
top: 20px;
}

.timeline-item:nth-child(odd) {
left: 0;
width: calc(50%);
}

.timeline-item:nth-child(even) {
left: 50%;
width: calc(50%);
}

.timeline-item:nth-child(odd)::after {
right: -17px;
}

.timeline-item:nth-child(even)::after {
left: -17px;
}

.timeline-content {
padding: 20px 30px;
background-color: #fff;
position: relative;
border-radius: 6px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.timeline-item:nth-child(odd) .timeline-content::after {
content: '';
position: absolute;
top: 15px;
right: -15px;
width: 0;
height: 0;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-left: 15px solid #fff;
}

.timeline-item:nth-child(even) .timeline-content::after {
content: '';
position: absolute;
top: 15px;
left: -15px;
width: 0;
height: 0;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-right: 15px solid #fff;
}

.event-title {
color: #333;
font-size: 24px;
margin-bottom: 10px;
}

.event-date {
font-style: italic;
color: #888;
margin-bottom: 10px;
}

.event-description {
margin-bottom: 15px;
}

.event-link {
display: inline-block;
background-color: #333;
color: #fff;
padding: 8px 15px;
border-radius: 4px;
text-decoration: none;
transition: background-color 0.3s;
}

.event-link:hover {
background-color: #555;
}

/* Dark mode styles */
body.dark-mode .timeline::after{
background-color: #f0f0f0;
}

body.dark-mode .timeline-item::after{
background-color: #ccc;
border: 4px solid #999;
}

body.dark-mode .timeline-content {
background-color: #444;
color: #f0f0f0;
}

body.dark-mode .timeline-item:nth-child(odd) .timeline-content::after {
border-left-color: #444;
}

body.dark-mode .timeline-item:nth-child(even) .timeline-content::after {
border-right-color: #444;
}

body.dark-mode .event-title {
color: #f0f0f0;
}

body.dark-mode .event-date {
color: #ccc;
}

body.dark-mode .event-link {
background-color: #f0f0f0;
color: #333;
}

body.dark-mode .event-link:hover {
background-color: #ccc;
}

body.dark-mode .navbar-text{
color: #fff;
}


/* Responsive design */
@media screen and (max-width: 768px) {
.timeline::after {
left: 31px;
}

.timeline-item {
width: 100%;
padding-left: 70px;
padding-right: 25px;
}

.timeline-item::after {
left: 15px;
}

.timeline-item:nth-child(odd) {
width: 100%;
}

.timeline-item:nth-child(even) {
left: 0;
width: 100%;
}

.timeline-item:nth-child(odd)::after,
.timeline-item:nth-child(even)::after {
left: 15px;
}

.timeline-item:nth-child(odd) .timeline-content::after,
.timeline-item:nth-child(even) .timeline-content::after {
left: -15px;
border-right: 15px solid #fff;
border-left: none;
}

body.dark-mode .timeline-item:nth-child(odd) .timeline-content::after,
body.dark-mode .timeline-item:nth-child(even) .timeline-content::after {
border-right-color: #444;
}
}
118 changes: 118 additions & 0 deletions events.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,118 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Events | Recode Hive</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="events.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<nav class="navbar">
<a href="index.html" style="text-decoration: none; color: #333;">
<div class="navbar-left">
<img src="assets/recode-hive.png" alt="Recode Hive Icon" class="navbar-icon">
<span class="navbar-text">Recode Hive</span>
</div>
</a>
<div class="navbar-right">
<a href="#" class="navbar-link">Events</a>
<a href="githubbadge.html" class="navbar-link">Github-Badge</a>
<a href="link-to-blog" class="navbar-link">Blog</a>
<div class="toggle-switch">
<input type="checkbox" id="theme-toggle">
<label for="theme-toggle">
<div class="switch-button">
<span class="material-icons sun-icon">wb_sunny</span>
<span class="material-icons moon-icon">brightness_2</span>
</div>
</label>
</div>
</div>
</nav>

<div class="container">
<h1 class="main-heading">Events Timeline</h1>

<div class="timeline">
<!-- Event 1 -->
<div class="timeline-item">
<div class="timeline-content">
<h2 class="event-title">Event Title 1</h2>
<p class="event-date">Date: TBA</p>
<p class="event-description">Description of the event goes here.</p>
<a href="#" class="event-link">Learn More</a>
</div>
</div>

<!-- Event 2 -->
<div class="timeline-item">
<div class="timeline-content">
<h2 class="event-title">Event Title 2</h2>
<p class="event-date">Date: TBA</p>
<p class="event-description">Description of the event goes here.</p>
<a href="#" class="event-link">Learn More</a>
</div>
</div>

<!-- Event 3 -->
<div class="timeline-item">
<div class="timeline-content">
<h2 class="event-title">Event Title 3</h2>
<p class="event-date">Date: TBA</p>
<p class="event-description">Description of the event goes here.</p>
<a href="#" class="event-link">Learn More</a>
</div>
</div>

<!-- Add more event containers as needed -->
</div>
</div>

<footer id="Contact" class="footer-2">
<div class="footer-container">
<div class="footer-content">
<div class="footer-info">
<img src="assets/recode.png" alt="Recode-Hive logo" class="footer-logo">
</div>

<div class="footer-links">
<div class="footer-section">
<h6 class="footer-heading">ABOUT RECODE-HIVE</h6>
<div>
<a href="#" class="footer-link">Contact Us</a>
<a href="https://github.com/recodehive/awesome-github-profiles/blob/main/CODE_OF_CONDUCT.md" class="footer-link">Code of Conduct</a>
</div>
</div>
<div class="footer-section">
<h6 class="footer-heading">GET INVOLVED</h6>
<div>
<a href="https://github.com/recodehive/awesome-github-profiles/issues/new?assignees=&labels=%E2%9E%95+profile&projects=&template=add_profile.md&title=Add+Profile%3A+" class="footer-link">Add Your Profile</a>
<a href="https://github.com/recodehive/Support/issues/new?assignees=&labels=invite+me+to+the+community&projects=&template=invitation.yml&title=Please+invite+me+to+the+Recode-Hive+GitHub+Community+Organization" class="footer-link">Join the Organization</a>
</div>
</div>
</div>

<div class="footer-description">
<h5>
We focus on quality content for the right people at the right time⏱️. What we are trying to do is help you to brand personal skills through GitHub readme.md, So we listing the best profiles & opportunity to list your profile to the world 🌎.
</h5>
<a href="https://www.linkedin.com/company/recodehive/" class="footer-button">Explore</a>
</div>
</div>
</div>

<div class="footer-bottom">
<div class="footer-container">
<p class="footer-copyright">
&copy; 2024 Recode-Hive. Made with 🖤️ by the community. All rights reserved.
</p>
</div>
</div>
</footer>

<script src="script.js"></script>
<script src="dark-mode.js"></script>
</body>
</html>
Loading