مرحباً جميعاً
المهمة المطلوبة:
طريقة مشاركة الأكواد التي قمت بكتابتها:
قم بنسخ الأكواد من بيئة العمل ومن ثم لصقها بين هذه العلامات
```
هنا ضع الأكواد
```
شاهد الفيديو التالي لتعرف طريقة مشاركة الأكواد للمنتدى بشكل منسق
قم بنسخ الأكواد من بيئة العمل ومن ثم لصقها بين هذه العلامات
```
هنا ضع الأكواد
```
شاهد الفيديو التالي لتعرف طريقة مشاركة الأكواد للمنتدى بشكل منسق
<html>
<head>
<meta charset="utf-8">
<title>مهمة التدرب على لغة التنسيقات</title>
<link href="https://fonts.googleapis.com/css?family=Lalezar" rel="stylesheet">
<style>
body{
background-color: black;
}
p{
background-color: gold;
color: black;
width: 500px;
font-family: 'Lalezar', cursive;
height: 100px;
text-align: center;
font-size: 30px;
text-decoration-line: underline;
display: table-cell;
vertical-align: middle;
}
div p{
background-color: red;
color: #ffffff;
width: 500px;
height: 100px;
text-align: center;
font-size: 30px;
line-height: 100px;
text-decoration-line: underline;
}
</style>
</head>
<body>
<p>
ظهرت الأرض تحت السفينة الطائرة
في البعد على شكل هلال متلألئ
</p>
<div>
<p>
رأيت العاصفة؛ كم كانت مرعبة بقدر ما كانت رائعة!
</p>
</div>
</body>
</html>```
مية مية،
وفكرة إستخدامك الخاصية display
بالقيمة table-cell
ممتازة
مهمة التدريب على لغة التنسيقات
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>مهمة التدرب على لغة التنسيقات</title>
<link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet">
<style>
body{
background-color:#DAF7A6;
}
p{
width:400px;
background-color:#FF5733;
color:#ffffff;
font-family: 'Inconsolata', monospace;
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>
</html>
ممتاز
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>مهمة التدرب على لغة التنسيقات</title>
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab" rel="stylesheet">
<style>
body {
background-color: #FFEBCD;
}
p {
background-color: #008B8B;
color: white;
font-family: 'Roboto Slab', serif;
width: 400px;
height: 120px;
font-size: 15pt;
text-align: center;
line-height: 40px;
}
div p {
background-color: #8B008B;
text-decoration-line: underline;
font-family: 'Roboto Slab', serif;
width: 400px;
height: 120px;
font-size: 15pt;
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>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>مهمة التدرب على لغة التنسيقات</title>
<style>
body{background-color:red}
p{width:400px;background-color:green;color:#00FA9A;font-size:20px;line-height:30px}
div p{background-color:blue;color:#00BFFF;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>
ممتاز بن يحيى عمل رائع!
عمل رائع محمود ، لماذا لا تجرب أحد خطوط google fonts على صفحتك
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>التنسيقيات CSS </title>
<link href="https://fonts.googleapis.com/css?family=Anton" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Indie+Flower" rel="stylesheet">
<style>
body {
margin: 0;
background-color: black;
}
p{
background-color: red;
color: #ffffff;
width: 400px;
margin-left: auto;
margin-right: auto;
font-size: 20px;
line-height: 30px;
font-weight: normal;
font-family: 'Anton', sans-serif;
text-transform: lowercase;
text-decoration: line-through solid black;
padding: 10px 15px 10px 15px;
border: 5px groove #ffffff ;
box-sizing: border-box;
}
div p {
background-color: #0AB387;
color: yello;
font-size: 15px;
line-height: 20px;
font-weight: 400;
font-family: 'Indie Flower', cursive;
text-align: center;
text-transform: capitalize;
letter-spacing: 2px;
text-decoration: underline double black;
border-top: none;
border-right: 8px solid;
border-bottom: none;
border-left: 8px solid;
margin: 20px 25px 20px 25px;
display: inline-block;
}
</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>
ممتاز بن علا بإمكانك الإنتقال للمهمة التالية
شكرا لك اخي
لا شكر على واجب
مرحباً
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>مهمة التدرب على لغة التنسيقات</title>
<link href="https://fonts.googleapis.com/css?family=Indie+Flower" rel="stylesheet">
<style>
p{
width: 400px;
background-color: orange;
color: white;
font-family: 'Indie Flower', cursive;
font-size: 22px;
text-align: center;
}
div p{
background-color: #483D8B;
text-decoration: underline;
}
body{
background-color: #EEE8AA;
}
</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>
كود نظيف ومرتب وصفحة جميلة
<!DOCTYPE html>
<html>
<head>
<meta charset ="utf-8">
<title>مهمة التدرب على لغة التنسيقات</title>
<link href="https://fonts.googleapis.com/css?family=Playfair+Display" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Anton|Open+Sans+Condensed:300|Playfair+Display" rel="stylesheet">
<style>
body{
background-color: #8FBC8B;
color:blue;
font-size: 16px;
text-align: center;
}
p{
background-color: #FFE4C4;
width: 400px;
font-family: 'Playfair Display', serif;
line-height: 30px;
}
div p{
background-color: yellow;
width: 400px;
font-family: 'Playfair Display', serif;
font-family: 'Open Sans Condensed', sans-serif;
font-family: 'Anton', sans-serif;
}
span{
text-decoration: underline wavy red;
font-weight: bold;
letter-spacing: 5px;
}
</style>
</head>
<body>
<p>
Never give up. Today is <span>hard, </span>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>
شايف span
سبقتينا بها
عمل ممتاز، إستمري
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>مهمة التدرب على لغة التنسيقات</title>
<link href="https://fonts.googleapis.com/css?family=Amiri" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Amiri|Schoolbell" rel="stylesheet">
</head>
<style>
body {
background-color: #E6E6FA;
}
p {
background-color: #2653af;
color: #ffffff;
width: 400px;
font-family: 'Amiri', serif;
font-size: 20px;
line-height: 40px;
text-transform: capitalize;
letter-spacing: 1px;
text-align: center;
}
div p {
background-color: #ffc13d;
color: #18288d;
width: 400px;
font-family: 'Amiri', serif;
font-family: 'Schoolbell', cursive;
letter-spacing: 3px;
font-weight: bold;
text-decoration: underline solid blue;
}
</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>
جميل جداً أسماء
مرحبا بكم جميعا
ارجو ان يعم الخير علينا جميعا
مهمة التدرب على تنسيقات النصوص:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> مهمة التدرب على تنسيقات النصوص</title>
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
<style>
body{
background-color: LightSlateGray;
text-decoration: overline underline;
}
p{
background-color: royalblue;
color: white;
width: 400px;
line-height: 36px;
font-size: 18px;
letter-spacing: 2px;
font-family: 'Source Sans Pro', sans-serif;
}
div p{
background-color: limegreen;
color: white;
width: 400px;
line-height: 36px;
font-size: 18px;
letter-spacing: 2px;
font-family: 'Source Sans Pro', sans-serif;
}
</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>