├── Mini-Projet 1 ├── images │ ├── agadir.jpg │ ├── tanger.jpg │ ├── Front-Photo.jpg │ ├── essaouira.webp │ ├── marrakech.jpg │ └── tour-guide.png ├── CSS │ └── style.css └── HTML │ └── index.html └── README.md /Mini-Projet 1/images/agadir.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/moadhamousti/Mini-Project/HEAD/Mini-Projet 1/images/agadir.jpg -------------------------------------------------------------------------------- /Mini-Projet 1/images/tanger.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/moadhamousti/Mini-Project/HEAD/Mini-Projet 1/images/tanger.jpg -------------------------------------------------------------------------------- /Mini-Projet 1/images/Front-Photo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/moadhamousti/Mini-Project/HEAD/Mini-Projet 1/images/Front-Photo.jpg -------------------------------------------------------------------------------- /Mini-Projet 1/images/essaouira.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/moadhamousti/Mini-Project/HEAD/Mini-Projet 1/images/essaouira.webp -------------------------------------------------------------------------------- /Mini-Projet 1/images/marrakech.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/moadhamousti/Mini-Project/HEAD/Mini-Projet 1/images/marrakech.jpg -------------------------------------------------------------------------------- /Mini-Projet 1/images/tour-guide.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/moadhamousti/Mini-Project/HEAD/Mini-Projet 1/images/tour-guide.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Simple_Page_Morocco_Tours 🇲🇦 🏄🏼‍♂️ : 2 | 3 | 4 | SimplePage 5 | -------------------------------------------------------------------------------- /Mini-Projet 1/CSS/style.css: -------------------------------------------------------------------------------- 1 | /*=============== GOOGLE FONTS ===============*/ 2 | @import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@100;200;300;400;500;600;700&display=swap'); 3 | @import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@100;200;300;400;500;600;700&display=swap'); 4 | 5 | 6 | :root { 7 | --header-height: 1.5rem; 8 | 9 | /*========== Colors ==========*/ 10 | /*Color mode HSL(hue, saturation, lightness)*/ 11 | --first-color: hsl(219, 69%, 56%); 12 | --first-color-alt: hsl(219, 69%, 52%); 13 | --title-color: hsl(219, 8%, 95%); 14 | --text-color: hsl(0, 0%, 0%); 15 | --text-color-light: hsl(219, 4%, 55%); 16 | --white-color: rgb(226, 174, 174); 17 | --body-color: rgb(219,219,219); 18 | --container-color: hsl(209, 31%, 65%); 19 | --body-font: 'Roboto Mono', sans-serif; 20 | --h1-font-size: 1.5rem; 21 | --h2-font-size: 1.25rem; 22 | --h4-font-size: 1rem; 23 | --normal-font-size: .938rem; 24 | --small-font-size: .813rem; 25 | --smaller-font-size: .75rem; 26 | } 27 | 28 | /* ================= General Settings ================= */ 29 | 30 | 31 | *{ 32 | box-sizing: border-box; 33 | padding: 0; 34 | margin: 0; 35 | 36 | } 37 | 38 | body{ 39 | font-family: var(--body-font); 40 | font-size: var(--normal-font-size); 41 | background-color: var(--body-color); 42 | color: var(--text-color); 43 | background: radial-gradient(circle, rgba(219,219,219,1) 0%, rgba(65,143,235,1) 100%); 44 | 45 | } 46 | 47 | 48 | ul{ 49 | list-style: none; 50 | font-size: larger; 51 | } 52 | 53 | img{ 54 | max-width: 100%; 55 | height: auto; 56 | } 57 | 58 | h1{ 59 | font-family: 'Josefin Sans', sans-serif; 60 | } 61 | 62 | 63 | section{ 64 | align-items: center; 65 | } 66 | 67 | /* ================= Main ============== */ 68 | 69 | main { 70 | margin-top: 80px; /* Set the top margin to the height of the navbar */ 71 | } 72 | 73 | /* ========================================== */ 74 | 75 | 76 | 77 | /* ================== Header =================== */ 78 | 79 | 80 | 81 | .header{ 82 | width: 100%; 83 | background-color: transparent; 84 | position: fixed; 85 | top: 0; 86 | left: 0; 87 | z-index: var(--z-fixed); 88 | } 89 | 90 | 91 | .cities-container { 92 | display: flex; 93 | margin: 5px; 94 | margin-left: 290px; 95 | padding-bottom: 50px; 96 | flex-direction: row; 97 | flex-flow: row wrap; 98 | flex-wrap: wrap; 99 | } 100 | 101 | 102 | 103 | 104 | .photo-slider{ 105 | width: 1000px; 106 | height: 500px; 107 | margin-left: 210px; 108 | left: 210px; 109 | border: solid 2px black; 110 | } 111 | 112 | 113 | section img { 114 | margin-left: 7px; 115 | width: 180px; 116 | height: 140px; 117 | border-radius: 10%; 118 | } 119 | 120 | section { 121 | width: 10%; 122 | margin-bottom: 50px; 123 | } 124 | 125 | 126 | 127 | #aga , #ess, #tan, #mar{ 128 | width: 200px; 129 | border:solid #ff6655; 130 | border-radius: 4%; 131 | 132 | } 133 | 134 | 135 | 136 | 137 | 138 | 139 | /* ==================== Slider ================== */ 140 | 141 | 142 | /* The slider Conatainer */ 143 | 144 | .slider{ 145 | position: inherit; 146 | display: flex; 147 | height: 500px; 148 | width: 1350px; 149 | flex-direction: row; 150 | flex-flow: row wrap; 151 | flex-wrap: wrap; 152 | } 153 | 154 | 155 | /* ==================== Slider Title ================== */ 156 | 157 | 158 | 159 | .Big-Title { 160 | font-size: 6rem; 161 | font-weight: 900; 162 | letter-spacing: 0.1em; 163 | line-height: 1.2; 164 | text-align: center; 165 | position: absolute; 166 | top: 50%; 167 | left: 50%; 168 | transform: translate(-50%, -50%); 169 | z-index: 2; 170 | color: white; 171 | } 172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | 180 | /* FOOTER Container : */ 181 | 182 | 183 | .footer { 184 | display: flex; 185 | flex-direction: column; 186 | justify-content: center; 187 | align-items: center; 188 | background-color: white; 189 | } 190 | 191 | .link-visit { 192 | display: block; 193 | width: fit-content; 194 | margin: 0 auto; 195 | padding-bottom: 7px; 196 | size: 10px; 197 | } 198 | 199 | .link-visit:hover{ 200 | color: rgb(246, 203, 8); 201 | } 202 | 203 | .icons:hover{ 204 | color: rgb(246, 203, 8); 205 | } 206 | 207 | .icons { 208 | font-size: 24px; 209 | margin: 0 10px; 210 | } 211 | 212 | h4{ 213 | padding-left: 5px; 214 | } 215 | 216 | 217 | 218 | 219 | 220 | 221 | 222 | 223 | 224 | 225 | 226 | 227 | /* Menu Container */ 228 | 229 | .nav__list{ 230 | position: relative; 231 | left: 400px; 232 | top: 35px; 233 | width: 500px; 234 | height: 60px; 235 | display: flex; 236 | } 237 | 238 | .nav__list { 239 | margin: 0; 240 | padding: 0; 241 | list-style: none; 242 | flex-direction: row; 243 | justify-content: space-between; 244 | } 245 | 246 | .nav__item { 247 | margin-right: 20px; 248 | } 249 | 250 | .n_1, 251 | .n_2, 252 | .n_3{ 253 | color: white; 254 | } 255 | 256 | .n_1{ 257 | width: 10px; 258 | height: 10px; 259 | font-family: 'Josefin Sans', sans-serif; 260 | color: black; 261 | } 262 | 263 | .n_2{ 264 | width: 10px; 265 | height: 10px; 266 | font-family: 'Josefin Sans', sans-serif; 267 | color: black; 268 | } 269 | 270 | .n_3{ 271 | width: 10px; 272 | height: 10px; 273 | font-family: 'Josefin Sans', sans-serif; 274 | color: black; 275 | } 276 | 277 | /* nav items hover: */ 278 | 279 | .n_3:hover { 280 | background-color: yellow; 281 | color: white; 282 | } 283 | .n_1:hover { 284 | background-color: yellow; 285 | color: white; 286 | } 287 | .n_2:hover { 288 | background-color: yellow; 289 | color: white; 290 | } 291 | 292 | 293 | 294 | /* ================ LOGO ===================== */ 295 | 296 | 297 | /* Logo Flex Box */ 298 | 299 | .logo-page{ 300 | width:100px; 301 | height:90px; 302 | } 303 | 304 | /* Logo Container */ 305 | 306 | .nav_container{ 307 | height: 90px; 308 | position: fixed; 309 | top: 0; 310 | left: 0; 311 | right: 0; 312 | z-index: 1000; 313 | background-color: rgb(255, 255, 255); 314 | height: calc(var(--header-height) + 3.5rem); 315 | flex-direction: row; 316 | } 317 | 318 | /* Logo Container : */ 319 | 320 | .logo{ 321 | text-decoration: none; 322 | margin-left: 20px; 323 | display: flex; 324 | height: 90px; 325 | width: 100px; 326 | flex-direction: row; 327 | flex-flow: row wrap; 328 | flex-wrap: wrap; 329 | } 330 | 331 | 332 | 333 | 334 | 335 | -------------------------------------------------------------------------------- /Mini-Projet 1/HTML/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Morocco Tourisme 5 | 6 | 7 | 8 | 9 | 10 | type 11 | 12 | 13 |
14 | 15 | 16 | 17 | 39 | 40 | 41 | 42 |
43 |
44 |

