diff --git a/ExpoArabic-Bold.otf b/ExpoArabic-Bold.otf new file mode 100644 index 0000000..4ffef76 Binary files /dev/null and b/ExpoArabic-Bold.otf differ diff --git a/ExpoArabic-Book.ttf b/ExpoArabic-Book.ttf new file mode 100644 index 0000000..a8c9ae8 Binary files /dev/null and b/ExpoArabic-Book.ttf differ diff --git a/ad.css b/ad.css new file mode 100644 index 0000000..2e2f1b8 --- /dev/null +++ b/ad.css @@ -0,0 +1,91 @@ +@font-face { + font-family: expofontBold; + src: url('./ExpoArabic-Bold.otf'); + } +@font-face { + font-family: expofont; + src: url('./ExpoArabic-Book.ttf'); + } +#ad { + width: 100%; + display: block; + height: max-content; + margin-top: 80px; + text-align: center; + position: relative; +} +#ad #ad-img { + width: 387.71px; + height: 193px; + margin: 5px; + margin-bottom: 15px; +} +#ad #ad-title, +#ad #ad-description +{ + margin: 0; + line-height: 29px; + letter-spacing: 0px; +} + +#ad #ad-title +{ + color: rgba(25, 37, 64, 1); + font-family: expofontBold; + font-size: 24px; +} + +#ad #ad-description +{ + color: #666666; + font-family: expofont; + font-size: 12px; +} + +#ad #subdiv +{ + width: 165.03px; + height: 119px; + position: absolute; + top: 70px; + right: 40px; + background: rgba(25, 37, 64, 0.5); + border-radius: 10px; + backdrop-filter: blur(5px); + text-align: left; +} + +#ad #subdiv > p +{ + color: rgb(255, 255, 255); + /* background-color: red; */ + font-family: expofont; + font-weight: 600; + font-size: 10px; + margin: 0; + padding: 12px 0px 2px 10px; +} + +#ad #subdiv > h4 + { + margin: 0; + padding: 6px 0px 0px 8px; + color: rgba(235, 175, 41, 1); + font-family: expofontBold; + font-size: 18px; + line-height: 24px; + margin-bottom: 5px; +} + +#ad #subdiv > #contact-now +{ + text-decoration: none; + background-color: rgba(235, 175, 41, 1); + color: rgba(25, 37, 64, 1); + height: 17px; + margin-inline: 25px; + padding: 2px 20px; + font-family: expofont; + font-weight: 700; + font-size: 10px; +} diff --git a/filter.css b/filter.css new file mode 100644 index 0000000..e69de29 diff --git a/images/1-1.png b/images/1-1.png new file mode 100644 index 0000000..9c7ca66 Binary files /dev/null and b/images/1-1.png differ diff --git a/images/1-2.png b/images/1-2.png new file mode 100644 index 0000000..f873ff8 Binary files /dev/null and b/images/1-2.png differ diff --git a/images/1-3.png b/images/1-3.png new file mode 100644 index 0000000..900b999 Binary files /dev/null and b/images/1-3.png differ diff --git a/images/1-4.png b/images/1-4.png new file mode 100644 index 0000000..9c7ca66 Binary files /dev/null and b/images/1-4.png differ diff --git a/images/1-5.png b/images/1-5.png new file mode 100644 index 0000000..900b999 Binary files /dev/null and b/images/1-5.png differ diff --git a/images/1-6.png b/images/1-6.png new file mode 100644 index 0000000..900b999 Binary files /dev/null and b/images/1-6.png differ diff --git a/images/1-7.png b/images/1-7.png new file mode 100644 index 0000000..f873ff8 Binary files /dev/null and b/images/1-7.png differ diff --git a/images/1-8.png b/images/1-8.png new file mode 100644 index 0000000..9c7ca66 Binary files /dev/null and b/images/1-8.png differ diff --git a/images/1-9.png b/images/1-9.png new file mode 100644 index 0000000..f873ff8 Binary files /dev/null and b/images/1-9.png differ diff --git a/images/1.png b/images/1.png new file mode 100644 index 0000000..900b999 Binary files /dev/null and b/images/1.png differ diff --git a/images/TEXTS.png b/images/TEXTS.png new file mode 100644 index 0000000..1684d1d Binary files /dev/null and b/images/TEXTS.png differ diff --git a/images/Vector-1.png b/images/Vector-1.png new file mode 100644 index 0000000..93416d3 Binary files /dev/null and b/images/Vector-1.png differ diff --git a/images/Vector.png b/images/Vector.png new file mode 100644 index 0000000..0275ba8 Binary files /dev/null and b/images/Vector.png differ diff --git a/images/Vector.svg b/images/Vector.svg new file mode 100644 index 0000000..7ec33e7 --- /dev/null +++ b/images/Vector.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/dubai-number-plate-auction 2.png b/images/dubai-number-plate-auction 2.png new file mode 100644 index 0000000..bc81d6f Binary files /dev/null and b/images/dubai-number-plate-auction 2.png differ diff --git a/images/iconamoon_menu-burger-horizontal-fill.svg b/images/iconamoon_menu-burger-horizontal-fill.svg new file mode 100644 index 0000000..9e34f24 --- /dev/null +++ b/images/iconamoon_menu-burger-horizontal-fill.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/image 1.png b/images/image 1.png new file mode 100644 index 0000000..75294c4 Binary files /dev/null and b/images/image 1.png differ diff --git a/images/logo.svg b/images/logo.svg new file mode 100644 index 0000000..8438ddd --- /dev/null +++ b/images/logo.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/images/pepicons-pencil_motorcycle.svg b/images/pepicons-pencil_motorcycle.svg new file mode 100644 index 0000000..39df5ab --- /dev/null +++ b/images/pepicons-pencil_motorcycle.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/index.php b/index.php new file mode 100644 index 0000000..f1899a7 --- /dev/null +++ b/index.php @@ -0,0 +1,107 @@ + + + + + + + + + + + + Car Services + + + + +
+ أرقام دراجات + أرقام سيارات +
+
+ + +
+
+
+ first_car +
+
+
+

