كود انشاء خلفية جميلة للموقع HTML.CSS [Code create beautiful background for HTML.CSS website

0 104

  كود انشاء خلفية جميلة  للموقع في  HTML.CSS

اليكم كود انشاء خلفية شفافة و جميلة للموقع مع قائمة متجاوبة..ويمكنكم التعديل عليها
 
هكذا سوف تظهر معكم 
  1. قم بانشاء ملف HTML
  2. قم بانشاء ملف CSS وتاكد من ربطه في ملف HTML
كودHTML
<!DOCTYPE html>
<html lang=”en”>
<head>
  <title> index</title>
<link rel=”preconnect” href=”https://fonts.gstatic.com”>
<link href=”https://fonts.googleapis.com/css2?family=Poppins:wght@600&display=swap” rel=”stylesheet”>
<link rel=”stylesheet” href=”style.css”>
</head>
<body>
  
<header>
  <nav>
    <h1 class=”logo”>DUBAI</h1>
    <ul>
      <li><a href=”#” class=”active”>home</a></li>
      <li><a href=”#”>about</a></li>
      <li><a href=”#”>services</a></li>
      <li><a href=”#”>gallery</a></li>
      <li><a href=”#”>contact</a></li>
    </ul>
  </nav>
  <div class=”intro-content”>
    <h1>Welcome in  <span class=”highlight”>Dubai</span></h1>
    <button class=”btn”>See My Work</button>
  </div>
</header>
</body>
</html>
كودCSS
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: ‘Poppins’, sans-serif;
    background-color: #f1f1f1;
}
.highlight {
    color: #3079ed;
}
header {
    width: 100%;
    height: 90vh;
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(“arap4.jpg”);
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
}
header nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background-color: rgba(0, 0, 0, 0.7);
}
header nav .logo {
    text-transform: uppercase;
    color: #3079ed;
}
header nav ul {
    display: flex;
    list-style: none;
}
header nav ul li {
    margin-left: 30px;
}
header nav ul li a {
    text-decoration: none;
    text-transform: capitalize;
    color: #fff;
    font-size: 14px;
    transition: all 0.3s;
}
header nav ul li a.active,
header nav ul li a:hover {
    color: #3079ed;
}
.intro-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}
.intro-content h1 {
    font-size: 50px;
    text-transform: capitalize;
    color: #fff;
}
.intro-content .btn {
    margin-top: 15px;
    padding: 15px 40px;
    font-size: 14px;
    border: none;
    background-color: #3079ed;
    font-family: ‘Poppins’, sans-serif;
    cursor: pointer;
    color: #fff;
    transition: all 0.3s;
}
.intro-content .btn:hover {
    color: #3079ed;
    background-color: #fff;
}

يمكنكم تحميل الملفات كاملة عبر المديا فاير والتعديل عليها 

تحميل الان

يمكنكم ايضا  تحميل الملفات كاملة عبر قناتنا في التلكرام  والتعديل عليها 

تحميل الان

                 مشاريع html .css قد تعجبكم

تحميل موقع شخصي كامل

معاينة المشروع

انشاء ايقونة مشاركة عند الضغط عليها تظهر لك ايقونات مواقع التواصل الاجتماعي

معاينة المشروع

انشاء قائمة متجاوبة مع جميع الشاشات

معاينة المشروع

انشاء زر عند الظغط علية يظهر فيديو

معاينة المشروع

افضل كتب لتعلم برمجة الويب في اللغة العربية

معاينة المشروع

تحميل الوردبريس على جهازك واحترافة دون الحاجة الى استضافة ودومين

معاينة المشروع 

 

اترك رد

لن يتم نشر عنوان بريدك الإلكتروني.

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