كود تصميم لوحة إعلانية بسيطة بدون صور

  • بادئ الموضوع بادئ الموضوع يشهب
  • تاريخ البدء تاريخ البدء
  • المشاهدات المشاهدات 667 مشاهدة

يشهب

يشهب

عضو مميز
الكاتب
إنضم
19 مارس 2021
المشاركات
517
مستوى التفاعل
261
النقاط
0
العمر
34
الإقامة
مــ جمهورية ــصـــ العربية ــر
الجنس
بسم الله الرحمن الرحيم
السلام عليكم و رحمة الله و بركاته

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

للمشاهدة
https://codepen.io/KhaledDaif/full/yLgdxxV

الكود​
HTML: 
<link rel="preconnect" href="https://fonts.gstatic.com">

<link href="https://fonts.googleapis.com/css2?family=Lalezar&display=swap" rel="stylesheet">
<a style="text-decoration: none;" href="#"><p style="background:linear-gradient(30deg, #7c57a2, #13bdce);
  border-radius:0px;
  border: 1px solid #eee;
  box-shadow: -1px -1px 0px #aaa,
    1px 1px 0px #aaa,
    1px -1px 0px #aaa,
    -1px 1px 0px #aaa;
  height:60px;
  width:150px;
  margin:auto;
  text-align:center;
  line-height: 2;
  font-family: lalezar, tahoma;
  font-size: 16px;
  color:#eee;
  text-shadow: 1px 1px 0 #222;
  transition:0.2;">
  ضع إعلانك هنا
<br>150 X 60
  </p></a>
<br>
<a style="text-decoration: none;" href="#"><p style="background:linear-gradient(45deg, #ee4d74, #f58c58);
  border-radius:0px;
  border: 1px solid #eee;
  box-shadow: -1px -1px 0px #f58c58,
    1px 1px 0px #f58c58,
    1px -1px 0px #f58c58,
    -1px 1px 0px #f58c58;
  height:90px;
  width:728px;
  margin:auto;
  text-align:center;
  line-height: 2;
  font-family: lalezar, tahoma;
  font-size: 24px;
  color:#ffeeee;
  text-shadow: 2px 2px 0 #222;
  transition:0.2;">
  ضع إعلانك هنا
<br>728 X 90
  </p></a>

​
 
شكرا لك أخي الكريم وبارك الله فيك والله يعطيك العافية.

حياك الله.​
 
تصميم جميل
تسلم الايادي
 
يجب تسجيل الدخول أو التسجيل كي تتمكن من الرد هنا.
عودة
أعلى أسفل