فاصلة
  • TUTORIAL
  • ?
    : ترتيب الدرس
  • 3
    عدد الدروس
  • ?
    أخر تحديث

ماكدونالدز لوجو عن طريق لغة CSS

عالم تصميم وبرمجة المواقع الإلكترونية هو عالم واسع جدا ينقسم إلي العديد من الفروع, ومنا ما هو مرئي للمستخدم ويسمي بتصميم الموقع front-end ومنها ما هو غير مرئي للمستخدم يسمي ببرمجة المواقع back-end . وفي هذا القسم سنتعرف علي الكثير من أستخدامات لغات تصميم المواقع ونتعرف علي طريقة استخدامها بأنشاء تصاميم مختلفة منها ما هو تقليدي ومنها ما هو غير تقليدي . وفائدة التطبيقات هو الوصول إلي درجة تمكن عالية من أستخدام أكواد لغات تصميم المواقع htmlو css.

كود الــ HTML

 <!DOCTYPE html>
<html>
<head>
<title>ماكدونالدز</title>
</head>
<body>
<div class="contener">

كود الــ CSS

body {
 margin: 0;
 padding: 0;
}
.contener
 {   
display: flex;
align-items: center;
justify-content: center;
}
.logo
{height: 200px;
overflow: hidden;
margin-top: 100px;
}
.logo div
{   
display: inline-block;
margin: 0;   
padding: 0;
}
.logo .right
{   
height: 400px;   
width: 130px;   
background-color: #FFCD00;   
border-radius: 100% 100% 0% 0%;
}
.logo .left
{   
height: 400px;
width: 130px;   
background-color: #FFCD00;   
border-radius: 100% 100% 0% 0%;       
margin-left: -30px;
}
.logo div .white
{
height: 300px;
width: 60px;
margin: auto;
background-color: #fff;
margin-top: 20px;
margin-left: 35px;
border-radius: 100% 100% 0% 0%;   
}
شعار جوجل بيبسي لوجو ماكدونالد لوجو