Skip to content
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

Added Lineup Card #1375

Merged
merged 5 commits into from
Aug 10, 2024
Merged

Added Lineup Card #1375

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
cb1e365
Issue #1336
ShouryaMishra2006 Aug 8, 2024
3ca6f53
added lineup card #1299
ShouryaMishra2006 Aug 9, 2024
a08f588
issue #1299
ShouryaMishra2006 Aug 9, 2024
5da0141
updated issue #1299
ShouryaMishra2006 Aug 9, 2024
eb6df65
Delete Components/Text-Animations/Zooming-text-animation directory
Rakesh9100 Aug 10, 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
80 changes: 80 additions & 0 deletions Components/Cards/LineUp-Card/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Lineup Card</title>
</head>
<body>
<div class="lineup-card">
<div class="card-header">
<h2>LineUp Card</h2>
</div>

<div class="days-grid">
<div class="day-column">
<h3>Monday</h3>
<p class="time-slot">Morning: <span class="task">[Your Task]</span></p>
<p class="time-slot">Afternoon: <span class="task">[Your Task]</span></p>
<p class="time-slot">Evening: <span class="task">[Your Task]</span></p>
</div>
<div class="day-column">
<h3>Tuesday</h3>
<p class="time-slot">Morning: <span class="task">[Your Task]</span></p>
<p class="time-slot">Afternoon: <span class="task">[Your Task]</span></p>
<p class="time-slot">Evening: <span class="task">[Your Task]</span></p>
</div>
<div class="day-column">
<h3>Wednesday</h3>
<p class="time-slot">Morning: <span class="task">[Your Task]</span></p>
<p class="time-slot">Afternoon: <span class="task">[Your Task]</span></p>
<p class="time-slot">Evening: <span class="task">[Your Task]</span></p>
</div>
<div class="day-column">
<h3>Thursday</h3>
<p class="time-slot">Morning: <span class="task">[Your Task]</span></p>
<p class="time-slot">Afternoon: <span class="task">[Your Task]</span></p>
<p class="time-slot">Evening: <span class="task">[Your Task]</span></p>
</div>
<div class="day-column">
<h3>Friday</h3>
<p class="time-slot">Morning: <span class="task">[Your Task]</span></p>
<p class="time-slot">Afternoon: <span class="task">[Your Task]</span></p>
<p class="time-slot">Evening: <span class="task">[Your Task]</span></p>
</div>
<div class="day-column">
<h3>Saturday</h3>
<p class="time-slot">Morning: <span class="task">[Your Task]</span></p>
<p class="time-slot">Afternoon: <span class="task">[Your Task]</span></p>
<p class="time-slot">Evening: <span class="task">[Your Task]</span></p>
</div>
<div class="day-column">
<h3>Sunday</h3>
<p class="time-slot">Morning: <span class="task">[Your Task]</span></p>
<p class="time-slot">Afternoon: <span class="task">[Your Task]</span></p>
<p class="time-slot">Evening: <span class="task">[Your Task]</span></p>
</div>
</div>

<div class="card-footer">
<div class="goals-section">
<h4>Weekly Goals</h4>
<ul>
<li><input type="checkbox"> Goal 1</li>
<li><input type="checkbox"> Goal 2</li>
<li><input type="checkbox"> Goal 3</li>
</ul>
</div>
<div class="notes-section">
<h4>Notes</h4>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Veritatis architecto possimus neque explicabo consequuntur nobis similique, quia aperiam, laudantium illum inventore sapiente alias et? Aliquid porro nisi iste dolores ullam?</p>
</div>
<div class="inspiration-section">
<p>“Productivity is never an accident. It is always the result of a commitment to excellence.”</p>
</div>
</div>
</div>

</body>
</html>
110 changes: 110 additions & 0 deletions Components/Cards/LineUp-Card/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,110 @@
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: rgb(214, 30, 214);
font-family: 'Arial', sans-serif;
}

.lineup-card {
width: 700px;
height:max-content;
padding: 20px;
background-color: #f9f9f9;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
color: #333;
}
.card-header{
margin-top: 150px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.card-header h2 {
font-size: 1.5em;
color: #004085;
margin-bottom: 5px;
}

.card-header p {
font-size: 0.9em;
color: #777;
margin-bottom: 20px;
}

.days-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
width:700px;
}

.day-column {
background-color: #e9ecef;
border-radius: 8px;
padding: 10px;
text-align: center;
}

.day-column h3 {
font-size: 1.2em;
margin-bottom: 10px;
color: #004085;
}

.time-slot {
font-size: 0.9em;
margin-bottom: 5px;
color: #495057;
}

.task {
font-weight: bold;
color: #007bff;
}

.card-footer {
margin-top: 20px;
}

.goals-section,
.notes-section,
.inspiration-section {
margin-bottom: 15px;
}

.goals-section h4,
.notes-section h4 {
font-size: 1em;
color: #004085;
margin-bottom: 10px;
}

.goals-section ul {
list-style-type: none;
padding: 0;
}

.goals-section ul li {
margin-bottom: 5px;
}

.notes-section p {
font-size: 0.9em;
color: #495057;
padding: 5px;
background-color: #e9ecef;
border-radius: 5px;
}

.inspiration-section p {
font-size: 0.8em;
color: #6c757d;
font-style: italic;
text-align: center;
}