School Bell Schedule HTML and CSS Code

Answered using GPT-4o mini by AI Answer Generator

Question:

Generate code my my school bell schedule from Monday to Friday in html and css

Answer:

Sure! Below is a simple example of an HTML and CSS code snippet that represents a school bell schedule from Monday to Friday. You can customize the times and subjects as needed.

HTML (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>School Bell Schedule</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>School Bell Schedule</h1>
        <table>
            <thead>
                <tr>
                    <th>Day</th>
                    <th>Period 1</th>
                    <th>Period 2</th>
                    <th>Period 3</th>
                    <th>Period 4</th>
                    <th>Period 5</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Monday</td>
                    <td>8:00 - 8:45</td>
                    <td>8:50 - 9:35</td>
                    <td>9:40 - 10:25</td>
                    <td>10:30 - 11:15</td>
                    <td>11:20 - 12:05</td>
                </tr>
                <tr>
                    <td>Tuesday</td>
                    <td>8:00 - 8:45</td>
                    <td>8:50 - 9:35</td>
                    <td>9:40 - 10:25</td>
                    <td>10:30 - 11:15</td>
                    <td>11:20 - 12:05</td>
                </tr>
                <tr>
                    <td>Wednesday</td>
                    <td>8:00 - 8:45</td>
                    <td>8:50 - 9:35</td>
                    <td>9:40 - 10:25</td>
                    <td>10:30 - 11:15</td>
                    <td>11:20 - 12:05</td>
                </tr>
                <tr>
                    <td>Thursday</td>
                    <td>8:00 - 8:45</td>
                    <td>8:50 - 9:35</td>
                    <td>9:40 - 10:25</td>
                    <td>10:30 - 11:15</td>
                    <td>11:20 - 12:05</td>
                </tr>
                <tr>
                    <td>Friday</td>
                    <td>8:00 - 8:45</td>
                    <td>8:50 - 9:35</td>
                    <td>9:40 - 10:25</td>
                    <td>10:30 - 11:15</td>
                    <td>11:20 - 12:05</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

CSS (styles.css)

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 20px;
}

.container {
    max-width: 800px;
    margin: auto;
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h1 {
    text-align: center;
    color: #333;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

th, td {
    padding: 10px;
    text-align: center;
    border: 1px solid #ddd;
}

th {
    background-color: #4CAF50;
    color: white;
}

tr:nth-child(even) {
    background-color: #f2f2f2;
}

tr:hover {
    background-color: #ddd;
}

Instructions

  1. Create a new folder for your project.
  2. Inside that folder, create two files: index.html and styles.css.
  3. Copy the HTML code into index.html and the CSS code into styles.css.
  4. Open index.html in a web browser to see your school bell schedule.

Feel free to modify the times and subjects in the table as per your school's schedule!