تقنيات تخطيط CSS

في هذا القسم ، سوف نستكشف العديد من تقنيات تخطيط CSS التي ستساعدك على إنشاء تصميمات ويب متعددة الاستخدامات وسريعة الاستجابة . سنناقش التدفق الطبيعي ، وأنظمة تحديد المواقع ، و Flexbox ، و CSS Grid ، إلى جانب الخصائص الأساسية والأمثلة لكل تقنية.

التدفق الطبيعي

التدفق العادي هو آلية التخطيط الافتراضية في CSS. في هذا التدفق ، تتراكم العناصر على مستوى الكتلة عموديًا ، بينما تتدفق العناصر المضمنة أفقيًا. التدفق الطبيعي هو الأساس الذي تُبنى عليه تقنيات التخطيط الأخرى.

مخططات تحديد المواقع

تسمح لك أنظمة تحديد المواقع في CSS بالتحكم في موضع العناصر على الصفحة بدقة أكبر. مخططات تحديد المواقع الأساسية هي:

ثابتة

هذا هو الوضع الافتراضي ، حيث يتم وضع العناصر وفقًا للتدفق الطبيعي.

نسبي

من خلال تحديد الموضع النسبي ، يمكن إزاحة العناصر من موضعها الأصلي في التدفق الطبيعي دون التأثير على العناصر الأخرى.

مثال:

.relative {
  position: relative;
  top: 10px;
  left: 20px;
}

مطلق

يزيل تحديد الموضع المطلق العناصر من التدفق الطبيعي ويضعها بالنسبة إلى أقرب سلف لها موضعًا أو ، في حالة عدم وجودها ، الكتلة الأولية المحتوية.

مثال:

.absolute {
  position: absolute;
  top: 10px;
  right: 20px;
}

مُثَبَّت

يشبه تحديد الموضع الثابت تحديد الموضع المطلق ، ولكن يتم وضع العناصر بالنسبة إلى إطار العرض ، وتظل ثابتة في مكانها حتى عند تمرير الصفحة.

مثال:

.fixed {
  position: fixed;
  bottom: 10px;
  right: 20px;
}

لزج

الموضع الثابت هو مزيج من الموضع النسبي والثابت ، مما يتسبب في تثبيت عنصر في مكانه ضمن عتبة محددة أثناء التمرير.

مثال:

.sticky {
  position: sticky;
  top: 10px;
}

فليكس بوكس

Flexbox هي تقنية تخطيط CSS حديثة تعمل على تبسيط إنشاء التخطيطات المعقدة ، مما يسهل محاذاة العناصر وترتيبها وحجمها داخل الحاوية.

عرض

لإنشاء حاوية مرنة ، اضبط العرض على flex أو inline-flex .

مثال:

.flex-container {
  display: flex;
}

الاتجاه المرن

خاصية flex-direction في اتجاه المحور الرئيسي ، وتحدد كيفية وضع العناصر المرنة داخل الحاوية.

مثال:

.flex-container {
  display: flex;
  flex-direction: row;
}

تبرير المحتوى

خاصية justify-content بمحاذاة العناصر المرنة على طول المحور الرئيسي.

مثال:

.flex-container {
  display: flex;
  justify-content: space-between;
}

محاذاة العناصر

خاصية محاذاة العناصر بمحاذاة العناصر المرنة على طول المحور المتقاطع.

مثال:

.flex-container {
  display: flex;
  align-items: center;
}

التفاف المرن

خاصية الالتفاف المرن في ما إذا كان يجب التفاف العناصر المرنة على أسطر متعددة أم لا.

مثال:

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

Flex-Grow ، Flex-shrink ، Flex-base

تتحكم هذه الخصائص في كيفية نمو العناصر المرنة أو تقليصها أو الحفاظ عليها بحجمها الأولي داخل الحاوية.

مثال:

.flex-item {
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: 100px;
}

شبكة CSS