Welcome To Morocco

45 | 46 |
47 |
48 |
49 |

Agadir

50 | 51 |

Agadir (ⴰⴳⴰⴷⵉⵔ) is a major city in Morocco , on the shore of the Atlantic Ocean near the foot of the Atlas Mountains, just north 52 | of the point where the Souss River flows into the ocean, 53 | and 509 kilometres (316 mi) south of Casablanca. Agadir is the capital of the Agadir Ida-U-Tanan Prefecture and of the Souss-Massa 54 | economic region. The majority of its inhabitants speak Standard Moroccan Amazigh, one of Morocco's two official languages. Agadir is one of the major urban centres of Morocco.

55 |
56 | Visiter Moi 57 |
58 |
59 |

Marrakech

60 | 61 |

Marrakech (ⵎⵕⵕⴰⴽⵛ) is the fourth largest city in the Kingdom of Morocco. It is one of the four Imperial cities of Morocco and is the capital of the Marrakesh-Safi region. The city is situated west of the foothills of the Atlas Mountains. Marrakesh is 580 km (360 mi) southwest of Tangier, 327 km (203 mi) southwest of the Moroccan capital of Rabat, 239 km (149 mi) south of Casablanca, and 246 km (153 mi) northeast of Agadir 62 | The region has been inhabited by Berber farmers since Neolithic times.

