basicWebpage/simpleGrid.html at gh-pages · 1999Python/basicWebpage · 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
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
<!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>First_layout</title>
    <link rel="stylesheet" href="simple-grid.css">
    <link rel="stylesheet" href="simple-grid.min.css">
    <link rel="stylesheet" href="styleGrid.css">
    <style>
        body {
            margin: 0;
            background-image: url("https://milkdecor.co.za/wp-content/uploads/Pink-and-purple-flowers-website.jpg");
            background-color: #cccccc;
        }

        .container {
            width: 100vw;
            height: 100vh;
        }
    </style>

</head>

<body>
    <div class="container">
        <div class="row backdrop">
            <div class="col-6">
                <h1>Raadiyah Arend</h1>
            </div>
            <div class="col-6">
                <img class="Pic" src="main.jpg" alt="Table mountain">
            </div>
        </div>

        <div class="row">
            <div class="headings">
                <h2 class="cityh">~City~</h2>
            </div>

            <div class="col-12">
                <div class="row abuH">
                    <h3>Abu Dhabi</h3>
                </div>

                <div class="col-4">
                    <img class="abu" src="ajeeb.jpg" alt="land of gold" width="100%">
                </div>
                <div class="col-4 para">
                    <div class="para4">
                        <p class="abuPara">One of its biggest and best shopping malls, as well as plenty of waterparks
                            and amusement parks.
                            Saadiyat Island is a far more relaxed place that's known for its pristine beaches. Heading
                            inland, you’ll find historic oasis towns, military forts, and neolithic tombs across the
                            desert
                            sands of the Emirate of Abu Dhabi. Whether you’re looking for cultural experiences, shopping
                            sprees, a beach break, or a fun family escape, there’s a part of Abu Dhabi that you'll love.
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="headings">
                <h2 class="fl">~Foreign Language~</h2>
            </div>

            <div class="col-12">


                <h3 class="bic">Arabic</h3>
                <div class="para2">
                    <p class="lang">
                        I would like to improve on my Arabic for the following reasons: I plan on living in the middle
                        east
                        once I am financially stable.My religion's book is written in arabic it would be lovely to
                        understand what I am reading. My city of choice which is Abu Dhabi community speaks arabic as
                        well.
                    </p>
                </div>
            </div>
        </div>


        <div class="row table">
            <div class="col-12">
                <table>
                    <tr>
                        <th>English</th>
                        <th>Arabic</th>
                    </tr>
                    <tr>
                        <td>The meal is delicious</td>
                        <td>هذا اللحم البقري لذيذ للغاية</td>
                    </tr>
                    <tr>
                        <td>How much is this?</td>
                        <td>كم ثمن هذا؟</td>
                    </tr>
                    <tr>
                        <td>Can you help me ?</td>
                        <td>هل يمكنك مساعدتي؟</td>
                    </tr>
                </table>
            </div>
        </div>

        <div class="row sect5">
            <div class="headings">
                <h2 class="hist">~Historical Places~</h2>
            </div>
            <div class="col-4 images">
                <h3>Greenmarket Square</h3>
                <div class="subsect1 row">

               <img class="places _green left" width="150px" height="250px" src="rsz_green.jpg"
                        alt="market Square">

                    <div class="para3_1">
                        <p>Greenmarket Square is one of Cape town's oldest markets, full of crafts, jewelry, clothing
                            and curios at a great value. It’s loud, colourful, and at times almost dizzying with
                            activity. Street musicians jostle for space alongside traders, in the shadow of gorgeous old
                            colonial buildings where the history is etched into the very walls.</p>
                    </div>
                </div>
            </div>


            <div class="col-4 images">
                <h3>Parliament</h3>
                <div class="subsect2 row">
                    <img class="places _parli right" width="150px" height="250px" src="parli.jpeg"
                        alt=" Parliament of RSA - 7min walk">

                    <div class="para3_2">
                        <p>Parliament plays a direct and active role in national affairs. It is the place where the
                            members of Parliament look after your interests. Members of Parliament (MPs) have many
                            responsibilities, including - making laws that will improve our lives.Queen Victoria granted
                            permission for the establishment of a parliament in the Cape Colony in 1853.
                        </p>
                    </div>
                </div>
            </div>

            <div class="col-4 images">

                <h3 class="head">Castle of Good Hope</h3>

                <div class="subsect3">
                    <img class="places _cast left" width="150px" height="250px" src="cast.jpg" alt="Our kingdom">
                    <div class="para3_3">
                        <p>The Castle of Good Hope known locally as the Castle or Cape Town Castle is a bastion fort
                            built in the 17th century in Cape Town, South Africa. Originally located on the coastline of
                            Table Bay, following land reclamation the fort is now located inland.The fortress housed a
                            church, bakery, various workshops, living quarters, shops, and cells, among other
                            facilities.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>