CSS Grid هي تقنية تخطيط قوية أخرى تمكنك من إنشاء تخطيطات معقدة ثنائية الأبعاد باستخدام الصفوف والأعمدة.

عرض

لإنشاء حاوية شبكة ، قم بتعيين العرض إلى الشبكة أو الشبكة المضمنة .

مثال:

.grid-container {
  display: grid;
}

أعمدة قالب الشبكة وصفوف قالب الشبكة

تحدد هذه الخصائص أحجام الأعمدة والصفوف في الشبكة.

مثال:

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
}

فجوة الشبكة

فجوة الشبكة المسافة بين عناصر الشبكة ، أفقيًا وعموديًا.

مثال:

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}

شبكة التدفق التلقائي

خاصية network-auto-flow في كيفية وضع عناصر الشبكة في الشبكة إذا لم يكن لها موضع واضح.

مثال:

.grid-container {
  display: grid;
  grid-auto-flow: row;
}

بداية عمود الشبكة ونهاية عمود الشبكة وشبكة بداية الصف ونهاية صف الشبكة

تحدد هذه الخصائص نقطتي البداية والنهاية لعناصر الشبكة في الشبكة.

مثال:

.grid-item {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
}

منطقة الشبكة

منطقة الشبكة اختصارًا لتحديد نقطتي البداية والنهاية لعنصر الشبكة في إعلان واحد.

مثال:

.grid-item {
  grid-area: 1 / 1 / 2 / 3;
}

تصميم ويب سريع الاستجابة

في هذا القسم ، سوف نستكشف الجوانب الأساسية لتصميم الويب ، والذي يمكّن موقع الويب الخاص بك من التكيف بسلاسة مع أحجام الشاشات والأجهزة المختلفة. سنناقش العلامة الوصفية لإطار العرض ، والاستعلامات عن الوسائط ، والتنسيقات المرنة ، وإيجابيات وسلبيات مناهج تصميم الهاتف أولاً في مقابل سطح المكتب أولاً.

علامة تعريف منفذ العرض

تتحكم العلامة الوصفية لإطار العرض في كيفية عرض موقع الويب الخاص بك على الأجهزة المختلفة. إنه ضروري لإنشاء تصميمات سريعة الاستجابة تبدو رائعة على جميع أحجام الشاشات.

مثال:

<meta name="viewport" content="width=device-width, initial-scale=1">

تساؤلات الإعلام

تعد استعلامات الوسائط إحدى ميزات CSS القوية التي تتيح لك تطبيق أنماط بناءً على خصائص جهاز المستخدم ، مثل حجم الشاشة ودقتها.

أفضل الممارسات

عند استخدام استعلامات الوسائط ، من الضروري استهداف أحجام الشاشات ونقاط التوقف الأكثر شيوعًا. تجنب استخدام نقاط الفصل الخاصة بالجهاز وبدلاً من ذلك ، ركز على مظهر المحتوى.

أحجام الشاشات الأكثر شيوعًا

بعض نقاط التوقف الشائعة للتصميم سريع الاستجابة هي:

• الجوال: 480 بكسل
• الجهاز اللوحي: 768 بكسل
• سطح المكتب: 1024 بكسل
• سطح المكتب الكبير: 1200 بكسل

مثال:

@media (max-width: 480px) {
  /* Mobile styles */
}

@media (min-width: 481px) and (max-width: 768px) {
  /* Tablet styles */
}

@media (min-width: 769px) and (max-width: 1024px) {
  /* Desktop styles */
}

@media (min-width: 1025px) {
  /* Large Desktop styles */
}

تخطيطات السوائل

تستخدم التخطيطات الانسيابية وحدات نسبية (النسب المئوية أو ems أو rems أو وحدات منفذ العرض) بدلاً من الوحدات الثابتة (وحدات البكسل) لإنشاء تصميمات سريعة الاستجابة تتكيف مع أحجام الشاشة المختلفة.

