-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
143 lines (109 loc) · 2.72 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tozeur</title>
</head>
<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=Tilt+Prism&display=swap" rel="stylesheet">
<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=Barriecito&display=swap" rel="stylesheet">
<style>
body{
background-color: #F1DEC9;
}
.present img{
height: 120px;
width: 120px;
object-fit: cover;
float: left ;
}
h1{
font-family: 'Tilt Prism', cursive;
text-transform: uppercase;
}
hr{
background-color: #ABC4AA;
}
h2{
font-family: 'Barriecito', cursive;
text-align: center;
color: #4F200D;
}
h3{
font-family:Georgia, 'Times New Roman', Times, serif;
color: #3F4E4F;
}
p{
font-family:Georgia, 'Times New Roman', Times, serif;
font-size: 1rem;
color: #3F4E4F;
}
.main{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
flex: 1;
}
.main img{
padding: 30px;
width: 300px;
}
.two{
position: relative;
background-color:#C8B6A6;
border-radius: 20px;
flex: 1;
width: 400px;
margin: 30px;
height: 400px;
}
.two .content {
position: absolute;
bottom: 1px;
margin: 5px;
}
</style>
<body>
<div class="present">
<img src="./images/palmier.png" alt="palmier-image" />
<br />
<h1>Welcome To Tozeur </h1>
</div>
<hr />
<br />
<br />
<h2>"Unearth Tozeur's Beauty: Desert Exploration"
</h2>
<br/>
<br />
<br />
<br />
<br />
<div class="main">
<div class="two">
<img src="./images/ras-in.png" alt="camel" />
<div class="content">
<h3>Ras El Aïn :</h3>
<p>
Ras El Aïn is a notable location in the city of Tozeur, which is situated in southwestern Tunisia.
Tozeur is renowned for its unique architecture, oasis landscapes, and historical significance.
Ras El Aïn holds a special place within this context.
</p>
</div>
</div>
<div class="two">
<img src="./images/chebika.png" alt="camel" />
<div class="content">
<h3>Chebika :</h3>
<p>Chebika is a picturesque oasis town located in the
Tozeur Governorate of southwestern Tunisia.It is known for its stunning natural beauty, historical significance,
and unique architecture.</p>
</div>
</div>
</div>
</body>
</html>