Add files via upload

2023-02-20 11:17:33 +03:00 · 2023-02-20 11:17:33 +03:00 · 7d1c16fbd1
commit 7d1c16fbd1
parent cd1d43d6a8
19 changed files with 247 additions and 0 deletions
--- a/100_projects/1-saudi_founding_day/README.md
+++ b/100_projects/1-saudi_founding_day/README.md
@ -0,0 +1,9 @@
+# تحدي يوم التأسيس
+`تفاصيل التحدي`
+
+> 2023-2-22 يوم الاربعاء
+- رابط التحدي على [تويتر](https://twitter.com/b_wffa/status/1626264652211490819?s=20)
+- الصور المستخدمة في التصميم [اضغط هنا](https://dribbble.com/shots/20666330-foundation-day)
+- متوافق مع كل الشاشات
+- النتيجة النهائية [اضغط هنا](https://x39ome.github.io/saudi_founding_day/)
+- 2023 - 2 - 16 الخميس
--- a/100_projects/1-saudi_founding_day/css/all.min.css
+++ b/100_projects/1-saudi_founding_day/css/all.min.css
--- a/100_projects/1-saudi_founding_day/css/style.css
+++ b/100_projects/1-saudi_founding_day/css/style.css
@ -0,0 +1,168 @@
+*{
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  transition: .3s;
+}
+/* Start Navigation */
+.header .nav{
+  position: fixed;
+  top: 0;
+  left: 0;
+  background:#F3EBD9;
+  color: #000;
+  width: 100%;
+  height: 80px;
+  padding: 10px 80px;
+  display: flex;
+  justify-content: space-between;
+  align-content: center;
+  z-index: 999;
+}
+.header .nav p{
+  align-self: center;
+}
+.header .nav #menuToggle{
+  display: none;
+  color: #fff;
+}
+.header .nav #navigation{
+  display: flex;
+  align-items: center;
+  list-style: none;
+  gap: 20px;
+}
+.header .nav #navigation li{
+  position: relative;
+  cursor: pointer;
+}
+.header .nav #navigation li::before{
+  content: '';
+  position: absolute;
+  bottom: -5px;
+  right: 0;
+  height: 2px;
+  width: 0;
+  background-color: #715349;
+  transition: .3s;
+}
+.header .nav #navigation li:hover:before{
+  width: 100%;
+}
+.header .nav #navigation li a{
+  text-decoration: none;
+  color: #000;
+  transition: .3s;
+  font-size: 18px;
+}
+@media(max-width:767px){
+  .header .nav #navigation{
+    position: absolute;
+    overflow: hidden;
+    top: 80px;
+    left: 0;
+    display: flex;
+    flex-direction: column;
+    background: #F3EBD9;
+    width: 100%;
+    height: 0;
+    transition: .3s;
+  }
+  .header .nav #navigation.active{
+    height: 185px;
+    padding-top: 35px;
+  }
+  .header .nav #menuToggle{
+    display: block;
+    position: absolute;
+    left: 20px;
+    top: 50%;
+    transform: translateY(-50%);
+    font-size: 24px;
+    padding: 5px 10px;
+    cursor: pointer;
+    transition: .3s;
+    color: #715349;
+  }
+  .header .nav #menuToggle:hover{
+    border-radius: 5px;
+    border: 2px solid #715349;
+  }
+}
+/* End Navigation */
+.landing{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: #FEFBF0;
+  padding: 80px 20px;
+  position: relative;
+  overflow: hidden;
+}
+.landing .background{
+  background-image: url(../imgs/original-4.webp);
+  width: 110px;
+  height: 100%;
+  z-index: 998;
+  position: absolute;
+  opacity: .3;
+  left: 0;
+  background-position: center;
+  background-size: contain;
+}
+.landing .boxImg{
+  position: relative;
+  overflow: hidden;
+}
+.landing .boxImg img{
+  max-width: 100%;
+}
+.landing .boxImg::before{
+  content: '';
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  opacity: .3;
+  top: -20px;
+  right: 70px;
+  background-image: url(../imgs/original-3.webp);
+}
+.landing .text{
+  position: relative;
+  z-index: 9;
+  margin-left: 100px;
+}
+.landing .text h1{
+  font-size: 51px;
+  margin-bottom: 20px;
+}
+.landing .text q, .landing .text p{
+  margin-top: 20px;
+  font-size: 18px;
+}
+.landing .text button{
+  color: #fff;
+  background-color: #715349;
+  border: 1px solid #F3EBD9;
+  padding: 10px 25px;
+  margin-top: 20px;
+  font-size: 17px;
+  cursor: pointer;
+  transition: .3s;
+}
+.landing .text button:hover{
+  color: #715349;
+  border: 1px solid #715349;
+  background: #F3EBD9;
+}
+/* Media*/
+@media(max-width:767px){
+  .landing{
+    flex-direction: column;
+    gap: 30px;
+  }
+  .landing .text{
+    margin-left: 0;
+    text-align:center;
+  }
+}
--- a/100_projects/1-saudi_founding_day/imgs/icon.png
+++ b/100_projects/1-saudi_founding_day/imgs/icon.png
--- a/100_projects/1-saudi_founding_day/imgs/original-2.webp
+++ b/100_projects/1-saudi_founding_day/imgs/original-2.webp
--- a/100_projects/1-saudi_founding_day/imgs/original-3.webp
+++ b/100_projects/1-saudi_founding_day/imgs/original-3.webp
--- a/100_projects/1-saudi_founding_day/imgs/original-4.webp
+++ b/100_projects/1-saudi_founding_day/imgs/original-4.webp
--- a/100_projects/1-saudi_founding_day/imgs/original.webp
+++ b/100_projects/1-saudi_founding_day/imgs/original.webp
--- a/100_projects/1-saudi_founding_day/index.html
+++ b/100_projects/1-saudi_founding_day/index.html
@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en" dir="rtl">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="css/style.css">
+  <link rel="stylesheet" href="css/all.min.css">
+  <title>يوم التأسيس</title>
+  <link rel="icon" href="imgs/icon.png">
+</head>
+<body>
+  <div class="header">
+    <div class="nav">
+      <img src="imgs/original.webp">
+      <div id="menuToggle" onclick="menuToggle();">
+        <i class="fa-solid fa-bars"></i>
+      </div>
+      <ul id="navigation">
+        <li><a href="#">قصتنا</a></li>
+        <li><a href="#">تحميل الهوية</a></li>
+        <li><a href="#">تواصل معنا</a></li>
+      </ul>
+    </div>
+    <div class="landing">
+      <div class="boxImg">
+        <img src="imgs/original-2.webp" alt="header">
+      </div>
+      <div class="text">
+        <h1>يوم بدينا</h1>
+        <q> نعتز بذكرى تأسيس هذه الدولة المباركة في العام <br>
+          1139هـ (1727م), منذ ذلك التاريخ وحتى اليوم؛ <br>
+          أرست ركائز السلم والاستقرار وتحقيق العدل <br>
+          والحمد لله على كل النعم
+        </q>
+        <p>الملك سلمان بن عبدالعزيز آل سعود</p>
+        <button>تحميل الهوية</button>
+      </div>
+      <div class="background"></div>
+    </div>
+  </div>
+  <script src="js/main.js"></script>
+  <script src="js/all.min.js"></script>
+</body>
+</html>
--- a/100_projects/1-saudi_founding_day/js/all.min.js
+++ b/100_projects/1-saudi_founding_day/js/all.min.js
--- a/100_projects/1-saudi_founding_day/js/main.js
+++ b/100_projects/1-saudi_founding_day/js/main.js
@ -0,0 +1,13 @@
+// Toggle Menu
+function menuToggle(){
+	const menuToggle = document.getElementById('menuToggle');
+	const navigation = document.getElementById('navigation');
+	menuToggle.classList.toggle('active');
+	navigation.classList.toggle('active');
+};
+
+
+// Time & Date (Footer)
+setInterval(function(){
+document.getElementById('date').innerHTML = Date();
+},1000);
--- a/100_projects/1-saudi_founding_day/webfonts/fa-brands-400.ttf
+++ b/100_projects/1-saudi_founding_day/webfonts/fa-brands-400.ttf
--- a/100_projects/1-saudi_founding_day/webfonts/fa-brands-400.woff2
+++ b/100_projects/1-saudi_founding_day/webfonts/fa-brands-400.woff2
--- a/100_projects/1-saudi_founding_day/webfonts/fa-regular-400.ttf
+++ b/100_projects/1-saudi_founding_day/webfonts/fa-regular-400.ttf
--- a/100_projects/1-saudi_founding_day/webfonts/fa-regular-400.woff2
+++ b/100_projects/1-saudi_founding_day/webfonts/fa-regular-400.woff2
--- a/100_projects/1-saudi_founding_day/webfonts/fa-solid-900.ttf
+++ b/100_projects/1-saudi_founding_day/webfonts/fa-solid-900.ttf
--- a/100_projects/1-saudi_founding_day/webfonts/fa-solid-900.woff2
+++ b/100_projects/1-saudi_founding_day/webfonts/fa-solid-900.woff2
--- a/100_projects/1-saudi_founding_day/webfonts/fa-v4compatibility.ttf
+++ b/100_projects/1-saudi_founding_day/webfonts/fa-v4compatibility.ttf
--- a/100_projects/1-saudi_founding_day/webfonts/fa-v4compatibility.woff2
+++ b/100_projects/1-saudi_founding_day/webfonts/fa-v4compatibility.woff2