HEADER ADS 728X90

How To Make Green University Class Rutine - Using HTML and CSS || BY CodePrime

how to make university class rutine using html and css,
daily classroom routines using html css by codeprime,
classroom routines examples,
what are classroom routines,
what is the impact of these classroom routines to students learning,
list of classroom routines,
classroom routines and procedures pdf,
reflection about classroom routine,
importance of classroom routines and procedures,
create a time table using html and css,
write a program using html to design your class timetable,
write a program using html to design your class timetable brainly,
write the html code to create the following table,
write a program and create your class timetable using  tag in dreamweaver,
weekly schedule html code,
write a html code to display theory time table of fybba(ca use internal css to format the table),
html code for exam time table,,codeprime, coding tutorial, how to learn coding easy way to learn coding

Hi dear welcome to "CodePrime" Blog . In this post we are going to learn How To Make University Class Rutine. First Creat A index.html file Copy This HTML CODE and pest it one your code editor. 2ndly creat style.css file Then Copy The CSS CODE and pest it then open the index.html file with your browser.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GUB - Class Rutine (Spring Semister) || BY CodePrime</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

<div class="container">

    <div class="class-heading">
        <img src="https://blogger.googleusercontent.com/img/a/AVvXsEh44XJChWZ3-Kl7ezHCjomn0wfImZNMYAJPrpFYTZFwzIBFvUYGa5I3hGc8XCqqJti4R08nge1SF26hpBL4z7RPBW1jDF6gEYBET84ZYN7oP3jvfvdzFHagU3I8APCWaoXPj-tGeqM4YFSNqvu_xvuo_A7egdQgPB7-X_UE30PKqr7xyLMehw26tTaK0A">
        <h1>Green University Of Bangladesh</h1>
        <h2>Class Rutine Of CSE</h2>
    </div>

       <!-- Monday - Wednesday -->

        <div class="day" style="border-radius: 5px 5px 0 0;">Monday - Wednesday</div>
        <div class="sub-container">
            <li class="list-head" id="List-1" style="height: auto;">Course ID</li>
            <li class="list-head" id="List-2" style="height: auto;">Course Name</li>
            <li class="list-head" id="List-3" style="height: auto;">Section</li>
            <li class="list-head" id="List-4" style="height: auto;">Time</li>
            <li class="list-head" id="List-5" style="height: auto;">Room No</li>
        </div>

        <div class="sub-container">
            <li id="List-1">MAT 103-CSE(181)</li>
            <li id="List-2">Ordinary and Partial Differential <br> Equations and Coordinate G..</li>
            <li id="List-3">213-DA</li>
            <li id="List-4">10:00 AM - 11:30 AM</li>
            <li id="List-5">B-412</li>
        </div>

        <div class="sub-container">
            <li id="List-1">PHY 103-CSE(181)</li>
            <li id="List-2">Physics II</li>
            <li id="List-3">213-DA</li>
            <li id="List-4">1:30 PM - 3:00 PM</li>
            <li id="List-5">A-412</li>
        </div>

        <div class="sub-container">
            <li id="List-1">CSE 103-CSE(181)</li>
            <li id="List-2">Structured Programming</li>
            <li id="List-3">213-DC</li>
            <li id="List-4">3:00 PM - 4:30 PM</li>
            <li id="List-5">B-411</li>
        </div>

        <div class="sub-container">
            <li id="List-1">EAP 101-CSE(181)</li>
            <li id="List-2">English for Academic Purpose I</li>
            <li id="List-3">213-DC</li>
            <li id="List-4">4:30 PM - 6:00 PM</li>
            <li id="List-5">B-301 Virtual</li>
        </div>

           <!-- Tue-Tue -->

        <div class="day">Tuesday - Tuesday</div>
        <div class="sub-container">
            <li class="list-head" id="List-1" style="height: auto;">Course ID</li>
            <li class="list-head" id="List-2" style="height: auto;">Course Name</li>
            <li class="list-head"id="List-3" style="height: auto;">Section</li>
            <li class="list-head" id="List-4" style="height: auto;">Time</li>
            <li class="list-head" id="List-5" style="height: auto;">Room No</li>
        </div>

        <div class="sub-container">
            <li id="List-1">PHY 104-CSE(201)</li>
            <li id="List-2">Physics Lab</li>
            <li id="List-3">213-DH</li>
            <li id="List-4">8:30 AM - 10:00 AM<br>10:00 AM - 11:30 AM</li>
            <li id="List-5">B-806 CSE LAB</li>
        </div>

        <div class="sub-container">
            <li id="List-1" style="border-radius: 0 0 0 5px;">CSE 104-CSE(181)</li>
            <li id="List-2">Structured Programming Lab</li>
            <li id="List-3">213-DC</li>
            <li id="List-4">11:30 AM - 1:00 PM<br>1:30 PM - 3:00 PM</li>
            <li id="List-5" style="border-radius: 0 0 5px 0">B-801 CSE LAB</li>
        </div>

       </div>

</div>
   
</body>
</html>

CSS

body{
        font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
        display: flex;
        width: 100%;
        justify-content: center;
        min-height: 100vh;
        align-items: center;
    }
    .container{
        padding: 40px;
        box-shadow: 0 0 20px #61ab30;
        border-radius: 5px;
        margin: 10px;
    }
    .container .class-heading{
        padding: 10px 20px;
        text-align: center;
        justify-content: center;
        align-items: center;
    }
    h1{
        font-size: 2rem;
        line-height: 1rem;
        color: #61ab30;
    }
    h2{
        font-size: 1.5rem;
        letter-spacing: 2px;
        color: #61ab30;
    }
    .container .day {
        padding: 7px 10px;
        border: 1px solid #ccc;
        text-align: center;
        text-transform: uppercase;
        font-weight: bold;
        letter-spacing: 0.5px;
        font-size: 1.5rem;
        background: #61ab30;
        color: #fff;
    }
    .container .sub-container{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .container .sub-container li {
        padding: 7px 10px;
        border: 1px solid #ccc;
        list-style: none;
        text-align: center;
        align-items: center;
        justify-content: center;
        display: flex;
    }
    .container .sub-container li.list-head{
        background: #61ab30;
        color: #fff;
        font-weight: bold;

    }

    #List-1{
        width: 100px;
        height: 40px;
    }
    #List-2{
        width:250px ;
        height: 40px;
    }
    #List-3{
        width:60px ;
        height: 40px;
    }
    #List-4{
        width: 200px;
        height: 40px;
    }
    #List-5{
        width:100px ;
        height: 40px;
    }

Youtube Tutorial

FLOW US ON SOCIAL MEDIA

Post a Comment

0 Comments

Join Telegram