Skip to content

Commit

Permalink
Added Lineup Card (#1375)
Browse files Browse the repository at this point in the history
  • Loading branch information
ShouryaMishra2006 authored Aug 10, 2024
1 parent 3f72898 commit 797afd9
Show file tree
Hide file tree
Showing 2 changed files with 190 additions and 0 deletions.
80 changes: 80 additions & 0 deletions Components/Cards/LineUp-Card/index.html
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
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;
}

0 comments on commit 797afd9

Please sign in to comment.