Week-1-Assignment/About.html at main · Umutoni23/Week-1-Assignment · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>About Page</title>

    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f7fb;
            margin: 0;
            padding: 0;
        }

        header {
            background-color: #3498db;
            color: white;
            text-align: center;
            padding: 20px 0;
            font-size: 28px;
            font-weight: bold;
        }

        nav {
            background-color: #2c3e50;
            text-align: center;
            padding: 10px 0;
        }

        nav a {
            color: white;
            text-decoration: none;
            margin: 0 15px;
            font-weight: bold;
        }

        nav a:hover {
            color: #f1c40f;
            transition: 0.3s;
        }

        .container {
            width: 75%;
            margin: 30px auto;
            background-color: #ffffff;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }

        h1, h2 {
            color: #2c3e50;
        }

        h1 {
            text-align: center;
            margin-bottom: 25px;
        }

        p {
            font-size: 16px;
            line-height: 1.6;
            color: #34495e;
        }

        .images {
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
            margin: 20px 0;
        }

        .images img {
            width: 300px;
            height: 200px;
            margin: 10px;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            object-fit: cover;
        }

        .highlight {
            background-color: #f1c40f;
            padding: 3px 6px;
            border-radius: 3px;
        }
    </style>
</head>
<body>

<header>About This Project</header>

<nav>
    <a href="index.html" title="Home">Home</a>
    <a href="list.html" title="Lists Example">Lists</a>
    <a href="Tablepage.html" title="Table">Tables</a>
    <a href="formating.html" title="Text Formatting Reference">Formatting</a>
    <a href="form.html" title="About Page">Form</a>
    <a href="About.html" title="About Page">About</a>
</nav>

<div class="container">
    <h1>About the HTML Assignment</h1>

    <p>
        This project demonstrates my understanding of fundamental HTML concepts and structuring of web pages.
        Throughout this assignment, I have applied <span class="highlight">semantic HTML</span> to create well-organized pages,
        including tables, lists, forms, and multi-page navigation. Each page is carefully designed to be readable,
        accessible, and visually appealing.
    </p>

    <p>
        The goal of this assignment is to showcase the proper use of HTML tags, including:
        <span class="highlight">&lt;table&gt;</span>, <span class="highlight">&lt;form&gt;</span>, <span class="highlight">&lt;ul&gt;</span>,
        <span class="highlight">&lt;ol&gt;</span>, <span class="highlight">&lt;img&gt;</span>, and many others. Additionally, I have applied
        <span class="highlight">CSS styling</span> internally to enhance the visual presentation of the pages, including
        colors, shadows, spacing, and hover effects.
    </p>

    <div class="images">
        <img src="https://plus.unsplash.com/premium_photo-1685086785230-2233cf5d8f28?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NXx8aHRtbCUyMGltYWdlc3xlbnwwfHwwfHx8MA%3D%3D" alt="Web Design Illustration" width="300" height="200">
        <img src="https://media.istockphoto.com/id/116248249/photo/browsing-the-web.webp?a=1&b=1&s=612x612&w=0&k=20&c=0vOjgK59wVCwBGUHjmAMof-lVW9viCteuAzmLkvKnMU=" alt="Coding Illustration" width="300" height="200">
    </div>

    <h2>Project Highlights</h2>
    <p>
        1. Multi-page navigation linking all important pages like Home, Tables, Lists, and Text Formatting Reference.<br>
        2. Professional forms with proper labels, input validation, and responsive layout.<br>
        3. Tables that display structured data using <span class="highlight">&lt;thead&gt;</span> and <span class="highlight">&lt;tbody&gt;</span>.<br>
        4. Proper use of ordered and unordered lists to organize information.<br>
        5. Images with descriptive <span class="highlight">alt text</span> and consistent sizing for visual clarity.
    </p>

    <p>
        This About Page summarizes the purpose, structure, and design considerations of the project,
        making it clear to anyone reviewing the assignment how each requirement has been implemented.
    </p>
</div>

</body>
</html>