• 0

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

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

PHOTO-2019-07-18-12-05-25.jpg

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


رابط هذه المساهمة
  • 0

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

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

 

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


رابط هذه المساهمة
  • 0

أهلًا بك،

لون الخلفية المتدرج يمكن أن تضبطه من خلال القيمة 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>

 

1 شخص أعجب بهذا

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


رابط هذه المساهمة

يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن