كيف اسوي نفس الصورة بـ 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>