أولا: أزلت الخربشة، وقمت بتحديد وترقيم الطبقات بواسطة الفوتوشوب كما هو موضح في الصورة أدناه لتتمكن من معرفة حدود كل طبقة ووضعيتها في الصفحة.
من المعروف أن الـ Logo يصمم ويوضع من قبل الأغلبية على شكل صورة، وفي هذا الموقع إستعملوا طبقتين مختلفتي اللون.
أراد مطورالـ Front-end دمج طبقة الـ Menu بنفس لون الخلفية (الرمادي ) مع الـ Logo بحيث يراها المستخدم وكأن فيها كسرة وميول. وكلا الطبقتين تم إدخالهما داخل الطبقة الثالثة كما هو مشار إليها في الصورة كحاوي (Container) وإعطائها لون خلفية بيضاء.
ثانيا: حاولت أن أنجز لك نفس الفكرة ووضعت لك 3 Ceckboxes لتعرف حدود كل طبقة وذلك بتفعيل ظهور حدود هذه الطبقات عبر الـ Ceckboxes
Html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Lara Darine</title>
<link href="https://fonts.googleapis.com/css?family=Oxygen:400,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="main.css">
</head>
<body>
<!-- layout 3 -->
<div id="container">
<!-- layout 1 -->
<div id="logo">
<img src="http://www.awfarmarket.com/img/general/top_bar_01.png" alt="Awfar logo">
</div>
<!-- layout 2 -->
<div id="menu">
</div>
</div>
<div id="border">
<label for="div1" class="border"> Layout 1
<input type="checkbox" name="div1">
<span class="checkmark"></span>
</label>
<label for="div2" class="border"> Layout 2
<input type="checkbox" name="div2">
<span class="checkmark"></span>
</label>
<label for="div3" class="border"> Layout 3
<input type="checkbox" name="div3">
<span class="checkmark"></span>
</label>
</div>
<script src="app.js"></script>
</body>
</html>
Css:
body {
margin: 0;
font-family: 'Oxygen', sans-serif;
}
#container {
width: 100%;
height: 120px;
margin: 0 auto;
display: flex;
}
#logo {
width: 231px;
height: 90px;
}
#menu {
width: 100%;
height: 32px;
border-bottom: 1px #e6e1e0 solid;
background-color: #f6f5f3;
}
.outline {
outline: red 1px solid;
z-index: 99;
}
#border {
width: 300px;
margin: 20px auto;
}
.border {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.border input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #f6f5f3;
}
.border:hover input ~ .checkmark {
background-color: #e6e1e0;
}
.border input:checked ~ .checkmark {
background-color: #2196F3;
}
.checkmark:after {
content: "";
position: absolute;
display: none;
}
.border input:checked ~ .checkmark:after {
display: block;
}
.border .checkmark:after {
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
transform: rotate(45deg);
}
JS
const container = document.querySelector('#container');
const logo = document.querySelector('#logo');
const menu = document.querySelector('#menu');
const checkLayouts = document.querySelectorAll('.border');
checkLayouts.forEach( layout=> {
layout.addEventListener('click', () => {
const checkBox = layout.children[0];
const name = checkBox.getAttribute('name');
if (name == 'div1') {
logo.classList.toggle('outline');
} else if (name == 'div2') {
menu.classList.toggle('outline');
} else {
container.classList.toggle('outline');
}
checkBox.toggleAttribute('checked');
});
});
يمكنك الإطلاع على النتيجة من هنا:
شكرا ع التوضيح الحلو ده. بس سؤال ازاى جبتى الصوره ؟؟ من الموقع اوفر خدتى الينك ؟
نعم أخذت الصورة من موقع AWFAR مباشرة بدل حفظها داخل مجلد المشروع، أخذت الرابط ووضعته داخل الـ Attribute src لأنه مجرد مثال.
ازاى دوسنى على ايه ؟