مقارنة بين الطريقة الجديدة والقديمة للاستجابة

الطريقة القديمة: التخطيطات الثابتة

• استخدم الحاويات ذات العرض الثابت والقياسات القائمة على البكسل.
• أقل مرونة وأصعب في التكيف مع أحجام الشاشات المختلفة.

طريقة جديدة: تخطيطات السوائل

• استخدم الوحدات النسبية والحاويات المرنة.
• يمكنك التكيف بسهولة مع أحجام الشاشات المختلفة ، مما يخلق تجربة مستخدم أفضل.

مثال:

.container {
  /* Old way: fixed layout */
  width: 960px;

  /* New way: fluid layout */
  width: 80%;
  max-width: 1200px;
}

Mobile-First مقابل Desktop-First Design

عند تصميم موقع ويب سريع الاستجابة ، يمكنك الاختيار بين نهج الجوال أولاً أو نهج سطح المكتب أولاً.

التصميم الأول للجوال

• ابدأ بأصغر حجم للشاشة وحسّن التصميم تدريجيًا للشاشات الأكبر حجمًا.
• يعطي الأولوية لمستخدمي الهاتف المحمول ويضمن لهم تجربة أفضل.

مثال:

/* Mobile styles */
body {
  font-size: 14px;
}

/* Desktop styles */
@media (min-width: 1024px) {
  body {
    font-size: 16px;
  }
}

سطح المكتب أول تصميم

• ابدأ بأكبر حجم للشاشة وقم بتطبيق الأنماط على الشاشات الأصغر باستخدام استعلامات الوسائط.
• يمكن أن يكون أقل كفاءة لمستخدمي الأجهزة المحمولة ، حيث قد يحتاجون إلى تنزيل أنماط غير ضرورية.

/* Desktop styles */
body {
  font-size: 16px;
}

/* Mobile styles */
@media (max-width: 1023px) {
  body {
    font-size: 14px;
  }
}

الطباعة وخطوط الويب

في هذا القسم ، سنتعمق في عالم الطباعة في تصميم الويب ، ونغطي خصائص CSS الأساسية ، وكيفية استخدام الخطوط المخصصة مع Google Fonts و @ font-face ، وكيفية تنفيذ أيقونات الخطوط للحصول على تجربة أكثر جاذبية وسهولة.

خصائص طباعة CSS

يوفر CSS العديد من الخصائص لنمط النص على صفحات الويب الخاصة بك ، مثل مجموعة الخطوط وحجم الخط ووزن الخط وارتفاع الخط. دعنا نستكشف بعض هذه الخصائص بأمثلة.

/* Basic typography properties */
body {
  font-family: Arial, sans-serif;
  font-size: 16px;
  font-weight: normal;
  line-height: 1.5;
}

h1 {
  font-size: 32px;
  font-weight: bold;
}

خطوط جوجل

تعد Google Fonts مكتبة مجانية لخطوط الويب التي يمكنك دمجها بسهولة في موقع الويب الخاص بك. إليك كيفية استخدام Google Font:

1. قم بزيارة Google Fonts وحدد الخط.
2. انسخ علامة الارتباط المتوفرة وأضفها إلى رأس ملف HTML الخاص بك.
3. استخدم عائلة الخطوط في CSS الخاص بك.

مثال HTML:

<head>
  ...
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap">
</head>

مثال CSS:

body {
  font-family: 'Roboto', sans-serif;
}

@ font-face

تتيح لك القاعدة @ font-face استخدام الخطوط المخصصة عن طريق تحديد عائلة الخطوط والإشارة إلى موقع ملف الخط.

مثال CSS:

