ممتاز حمزة
2 Likes
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>عنوان الموقع</title>
<link href="https://fonts.googleapis.com/css?family=Tajawal" rel="stylesheet">
<style>
body {
margin: 0;
background-color: #171a29;
font-family: 'Tajawal', sans-serif;
color: #fff;
text-align: center;
box-sizing: border-box;
}
header {
background-color: #212639;
height: 50px;
font-weight: 20px;
}
header h1 {
margin: 0;
text-align: center;
line-height: 50px;
font-size: 20px;
}
main {
widht: 900px;
margin-left: auto;
margin-right: auto;
padding: 40px 0 40px 0;
}
main h2 {
font-weight: bold;
font-size: 20px
}
main p {
widht: 600px;
font-weight: 200px;
font-size: 16px;
padding: 0 180px 40px 180px;
}
main img {
margin-left: auto;
margin-right: auto;
width: 600px;
height: 210px;
margin-bottom: 18px;
}
a {
display: inline-block;
border: 1px solid #3b7c3a;
background-color: #3b7c3a;
color: #fff;
margin-top: 15px;
text-decoration-line: none;
padding: 5px 18px 5px 18px;
font-size: 10px;
font-weight: bold;
}
footer {
background-color: #0f121b;
color: #707281;
}
footer p {
padding: 8px 0 8px 0;
margin-bottom: 0;
font-weight: bold;
font-size: 10px;
}
</style>
</head>
<body>
<header>
<h1> فيتامين باء </h1>
</header>
<main>
<h2>سنجعلك في المقدمة إن تأخرت</h2>
<p> إحتياجك لهذا الفيتامين أكثر من الفيتامينات الآخرى فهو الفيتامين الذي لا يمد جسدك بالقوة فحسب ولكن يفيدك من الناحية الوظيفية ويوسع حجم معارفك.
</p>
<img src="https://raw.githubusercontent.com/coretabs-academy/frontend-basics-workshop-markdown/master/project-structure/task/assets/banner.jpg" width="400">
<div>
<a href="#">اطلب وساطه</a>
</div>
</main>
<footer>
<p>© 2018 جميع الحقوق محفوظة للفيتامين باء</p>
</footer>
</body>
</html>
2 Likes
الله عليك ممتاز، فقط ركز انك كتبت كلمة yello
بدلاً من yellow
2 Likes
شكرا لك اخي سوف افعل ذلك أن شاءالله
1 Like
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>مهمة التدرب على لغة التنسيقات</title>
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
<style>
body{background-color:#232F3D;font-family:'Lobster',cursive;}
p{width:400px;background-color:white;
font-size:20px;line-height:30px;padding:10px;border-left:10px solid blue;
margin-left:auto;margin-right:auto}
div p{text-decoration:underline;
border-left:10px solid green;}
</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>
2 Likes
ستايل جميل
1 Like
شكرا
2 Likes
مرحباً
<!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: white;
color: black;
font-family: 'Indie Flower', cursive;
font-size: 20px;
padding: 20px;
border-left: 10px solid #FF5733;
margin-left: auto;
margin-right: auto;
box-sizing: border-box;
}
div p{
text-decoration: underline;
border-left: 10px solid #00CED1;
}
body{
background-color: #354047;
}
</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>
2 Likes
Perfect Marwan
2 Likes
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>مهمة التدرب على لغة التنسيقات</title>
<style>
body {
background-color: #FFE4E1;
}
p {
background-color: #A9A9A9;
width: 400px;
color:#8B0000;
height: 100px;
line-height: 20px;
font-family:'Indie Flower', cursive;
text-decoration: underline red;
padding: 10px 10px 10px 10px;
border-left: 20px solid black;
box-sizing: border-box;
margin-left: auto;
margin-right: auto;
}
div p {
background-color: GOLD;
color: #00008B;
width: 400px;
text-decoration: none;
text-align:center;
font-family:'Anton', sans-serif;
border-left: 20px solid blue;
box-sizing: border-box;
}
</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>
2 Likes
Ohh!
Ok I will modify it!
It was done in a hurry
1 Like
مية مية
2 Likes
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>مهمة التدرب على لغة التنسيقات</title>
<link href="https://fonts.googleapis.com/css?family=Cairo|Margarine" rel="stylesheet">
</head>
<style>
body{
margin:0;
background-color: #230b3f;//#8a26e7;
}
p{
background-color: white;
width: 400px;
height: 100px;
margin:15px auto;
box-sizing: border-box;
font-size:14px;
font-family: 'Margarine', cursive;
color: #999;
line-height: 35px;
border-left: 7px solid rgb(50, 202, 248);
padding:10px;
text-decoration: underline;
}
div p {
border-left:7px solid red;
padding:10px;
}
</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
عمل جميل بن يحيى
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>مهمة التدرب على نموذج الصندوق</title>
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
<style>
body{background-color:#232F3D;font-family:'Lobster',cursive;}
p{width:400px;background-color:white;
font-size:20px;line-height:30px;padding:10px;border-left:10px solid blue;
margin-left:auto;margin-right:auto}
div p{text-decoration:underline;
border-left:10px solid green;}
</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
سبق وشاركت حلك في هذه المهمة. هل قمت بتعديل ؟
<!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;
box-sizing: border-box;
font-size: 16px;
text-align: center;
}
p{
background-color: #FFE4C4;
color:blue;
width: 400px;
font-family: 'Playfair Display', serif;
line-height: 30px;
padding: 10px;
border-left: 10px dotted brown;
border-right: 10px solid purple;
margin-left: auto;
margin-right: auto;
margin-top:20px;
}
div p{
background-color: yellow;
color:#000000;
width: 400px;
font-family: 'Playfair Display', serif;
font-family: 'Open Sans Condensed', sans-serif;
font-family: 'Anton', sans-serif;
padding: 5px;
border-left: 10px solid purple;
border-right: 10px dotted brown;
}
span{
color: #708090;
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>
1 Like
عمل ممتاز
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>مهمة التدرب على لغة التنسيقات</title>
<link href="https://fonts.googleapis.com/css?family=Amiri|Artifika|Schoolbell" rel="stylesheet">
</head>
<style>
body {
background-color: rgb(144, 144, 196);
}
p {
background-color: #2653af;
color: #ffffff;
width: 500px;
font-family: 'Amiri', serif;
font-size: 20px;
line-height: 40px;
text-transform: capitalize;
letter-spacing: 1px;
text-align: center;
padding: 10px;
border:5px outset rgb(14, 99, 124);
box-sizing: border-box;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
}
div p {
background-color: #f0ab17;
color: #18288d;
width: 500px;
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>
1 Like
عمل رائع
1 Like