<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>مهمة التدرب على لغة التنسيقات</title>
<link href="https://fonts.googleapis.com/css?family=Courgette&display=swap" rel="stylesheet">
</head>
<style>
body{
background-color: #0ef9ff;
}
p{
background-color: #E611B2;
color: #ffffff;
width: 500px;
font-size: 30px;
font-weight: bold;
font-family: 'Courgette', cursive; }
div p{
background-color: #B41FD1;
color: #ffffff;
width: 500px;
font-size: 30px;
font-weight: bold;
font-family: 'Courgette', cursive;
}
</style>
<body>
<p>
Never give up. Today is hard, tomorrow will be worse,
but the day after tomorrow will be sunsahine
</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
مضبوط ي ابتسام والوان جميلة
2 Likes
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>مهمة التدرب على لغة التنسيقات</title>
<link href="https://fonts.googleapis.com/css?family=Acme&display=swap" rel="stylesheet">
<style>
body{background-color: #13D70D}
p {font-family: 'Acme', sans-serif;}
p {height: 100px;}
p{width:350px;
background-color:#0E8AA5;
color:#ffffff;
font-size:20px;
line-height:30px}
div p{background-color:#4E0EA5;
text-decoration:underline}
</style>
</head>
<body>
<p>
Never give up. Today is hard, tomorrow will be worse,
but the day after tomorrow will be sunshine
</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
عمل رائع ي نجم
لدي ملاحظة واحدة:
قمت بكتابة 3 قواعد CSS لإستهداف نفس العنصر p
، طبعاً هذا الشئ ليس خطأ وهو ممكن لكن في حالتنا لا نحتاج لتطبيق مثل ذلك ويكفي دمج جميع الخصائص بداخل قاعدة واحدة.
p {font-family: 'Acme', sans-serif;}
p {height: 100px;}
p{width:350px;
background-color:#0E8AA5;
color:#ffffff;
font-size:20px;
line-height:30px}
مهمة التدرب على لغة التنسيقات
body{
background-color:#DAF7A6;
}
p{
width:400px;
background-color:#FF5733;
color:#ffffff;
font-family: 'Aguafina Script', cursive;
line-height: 40px;
font-size:20px;
text-align:center;
}
div p{
width:400px;
background-color:#483D8B;
color:#ffffff;
font-family: 'Inconsolata', monospace;
text-decoration:underline;
line-height: 30px;
font-size:20px;
text-align:center;
}
</style>
</head>
<body>
<p>
Never give up. Today is hard, tomorrow will be worse,
but the day after tomorrow will be sunshine
</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>
1 Like
مية مية ي فادي.
بالمناسبة تأكد من وضعك للاكواد في المنتدى بالشكل الصحيح كما تم شرح ذلك في الفيديو التالي:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>salima</title>
<style>
body{
background:aqua;
}
h2{
color:red;
}
h1{
color:blueviolet;
}
a{
color:deeppink;
}
</style>
</head>
<body>
<header>
<h1>فيتامين واو</h1>
</header>
<main>
<h2>سنجعلك في المقدمة إن تأخرت</h2>
<p>إحتياجك لهذا الفيتامين أكثر من الفيتامينات الآخرى فهو الفيتامين الذي لا يمد جسدك بالقوة فحسب ولكن يفيدك من الناحية الوظيفية ويوسع حجم معارفك.</p>
<div>
<img src="https://raw.githubusercontent.com/coretabs-academy/frontend-basics-workshop-markdown/master/project-structure/task/assets/banner.jpg">
</div>
<a href="#">اطلب وساطة</a>
</main>
</body>
</html>
1 Like
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>salima</title>
<style>
body{
background-color: beige;
}
p{
background-color:chocolate;
width: 400px;
}
div p{
color:azure;
background-color:coral;
width: 400px;
}
</style>
</head>
<body>
<p>
Never give up. Today is hard, tomorrow will be worse,
but the day after tomorrow will be sunshine
<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
عمل ممتاز وإختيار جميل للألوان
فقط ملاحظة واحدة، ارجوا وضع الأكواد بالمنتدى بالطريقة الصحيحة كما هو موضح بالفيديو أدناة
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>مهمة التدرب على لغة التنسيقات</title>
<link href="https://fonts.googleapis.com/css?family=Lacquer|Volkhov&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Indie+Flower|Lacquer|Volkhov&display=swap" rel="stylesheet">
</head>
<style>
p{
width:400px;
background-color:#ff502f;
color:#fcf9ec;
font-size:30px;
font-weight:bold;
font-family: 'Lacquer', sans-serif;
text-align:center;
text-transform:capitalize;
letter-pacing:2px;
line-light:60px;
text-decoration:none;
}
body{
background-color:#12d3cf;
}
div p{
background-color:#b0f4e6;
color:#ff502f;
font-family: 'Indie Flower', cursive;
text-decoration:underline wavy orange;
}
</style>
<body>
<p>
Never give up. Today is hard, tomorrow will be worse,
but the day after tomorrow will be sunsahine
</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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>مهمة التدرب على لغة التنسيقات</title>
<link href="https://fonts.googleapis.com/css?family=Dancing+Script&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lacquer&display=swap" rel="stylesheet">
</head>
<style>
body{
background-color: #FFF8DC;
}
p{
background-color: #7FBEEB;
color: #E0FFFF;
width: 400px;
font-size: 30px;
font-weight: 700;
font-family: 'Dancing Script', cursive;
text-align: center;
text-transform: none;
letter-spacing: 1px;
text-decoration: underline dashed pink;
}
div p{
background-color: #D46363;
color: #FFFFF0;
width: 400px;
font-weight: 400;
font-family: 'Lacquer', sans-serif;
text-align: left;
text-transform: lowercase;
letter-spacing: 1px;
text-decoration: none;
}
</style>
<body>
<p>
Never give up. Today is hard, tomorrow will be worse,
but the day after tomorrow will be sunshine
</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
رائع ي أريج
1 Like
<html>
<head>
<meta charset="utf-8">
<title>مهمة التدرب على لغة التنسيقات</title>
<link href="https://fonts.googleapis.com/css?family=Lobster+Two|Permanent+Marker&display=swap" rel="stylesheet">
</head>
<style>
body{
background-color:#A9A9A9;
}
P{
background-color: black;
color: white;
wight:1000x;
font-family: 'Permanent Marker', cursive;
front-size:25px;
line-height:50px;
text-align:center;
}
div p{
background-color:#A07E79;
color:#451F19;
wight: 400px;
font-family: 'Lobster Two', cursive;
text-align:center;
litter-spacing:1px;
text-decoration:underline;
text-decoration-style:wavy;
}
</style>
</head>
<body>
<p>
Never give up. Today is hard, tomorrow will be worse,
but the day after tomorrow will be sunsahine
</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
1 Like
ممتاز
تصميمي
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Style of Html</title>
<style>
body{
background-color:#c5cae9;
}
div{
width:80%;
background-color:#303f9f;
color:white;
}
p{
text-align:center;
font-size:18px;
line-height:24px;
font-family: 'Mali', cursive;
}
strong{
color:red;
text-decoration: underline ;
}
</style>
</head>
<body>
<div>
<p> Never give up. Today is <strong>hard</strong>, tomorrow will be <strong>worse</strong>, but the day after tomorrow will be <strong>sunshine</strong></p>
<p> If you work just for <strong>money</strong>, you'll never make it, but if you love what you're doing success will be <strong>yours</strong></p>
</div>
</body>
</html>
1 Like
رائع أعجبني إبداعك في كسر المألوف
1 Like
هذا من ذوقك الحلو
1 Like