مهمة : التدرب على نموذج الصندوق

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>التدرب على نموذج الصندوق</title>
<link href="https://fonts.googleapis.com/css?family=Big+Shoulders+Display|Big+Shoulders+Text|Indie+Flower|Mansalva|Ubuntu&display=swap" rel="stylesheet">
<style>
body{background:#BC8F8F}
p { width:500px;height:100;background:#FFE4E1;color:#C71585;font-size:30px;
font-family: 'Indie Flower', cursive;padding:20px 30px 20px 30px;border-left:10px solid #FF00FF;margin:50px auto  10px;
 }
div p{width:500px;height:100;background:#FFE4E1;color:#4169E1;font-size:30px;
font-family: 'Indie Flower', cursive;;text-decoration:underline;
padding:20px 30px 20px 30px;border-left:10px solid blue;margin:margin:50px auto  10px;}

</style>
</head>
<body>
<p>
Never give up. Today is hard, tomorrow will be worse, but the day after tomorrow will be sunsahin
</p>  
 <div>
   <p>
If you work just for money, you'll never make it, 
but if you love what you're doing success will be yours
   </p>
</div>
</body>
</html>
1 Like

عشان ماتتعبي نفسك بإنشاء موضوع في كل مرة انا اقوم بعمل موضوع لتسليم الحلول واضع رابطة في المهمة لذا بإمكانك كتابتها في تعليق هناك مباشرة في المرات القادمة :grin:

بالنسبة للكود الذي قمتي بكتابته فهو ممتاز :ok_hand: فقط خذي بعين الإعتبار الملاحظات التالية:

  • كتابة كل خاصية في سطر منفصل عشان يكون شكل الكود سهل للقرأة، مثلاً بدلاً من التالي:
p { width:500px;height:100;background:#FFE4E1;color:#C71585;font-size:30px;
font-family: 'Indie Flower', cursive;padding:20px 30px 20px 30px;border-left:10px solid #FF00FF;margin:50px auto  10px;
 }

اعملي التالي:

p { width:500px;
height:100;
background:#FFE4E1;
color:#C71585;
font-size:30px;
font-family: 'Indie Flower', cursive;
padding:20px 30px 20px 30px;
border-left:10px solid #FF00FF;
margin:50px auto  10px;
 }
  • نسيتي إضافة وحدة القياس px لقيمة الخاصية height
height:100;

عدليها للتالي:

height:100px;
  • في القاعدة div p قمتي بتكرار الخاصية margin مرتين ونسيتي الفاصلة المنقوطة:
margin:margin:50px

عدليها الى

margin:50px;