كيف اسوي نفس الصورة بـ html وcss

صفيه الـ · 18 يوليو 2019

احتاج اسوي نفس الصورة ممكن احد يساعدني

MoJaffer · 18 يوليو 2019

مرحباً أخي أنت تحتاج لتكويد أو مصمم ويب لو صح التعبير ليقوم لك بالعمل

ستجد من يساعدك هناك في مستقل أو خمسات

Entesar Khaled · 19 يوليو 2019

أهلًا بك،

لون الخلفية المتدرج يمكن أن تضبطه من خلال القيمة gradiant، تخطيط الصفحة 3x3 حاويات يمكن أن يتم عبر الخاصية grid، الحدود المدورة لكل حاوية يمكن أن تُضبط عبر الخاصية border-radius، بالنسبة للأيقونات داخل كل حاوية يمكن أن تجد بعضهم وتحملهم كصور (في حال لا تريد استخدام bootstrap) وتدرجهم في حاويات تصميمك من خلال هذا الرابط، أو تبحث عنهم كصور من الأصل في محركات البحث (في حال لم تُعْطَهُم)، يمكن أن يكون الكود قريب من التالي.. ينقصك فقط إضافة الصور والنص أسفلهم

<!DOCTYPE html>
<html>
<head>
<style>
  .linear-gradient {
 height: 650px;
 background-color: #000066; 
 background-image: linear-gradient(#000066, #9999ff);  
}

body{
  background-repeat: no-repeat;
}

.grid-container {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: auto auto auto;
  padding: 10px;
}

.grid-item {
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 70px;
  font-size: 35px ;
  text-align: center;
  background-color: white;
  border-radius: 20px;
}
</style>
</head>
<body class="linear-gradient">
  <div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>  
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>  
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>  
</div>
</body>

كيف اسوي نفس الصورة بـ html وcss

السؤال

صفيه الـ

رابط هذا التعليق

شارك على الشبكات الإجتماعية

2 أجوبة على هذا السؤال

Recommended Posts

MoJaffer

رابط هذا التعليق

شارك على الشبكات الإجتماعية

Entesar Khaled

رابط هذا التعليق

شارك على الشبكات الإجتماعية

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية