Basic-HTML-portfolio/index.html at main · HumairaFasih/Basic-HTML-portfolio · 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
<!-- the emmet plugin installs the boilerplate i.e the
  basic skeleton of html code. Looks different for different versions of html.

  Also, it inserts the boilerplate automatically when
  you type html in the doc -->

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">

  <!-- the meta tag provides info to the browser that would
      render the webpage in the correct unicode character encoding format
        "Mojibake" occurs when  your browser tries to render characters
      using the wrong charcter encoding set-->

  <title>☘ Humaira's webpage</title>
  <!-- The symbol can be pasted from unicode
    character list and it will be rendered appropriately -->

</head>

<body>
  <table cellspacing="20">
    <tr>
      <td>
        <img src="Images/profile.png" alt="profile pic image" style="border-radius: 30px;">
      </td>
      <td>
        <h1> Humaira Fasih</h1>
        <p>
          Sophomore at <em><strong><a href="https://lums.edu.pk/">LUMS</a></strong>.</em>
        </p>
      </td>
    </tr>
  </table>
  <hr size="3">
  <h3>Education</h3>
  <ul>
    <li>Primary Education
      <ul>
        <li style="list-style-type: none;"> ⤅ Foundation Public School</li>
      </ul>
    <li>Secondary Education
      <ul>
        <li style="list-style-type: none;"> ⤅ Rockford Cambridge School</li>
      </ul>
    </li>
    <li>High School
      <ul>
        <li style="list-style-type: none;"> ⤅ Blue Jays School System</li>
      </ul>
    </li>
  </ul>
  <hr>
  <h3> Voluntary Courses Taken</h3>
  <table cellspacing="10">
    <thead>
      <!-- This element is for writing meaningful code -->
      <th>Month & Year</th> <!-- renders the title for each table column in bold -->
      <th>Course Title</th>
    </thead>
    <tbody>
      <!-- For the body of the table, used for meaningful code -->
      <tr>
        <!-- creates a row in the table -->
        <td> April 2020</td>
        <td> UoT Introduction to Python</td>
      </tr>
      <tr>
        <!-- creates a row in the table -->
        <td> June 2020</td>
        <td> CS50 </td>
      </tr>
    </tbody>
  </table>
  <h3>Skills</h3>
  <table cellspacing="10">
    <tr>
      <td>
        <table cellspacing="5">
          <tr>
            <td> Baking</td>
            <td> ⭐️⭐️⭐️ </td>
          </tr>
          <tr>
            <td> Cooking</td>
            <td> ⭐️⭐️⭐️⭐️ </td>
          </tr>
        </table>
      </td>
      <td>
        <table cellspacing="5">
          <tr>
            <td> Web Dev</td>
            <td> ⭐️⭐️ </td>
          </tr>
          <tr>
            <td> Painting </td>
            <td> ⭐️⭐️ </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
  <hr />
  <h3>Hobbies</h3>
  <ul>
    <li><a href="Images/table-tennis.jpg">🏓 Table Tennis</a></li>
    <li> 📚 Reading Fiction</li>
  </ul>
  <hr>
  <p>
    Interested in connecting with me?
    <a href="contact_me.html">Contact Me</a>
  </p>
</body>
</html>