مرحباً جميعاً
المهمة المطلوبة:
طريقة مشاركة الأكواد التي قمت بكتابتها:
قم بنسخ الأكواد من بيئة العمل ومن ثم لصقها بين هذه العلامات
```
هنا ضع الأكواد
```
شاهد الفيديو التالي لتعرف طريقة مشاركة الأكواد للمنتدى بشكل منسق
قم بنسخ الأكواد من بيئة العمل ومن ثم لصقها بين هذه العلامات
```
هنا ضع الأكواد
```
شاهد الفيديو التالي لتعرف طريقة مشاركة الأكواد للمنتدى بشكل منسق
للمعاينة المباشرة: اضغط هنا
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>THE STORE</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Domine|Questrial" rel="stylesheet">
</head>
<body>
<header>
<h1><a href="index.html">STORE</a></h1>
<nav>
<ul class="navbar">
<li><a href="#">home</a></li>
<li><a href="#">featured</a></li>
<li><a href="#">women</a></li>
<li><a href="#">men</a></li>
<li><a href="#">kids</a></li>
<li><a href="#">more</a></li>
</ul>
</nav>
</header>
<main>
<h2>Featured Products</h2>
<p>Refresh your look with pieces of our collection</p>
<div>
<img src="https://demos.coretabs.net/frontend-basics-workshop/img/img1.jpg">
<img src="https://demos.coretabs.net/frontend-basics-workshop/img/img2.jpg">
<img src="https://demos.coretabs.net/frontend-basics-workshop/img/img3.jpg">
<img src="https://demos.coretabs.net/frontend-basics-workshop/img/img4.jpg">
<img src="https://demos.coretabs.net/frontend-basics-workshop/img/img5.jpg">
<img src="https://demos.coretabs.net/frontend-basics-workshop/img/img6.jpg">
</div>
<a href="products.html">More Products</a>
</main>
<footer>
<p>© 2018 All Rights Reserved.</p>
</footer>
</body>
</html>
CSS
body {
margin: 0;
font-family: 'Questrial', sans-serif;
}
header {
height: 80px;
border-bottom: 1px dashed #ccc;
}
header h1 {
text-align: center;
font-size: 24px;
font-family: 'Domine', serif;
letter-spacing: 6px;
line-height: 80px;
margin: 0;
}
header h1 a {
color: #222;
text-decoration: none;
}
.navbar {
list-style: none;
margin: 0;
padding: 0;
text-align: center;
border-bottom: 1px dashed #ccc;
}
.navbar li {
display: inline-block;
}
.navbar a {
display: block;
padding: 0 20px;
text-decoration: none;
text-transform: capitalize;
font-size: 18px;
color: #222;
line-height: 50px;
transition-duration: 0.5s;
}
.navbar a:hover {
color: #fff;
background-color: #191919;
}
main {
max-width: 960px;
margin: 90px auto 90px auto;
text-align: center;
}
main h2 {
font-size: 30px;
font-weight: normal;
margin: 0;
}
main p {
color: #999;
font-size: 18px;
}
main img {
margin: 1%;
height: 335px;
width: 290px;
box-sizing: border-box;
transition-duration: 0.5s;
}
main img:hover {
padding: 20px;
background-color: #ddd;
}
main div {
margin: 6% auto 9% auto;
}
main a {
color: #000;
border: 1px solid;
padding: 10px;
text-decoration: none;
transition-duration: 0.5s;
}
main a:hover {
background-color: #222;
color: #fff;
border-color: #222;
}
footer {
background-color: #191919;
padding: 6px;
}
footer p {
color: #ccc;
text-align: center;
}
Thank you,
I’m glad cuz you like it
Thank you,
I’m glad cuz you like it
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>STORE</title>
<link href="https://fonts.googleapis.com/css?family=Domine|Questrial" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<h1><a href="index1.html">STORE</a></h1>
<nav>
<ul class="navbar">
<li><a href="#">home</a></li>
<li><a href="#">featured</a></li>
<li><a href="#">women</a></li>
<li><a href="#">men</a></li>
<li><a href="#">kids</a></li>
<li><a href="#">more</a></li>
</ul>
</nav>
</header>
<main>
<h2>Featured Products</h2>
<p>Refresh your look with pieces of our collection</p>
<div>
<img src="https://demos.coretabs.net/frontend-basics-workshop/img/img1.jpg">
<img src="https://demos.coretabs.net/frontend-basics-workshop/img/img2.jpg">
<img src="https://demos.coretabs.net/frontend-basics-workshop/img/img3.jpg">
<img src="https://demos.coretabs.net/frontend-basics-workshop/img/img4.jpg">
<img src="https://demos.coretabs.net/frontend-basics-workshop/img/img5.jpg">
<img src="https://demos.coretabs.net/frontend-basics-workshop/img/img6.jpg">
</div>
<a href="Products.html">More Products</a>
</main>
<footer>
<p>© 2018 All Rights Reserved</p>
</footer>
</body>
</html>
CSS
body{
margin: 0;
font-family: 'Questrial', sans-serif;
}
header{
height: 80px;
border-bottom: 1px dotted #ccc;
}
header h1{
text-align: center;
font-family: 'Domine', serif;
font-size: 24px;
letter-spacing: 6px;
line-height: 80px;
margin: 0;
}
header h1 a{
text-decoration: none;
color: #666;
}
main {
max-width: 960px;
text-align: center;
margin: 140px auto 90px auto;
}
main h2{
font-size: 30px;
font-weight: normal;
margin: 0;
}
main p{
color: #999;
font-size: 18px;
}
main div{
margin: 60px 0 60px 0;
}
main img{
margin: 10px;
width: 290px;
height: 335px;
box-sizing: border-box;
transition-duration: .4s;
}
main img:hover{
padding: 20px;
background-color: #ddd;
}
main a{
width: 160px;
height: 45px;
display: block;
margin: 0 auto 0 auto;
line-height: 45px;
text-decoration: none;
font-size: 18px;
border: 2px solid #ccc;
color: #666;
transition-duration: 0.4s;
}
main a:hover {
background-color: #222;
color: #fff;
border-color: #222;
}
footer{
background-color: #222;
height: 50px;
color: #999;
text-align: center;
line-height: 50px;
}
.navbar {
list-style: none;
margin: 0;
padding: 0;
border-bottom: 1px dotted #ccc;
text-align: center;
}
.navbar li {
display: inline-block;
line-height: 40px;
}
.navbar a {
text-decoration: none;
display: block;
padding:10px 20px;
color: #999;
transition-duration: .3s;
}
.navbar a:hover {
background-color: rgb(153, 219, 219);
color: #fff;
}
ممتاز شباب فخور بكم.
جميعكم قمتوا بعمل رائع !
لكن سأقوم بإعطائكم بعض الملاحظات عشان الـ Perfection
أعجبني قيامك بإعطاء الروابط لون متناسق مع الإستايل العام للموقع عند مرور الماوس عليها
رائع أنك قمت بكتابة هيكلة قائمة التنقل في المكان الصحيح بداخل العنصر header
تحت عنوان الموقع .
التنسيقات التي أعطيتها للقائمة مطابقة للمطلوب بنسبة 99%. لذا لنقم بهذا التحدي بيني وبينك إذا ما كنت بتخليها مطابقة بنسبة 100%
أرجع للتصميم أدناه حيث انه اوضح من الي في المهمة و أوجد الفرق بين قائمتك وبين القائمة الموجودة في التصميم، وقم بعمل اللازم.
أيضاً قمت بعمل رائع بكتابة هيكلة قائمة التنقل في المكان الصحيح بداخل العنصر header
تحت عنوان الموقع .
أعجبني اللون الذي قمت بإختيارة للروابط عند تمرير الماوس عليها كسر الألوان الموجود في الموقع بدرجة متناسقة مع التصميم العام.
التنسيقات التي أعطيتها للقائمة مطابقة للمطلوب بنسبة 97%. لذا لنقم بهذا التحدي بيني وبينك إذا ما كنت بتخليها مطابقة بنسبة 100%
أرجع للتصميم اعلاة وحاول توصل لشكل مطابق بنسبة 100%.
شكراً لك من القلب على ردك الجميل
على ما اعتقد اني اعرف انو الفرق هو الخط المستخدم
لاني ما استخدمت نفس الخط الي مستخدمة انت ههههههه
الصراحة جربتة ولم يعجبني شكلة شفت الخط الي حطيتة بدله
احلى فقلت خلي نفس ماهو وكنت اعرف انك رح تنبهني عليه هههه
هههههههههه تمام مية مية الأن 100% مطابق .
رائع! أنك بتشتغل بطريقتك حسب الي تشوفة مناسب وهذا شئ أشجع عليه .
فقط لما أركز على أن تصل لنتيجة مطابقة 100% حسب المتطلبات في بعض المهام ليس من أجل أن احصر إبداعك وإنما في هذه المرحلة نعمل دورنا كمطوري فرونت إند حيث نكون مسؤولين لتحويل تصميم يأتي إلينا من قبل مصمم الـ UI/UX بشكل مطابق حرفياً بالبيكسل الواحد.
بحيث لو اجيب لك التصميم الي هو عبارة عن صورة وتجيب لي الواجهة بعد أن تم تطويرها ولم أستطع التفريق بينهما فهذا يعني بأنك مطور متمكن .
اكيد هذا شيء معروفين فيه انتم في التدقيق على الاخطاء واعطاء الملاحظات
صحيح كلامك شغلنا حالياً هو كمطوري نطبق الي ينطلب منا حسب المطلوب
شفتك كاتب في المهمة لايوجد اي قيود فكلت استغل الوضع واتفنن بالطلبية
اكيد مارح اشتغل على كيفي بالمستقبل عندما يطلب مني تنفيذ مشروع معين ولا
اذا اشتغلت فراح يودعني العميل قبل ما ابلش اشتغل اصلاً
اكيد هذا شيء معروفين فيه انتم في التدقيق على الاخطاء واعطاء الملاحظات
لسى ما شفت من الجمل إلا إذنه
صحيح كلامك شغلنا حالياً هو كمطوري نطبق الي ينطلب منا حسب المطلوب
شفتك كاتب في المهمة لايوجد اي قيود فكلت استغل الوضع واتفنن بالطلبية
اكيد مارح اشتغل على كيفي بالمستقبل عندما يطلب مني تنفيذ مشروع معين ولا
اذا اشتغلت فراح يودعني العميل قبل ما ابلش اشتغل اصلاً
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>THE STORE</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel="stylesheet" href="animate.css">
<script src="wow.min.js"></script>
<script>
new WOW().init();
</script>
</head>
<body>
<header>
<h1><a href="index.html">STORE</a></h1>
<nav>
<ul class="navbar">
<li><a href="#">home</a></li>
<li><a href="#">featured</a></li>
<li><a href="#">women</a></li>
<li><a href="#">men</a></li>
<li><a href="#">kids</a></li>
<li><a href="#">more</a></li>
</ul>
</nav>
</header>
<main>
<h2>Featured Products</h2>
<p>Refresh your look with pieces of our collection</p>
<div>
<img src="https://demos.coretabs.net/frontend-basics-workshop/img/img1.jpg" class="wow bounceInLeft" data-wow-duration="2s">
<img src="https://demos.coretabs.net/frontend-basics-workshop/img/img2.jpg" class="wow bounceInDown">
<img src="https://demos.coretabs.net/frontend-basics-workshop/img/img3.jpg" class="wow bounceInRight" data-wow-duration="2s">
<img src="https://demos.coretabs.net/frontend-basics-workshop/img/img4.jpg" class="wow bounceInLeft" data-wow-duration="2s">
<img src="https://demos.coretabs.net/frontend-basics-workshop/img/img5.jpg" class="wow bounceInUp">
<img src="https://demos.coretabs.net/frontend-basics-workshop/img/img6.jpg" class="wow bounceInRight" data-wow-duration="2s">
</div>
<a href="#">More Products</a>
</main>
<footer>
<p>© 2018 All Rights Reserved.</p>
</footer>
</body>
</html>
body {
margin: 0;
font-family: 'Roboto', sans-serif;
}
header {
height: 80px;
border-bottom: 1px dashed #ccc;
}
header h1 {
text-align: center;
font-size: 24px;
font-family: 'Domine', serif;
letter-spacing: 6px;
line-height: 80px;
margin: 0;
}
header h1 a {
color: #222;
text-decoration: none;
}
.navbar {
list-style: none;
margin: 0;
padding: 0;
text-align: center;
border-bottom: 1px dashed #ccc;
opacity: .7;
font-weight: 500;
}
.navbar li {
display: inline-block;
}
.navbar a {
display: block;
padding: 0 20px;
text-decoration: none;
text-transform: capitalize;
font-size: 18px;
color: #333;
line-height: 50px;
transition : all .7s ease-in-out;
font-family: 'Domine', serif;
}
.navbar a:hover {
color: #fff;
background-color: #333;
}
main {
max-width: 960px;
margin: 90px auto 90px auto;
text-align: center;
}
main h2 {
font-size: 30px;
font-weight: normal;
margin: 0;
}
main p {
color: #999;
font-size: 18px;
}
main img {
margin: 1%;
height: 335px;
width: 290px;
box-sizing: border-box;
transition-duration: 0.5s;
}
main img:hover {
padding: 20px;
background-color: #DDD;
}
main div {
margin: 6% auto 9% auto;
}
main a {
color: #000;
border: 1px solid;
padding: 10px;
text-decoration: none;
transition-duration: 0.5s;
}
main a:hover {
background-color: #222;
color: #fff;
border-color: #222;
}
footer {
background-color: #333;
padding: 6px;
}
footer p {
color: #ccc;
text-align: center;
}
أبدعت ي محمد في إستخدام الإنميشن
الأكواد جميعها كما يجب أن تكون
والتنسيقات مطابقة لما في التصميم
ملاحظة واحدة
أعطيت الروابط transition
بمدة .7s
والتي أراها مدة كبيرة لمثل هذا التأثير في الـ navbar أنصح أن تتراوح القيمة بين .3
إلى .5
كحد أقصى لتأثير تغيير لون الخلفية الخاص بالروابط.
انا قولت لازم اول تطبيق يبقي مهمات كورتابز و تمام شكرا علي ملاحظه
ملف ال HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>THE STORE</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Domine|Questrial" rel="stylesheet">
</head>
<body>
<header>
<h1>STORE</h1>
<nav>
<ul class="navbar">
<li><a href="#">home</a></li>
<li><a href="#">featured</a></li>
<li><a href="#">woman</a></li>
<li><a href="#">men</a></li>
<li><a href="#">kids</a></li>
<li><a href="#">more</a></li>
</ul>
</nav>
</header>
<main>
<h2>Featured Products</h2>
<p>Refresh your look with pieces of our collection</p>
<div>
<img src="https://demos.coretabs.net/frontend-basics-workshop/img/img1.jpg">
<img src="https://demos.coretabs.net/frontend-basics-workshop/img/img2.jpg">
<img src="https://demos.coretabs.net/frontend-basics-workshop/img/img3.jpg">
<img src="https://demos.coretabs.net/frontend-basics-workshop/img/img4.jpg">
<img src="https://demos.coretabs.net/frontend-basics-workshop/img/img5.jpg">
<img src="https://demos.coretabs.net/frontend-basics-workshop/img/img6.jpg">
</div>
<a href="products.html">More Products</a>
</main>
<footer>
<p>© 2018 All Rights Reserved.</p>
</footer>
</body>
</html>
ملف CSS
body {
margin: 0;
padding: 0;
text-align: center;
}
header {
margin: 0;
padding: 0;
}
h1 {
margin: 0;
padding: 15px 0;
}
nav {
margin: 0;
}
.navbar {
margin: 0;
padding: 12px 0;
list-style: none;
border: 1px dashed #ccb;
}
.navbar li {
margin: 0;
display: inline;
}
.navbar a {
text-decoration: none;
padding: 0 6px;
margin: 8px 0;
color: #A4A1A1;
font-size: 18px;
font-family: serif;
text-transform: capitalize;
}
main {
max-width: 960px;
margin: 90px auto 90px auto;
text-align: center;
}
main h2 {
font-size: 30px;
font-weight: normal;
margin: 0;
}
main p {
color: #999;
font-size: 18px;
}
main img {
margin: 1%;
height: 335px;
width: 290px;
box-sizing: border-box;
transition-duration: 0.5s;
}
main img:hover {
padding: 20px;
background-color: #ddd;
}
main div {
margin: 6% auto 9% auto;
}
main a {
color: #000;
border: 1px solid;
padding: 10px;
text-decoration: none;
transition-duration: 0.5s;
}
main a:hover {
background-color: #222;
color: #fff;
border-color: #222;
}
footer {
background-color: #191919;
padding: 6px;
}
footer p {
color: #ccc;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>THE STORE</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Domine|Questrial" rel="stylesheet">
<link rel="stylesheet" href="styles/style.css">
</head>
<body>
<header>
<h1><a href="index.html">STORE</a></h1>
<nav>
<ul class="navbar">
<li><a href="#">home</a></li>
<li><a href="#">featured</a></li>
<li><a href="#">women</a></li>
<li><a href="#">men</a></li>
<li><a href="#">kids</a></li>
<li><a href="#">more</a></li>
</ul>
</nav>
</header>
<main>
<h2>Featured Products</h2>
<p>Refresh your look with pieces of our collection</p>
<div>
<img src="https://demos.coretabs.net/frontend-basics-workshop/img/img1.jpg">
<img src="https://demos.coretabs.net/frontend-basics-workshop/img/img2.jpg">
<img src="https://demos.coretabs.net/frontend-basics-workshop/img/img3.jpg">
<img src="https://demos.coretabs.net/frontend-basics-workshop/img/img4.jpg">
<img src="https://demos.coretabs.net/frontend-basics-workshop/img/img5.jpg">
<img src="https://demos.coretabs.net/frontend-basics-workshop/img/img6.jpg">
</div>
<a href="products.html">More Products</a>
</main>
<footer>
<p>© 2018 All Rights Reserved.</p>
</footer>
</body>
</html>
body{
margin: 0;
font-family: 'Questrial', sans-serif;
}
header{
height: 80px;
border-bottom: 1px dotted #ccc;
}
header h1{
text-align: center;
font-family: 'Domine', serif;
font-size: 24px;
letter-spacing: 6px;
line-height: 80px;
margin: 0;
}
header h1 a{
color: #222;
text-decoration: none;
}
header nav{
background-color: #333;
text-align: center;
}
header nav .navbar{
margin: 0;
padding: 0
}
header nav .navbar li {
list-style: none;
display: inline-block;
text-align: center;
}
header nav .navbar li a {
display: block;
padding: 10px 30px;
text-decoration: none;
color: white;
font-size: 22px;
text-transform: capitalize;
transition: 0.4s;
-webkit-transition: 0.4s;
-moz-transition: 0.4s;
-ms-transition: 0.4s;
-o-transition: 0.4s;
}
header nav .navbar li a:hover {
background-color: blue;
border-left: 5px solid red
}
main {
max-width: 960px;
text-align: center;
margin: 90px auto 90px auto;
}
main h2{
font-size: 30px;
font-weight: normal;
margin: 0;
}
main p{
color: #999;
font-size: 18px;
}
main div{
margin: 60px 0 60px 0;
}
main img{
margin: 10px;
width: 290px;
height: 335px;
box-sizing: border-box;
transition-duration: .4s;
}
main img:hover{
padding: 20px;
background-color: #ddd;
}
main a{
width: 160px;
height: 45px;
display: block;
margin: 0 auto 0 auto;
line-height: 45px;
text-decoration: none;
font-size: 18px;
border: 2px solid #ccc;
color: #666;
transition-duration: .4s;
}
main a:hover{
background-color: #222;
color: #fff;
border-color: #222;
}
footer{
background-color: #222;
height: 50px;
color: #999;
text-align: center;
line-height: 50px;
}
عمل رائع سفيان
رائع قيامك بوضع القائمة في المكان المناسب بداخل العنصر header
كل شئ ممتاز وكما يجب أن يكون فقط أريد منك التركيز على الملاحظات التالية:
1- لا نريد أن نقوم بإعطاء الـ padding
من الاعلى و الأسفل للـ .navbar
وإنما نريد أن نقوم بإعطائها للروابط وذلك عشان يكون حجم الربط كبير ويسمح لنا بالضغط على مساحة واسعة.
2- قمت بإعطاء الروابط .navbar a
بعض التنسيقات ولكن نسيت أن تقوم بتحويلها إلى عنصر من النوع block
فكما تعرف فالروابط هي من النوع inline
لهذا لن تجد أي تأثير للخاصية margin
عليها في الوقت الحالي.
إذا لنقم بترتيب ذلك:
عند قيامك بهذه التغييرات راح تلاحظ ان العناصر لن تعود بجوار بعضها البعض، ستكون قادر على حل هذه المشكلة من خلال تغيير طريقة عرض العناصر li
بإنتظار تعديلك على الاكواد