فئة : خصوصي

+

H : كود

+

رقم : 73774

+
+
+

السعر

+

10.900

+

درهم

+
+
+ star +
+
+ راسلنا واتساب + اتصل بنا +
+
+
+
+ + +
+ + + \ No newline at end of file diff --git a/mediaqueries.css b/mediaqueries.css new file mode 100644 index 0000000..df60343 --- /dev/null +++ b/mediaqueries.css @@ -0,0 +1,7 @@ +@media screen and (min-width: 790px) { + body, .navbar { + width: 428px; + margin-inline: auto; + } + +} \ No newline at end of file diff --git a/navbar.css b/navbar.css new file mode 100644 index 0000000..ee018bf --- /dev/null +++ b/navbar.css @@ -0,0 +1,32 @@ +.navbar +{ + display: block; + position: fixed; + top: 0px; + background-color: rgba(239, 233, 221, 1); + z-index: 999; + width: 100%; + height: 80px; +} +.navbar .nav +{ + width: 100%; + display: flex; + justify-content: space-between; +} +.navbar .nav #logo +{ + width: 112px; + height: 56px; + position: relative; + left: 20px; + top: 10px; +} + +.navbar .nav #menu { + width: 29px; + aspect-ratio: 1/1; + position: relative; + top: 10px; + right: 20px; +} \ No newline at end of file diff --git a/status.css b/status.css new file mode 100644 index 0000000..56ae13e --- /dev/null +++ b/status.css @@ -0,0 +1,42 @@ +.exclusive-price::after +{ + position: absolute; + content: 'سعر مميز'; + background: rgba(66, 255, 0, 1); + font-family: expofont; + font-weight: 600; + font-size: 12px; + text-align: center; + left: 7.5px; + top: 60px; + padding: 8px 12px; + width: max-content; +} +.free-transfer-fees::after +{ + position: absolute; + content: 'رسوم تحويل مجانية'; + background: rgba(235, 175, 41, 1); + font-family: expofont; + font-weight: 600; + font-size: 12px; + text-align: center; + left: 7.5px; + top: 80px; + padding: 6px; + width: max-content; +} +.new::before +{ + position: absolute; + background: rgba(235, 175, 41, 1); + font-family: expofont; + font-weight: 600; + font-size: 12px; + text-align: center; + left: 7.5px; + top: 28px; + padding-block: 6px; + width: 60px; + content: 'جديد'; +} \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..82f11c4 --- /dev/null +++ b/style.css @@ -0,0 +1,160 @@ +html, +body { + margin: 0; + padding: 0; + background-color: rgba(239, 233, 221, 1); + scroll-behavior: smooth; +} + +@font-face { + font-family: expofont; + src: url('./ExpoArabic-Book.ttf'); + } + +.container +{ + display: block; + margin-top: 20px; +} +.card +{ + margin: 15px 0 20px; + width: 380px; + display: flex; + justify-content: center; + position: sticky; + top: 80px; + margin-inline: auto; + padding-block: 8px; + padding-bottom: 180px; + border-radius: 23px; + background-color: rgba(255, 255, 255, 1); +} + +.card .car-details +{ + width: 94%; + position: absolute; + bottom: 20px; + display: flex; + text-align: end; + justify-content: space-around; + flex-direction: row-reverse; + flex-wrap: wrap; + font-family: expofont; + font-size: 16px; +} + +.card .car-details .details +{ + width: 40%; + font-weight: 900; +} +.card .car-details .price +{ + width: 40%; + font-family: expofont; + font-weight: 800; +} + +.card .car-details .price .currency +{ + margin: 0; + font-weight: 900; + font-size: 22px; +} + +.card .car-details .star +{ + position: relative; + width: 5%; +} + +.card .car-details .star img +{ + position: relative; + top:15px; +} + +.contact, +#numbers + { + width: 90%; + margin-inline: auto; + display: flex; + justify-content: space-evenly; +} +.contact .call-us, +.contact .chat-with-us +{ + text-decoration: none; + display: flex; + align-items: center; + justify-content: center; + width: 45%; + height: 38px; + border-radius: 4px; + background: rgba(25, 37, 64, 1); + color: white; + font-family: expofont; + font-weight: 500; +} + +.contact .call-us::before, +.contact .chat-with-us::before +{ + position: relative; + right: 8px; + top:2.2px +} + +.contact .call-us::before +{ + content: url('./images/Vector.png'); +} +.contact .chat-with-us::before +{ + content: url('./images/Vector-1.png'); +} + +#numbers { + margin-block: 20px; +} +#numbers #car-numbers, +#numbers #bike-numbers +{ + text-decoration: none; + display: flex; + align-items: center; + justify-content: center; + width: 45%; + height: 38px; + border-radius: 4px; + background: #192540; + color: #EBAF29; + font-family: expofont; + font-weight: 500; + font-size: 15px; +} + +#numbers #car-numbers::before, +#numbers #bike-numbers::before +{ + position: relative; + right: 8px; + top:1px +} + +#numbers #car-numbers::before +{ + content: url('./images/Vector.svg'); + width: 20px; + height: 17px; +} + +#numbers #bike-numbers::before +{ + content: url('./images/pepicons-pencil_motorcycle.svg'); + width: 20px; + aspect-ratio: 1/1; +} \ No newline at end of file