57 lines
1.4 KiB
HTML
57 lines
1.4 KiB
HTML
<!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
|
|
href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css"
|
|
rel="stylesheet"
|
|
/>
|
|
|
|
<title>root: ~#</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
<link
|
|
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap"
|
|
rel="stylesheet"
|
|
/>
|
|
<link rel="stylesheet" href="./styles.css" />
|
|
</head>
|
|
<body>
|
|
<header class="header">
|
|
<div>
|
|
<h1>Hello there, <span id="userName">Norm!</span>.</h1>
|
|
<p>Today is <span id="currentDate">Monday 1, January 2000</span>.</p>
|
|
</div>
|
|
<p id="currentTime">00:00 PM</p>
|
|
</header>
|
|
<main id="cardContainer"></main>
|
|
<script src="./app.js"></script>
|
|
</body>
|
|
</html>
|
|
<style>
|
|
|
|
body {
|
|
margin-bottom: 0;
|
|
flex-grow: 1;
|
|
background: linear-gradient(145deg, #179160, #096F8E, #F7BB17, #D64A28, #00283C);
|
|
background-size: 700% 550%;
|
|
animation: gradient 7s ease-in-out infinite;
|
|
height: 125vh;
|
|
margin-top: -100px;
|
|
padding-top: 100px;
|
|
}
|
|
@keyframes gradient {
|
|
0% {
|
|
background-position: 0% 79%;
|
|
}
|
|
50% {
|
|
background-position: 100% 22%;
|
|
}
|
|
100% {
|
|
background-position: 0% 79%;
|
|
}
|
|
}
|
|
|
|
</style> |