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-04-21 00:04:13 +03:00 committed by GitHub
parent daa3dec4fa
commit 496aae7633
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 179 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
100_projects/59-season's-greetings-happy-eid-2023/index.html Normal file
View File

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>dcoument</title>
</head>
<body>
<div class="container-outer">
<div class="container">
<div class="main-text">
<div class="top">
<p>EID</p>
</div>
<div class="bottom">
<p>EID</p>
</div>
<div class="sub-text">
<p>mubarak</p>
</div>
<div class="date">
<p>2023</p>
</div>
</div>
</div>
<footer>
<p class="left">An Eid of 2023 (Season's Greetings!)</p>
<p class="right">Built using By <strong>x39OME</strong></p>
</footer>
</body>
</html>

147
100_projects/59-season's-greetings-happy-eid-2023/style.css Normal file
View File

@ -0,0 +1,147 @@
html, body {
height: 100%;
font-family: 'Poppins', sans-serif;
}
body {
width: 100%;
background: rgb(26,140,141);
background: radial-gradient(ellipse at center, rgb(141, 59, 26) 0%,rgb(120, 3, 110) 100%);
}
strong {
font-weight: bold;
}
.container-outer {
display: table;
width: 100%;
height: 100%;
}
.container {
width: 100%;
margin: 0 auto;
display: table-cell;
vertical-align: middle;
}
p {
color: #fff;
}
.main-text {
position: relative;
}
.top p, .bottom p {
line-height: 1;
margin: 0;
text-align: center;
font-weight: bold;
font-size: 72px;
letter-spacing: 10px;
position: absolute;
width: 100%;
}
.top, .bottom {
width: 100%;
display: block;
overflow: hidden;
position: relative;
animation-duration: 1s;
animation-fill-mode: forwards;
animation-delay: 1s;
}
.bottom p {
bottom: 0px;
}
.top {
height: 32px;
animation-name: goUp;
}
.bottom {
height: 41px;
animation-name: goDown;
}
.sub-text p {
text-align: center;
font-size: 24px;
line-height: 1;
font-weight: 300;
text-transform: uppercase;
letter-spacing: 10px;
margin: 0;
position: absolute;
width: 100%;
top: 50%;
transform: translateY(-70%);
opacity: 0;
animation-name: fadeIn;
animation-duration: 1s;
animation-fill-mode: forwards;
animation-delay: 2s;
}
.date {
margin-top: 20px;
opacity: 0;
animation-name: fadeIn;
animation-duration: 1s;
animation-fill-mode: forwards;
animation-delay: 3s;
}
.date p {
position: absolute;
text-align: center;
font-size: 24px;
line-height: 1;
font-weight: 300;
text-transform: uppercase;
letter-spacing: 10px;
margin: 0;
width: 100%;
}
@keyframes goUp {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-22px);
}
}
@keyframes goDown {
0% {
transform: translateY(0);
}
100% {
transform: translateY(22px);
}
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
footer {
display: block;
width: 100%;
padding: 15px;
box-sizing: border-box;
position: absolute;
left: 0;
bottom: 0;
}
footer::after {
content: '';
display: table;
clear: both;
}
footer p {
font-weight: 300;
font-size: 12px;
}
footer .left {
float: left;
text-align: left;
}
footer .right {
float: right;
text-align: right;
}