TIMETABLE MAKING:-
SOURCE CODE:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Plan</title>
<style>
.heading {
text-align: center;
}
.box {
height: auto;
width: 96vw;
background-color: cornflowerblue;
display: flex;
}
.schedule {
background-color: rgb(255, 68, 0);
height:auto;
width: 25vw;
}
.name {
display: flex;
border-bottom: 2px solid white;
}
.time {
background-color: rgb(64, 0, 255);
height: 10vh;
width: 48vw;
border-right: 2px solid white;
display: flex;
justify-content: center;
align-items: center;
color: white;
}
.task {
background-color: rgb(64, 0, 255);
height: 10vh;
width: 48vw;
display: flex;
justify-content: center;
align-items: center;
color: white;
}
.work {
background-color: rgb(255, 0, 0);
height: auto;
width: 71vw;
}
.t1 {
display: flex;
justify-content: center;
align-items: center;
height: 6vh;
width: auto;
border-bottom: 2px solid white;
border-right: 2px solid white;
color: white;
}
.t2 {
display: flex;
justify-content: center;
align-items: center;
height: 6vh;
width: auto;
border-bottom: 2px solid white;
border-right: 2px solid white;
color: white;
}
.t3 {
display: flex;
justify-content: center;
align-items: center;
height: 6vh;
width: auto;
border-bottom: 2px solid white;
border-right: 2px solid white;
color: white;
}
.t4 {
display: flex;
justify-content: center;
align-items: center;
height: 6vh;
width: auto;
border-bottom: 2px solid white;
border-right:2px solid white;
color: white;
}
.t5 {
display: flex;
justify-content: center;
align-items: center;
height: 6vh;
width: auto;
border-bottom: 2px solid white;
color: white;
border-right:2px solid white;
}
.t6 {
display: flex;
justify-content: center;
align-items: center;
height: 6vh;
width: auto;
border-bottom: 2px solid white;
border-right:2px solid white;
color: white;
}
.t7 {
display: flex;
justify-content: center;
align-items: center;
height: 6vh;
width: auto;
border-bottom: 2px solid white;
border-right:2px solid white;
color: white;
}
.t8 {
display: flex;
justify-content: center;
align-items: center;
height: 6vh;
width: auto;
border-bottom: 2px solid white;
border-right:2px solid white;
color: white;
}
.t9 {
display: flex;
justify-content: center;
align-items: center;
height: 6vh;
width: auto;
border-bottom: 2px solid white;
border-right:2px solid white;
color: white;
}
.w1{
display: flex;
justify-content: center;
align-items: center;
height: 6vh;
width: auto;
border-bottom: 2px solid white;
color: white;
}
.w2{
display: flex;
justify-content: center;
align-items: center;
height: 6vh;
width: auto;
border-bottom: 2px solid white;
color: white;
}
.w3{
display: flex;
justify-content: center;
align-items: center;
height: 6vh;
width: auto;
border-bottom: 2px solid white;
color: white;
}
.w4{
display: flex;
justify-content: center;
align-items: center;
height: 6vh;
width: auto;
border-bottom: 2px solid white;
color: white;
}
.w5{
display: flex;
justify-content:center;
align-items: center;
height: 6vh;
width: auto;
border-bottom: 2px solid white;
color: white;
}
.w6{
display: flex;
justify-content: center;
align-items: center;
height: 6vh;
width: auto;
border-bottom: 2px solid white;
color: white;
}
.w7{
display: flex;
justify-content: center;
align-items: center;
height: 6vh;
width: auto;
border-bottom: 2px solid white;
color: white;
}
.w8{
display: flex;
justify-content: center;
align-items: center;
height: 6vh;
width: auto;
border-bottom: 2px solid white;
color: white;
}
.w9{
display: flex;
justify-content: center;
align-items: center;
height: 6vh;
width: auto;
border-bottom: 2px solid white;
color: white;
}
.w10{
display: flex;
justify-content: center;
align-items: center;
height: 6vh;
width: auto;
border-bottom: 2px solid white;
color: white;
}
</style>
</head>
<body>
<div class="heading">
<h1>Planing</h1>
</div>
<div class="name">
<div class="time">Time</div>
<div class="task">Task</div>
</div>
<div class="box">
<div class="schedule">
<div class="t1">5:00 am</div>
<div class="t2">5 t0 6 am</div>
<div class="t3">6 to 9 am</div>
<div class="t4">9 am to 5 pm</div>
<div class="t5">5 to 6 pm</div>
<div class="t6">6 to 6:30 pm</div>
<div class="t7">6:30 to 8 pm</div>
<div class="t8">8 to 9 pm</div>
<div class="t9">9 to 9 :30 pm</div>
<div class="t9">10 pm to 5 am</div>
</div>
<div class="work">
<div class="w1"> Wake up</div>
<div class="w2">Brush,fresh,walking,exercise & plaining a day</div>
<div class="w3">coding session-1</div>
<div class="w4">In collage </div>
<div class="w5">Free Time(eat,spend time with nature)</div>
<div class="w6">Collage work</div>
<div class="w7">codding session-2</div>
<div class="w8">dinner</div>
<div class="w9">walking ,book reading,digital detox,preparing for sleep</div>
<div class="w10">sleep</div>
</div>
</div>
</body>
</html>
Comments
Post a Comment