Exercise1/index.html at master · mnuzulia/Exercise1 · 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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>I'm Maulida Nuzulia</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" type="text/css" media="screen" href="main.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>

<body>
    <!-- Introduction -->
    <header class="wrapper grey ">
        <div class="wrapper-content left">
            <img src="assets/img/me-01.png" class="myPicture">
        </div>
        <div class="wrapper-content right">
            <h1 class="title-bold title-size position-hello anim-typewriter ">HELLO GUYS!!!<span>&nbsp;</span></h1>
            <br><br>
            <p class="text-reg text-size position-intro first">My name is <span class="text-black">Maulida
                    Nuzulia</span>.<br>
                I’m originally from Kebumen, Central Java, <br> but now I
                live in Depok, West Java.
            </p><br><br>
            <p class="text-size text-reg position-intro second">So, please, <span class="text-black">scroll
                    down</span>,<br>
                it’s a bit awkward if you stare at me for a long time :) </p>
        </div>
    </header>
    <!-- Bio -->
    <div class="wrapper navy">
        <div class="wrapper-content left">
            <h1 class="title-size title-bold white position-about space-left letter-spacing">A LITTLE BIT MORE ABOUT ME
            </h1><br>
            <div class="line-style white space-left"></div><br> <br>
            <p class="text-reg text-size white space-left text-align">I've choosen an information technology as my
                major, <br> and spent my first year at college to build crappy websites.</p> <br>
            <p class="text-reg text-size white space-left text-align">But after getting new knowledge about apps
                programming, <br> I realized that it was so fun and decided to try learning it.</p><br>
            <p class="text-reg text-size white space-left text-align">At second year, I decided what I really wanted
                was to become <br> as <span class="letter-spacing"><strong> a PROFESSIONAL FRONT-END WEB
                        DEVELOPER</strong></span>, <br> and set out to re-learn web programming completely.</p><br>
            <p class="text-reg text-size white space-left text-align">I hope that my dreams will come true soon.
                So, I can see <br> a big smile on my parents.</p><br>
        </div>
        <div class="wrapper-content right">
            <img src="assets/img/laptop-01.png" class="myPicture">
        </div>
    </div>

    <!-- Hobbies -->
    <div class="wrapper pink">
        <h1 class="title-size title-bold white letter-spacing position-hobbies">ART AND KNOWLEDGE ARE THE PARTS
            OF MY LIFE</h1><br>
        <div class="line-style white center"></div><br> <br>
        <p class="text-reg text-size white position-subtitle-hobbies">Beside of an academician, I’m a super fan of:</p>
        <br>
        <div class="square-hobbies-wrapper">
            <div class="square-hobbies navy left">
                <img src="assets/img/headphone-01.png" class="square-picture center">
                <p class="text-reg text-style-hobbies white">Loud Music on Headphone</p>
            </div>
            <div class="square-hobbies peach pos-hob-mid-left">
                <img src="assets/img/brush-01.png" class="square-picture center">
                <p class="text-reg text-style-hobbies white">Drawing Houseplants</p>
            </div>
            <div class="square-hobbies tosca pos-hob-mid-right">
                <img src="assets/img/books-01.png" class="square-picture center">
                <p class="text-reg text-style-hobbies white">Self-Improvement Books</p>
            </div>
            <div class="square-hobbies salem  right">
                <img src="assets/img/movie-01.png" class="square-picture center">
                <p class="text-reg text-style-hobbies white">K-drama</p>
            </div>
        </div>

    </div>

    <!-- Quotes -->
    <div class="background-quotes salem">
        <h1 class="title-size-quotes title-bold black letter-spacing position-quotes">THINGS ARE IMPORTANT <br> TO ME
        </h1>
        <div class="line-style-quotes black center"></div><br>
        <div class="quotes-wrapper center">
            <div class="content-quotes">
                <p class="text-reg text-size black space-quotes">Commitment in Learning </p>
                <p class="text-reg text-size black space-quotes">Collaboration</p>
                <p class="text-reg text-size black space-quotes">Believe in action</p>
                <p class="text-reg text-size black space-quotes">Systematic </p>
                <p class="text-reg text-size black space-quotes">Open-minded </p>
                <p class="text-reg text-size black space-quotes">Reading Every Day </p>
                <p class="text-reg text-size black space-quotes">Continuing Self Improvement</p>
            </div>
        </div>
    </div>
    </div>

    <!-- Contact -->
    <footer class="wrapper tosca ">
        <div class="wrapper-content left ">
            <h1 class=" title-size title-bold white letter-spacing position-footer top-footer">WELCOME
                BRIBES <br>
                IN THE FORM OF <br>
                SEAFOOD </h1><br>
            <div class="line-style black space-left position-footer "></div><br><br>
            <p class="text-reg text-size white space-left position-footer">Let’s get in touch.<br>
                It’s time to get closer on a deeper level <br>
                and expand your connection.</p> <br> <br>

            <a href="https://www.linkedin.com/in/mnuzulia/">
                <img src="assets/img/linkedin-letters.png" class="sosmed-icon space-left position-footer">
            </a>
            <a href="https://twitter.com/m_nuzulia">
                <img src="assets/img/twitter.png" class="sosmed-icon">
            </a>
        </div>

        <div class="wrapper-content right">
            <form action="" method="get" class="space-left-footer">
                <label class="text-reg text-size white position-label-form">Name</label>
                <input type="text" name="name" placeholder="Type your name here.." class="input-form">
                <label class="text-reg text-size white space-between-input">Email</label>
                <input type="text" name="name" placeholder="Type your email here.." class="input-form">
                <label class="text-reg text-size white space-between-input">Message</label>
                <textarea rows="30" cols="30" placeholder="Any question? Type here now.."
                    class="textarea-form"></textarea>
                <button class="btn btn-primary space-between-input btn-send ">Send</button>
            </form>
        </div>

    </footer>
</body>

</html>