x39OME/100-project-100-days-website
Template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add files via upload

Browse Source
This commit is contained in:
Sam 2023-02-20 11:17:33 +03:00 committed by GitHub
parent cd1d43d6a8
commit 7d1c16fbd1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
19 changed files with 247 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
100_projects/1-saudi_founding_day/README.md Normal file
View File

@ -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 الخميس

6
100_projects/1-saudi_founding_day/css/all.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

168
100_projects/1-saudi_founding_day/css/style.css Normal file
View File

@ -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;
}
}

BIN
100_projects/1-saudi_founding_day/imgs/icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 53 KiB

BIN
100_projects/1-saudi_founding_day/imgs/original-2.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 161 KiB

BIN
100_projects/1-saudi_founding_day/imgs/original-3.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 98 KiB

BIN
100_projects/1-saudi_founding_day/imgs/original-4.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 114 KiB

BIN
100_projects/1-saudi_founding_day/imgs/original.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 92 KiB

45
100_projects/1-saudi_founding_day/index.html Normal file
View File

@ -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>

6
100_projects/1-saudi_founding_day/js/all.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

13
100_projects/1-saudi_founding_day/js/main.js Normal file
View File

@ -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);

BIN
100_projects/1-saudi_founding_day/webfonts/fa-brands-400.ttf Normal file
View File

Binary file not shown.

BIN
100_projects/1-saudi_founding_day/webfonts/fa-brands-400.woff2 Normal file
View File

Binary file not shown.

BIN
100_projects/1-saudi_founding_day/webfonts/fa-regular-400.ttf Normal file
View File

Binary file not shown.

BIN
100_projects/1-saudi_founding_day/webfonts/fa-regular-400.woff2 Normal file
View File

Binary file not shown.

BIN
100_projects/1-saudi_founding_day/webfonts/fa-solid-900.ttf Normal file
View File

Binary file not shown.

BIN
100_projects/1-saudi_founding_day/webfonts/fa-solid-900.woff2 Normal file
View File

Binary file not shown.

BIN
100_projects/1-saudi_founding_day/webfonts/fa-v4compatibility.ttf Normal file
View File

Binary file not shown.

BIN
100_projects/1-saudi_founding_day/webfonts/fa-v4compatibility.woff2 Normal file
View File

Binary file not shown.