@font-face {
  font-family: 'CustomFont';
  src: url('fonts/CustomFont-Regular.woff2') format('woff2'),
       url('fonts/CustomFont-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

body {
  font-family: 'CustomFont', sans-serif;
}

أيقونات الخط

أيقونات الخطوط هي أيقونات قائمة على المتجهات يمكن تصميمها باستخدام CSS ، مما يجعلها قابلة للتخصيص بدرجة عالية ويمكن الوصول إليها. تتضمن مكتبات أيقونات الخطوط الشائعة Font Awesome و Material Icons و Ionicons.

مثال (استخدام Font Awesome):

لغة البرمجة:

<head>
  ...
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
  ...
  <i class="fas fa-heart"></i>
</body>

CSS:

.fas {
  font-size: 24px;
  color: red;
}

فيما يلي بعض النصائح الإضافية وخصائص CSS الشائعة لتحسين أسلوب الطباعة وتحسين قابلية القراءة على صفحات الويب الخاصة بك.

محاذاة النص : تُستخدم هذه الخاصية لمحاذاة النص داخل الحاوية الخاصة به. يمكن أن تكون القيم يسارًا أو يمينًا أو مركزًا أو ضبط.

p {
  text-align: justify;
}

زخرفة النص : تضيف هذه الخاصية خطوطًا زخرفية إلى النص ، مثل التسطير أو الخط العلوي أو الخط الفاصل أو لا شيء.

a {
  text-decoration: none;
}

تحويل النص : تسمح لك هذه الخاصية بتغيير حالة النص ، مثل الأحرف الكبيرة أو الصغيرة أو الأحرف الكبيرة (الحرف الأول من كل كلمة).

h2 {
  text-transform: uppercase;
}

تباعد الأحرف : تقوم هذه الخاصية بضبط المسافة بين الأحرف في النص. يقبل القيم الموجبة أو السلبية.

h1 {
  letter-spacing: 2px;
}

تباعد الكلمات : تضبط هذه الخاصية المسافة بين الكلمات في النص. يقبل القيم الموجبة أو السلبية.

p {
  word-spacing: 1px;
}

اللون : تحدد هذه الخاصية لون النص. استخدم قيم الألوان السداسية العشرية أو RGB أو المسماة.

p {
  color: #333;
}

نمط الخط : تحدد هذه الخاصية نمط الخط ، مثل مائل أو عادي.

em {
  font-style: italic;
}

المسافة البيضاء : تتحكم هذه الخاصية في كيفية معالجة المسافات البيضاء وفواصل الأسطر داخل النص. تتضمن القيم عادي ، الآن ، ما قبل ، خط مسبق ، التفاف مسبق.

pre {
  white-space: pre;
}

ظل النص : تضيف هذه الخاصية ظلًا إلى النص. يمكنك تحديد الإزاحة الأفقية والرأسية ونصف قطر التمويه واللون.

h1 {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

متغير الخط : تُستخدم هذه الخاصية لتعيين الأحرف الاستهلالية الصغيرة ، حيث يتم استبدال الأحرف الصغيرة بأحرف كبيرة أصغر.

h3 {
  font-variant: small-caps;
}

المؤثرات البصرية CSS

في هذا القسم ، سنتعمق في التأثيرات المرئية المختلفة في CSS ، بما في ذلك الخلفيات والتدرجات والظلال والمرشحات. ستتعلم كيفية تطبيق هذه التأثيرات لتحسين جماليات موقع الويب الخاص بك وإنشاء تصميمات جذابة.

الخلفيات

تلعب الخلفيات دورًا مهمًا في تصميم الويب. باستخدام CSS ، يمكنك تعيين ألوان الخلفية والصور وحتى إنشاء خلفيات متعددة لعنصر ما. وهنا بعض الأمثلة:

/* Background color */
div {
  background-color: #f0f0f0;
}

/* Background image */
body {
  background-image: url('images/background.jpg');
  background-repeat: no-repeat;
  background-size: cover;
}

/* Multiple backgrounds */
header {
  background-image: url('images/overlay.png'), url('images/header.jpg');
  background-repeat: no-repeat, no-repeat;
  background-size: cover, cover;
}

التدرجات

تضيف التدرجات عمقًا واهتمامًا بصريًا للخلفيات. يوفر CSS تدرجات خطية وشعاعية. إليك كيفية إنشائها:

/* Linear gradient */
div {
  background-image: linear-gradient(45deg, red, blue);
}

/* Radial gradient */
div {
  background-image: radial-gradient(circle, yellow, green);
}

الظلال

يمكن أن تخلق الظلال إحساسًا بالعمق وتجعل العناصر بارزة. هناك نوعان من الظلال: ظل الصندوق وظل النص.

/* Box shadow */
div {
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
}

/* Text shadow */
h1 {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

المرشحات

تعد المرشحات تأثيرات قوية يمكن تطبيقها على الصور والخلفيات وحتى النصوص. تتضمن بعض المرشحات الشائعة التمويه والسطوع والتباين وتدرج الرمادي والبني الداكن.

/* Blur filter */
img {
  filter: blur(5px);
}

/* Grayscale and brightness filter */
div {
  filter: grayscale(100%) brightness(150%);
}

انتقالات CSS والرسوم المتحركة

في هذا القسم ، سوف نستكشف العالم المثير لتحولات CSS والرسوم المتحركة للإطار الرئيسي ، والتي تمكنك من إنشاء تجارب تفاعلية وجذابة على صفحات الويب الخاصة بك. دعنا نتعمق في أساسيات كلتا التقنيتين ونلقي نظرة على بعض الأمثلة التي توضح قوتهما.

انتقالات CSS

تتيح لك الانتقالات تغيير قيم خصائص CSS بسلاسة خلال مدة محددة ، مما يمنح عناصر صفحتك إحساسًا بالحركة والتفاعل. لإنشاء انتقال ، ستحتاج إلى ثلاثة أشياء: خاصية CSS للتحريك ، والمدة ، ووظيفة التوقيت.

فيما يلي مثال بسيط للانتقال المطبق على الزر:

لغة البرمجة:

<button class="transition-button">Hover Me</button>

CSS:

.transition-button {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease-in-out;
}

.transition-button:hover {
  background-color: red;
}

في هذا المثال ، أنشأنا انتقالًا لخاصية لون الخلفية . عندما تحوم فوق الزر ، يتغير لون الخلفية بسلاسة من اللون الأزرق إلى الأحمر خلال 0.3 ثانية ، مع وظيفة توقيت الدخول والخروج بسهولة.

الرسوم المتحركة CSS Keyframe

توفر الرسوم المتحركة للإطارات الرئيسية مزيدًا من التحكم في الرسوم المتحركة من خلال السماح لك بتحديد إطارات مفاتيح معينة بمجموعتها الخاصة من خصائص CSS. باستخدام keyframes ، يمكنك إنشاء رسوم متحركة معقدة تتضمن عدة خطوات وخصائص.

فيما يلي مثال بسيط على رسم متحرك للكرة المرتدة باستخدام الإطارات الرئيسية:

لغة البرمجة:

<div class="ball"></div>

CSS:

.ball {
  width: 50px;
  height: 50px;
  background-color: blue;
  border-radius: 50%;
  position: absolute;
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-100px);
  }
}

في هذا المثال ، أنشأنا متحركًا للارتداد باستخدام keyframes . تتحرك الكرة لأعلى ولأسفل بسلاسة ، مع تغيير قيمة translateY بنسب مختلفة للإطار الرئيسي (0٪ ، 50٪ ، 100٪).

تحسين الأداء

يمكن أن تكون الرسوم المتحركة كثيفة الاستخدام للموارد ، لذلك من الضروري تحسينها للحصول على أداء أفضل. في تحريك الخصائص التي لا تؤدي إلى تشغيل التخطيط أو الطلاء ، مثل التحويل والعتامة . يمكن معالجة هذه الخصائص بواسطة وحدة معالجة الرسومات ، مما يضمن رسوم متحركة أكثر سلاسة.

الآن بعد أن أصبح لديك فهم قوي لتحولات CSS والرسوم المتحركة للإطارات الرئيسية ، يمكنك البدء في تجربة هذه التقنيات لإنشاء تجارب تفاعلية وجذابة بصريًا على صفحات الويب الخاصة بك. تذكر إبقاء الرسوم المتحركة الخاصة بك سلسة وتحسين الأداء ، حتى يتمكن زوار موقعك من الاستمتاع بتجربة تصفح سلسة.

مثال الصورة الكبيرة

الآن دعنا ندمج جميع خصائص وتقنيات وميزات CSS المختلفة التي تمت مناقشتها في هذه المقالة:

لغة البرمجة:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="styles.css">
  <title>CSS Showcase</title>
</head>
<body>
  <header>
    <nav>
      <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#services">Services</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </nav>
  </header>

  <section id="home">
    <h1>Welcome to Our CSS Showcase</h1>
    <p>Experience the beauty and power of CSS.</p>
  </section>

  <section id="about">
    <h2>About Us</h2>
    <p>We're a team of designers and developers who love creating beautiful websites using CSS.</p>
  </section>

  <section id="services">
    <h2>Our Services</h2>
    <ul>
      <li>
        <h3>Responsive Web Design</h3>
        <p>Our designs adapt to any screen size, ensuring a great user experience on all devices.</p>
      </li>
      <li>
        <h3>Typography and Web Fonts</h3>
        <p>Enhance your website's readability and visual appeal with custom fonts and styles.</p>
      </li>
      <li>
        <h3>CSS Transitions and Animations</h3>
        <p>Add interactivity and visual effects to your website with smooth animations.</p>
      </li>
    </ul>
  </section>

  <section id="contact">
    <h2>Contact Us</h2>
    <p>Have a project in mind? Get in touch with us!</p>
    <button>Contact Us</button>
  </section>

  <footer>
    <p>© 2023 CSS Showcase. All rights reserved.</p>
  </footer>
</body>
</html>

CSS:

/* General Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Roboto', sans-serif;
  line-height: 1.6;
  background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
}

/* Header */
header {
  background: rgba(0, 0, 0, 0.1);
  position: fixed;
  width: 100%;
  padding: 1rem;
}

nav ul {
  display: flex;
  justify-content: flex-end;
  list-style-type: none;
}

nav ul li {
  margin-left: 1rem;
}

nav ul li a {
  text-decoration: none;
  color: white;
  transition: color 0.3s ease-in-out;
}

nav ul li a:hover {
  color: #84fab0;
}

/* Sections */
section {
  height: 100vh;
  padding: 4rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: white;
}

section#home {
  background-image: url('https://source.unsplash.com/random?1920x1080');
  background-size: cover;
  background-position: center;
}

section#about,
section#services,
section#contact {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(5px);
  border-radius: 10px;
  margin-top: 4rem;
}

h1,
h2,
h3 {
  margin-bottom: 1rem;
}

p {
  margin-bottom: 2rem;
}

ul {
  list-style-type: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 2rem;
}

ul li {
  flex: 1;
  max-width: 300px;
  margin: 1rem;
}

button {
  padding: 1rem 2rem;
  border: none;
  border-radius: 5px;
  background: #84fab0;
  color: white;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.3s ease-in-out;
}

button:hover {
  background: #8fd3f4;
}

/* Footer */
footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.2);
  padding: 1rem;
  text-align: center;
  color: white;
}

@media (max-width: 768px) {
nav ul {
  flex-direction: column;
  align-items: flex-end;
}

nav ul li {
  margin-bottom: 0.5rem;
}

ul li {
  margin-bottom: 1rem;
}
 

في هذا المثال ، تتضمن هذه الصفحة رأسًا ثابتًا وخلفية متدرجة خطية وتخطيط فليكس بوكس ​​وخط مخصص وانتقالات CSS عند التمرير واستعلام وسائط لاستجابة الأجهزة المحمولة.

التعليمات