developer-portfolio/index.html at main · Hamim-200/developer-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
<!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>Oliver Liam Portfolio</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Gentium+Book+Plus&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <section class="top-banner flexible-container">
        <div class="half-width">
            <h1>Welcome to </h1>
            <h1><span class="name-color">Oliver Liam</span> World!</h1>
            <h3>Build Climber and Train Storpper</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
                dolore
                magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
                commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
                fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
                mollit anim id est laborum.
            </p>
            <div>
                <a class="link-button" target="_blank" href="https://www.facebook.com/">HIRE ME</a>
            </div>
        </div>
        <div class="half-width">
            <img src="images/developer-image.png" alt="Liams's Photo">
        </div>
    </section>

    <section class="dream-big flexible-container">
        <div class="half-width">
            <img src="images/developer-image.png" alt="">

        </div>
        <div class="half-width">
            <h1>Dream Big</h1>
            <h2>Become a web developer</h2>
            <p>
                ive centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was
                popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more
                recently with desktop publishing software like Aldus PageMaker including versions of Lorem
                Ipsum.<br><br><br>
                <a class="link-button" target="_blank" href="https://www.facebook.com/">Download CV
                </a>
            </p>
        </div>
    </section>

    <section class="exprience-area">
        <h1>Expriences</h1>
        <div class="flexible-container">
            <div id="full-stack-developer" class="exprience-item">
                <h2>Full Stack Developer</h2>
                <h3 class="n-color ">2022-Present | Pro Level Developer</h3>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi perferendis assumenda debitis sapiente,
                    consequuntur natus, veritatis illum tenetur aspernatur, pariatur voluptatem doloremque sed impedit.
                    Ex.
                </p>
            </div>
            <div id="baby-web-developer" class="exprience-item">
                <h2>
                    Mobile App Developer
                </h2>
                <h3 class="n-color">2024-Present | Programming Hero Learner</h3>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo recusandae quibusdam enim
                    temporibus
                    autem quaerat ipsum illum necessitatibus. Fugit, excepturi commodi corrupti voluptatum omnis earum
                    et perspiciatis recusandae nobis numquam?
                </p>
            </div>
        </div>

    </section>

    <footer>
        <h3>Copyright © 2022 Hamim</h3>
    </footer>
</body>

</html>