Add files via upload
This commit is contained in:
Sam
GitHub
parent
7d53cd958e
commit
5ff93631fc
6
css/all.min.css
vendored
Normal file
6
css/all.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
187
css/style.css
Normal file
187
css/style.css
Normal file
@ -0,0 +1,187 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Aboreto&display=swap');
|
||||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: 'Aboreto', cursive;
|
||||
}
|
||||
|
||||
.header{
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background: url(../img/bg1.jpg);
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.header .container{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.header .container .countdown-container{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
font-size: 30px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.header .container .countdown-container small{
|
||||
font-size: 20px;
|
||||
}
|
||||
.header #text{
|
||||
position: relative;
|
||||
font-size: 50px;
|
||||
text-align: center;
|
||||
transition: .3s;
|
||||
padding-top: 150px;
|
||||
}
|
||||
.header .clouds{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
}
|
||||
.header .clouds img{
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
max-width: 100%;
|
||||
animation: animate calc(10s * var(--i)) linear infinite;
|
||||
}
|
||||
@keyframes animate{
|
||||
0%{
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
|
||||
100%{
|
||||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
|
||||
/* Start My Projects*/
|
||||
|
||||
section{
|
||||
position: relative;
|
||||
padding: 75px 100px;
|
||||
}
|
||||
section h2{
|
||||
position: relative;
|
||||
font-size: 2.5em;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
section .projects{
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||||
gap: 30px;
|
||||
}
|
||||
section .projects .box{
|
||||
box-shadow:
|
||||
0 2px 15px rgba( 0 0 0 / 20%),
|
||||
0 -2px 15px rgba( 0 0 0 / 20%);
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
section .projects .box img{
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
height: 200px;
|
||||
}
|
||||
section .projects .box .content{
|
||||
padding: 20px;
|
||||
}
|
||||
section .projects .box .content h3{
|
||||
margin: 0;
|
||||
}
|
||||
section .projects .box .content p{
|
||||
color: #777;
|
||||
line-height: 1.5;
|
||||
margin: 10px 0 0;
|
||||
}
|
||||
section .projects .box .info{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
border-top: 1px solid #e6e6e7;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* Footer*/
|
||||
|
||||
footer{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background: rgba(0, 0, 0, .9);
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
footer .copyright{
|
||||
color: #fff;
|
||||
}
|
||||
footer .media ul{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap:10px
|
||||
}
|
||||
footer .media ul li{
|
||||
list-style: none;
|
||||
}
|
||||
footer .media ul li a{
|
||||
color: #000;
|
||||
padding: 10px 13px;
|
||||
background: #fff;
|
||||
border-radius: 50%;
|
||||
transition: .3s;
|
||||
}
|
||||
footer .media ul li a:hover{
|
||||
background: #000;
|
||||
color: #fff;
|
||||
}
|
||||
@media(max-width:767px){
|
||||
footer{
|
||||
flex-direction: column;
|
||||
gap: 30px;
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Scroll to Top */
|
||||
|
||||
.scrollTop{
|
||||
position: fixed;
|
||||
bottom: 70px;
|
||||
right: -50px;
|
||||
font-size: 20px;
|
||||
padding: 5px 7px;
|
||||
background: #000;
|
||||
color: #fff;
|
||||
border-radius: 5px;
|
||||
transition: .3s;
|
||||
cursor: pointer;
|
||||
}
|
||||
.scrollTop.show{
|
||||
right: 20px;
|
||||
}
|
||||
.scrollTop:hover{
|
||||
background: #000;
|
||||
color: #fff;
|
||||
}
|
||||
BIN
img/bg1.jpg
Normal file
BIN
img/bg1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 182 KiB |
BIN
img/cloud1.png
Normal file
BIN
img/cloud1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 319 KiB |
BIN
img/cloud2.png
Normal file
BIN
img/cloud2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 327 KiB |
BIN
img/cloud3.png
Normal file
BIN
img/cloud3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 427 KiB |
BIN
img/cloud4.png
Normal file
BIN
img/cloud4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 518 KiB |
BIN
img/cloud5.png
Normal file
BIN
img/cloud5.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 491 KiB |
911
index.html
Normal file
911
index.html
Normal file
@ -0,0 +1,911 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<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>Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<h1 id="text">100 Projects In 100 Days</h1>
|
||||
<div class="container">
|
||||
<div class="countdown-container">
|
||||
<div class="time">
|
||||
<h1 id="days">00</h1>
|
||||
<small>days</small>
|
||||
</div>
|
||||
<div class="time">
|
||||
<h1 id="hours">00</h1>
|
||||
<small>hours</small>
|
||||
</div>
|
||||
<div class="time">
|
||||
<h1 id="minutes">00</h1>
|
||||
<small>minutes</small>
|
||||
</div>
|
||||
<div class="time">
|
||||
<h1 id="seconds">00</h1>
|
||||
<small>seconds</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="clouds">
|
||||
<img src="img/cloud1.png" style="--i:1;" alt="cloud">
|
||||
<img src="img/cloud2.png" style="--i:2;" alt="cloud">
|
||||
<img src="img/cloud3.png" style="--i:3;" alt="cloud">
|
||||
<img src="img/cloud4.png" style="--i:4;" alt="cloud">
|
||||
<img src="img/cloud5.png" style="--i:5;" alt="cloud">
|
||||
<img src="img/cloud1.png" style="--i:10;" alt="cloud">
|
||||
<img src="img/cloud2.png" style="--i:9;" alt="cloud">
|
||||
<img src="img/cloud3.png" style="--i:8;" alt="cloud">
|
||||
<img src="img/cloud4.png" style="--i:7;" alt="cloud">
|
||||
<img src="img/cloud5.png" style="--i:6;" alt="cloud">
|
||||
</div>
|
||||
</div>
|
||||
<section>
|
||||
<h2>My Projects</h2>
|
||||
<div class="projects">
|
||||
<!-- Box -->
|
||||
<div class="box">
|
||||
<img src="img/1.jpg" alt="">
|
||||
<div class="content">
|
||||
<h3>Day 1</h3>
|
||||
<p>lorem !!</p>
|
||||
</div>
|
||||
<div class="info">
|
||||
<a class="live-demo" src=""> Live Demo </a>
|
||||
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Box -->
|
||||
<!-- Box -->
|
||||
<div class="box">
|
||||
<img src="img/1.jpg" alt="">
|
||||
<div class="content">
|
||||
<h3>Day 1</h3>
|
||||
<p>Lorem</p>
|
||||
</div>
|
||||
<div class="info">
|
||||
<a class="live-demo" src=""> Live Demo </a>
|
||||
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Box -->
|
||||
<!-- Box -->
|
||||
<div class="box">
|
||||
<img src="img/1.jpg" alt="">
|
||||
<div class="content">
|
||||
<h3>Day 1</h3>
|
||||
<p>lorem !!</p>
|
||||
</div>
|
||||
<div class="info">
|
||||
<a class="live-demo" src=""> Live Demo </a>
|
||||
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Box -->
|
||||
<!-- Box -->
|
||||
<div class="box">
|
||||
<img src="img/1.jpg" alt="">
|
||||
<div class="content">
|
||||
<h3>Day 1</h3>
|
||||
<p>lorem !!</p>
|
||||
</div>
|
||||
<div class="info">
|
||||
<a class="live-demo" src=""> Live Demo </a>
|
||||
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Box -->
|
||||
<!-- Box -->
|
||||
<div class="box">
|
||||
<img src="img/1.jpg" alt="">
|
||||
<div class="content">
|
||||
<h3>Day 1</h3>
|
||||
<p>lorem !!</p>
|
||||
</div>
|
||||
<div class="info">
|
||||
<a class="live-demo" src=""> Live Demo </a>
|
||||
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Box -->
|
||||
<!-- Box -->
|
||||
<div class="box">
|
||||
<img src="img/1.jpg" alt="">
|
||||
<div class="content">
|
||||
<h3>Day 1</h3>
|
||||
<p>Lorem</p>
|
||||
</div>
|
||||
<div class="info">
|
||||
<a class="live-demo" src=""> Live Demo </a>
|
||||
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Box -->
|
||||
<!-- Box -->
|
||||
<div class="box">
|
||||
<img src="img/1.jpg" alt="">
|
||||
<div class="content">
|
||||
<h3>Day 1</h3>
|
||||
<p>lorem !!</p>
|
||||
</div>
|
||||
<div class="info">
|
||||
<a class="live-demo" src=""> Live Demo </a>
|
||||
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Box -->
|
||||
<!-- Box -->
|
||||
<div class="box">
|
||||
<img src="img/1.jpg" alt="">
|
||||
<div class="content">
|
||||
<h3>Day 1</h3>
|
||||
<p>lorem !!</p>
|
||||
</div>
|
||||
<div class="info">
|
||||
<a class="live-demo" src=""> Live Demo </a>
|
||||
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Box -->
|
||||
<!-- Box -->
|
||||
<div class="box">
|
||||
<img src="img/1.jpg" alt="">
|
||||
<div class="content">
|
||||
<h3>Day 1</h3>
|
||||
<p>lorem !!</p>
|
||||
</div>
|
||||
<div class="info">
|
||||
<a class="live-demo" src=""> Live Demo </a>
|
||||
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Box -->
|
||||
<!-- Box -->
|
||||
<div class="box">
|
||||
<img src="img/1.jpg" alt="">
|
||||
<div class="content">
|
||||
<h3>Day 1</h3>
|
||||
<p>Lorem</p>
|
||||
</div>
|
||||
<div class="info">
|
||||
<a class="live-demo" src=""> Live Demo </a>
|
||||
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Box -->
|
||||
<!-- Box -->
|
||||
<div class="box">
|
||||
<img src="img/1.jpg" alt="">
|
||||
<div class="content">
|
||||
<h3>Day 1</h3>
|
||||
<p>lorem !!</p>
|
||||
</div>
|
||||
<div class="info">
|
||||
<a class="live-demo" src=""> Live Demo </a>
|
||||
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Box -->
|
||||
<!-- Box -->
|
||||
<div class="box">
|
||||
<img src="img/1.jpg" alt="">
|
||||
<div class="content">
|
||||
<h3>Day 1</h3>
|
||||
<p>lorem !!</p>
|
||||
</div>
|
||||
<div class="info">
|
||||
<a class="live-demo" src=""> Live Demo </a>
|
||||
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Box -->
|
||||
<!-- Box -->
|
||||
<div class="box">
|
||||
<img src="img/1.jpg" alt="">
|
||||
<div class="content">
|
||||
<h3>Day 1</h3>
|
||||
<p>lorem !!</p>
|
||||
</div>
|
||||
<div class="info">
|
||||
<a class="live-demo" src=""> Live Demo </a>
|
||||
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Box -->
|
||||
<!-- Box -->
|
||||
<div class="box">
|
||||
<img src="img/1.jpg" alt="">
|
||||
<div class="content">
|
||||
<h3>Day 1</h3>
|
||||
<p>Lorem</p>
|
||||
</div>
|
||||
<div class="info">
|
||||
<a class="live-demo" src=""> Live Demo </a>
|
||||
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Box -->
|
||||
<!-- Box -->
|
||||
<div class="box">
|
||||
<img src="img/1.jpg" alt="">
|
||||
<div class="content">
|
||||
<h3>Day 1</h3>
|
||||
<p>lorem !!</p>
|
||||
</div>
|
||||
<div class="info">
|
||||
<a class="live-demo" src=""> Live Demo </a>
|
||||
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Box -->
|
||||
<!-- Box -->
|
||||
<div class="box">
|
||||
<img src="img/1.jpg" alt="">
|
||||
<div class="content">
|
||||
<h3>Day 1</h3>
|
||||
<p>lorem !!</p>
|
||||
</div>
|
||||
<div class="info">
|
||||
<a class="live-demo" src=""> Live Demo </a>
|
||||
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Box -->
|
||||
<!-- Box -->
|
||||
<div class="box">
|
||||
<img src="img/1.jpg" alt="">
|
||||
<div class="content">
|
||||
<h3>Day 1</h3>
|
||||
<p>lorem !!</p>
|
||||
</div>
|
||||
<div class="info">
|
||||
<a class="live-demo" src=""> Live Demo </a>
|
||||
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Box -->
|
||||
<!-- Box -->
|
||||
<div class="box">
|
||||
<img src="img/1.jpg" alt="">
|
||||
<div class="content">
|
||||
<h3>Day 1</h3>
|
||||
<p>Lorem</p>
|
||||
</div>
|
||||
<div class="info">
|
||||
<a class="live-demo" src=""> Live Demo </a>
|
||||
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Box -->
|
||||
<!-- Box -->
|
||||
<div class="box">
|
||||
<img src="img/1.jpg" alt="">
|
||||
<div class="content">
|
||||
<h3>Day 1</h3>
|
||||
<p>lorem !!</p>
|
||||
</div>
|
||||
<div class="info">
|
||||
<a class="live-demo" src=""> Live Demo </a>
|
||||
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Box -->
|
||||
<!-- Box -->
|
||||
<div class="box">
|
||||
<img src="img/1.jpg" alt="">
|
||||
<div class="content">
|
||||
<h3>Day 1</h3>
|
||||
<p>lorem !!</p>
|
||||
</div>
|
||||
<div class="info">
|
||||
<a class="live-demo" src=""> Live Demo </a>
|
||||
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Box -->
|
||||
<!-- Box -->
|
||||
<div class="box">
|
||||
<img src="img/1.jpg" alt="">
|
||||
<div class="content">
|
||||
<h3>Day 1</h3>
|
||||
<p>lorem !!</p>
|
||||
</div>
|
||||
<div class="info">
|
||||
<a class="live-demo" src=""> Live Demo </a>
|
||||
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Box -->
|
||||
<!-- Box -->
|
||||
<div class="box">
|
||||
<img src="img/1.jpg" alt="">
|
||||
<div class="content">
|
||||
<h3>Day 1</h3>
|
||||
<p>Lorem</p>
|
||||
</div>
|
||||
<div class="info">
|
||||
<a class="live-demo" src=""> Live Demo </a>
|
||||
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Box -->
|
||||
<!-- Box -->
|
||||
<div class="box">
|
||||
<img src="img/1.jpg" alt="">
|
||||
<div class="content">
|
||||
<h3>Day 1</h3>
|
||||
<p>lorem !!</p>
|
||||
</div>
|
||||
<div class="info">
|
||||
<a class="live-demo" src=""> Live Demo </a>
|
||||
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Box -->
|
||||
<!-- Box -->
|
||||
<div class="box">
|
||||
<img src="img/1.jpg" alt="">
|
||||
<div class="content">
|
||||
<h3>Day 1</h3>
|
||||
<p>lorem !!</p>
|
||||
</div>
|
||||
<div class="info">
|
||||
<a class="live-demo" src=""> Live Demo </a>
|
||||
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Box -->
|
||||
<!-- Box -->
|
||||
<div class="box">
|
||||
<img src="img/1.jpg" alt="">
|
||||
<div class="content">
|
||||
<h3>Day 1</h3>
|
||||
<p>lorem !!</p>
|
||||
</div>
|
||||
<div class="info">
|
||||
<a class="live-demo" src=""> Live Demo </a>
|
||||
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Box -->
|
||||
<!-- Box -->
|
||||
<div class="box">
|
||||
<img src="img/1.jpg" alt="">
|
||||
<div class="content">
|
||||
<h3>Day 1</h3>
|
||||
<p>Lorem</p>
|
||||
</div>
|
||||
<div class="info">
|
||||
<a class="live-demo" src=""> Live Demo </a>
|
||||
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Box -->
|
||||
<!-- Box -->
|
||||
<div class="box">
|
||||
<img src="img/1.jpg" alt="">
|
||||
<div class="content">
|
||||
<h3>Day 1</h3>
|
||||
<p>lorem !!</p>
|
||||
</div>
|
||||
<div class="info">
|
||||
<a class="live-demo" src=""> Live Demo </a>
|
||||
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Box -->
|
||||
<!-- Box -->
|
||||
<div class="box">
|
||||
<img src="img/1.jpg" alt="">
|
||||
<div class="content">
|
||||
<h3>Day 1</h3>
|
||||
<p>lorem !!</p>
|
||||
</div>
|
||||
<div class="info">
|
||||
<a class="live-demo" src=""> Live Demo </a>
|
||||
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Box -->
|
||||
<!-- Box -->
|
||||
<div class="box">
|
||||
<img src="img/1.jpg" alt="">
|
||||
<div class="content">
|
||||
<h3>Day 1</h3>
|
||||
<p>lorem !!</p>
|
||||
</div>
|
||||
<div class="info">
|
||||
<a class="live-demo" src=""> Live Demo </a>
|
||||
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Box -->
|
||||
<!-- Box -->
|
||||
<div class="box">
|
||||
<img src="img/1.jpg" alt="">
|
||||
<div class="content">
|
||||
<h3>Day 1</h3>
|
||||
<p>Lorem</p>
|
||||
</div>
|
||||
<div class="info">
|
||||
<a class="live-demo" src=""> Live Demo </a>
|
||||
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Box -->
|
||||
<!-- Box -->
|
||||
<div class="box">
|
||||
<img src="img/1.jpg" alt="">
|
||||
<div class="content">
|
||||
<h3>Day 1</h3>
|
||||
<p>lorem !!</p>
|
||||
</div>
|
||||
<div class="info">
|
||||
<a class="live-demo" src=""> Live Demo </a>
|
||||
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Box -->
|
||||
<!-- Box -->
|
||||
<div class="box">
|
||||
<img src="img/1.jpg" alt="">
|
||||
<div class="content">
|
||||
<h3>Day 1</h3>
|
||||
<p>lorem !!</p>
|
||||
</div>
|
||||
<div class="info">
|
||||
<a class="live-demo" src=""> Live Demo </a>
|
||||
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Box -->
|
||||
<!-- Box -->
|
||||
<div class="box">
|
||||
<img src="img/1.jpg" alt="">
|
||||
<div class="content">
|
||||
<h3>Day 1</h3>
|
||||
<p>lorem !!</p>
|
||||
</div>
|
||||
<div class="info">
|
||||
<a class="live-demo" src=""> Live Demo </a>
|
||||
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Box -->
|
||||
<!-- Box -->
|
||||
<div class="box">
|
||||
<img src="img/1.jpg" alt="">
|
||||
<div class="content">
|
||||
<h3>Day 1</h3>
|
||||
<p>Lorem</p>
|
||||
</div>
|
||||
<div class="info">
|
||||
<a class="live-demo" src=""> Live Demo </a>
|
||||
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Box -->
|
||||
<!-- Box -->
|
||||
<div class="box">
|
||||
<img src="img/1.jpg" alt="">
|
||||
<div class="content">
|
||||
<h3>Day 1</h3>
|
||||
<p>lorem !!</p>
|
||||
</div>
|
||||
<div class="info">
|
||||
<a class="live-demo" src=""> Live Demo </a>
|
||||
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Box -->
|
||||
<!-- Box -->
|
||||
<div class="box">
|
||||
<img src="img/1.jpg" alt="">
|
||||
<div class="content">
|
||||
<h3>Day 1</h3>
|
||||
<p>lorem !!</p>
|
||||
</div>
|
||||
<div class="info">
|
||||
<a class="live-demo" src=""> Live Demo </a>
|
||||
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Box -->
|
||||
<!-- Box -->
|
||||
<div class="box">
|
||||
<img src="img/1.jpg" alt="">
|
||||
<div class="content">
|
||||
<h3>Day 1</h3>
|
||||
<p>lorem !!</p>
|
||||
</div>
|
||||
<div class="info">
|
||||
<a class="live-demo" src=""> Live Demo </a>
|
||||
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Box -->
|
||||
<!-- Box -->
|
||||
<div class="box">
|
||||
<img src="img/1.jpg" alt="">
|
||||
<div class="content">
|
||||
<h3>Day 1</h3>
|
||||
<p>Lorem</p>
|
||||
</div>
|
||||
<div class="info">
|
||||
<a class="live-demo" src=""> Live Demo </a>
|
||||
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Box -->
|
||||
<!-- Box -->
|
||||
<div class="box">
|
||||
<img src="img/1.jpg" alt="">
|
||||
<div class="content">
|
||||
<h3>Day 1</h3>
|
||||
<p>lorem !!</p>
|
||||
</div>
|
||||
<div class="info">
|
||||
<a class="live-demo" src=""> Live Demo </a>
|
||||
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Box -->
|
||||
<!-- Box -->
|
||||
<div class="box">
|
||||
<img src="img/1.jpg" alt="">
|
||||
<div class="content">
|
||||
<h3>Day 1</h3>
|
||||
<p>lorem !!</p>
|
||||
</div>
|
||||
<div class="info">
|
||||
<a class="live-demo" src=""> Live Demo </a>
|
||||
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Box -->
|
||||
<!-- Box -->
|
||||
<div class="box">
|
||||
<img src="img/1.jpg" alt="">
|
||||
<div class="content">
|
||||
<h3>Day 1</h3>
|
||||
<p>lorem !!</p>
|
||||
</div>
|
||||
<div class="info">
|
||||
<a class="live-demo" src=""> Live Demo </a>
|
||||
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Box -->
|
||||
<!-- Box -->
|
||||
<div class="box">
|
||||
<img src="img/1.jpg" alt="">
|
||||
<div class="content">
|
||||
<h3>Day 1</h3>
|
||||
<p>Lorem</p>
|
||||
</div>
|
||||
<div class="info">
|
||||
<a class="live-demo" src=""> Live Demo </a>
|
||||
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Box -->
|
||||
<!-- Box -->
|
||||
<div class="box">
|
||||
<img src="img/1.jpg" alt="">
|
||||
<div class="content">
|
||||
<h3>Day 1</h3>
|
||||
<p>lorem !!</p>
|
||||
</div>
|
||||
<div class="info">
|
||||
<a class="live-demo" src=""> Live Demo </a>
|
||||
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Box -->
|
||||
<!-- Box -->
|
||||
<div class="box">
|
||||
<img src="img/1.jpg" alt="">
|
||||
<div class="content">
|
||||
<h3>Day 1</h3>
|
||||
<p>lorem !!</p>
|
||||
</div>
|
||||
<div class="info">
|
||||
<a class="live-demo" src=""> Live Demo </a>
|
||||
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Box -->
|
||||
<!-- Box -->
|
||||
<div class="box">
|
||||
<img src="img/1.jpg" alt="">
|
||||
<div class="content">
|
||||
<h3>Day 1</h3>
|
||||
<p>lorem !!</p>
|
||||
</div>
|
||||
<div class="info">
|
||||
<a class="live-demo" src=""> Live Demo </a>
|
||||
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Box -->
|
||||
<!-- Box -->
|
||||
<div class="box">
|
||||
<img src="img/1.jpg" alt="">
|
||||
<div class="content">
|
||||
<h3>Day 1</h3>
|
||||
<p>Lorem</p>
|
||||
</div>
|
||||
<div class="info">
|
||||
<a class="live-demo" src=""> Live Demo </a>
|
||||
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Box -->
|
||||
<!-- Box -->
|
||||
<div class="box">
|
||||
<img src="img/1.jpg" alt="">
|
||||
<div class="content">
|
||||
<h3>Day 1</h3>
|
||||
<p>lorem !!</p>
|
||||
</div>
|
||||
<div class="info">
|
||||
<a class="live-demo" src=""> Live Demo </a>
|
||||
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Box -->
|
||||
<!-- Box -->
|
||||
<div class="box">
|
||||
<img src="img/1.jpg" alt="">
|
||||
<div class="content">
|
||||
<h3>Day 1</h3>
|
||||
<p>lorem !!</p>
|
||||
</div>
|
||||
<div class="info">
|
||||
<a class="live-demo" src=""> Live Demo </a>
|
||||
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Box -->
|
||||
<!-- Box -->
|
||||
<div class="box">
|
||||
<img src="img/1.jpg" alt="">
|
||||
<div class="content">
|
||||
<h3>Day 1</h3>
|
||||
<p>lorem !!</p>
|
||||
</div>
|
||||
<div class="info">
|
||||
<a class="live-demo" src=""> Live Demo </a>
|
||||
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Box -->
|
||||
<!-- Box -->
|
||||
<div class="box">
|
||||
<img src="img/1.jpg" alt="">
|
||||
<div class="content">
|
||||
<h3>Day 1</h3>
|
||||
<p>Lorem</p>
|
||||
</div>
|
||||
<div class="info">
|
||||
<a class="live-demo" src=""> Live Demo </a>
|
||||
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Box -->
|
||||
<!-- Box -->
|
||||
<div class="box">
|
||||
<img src="img/1.jpg" alt="">
|
||||
<div class="content">
|
||||
<h3>Day 1</h3>
|
||||
<p>lorem !!</p>
|
||||
</div>
|
||||
<div class="info">
|
||||
<a class="live-demo" src=""> Live Demo </a>
|
||||
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Box -->
|
||||
<!-- Box -->
|
||||
<div class="box">
|
||||
<img src="img/1.jpg" alt="">
|
||||
<div class="content">
|
||||
<h3>Day 1</h3>
|
||||
<p>lorem !!</p>
|
||||
</div>
|
||||
<div class="info">
|
||||
<a class="live-demo" src=""> Live Demo </a>
|
||||
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Box -->
|
||||
<!-- Box -->
|
||||
<div class="box">
|
||||
<img src="img/1.jpg" alt="">
|
||||
<div class="content">
|
||||
<h3>Day 1</h3>
|
||||
<p>lorem !!</p>
|
||||
</div>
|
||||
<div class="info">
|
||||
<a class="live-demo" src=""> Live Demo </a>
|
||||
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Box -->
|
||||
<!-- Box -->
|
||||
<div class="box">
|
||||
<img src="img/1.jpg" alt="">
|
||||
<div class="content">
|
||||
<h3>Day 1</h3>
|
||||
<p>Lorem</p>
|
||||
</div>
|
||||
<div class="info">
|
||||
<a class="live-demo" src=""> Live Demo </a>
|
||||
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Box -->
|
||||
<!-- Box -->
|
||||
<div class="box">
|
||||
<img src="img/1.jpg" alt="">
|
||||
<div class="content">
|
||||
<h3>Day 1</h3>
|
||||
<p>lorem !!</p>
|
||||
</div>
|
||||
<div class="info">
|
||||
<a class="live-demo" src=""> Live Demo </a>
|
||||
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Box -->
|
||||
<!-- Box -->
|
||||
<div class="box">
|
||||
<img src="img/1.jpg" alt="">
|
||||
<div class="content">
|
||||
<h3>Day 1</h3>
|
||||
<p>lorem !!</p>
|
||||
</div>
|
||||
<div class="info">
|
||||
<a class="live-demo" src=""> Live Demo </a>
|
||||
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Box -->
|
||||
<!-- Box -->
|
||||
<div class="box">
|
||||
<img src="img/1.jpg" alt="">
|
||||
<div class="content">
|
||||
<h3>Day 1</h3>
|
||||
<p>lorem !!</p>
|
||||
</div>
|
||||
<div class="info">
|
||||
<a class="live-demo" src=""> Live Demo </a>
|
||||
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Box -->
|
||||
<!-- Box -->
|
||||
<div class="box">
|
||||
<img src="img/1.jpg" alt="">
|
||||
<div class="content">
|
||||
<h3>Day 1</h3>
|
||||
<p>Lorem</p>
|
||||
</div>
|
||||
<div class="info">
|
||||
<a class="live-demo" src=""> Live Demo </a>
|
||||
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Box -->
|
||||
<!-- Box -->
|
||||
<div class="box">
|
||||
<img src="img/1.jpg" alt="">
|
||||
<div class="content">
|
||||
<h3>Day 1</h3>
|
||||
<p>lorem !!</p>
|
||||
</div>
|
||||
<div class="info">
|
||||
<a class="live-demo" src=""> Live Demo </a>
|
||||
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Box -->
|
||||
<!-- Box -->
|
||||
<div class="box">
|
||||
<img src="img/1.jpg" alt="">
|
||||
<div class="content">
|
||||
<h3>Day 1</h3>
|
||||
<p>lorem !!</p>
|
||||
</div>
|
||||
<div class="info">
|
||||
<a class="live-demo" src=""> Live Demo </a>
|
||||
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Box -->
|
||||
<!-- Box -->
|
||||
<div class="box">
|
||||
<img src="img/1.jpg" alt="">
|
||||
<div class="content">
|
||||
<h3>Day 1</h3>
|
||||
<p>lorem !!</p>
|
||||
</div>
|
||||
<div class="info">
|
||||
<a class="live-demo" src=""> Live Demo </a>
|
||||
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Box -->
|
||||
<!-- Box -->
|
||||
<div class="box">
|
||||
<img src="img/1.jpg" alt="">
|
||||
<div class="content">
|
||||
<h3>Day 1</h3>
|
||||
<p>Lorem</p>
|
||||
</div>
|
||||
<div class="info">
|
||||
<a class="live-demo" src=""> Live Demo </a>
|
||||
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Box -->
|
||||
<!-- Box -->
|
||||
<div class="box">
|
||||
<img src="img/1.jpg" alt="">
|
||||
<div class="content">
|
||||
<h3>Day 1</h3>
|
||||
<p>lorem !!</p>
|
||||
</div>
|
||||
<div class="info">
|
||||
<a class="live-demo" src=""> Live Demo </a>
|
||||
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Box -->
|
||||
<!-- Box -->
|
||||
<div class="box">
|
||||
<img src="img/1.jpg" alt="">
|
||||
<div class="content">
|
||||
<h3>Day 1</h3>
|
||||
<p>lorem !!</p>
|
||||
</div>
|
||||
<div class="info">
|
||||
<a class="live-demo" src=""> Live Demo </a>
|
||||
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Box -->
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<footer>
|
||||
<div class="copyright">Copyrights <i class="fa-regular fa-copyright"></i> 2022 All Rights Reserved by x39OME <i class="fa-solid fa-heart"></i></div>
|
||||
<div class="media">
|
||||
<ul>
|
||||
<li><a href="https://www.tiktok.com/@x39ome?lang=en" target="_blank"><i class="fa-brands fa-tiktok"></i></a></li>
|
||||
<li><a href="https://twitter.com/x39OME" target="_blank"><i class="fa-brands fa-twitter"></i></a></li>
|
||||
<li><a href="https://www.instagram.com/x39OME" target="_blank"><i class="fa-brands fa-instagram"></i></a></li>
|
||||
<li><a href="https://www.snapchat.com/add/x39OME" target="_blank"><i class="fa-brands fa-snapchat"></i></a></li>
|
||||
<li><a href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a></li>
|
||||
<li><a href="https://codepen.io/x39OME" target="_blank"><i class="fa-brands fa-codepen"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="date">
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- Scroll To Top -->
|
||||
<div class="scrollTop"><i class="fa-regular fa-circle-up"></i></div>
|
||||
<!-- Scroll To Top -->
|
||||
|
||||
<script src="js/main.js"></script>
|
||||
<script src="js/all.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
6
js/all.min.js
vendored
Normal file
6
js/all.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
40
js/main.js
Normal file
40
js/main.js
Normal file
@ -0,0 +1,40 @@
|
||||
// Time
|
||||
|
||||
const body = document.body;
|
||||
const endTime = new Date('9 13 2022 23:59:59');
|
||||
const daysEl = document.getElementById('days');
|
||||
const hoursEl = document.getElementById('hours');
|
||||
const minutesEl = document.getElementById('minutes');
|
||||
const secondsEl = document.getElementById('seconds');
|
||||
|
||||
setInterval(updateCountdown, 1000)
|
||||
|
||||
function updateCountdown() {
|
||||
const startTime = new Date();
|
||||
const diff = endTime - startTime;
|
||||
const days = Math.floor(diff / 1000 / 60 / 60 / 24);
|
||||
const hours = Math.floor(diff / 1000 / 60 / 60) % 24;
|
||||
const minutes = Math.floor(diff / 1000 / 60) % 60;
|
||||
const seconds = Math.floor(diff / 1000) % 60;
|
||||
daysEl.innerHTML = days;
|
||||
hoursEl.innerHTML = hours < 10 ? '0'+hours : hours;
|
||||
minutesEl.innerHTML = minutes < 10 ? '0'+minutes : minutes;
|
||||
secondsEl.innerHTML = seconds < 10 ? '0'+seconds : seconds;
|
||||
}
|
||||
|
||||
// Data
|
||||
const time = new Date();
|
||||
document.getElementById("date").innerHTML = time;
|
||||
// scroll To Top
|
||||
|
||||
let scrollTop = document.querySelector('.scrollTop');
|
||||
|
||||
window.onscroll = function (){
|
||||
this.scrollY >= 1000 ? scrollTop.classList.add('show') : scrollTop.classList.remove('show');
|
||||
};
|
||||
scrollTop.onclick = function(){
|
||||
window.scrollTo({
|
||||
top: 0,
|
||||
behavior:'smooth'
|
||||
});
|
||||
};
|
||||
BIN
webfonts/fa-brands-400.ttf
Normal file
BIN
webfonts/fa-brands-400.ttf
Normal file
Binary file not shown.
BIN
webfonts/fa-brands-400.woff2
Normal file
BIN
webfonts/fa-brands-400.woff2
Normal file
Binary file not shown.
BIN
webfonts/fa-regular-400.ttf
Normal file
BIN
webfonts/fa-regular-400.ttf
Normal file
Binary file not shown.
BIN
webfonts/fa-regular-400.woff2
Normal file
BIN
webfonts/fa-regular-400.woff2
Normal file
Binary file not shown.
BIN
webfonts/fa-solid-900.ttf
Normal file
BIN
webfonts/fa-solid-900.ttf
Normal file
Binary file not shown.
BIN
webfonts/fa-solid-900.woff2
Normal file
BIN
webfonts/fa-solid-900.woff2
Normal file
Binary file not shown.
BIN
webfonts/fa-v4compatibility.ttf
Normal file
BIN
webfonts/fa-v4compatibility.ttf
Normal file
Binary file not shown.
BIN
webfonts/fa-v4compatibility.woff2
Normal file
BIN
webfonts/fa-v4compatibility.woff2
Normal file
Binary file not shown.
Loading…
Reference in New Issue
Block a user