diff --git a/100_projects/60-eid-al-fitr-2023/imgs/bottom.png b/100_projects/60-eid-al-fitr-2023/imgs/bottom.png new file mode 100644 index 0000000..70c5db5 Binary files /dev/null and b/100_projects/60-eid-al-fitr-2023/imgs/bottom.png differ diff --git a/100_projects/60-eid-al-fitr-2023/imgs/close.png b/100_projects/60-eid-al-fitr-2023/imgs/close.png new file mode 100644 index 0000000..78c8d8a Binary files /dev/null and b/100_projects/60-eid-al-fitr-2023/imgs/close.png differ diff --git a/100_projects/60-eid-al-fitr-2023/imgs/lamp.png b/100_projects/60-eid-al-fitr-2023/imgs/lamp.png new file mode 100644 index 0000000..f14edac Binary files /dev/null and b/100_projects/60-eid-al-fitr-2023/imgs/lamp.png differ diff --git a/100_projects/60-eid-al-fitr-2023/imgs/menu.png b/100_projects/60-eid-al-fitr-2023/imgs/menu.png new file mode 100644 index 0000000..5a20ec1 Binary files /dev/null and b/100_projects/60-eid-al-fitr-2023/imgs/menu.png differ diff --git a/100_projects/60-eid-al-fitr-2023/imgs/moon.png b/100_projects/60-eid-al-fitr-2023/imgs/moon.png new file mode 100644 index 0000000..49c96ed Binary files /dev/null and b/100_projects/60-eid-al-fitr-2023/imgs/moon.png differ diff --git a/100_projects/60-eid-al-fitr-2023/imgs/mosque.png b/100_projects/60-eid-al-fitr-2023/imgs/mosque.png new file mode 100644 index 0000000..7d8dd24 Binary files /dev/null and b/100_projects/60-eid-al-fitr-2023/imgs/mosque.png differ diff --git a/100_projects/60-eid-al-fitr-2023/imgs/rock.png b/100_projects/60-eid-al-fitr-2023/imgs/rock.png new file mode 100644 index 0000000..fb56c0a Binary files /dev/null and b/100_projects/60-eid-al-fitr-2023/imgs/rock.png differ diff --git a/100_projects/60-eid-al-fitr-2023/imgs/stars.png b/100_projects/60-eid-al-fitr-2023/imgs/stars.png new file mode 100644 index 0000000..91bb2ac Binary files /dev/null and b/100_projects/60-eid-al-fitr-2023/imgs/stars.png differ diff --git a/100_projects/60-eid-al-fitr-2023/imgs/stars2.png b/100_projects/60-eid-al-fitr-2023/imgs/stars2.png new file mode 100644 index 0000000..c84e934 Binary files /dev/null and b/100_projects/60-eid-al-fitr-2023/imgs/stars2.png differ diff --git a/100_projects/60-eid-al-fitr-2023/index.html b/100_projects/60-eid-al-fitr-2023/index.html new file mode 100644 index 0000000..26c51b7 --- /dev/null +++ b/100_projects/60-eid-al-fitr-2023/index.html @@ -0,0 +1,41 @@ + + + + + + + + + + + عيد الفطر + + + +
+ stars_img + stars2 + moon +

عيد مبارك

+ rock + mosque + bottom + lamp +
+
+

عيد مبارك سعيد لك ولعائلتك.

+
+ + + \ No newline at end of file diff --git a/100_projects/60-eid-al-fitr-2023/script.js b/100_projects/60-eid-al-fitr-2023/script.js new file mode 100644 index 0000000..bc59423 --- /dev/null +++ b/100_projects/60-eid-al-fitr-2023/script.js @@ -0,0 +1,7 @@ + +const toggleMenu = document.querySelector('.toggle'); +const navigation = document.querySelector('.navigation'); +toggleMenu.onclick = function () { + toggleMenu.classList.toggle('active'); + navigation.classList.toggle('active'); +} \ No newline at end of file diff --git a/100_projects/60-eid-al-fitr-2023/style.css b/100_projects/60-eid-al-fitr-2023/style.css new file mode 100644 index 0000000..d37b959 --- /dev/null +++ b/100_projects/60-eid-al-fitr-2023/style.css @@ -0,0 +1,169 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: "Ubuntu", sans-serif; + overflow-x: hidden; +} +body { + background: linear-gradient(#8b016a, #6f1159); + min-height: 100vh; + overflow-x: hidden; +} +#header { + position: absolute; + top: 0; + left: 0; + width: 100%; + padding: 30px; + padding: 30px 100px; + display: flex; + justify-content: space-between; + align-items: center; + z-index: 10000; +} +#header .logo { + color: #fff; + font-weight: 700; + font-size: 2em; + text-decoration: none; +} +#header .navigation { + display: flex; + justify-content: center; + align-items: center; +} +#header .navigation li { + list-style: none; + margin-left: 20px; +} +#header .navigation li a { + text-decoration: none; + padding: 6px 15px; + color: #fff; + border-radius: 20px; +} +#header .navigation li a:hover, +#header .navigation li a.active { + background-color: #fff; + color: #000; +} +section { + position: relative; + width: 100%; + height: 100vh; + display: flex; + justify-content: center; + align-items: center; +} +section img { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + pointer-events: none; +} +section img#lamp { + mix-blend-mode: screen; +} +section img#masjid { + transform: translateY(-20px); +} +section img#stars2 { + display: none; +} +#text { + color: #fff; + font-size: 6vw; + white-space: nowrap; + text-shadow: 0 10px 15px rgba(0, 0, 0, 0.25); + font-family: "Rancho", cursive; + z-index: 9; +} +.sec{ + position: relative; + padding: 100px; + background: #96283a; + text-align: center; +} +.sec h2{ + font-size: 3em; + color: #fff; + margin-bottom: 10px; +} +.sec p{ + font-size: 1em; + color: #fff; + font-weight: 300; +} +@media (max-width: 992px) { + #header { + padding: 20px; + } + #header .logo { + font-size: 1.5em; + } + #header .navigation { + display: none; + } + #header .navigation.active { + position: fixed; + top: 0; + left: 0; + display: flex; + width: 100%; + height: 100vh; + background: #6f1159; + justify-content: center; + align-items: center; + flex-direction: column; + z-index: 999; + } + #header .navigation li { + margin-left: 0; + } + #header .navigation li a { + font-size: 1.5em; + margin: 5px 0; + display: inline-block; + border-radius: 30px; + } + .toggle { + position: relative; + width: 30px; + height: 30px; + cursor: pointer; + background: url("imgs/menu.png"); + background-size: 30px; + background-position: center; + background-repeat: no-repeat; + z-index: 10000; + } + .toggle.active { + position: fixed; + top: 20px; + right: 20px; + background: url("imgs/close.png"); + background-size: 25px; + background-position: center; + background-repeat: no-repeat; + } + .sec { + padding: 20px; + } + .sec h2 { + font-size: 1.5em; + } + section img#stars2 { + display: block; + width: 100%; + height: 100%; + object-fit: cover; + } + section img#mosque { + transform: translate(-5px); + } + #text { + font-size: 15vw; + } +}