From d12866cf9cada63dcaea3203f648e62588d05ab3 Mon Sep 17 00:00:00 2001 From: Abdul Kareem Date: Mon, 23 Mar 2026 01:29:39 +0300 Subject: [PATCH] update: add clickable phone and email contact cards --- index.html | 57 +++++++++++++++++++++---------- styles.css | 98 ++++++++++++++++++++++++++++++++++++++++++++++++++++-- 2 files changed, 134 insertions(+), 21 deletions(-) diff --git a/index.html b/index.html index cdc2dae..8ce8833 100644 --- a/index.html +++ b/index.html @@ -10,13 +10,18 @@ - -
- - -

احجز طاولتك بكل سهولة واحترافية

-

- منصة Tabeley هي الحل الذكي لحجز الطاولات في المطاعم والمقاهي. + +

+
+ + Tabeley +
+ + + +

احجز طاولتك بكل سهولة واحترافية

+

+ منصة Tabeley هي الحل الذكي لحجز الطاولات في المطاعم والمقاهي. اختر المكان المناسب، حدّد الوقت الذي يناسبك، وأكّد حجزك خلال ثوانٍ دون الحاجة إلى الاتصال أو الانتظار.

@@ -65,16 +70,32 @@
- -
-

تواصل معنا

-

البريد الإلكتروني: Tabeley0@gmail.com

-

رقم الهاتف: +963983233965

-

- - حسابنا على إنستغرام - -

+ +
+

تواصل معنا

+
+ + + + رقم الهاتف + +963983233965 + + + + + + + البريد الإلكتروني + Tabeley0@gmail.com + + +
+ +

+ + حسابنا على إنستغرام + +

@@ -90,4 +111,4 @@ - \ No newline at end of file + diff --git a/styles.css b/styles.css index eea229c..e967ba5 100644 --- a/styles.css +++ b/styles.css @@ -42,12 +42,34 @@ body { background: transparent; } -.logo { - width: 108px; - height: 108px; +.hero-brand { + display: inline-flex; + align-items: center; + gap: 14px; + margin-bottom: 22px; +} + +.brand-logo { + width: 64px; + height: 64px; border-radius: 999px; object-fit: cover; box-shadow: 0 8px 24px var(--shadow); +} + +.brand-name { + font-size: clamp(28px, 4vw, 42px); + font-weight: 700; + color: var(--text-main); + line-height: 1; +} + +.logo { + width: min(220px, 58vw); + height: auto; + border-radius: 28px; + object-fit: contain; + box-shadow: 0 8px 24px var(--shadow); margin-bottom: 18px; } @@ -160,6 +182,62 @@ body { margin-bottom: 8px; } +.contact-links { + width: min(760px, 100%); + margin: 0 auto 18px; + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 12px; +} + +.contact-link { + display: flex; + align-items: center; + justify-content: center; + gap: 14px; + padding: 16px 18px; + background: var(--surface); + border: 1px solid var(--border); + border-radius: 16px; + box-shadow: 0 6px 18px var(--shadow); + text-decoration: none; + transition: .2s ease; +} + +.contact-link:hover { + transform: translateY(-2px); + box-shadow: 0 10px 24px var(--shadow); +} + +.contact-icon { + width: 52px; + height: 52px; + display: inline-flex; + align-items: center; + justify-content: center; + border-radius: 999px; + background: var(--primary); + color: #fff; + font-size: 24px; + flex-shrink: 0; +} + +.contact-copy { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 2px; + color: var(--text-main); +} + +.contact-copy strong { + color: var(--primary); +} + +.contact-copy span { + color: var(--text-muted); +} + .contact a { color: var(--primary); font-weight: 700; @@ -226,6 +304,10 @@ footer { grid-template-columns: 1fr; } + .contact-links { + grid-template-columns: 1fr; + } + .hero { min-height: 62vh; } @@ -234,6 +316,16 @@ footer { font-size: 18px; } + .hero-brand { + gap: 10px; + margin-bottom: 18px; + } + + .brand-logo { + width: 54px; + height: 54px; + } + .btn, .contact input, .contact textarea {