One/index.html at master · IsaM001/One · 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
142
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Isa Project</title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="./styles.css" />
  </head>
  <body>
    <div class="container-top">
      <div class="text-title"></div>
      <h1>My name is Isa</h1>
      <img class="Peak" src="./Mountain.png" alt="Mountain" />
      <h2>I am an <em>aspiring</em> software engineer!</h2>
    </div>
    <div class="second-container">
      <div class="mt-0">
        <div class="p-5 text-center bg-body-tertiary">
          <div class="container py-5">
            <a href="https://uk.linkedin.com/in/isa-mohammed"
              ><img src="./Profile.jpg" alt="selfie" class="Profile"
            /></a>
            <h1 class="text-body-emphasis">Hello!</h1>
            <p class="col-lg-8 mx-auto lead">
              I am an aspiring software engineer. <br />This is one of the first main
              projects that I have built. Want to <strong>connect?</strong> <br>
              Click my profile photo!
              </div>
            </p>
          </div>
        </div>
      </div>
    </div>
  </body>
  <div class="third-container">
    <h2 class="Heading">Learn more about me</h2>
    <div class="Skills">
      <div class="container px-4 py-5" id="custom-cards">
        <h2 class="pb-2 border-bottom">Click the cards below</h2>
        <div class="row row-cols-1 row-cols-lg-3 align-items-stretch g-4 py-5">
          <div class="col">
            <a href="./about.html" style="text-decoration: none;">
              <div class="card card-cover h-100 overflow-hidden text-bg-dark rounded-4 shadow-lg" style="background-image: url('./About.jpg');">
                <div class="d-flex flex-column h-100 p-3 text-white text-shadow-1">
                  <h3 class="pt-4 mt-4 mb-3 display-6 lh-1 fw-bold">Who am I?</h3>
                  <ul class="d-flex list-unstyled mt-auto">
                    <li class="me-auto">
                      <img src="./About.jpg" alt="Bootstrap" class="rounded-circle border border-white img-fluid">
                    </li>
                    <li class="d-flex align-items-center me-3">
                      <svg class="bi me-2" width="1em" height="1em"><use xlink:href="#geo-fill"></use></svg>
                      <small></small>
                    </li>
                    <li class="d-flex align-items-center">
                      <svg class="bi me-2" width="1em" height="1em"><use xlink:href="#calendar3"></use></svg>
                      <small></small>
                    </li>
                  </ul>
                </div>
              </div>
            </a>
          </div>
          <div class="col">
            <a href="./Experience.html" style="text-decoration: none;">
              <div class="card card-cover h-100 overflow-hidden text-bg-dark rounded-4 shadow-lg" style="background-image: url('./Baloon.jpg');">
                <div class="d-flex flex-column h-100 p-3 text-white text-shadow-1">
                  <h3 class="pt-4 mt-4 mb-3 display-6 lh-1 fw-bold">Education & Experience</h3>
                  <ul class="d-flex list-unstyled mt-auto">
                    <li class="me-auto">
                      <img src="./Baloon.jpg" alt="Bootstrap" class="rounded-circle border border-white img-fluid">
                    </li>
                    <li class="d-flex align-items-center me-3">
                      <svg class="bi me-2" width="1em" height="1em"><use xlink:href="#geo-fill"></use></svg>
                      <small></small>
                    </li>
                    <li class="d-flex align-items-center">
                      <svg class="bi me-2" width="1em" height="1em"><use xlink:href="#calendar3"></use></svg>
                      <small></small>
                    </li>
                  </ul>
                </div>
              </div>
            </a>
          </div>
          <div class="col">
            <a href="./Skills.html" style="text-decoration: none;">
              <div class="card card-cover h-100 overflow-hidden text-bg-dark rounded-4 shadow-lg" style="background-image: url('./Skills.jpg');">
                <div class="d-flex flex-column h-100 p-3 text-shadow-1">
                  <h3 class="pt-4 mt-4 mb-3 display-6 lh-1 fw-bold">Projects</h3>
                  <ul class="d-flex list-unstyled mt-auto">
                    <li class="me-auto">
                      <img src="./Skills.jpg" alt="Bootstrap" class="rounded-circle border border-white img-fluid">
                    </li>
                    <li class="d-flex align-items-center me-3">
                      <svg class="bi me-2" width="1em" height="1em"><use xlink:href="#geo-fill"></use></svg>
                      <small></small>
                    </li>
                    <li class="d-flex align-items-center">
                      <svg class="bi me-2" width="1em" height="1em"><use xlink:href="#calendar3"></use></svg>
                      <small></small>
                    </li>
                  </ul>
                </div>
              </div>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="footer"></div>
  <div class="p-5 text-center bg-body-tertiary">
    <div class="container py-0">
        <h2><strong>Contact me</strong></h2>

        <p>Want to get in touch? Click the button below.</p>
        <div class="d-flex gap-2 justify-content-center py-5">
          <a href="mailto:theisamohammed@gmail.com">
            <button class="btn btn-dark rounded-pill button" type="button">Contact</button>
          </a>
        </div>
      <p></p>
    </div>
  </div>
  <div class="container">
    <footer class="py-3 my-4">
      <ul class="nav justify-content-center border-bottom pb-3 mb-3">
        <li class="nav-item"><a href="./index.html" class="nav-link px-2 text-body-secondary">Home</a></li>
        <li class="nav-item"><a href="./about.html" class="nav-link px-2 text-body-secondary">About</a></li>
        <li class="nav-item"><a href="./Experience.html" class="nav-link px-2 text-body-secondary">Experience</a></li>
        <li class="nav-item"><a href="./Skills.html" class="nav-link px-2 text-body-secondary">Projects</a></li>
      </ul>
      <p class="text-center text-body-secondary">© Isa Mohammed</p>
    </footer>
  </div>
</html>