63 |
64 | Visiter Moi 65 |
66 |
67 |

Essaouira

68 | 69 |

Essaouira (ⵜⴰⵚⵚⵓⵔⵜ) known until the 1960s as Mogador, is a port city in the western Moroccan region of Marakesh-Safi, on the Atlantic coast. It has 77,966 inhabitants as of 2014. 70 | 71 | The foundation of the city of Essaouira was the work of the Moroccan 'Alawid sultan Mohammed bin Abdallah, who made an original experiment by entrusting it to several renowned architects in 1760, in particular Théodore Cornut and Ahmed al-Inglizi,who designed the city Walls.

72 |
73 | Visiter Moi 74 |
75 |
76 |

Tanger

77 | 78 |

Tanger (ⵟⴰⵏⵊⴰ) is a city in northwestern Morocco, on the coast of the Mediterranean Sea. The city is the capital of the Tanger-Tetouan-Al Hoceima region, as well as the Ṭanja-Aẓila Prefecture of Morocco. 79 | 80 | Many civilisations and cultures have influenced the history of Tangier, starting from before the 10th century BCE. Starting as a strategic Berber town and then a Phoenician trading centre, Tangier has been a nexus for many cultures to blend with each other.

81 |
82 | Visiter Moi 83 |
84 |
85 | 86 |
117 | 118 | 119 | 120 | 121 | 122 | --------------------------------------------------------------------------------