quiz1/hometown.html at main · adriansantoso21/quiz1 · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Adrian's Personal Website</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.11/typed.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="scroll-up-btn">
        <i class="fas fa-angle-up"></i>
    </div>
    <nav class="main-navbar">
        <div class="max-width">
            <div class="logo"><a href="index.html">Home<span>Page.</span></a></div>
            <ul class="menu">
                <li><a href="profile.html" class="menu-btn">Profile</a></li>
                <li><a href="hometown.html" class="menu-btn">Hometown</a></li>
                <li><a href="food.html" class="menu-btn">Food</a></li>
                <li><a href="tourist.html" class="menu-btn">Tourist</a></li>
            </ul>
            <div class="menu-btn">
                <i class="fas fa-bars"></i>
            </div>
        </div>
    </nav>

    <!--home section start -->
    <section class="home" id="home">
        <div class="max-width">
            <div class="home-content">
                <div class="text-1">Hello, my name is</div>
                <div class="text-2">Adrian Santoso</div>
                <div class="text-3">And I'm a <span class="typing"></span></div>
                <a href="#">Hire Me</a>
            </div>
        </div>
    </section>

    <!-- hometown section start -->
    <section class="gallery" id="gallery">
        <div class="max-width">
            <h2 class="title">Hometown</h2>
            <div class="gallery-content">
                <div class="column left">
                    <div class="text">Surabaya, Jawa Timur, Indonesia</div>
                    <p>Surabaya is the place where i remain. Surabaya is the capital of the Indonesian province of East Java and the second-largest city in Indonesia. Located on the northeastern border of Java island, on the Madura Strait. There are many historic places where you can visit like Tugu Pahlawan and Kapal Selam Monument.</p>
                    <p>The interesrting fact about the name of Surabaya is a unique combination of two creatures. The first part of the name is derived from the word Suro which means Shark and the second part is derived from the word Boyo which means Crocodile. Both these animals are now used as symbol in the emblem of this city.</p>
                </div>
                <div class="column right">
                    <img src="images/surabaya.jpg" alt="">
                </div>

                <div class="column left-img mb-3">
                    <div id="carouselExampleIndicators" class="carousel slide mt-5" data-ride="carousel">
                        <ol class="carousel-indicators">
                            <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                            <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
                            <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
                        </ol>
                        <div class="carousel-inner">
                            <div class="carousel-item active">
                                <img class="d-block w-100" src="images/busy.jpg" alt="Busy">
                                <div class="carousel-caption d-none d-md-block">
                                    <h2>Traffic Jam</h2>
                                </div>
                            </div>
                            <div class="carousel-item">
                                <img class="d-block w-100" src="images/modern.jpg" alt="Modern">
                                <div class="carousel-caption d-none d-md-block">
                                    <h2>Modern City</h2>
                                </div>
                            </div>
                            <div class="carousel-item">
                                <img class="d-block w-100" src="images/city_park.jpg" alt="City Park">
                                <div class="carousel-caption d-none d-md-block">
                                    <h2>City Park</h2>
                                </div>
                            </div>
                        </div>
                        <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
                            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                            <span class="sr-only">Previous</span>
                        </a>
                        <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
                            <span class="carousel-control-next-icon" aria-hidden="true"></span>
                            <span class="sr-only">Next</span>
                        </a>
                    </div>
                </div>
                <div class="column right mt-3">
                    <h2 class="title">Gallery Images</h2>
                </div>
            </div>
        </div>
    </section>

    <!-- footer section -->
    <footer>
        <span>By <a href="#">Adrian Santoso</a> | <span class="far fa-copyright"></span>2021 Web Programming Quiz 1</span>
    </footer>

    <script src="script.js"></script>
</body>
</html>