Skip to content
Snippets Groups Projects
Commit f66b0802 authored by KevinDutier desktop's avatar KevinDutier desktop
Browse files

initial commit

parents
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
index.html 0 → 100644
+ 104
− 0
View file @ f66b0802
<!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="./style.css" />
<title>homepage</title>
</head>
<body>
<div class="main">
<span class="datetime"></span>
<div class="main-container">
<div class="link-container">
<h1 class="title" style="color: #820000">music</h1>
<ul class="list">
<li class="link">
<a href="https://open.spotify.com/">spotify</a>
</li>
<li class="link">
<a href="https://www.musicca.com/metronome/">metronome</a>
</li>
<li class="link">
<a href="https://www.all-guitar-chords.com/scales/">scales</a>
</li>
</ul>
</div>
<div class="link-container">
<h1 class="title" style="color: #f96666">general</h1>
<ul class="list">
<li class="link">
<a href="https://www.google.com/">google</a>
</li>
<li class="link">
<a href="https://en.wikipedia.org/wiki/Main_Page">wiki</a>
</li>
<li class="link">
<a href="https://store.steampowered.com/">steam</a>
</li>
<li class="link">
<a href="https://www.amazon.com/">amazon</a>
</li>
</ul>
</div>
<div class="link-container">
<h1 class="title" style="color: #f2deba">social</h1>
<ul class="list">
<li class="link">
<a href="https://www.youtube.com/">youtube</a>
</li>
<li class="link">
<a href="https://twitter.com/">twitter</a>
</li>
<li class="link">
<a href="https://boards.4channel.org/g/">/g/</a>
</li>
</ul>
</div>
<div class="link-container">
<h1 class="title" style="color: #678983">work</h1>
<ul class="list">
<li class="link">
<a href="https://mail.google.com/mail/u/0/?ogbl#inbox">gmail</a>
</li>
<li class="link">
<a href="https://www.linkedin.com/">linkedin</a>
</li>
</ul>
</div>
<div class="link-container">
<h1 class="title" style="color: #7f669d">dev</h1>
<ul class="list">
<li class="link">
<a href="http://localhost:3000/">localhost:3000</a>
</li>
<li class="link">
<a href="https://github.com/">github</a>
</li>
<li class="link">
<a href="https://htmlcolorcodes.com/">html colors</a>
</li>
<li class="link">
<a href="https://www.hackerrank.com/">hackerrank</a>
</li>
</ul>
</div>
</div>
</div>
<!-- "no-referrer" allows you to use imgur image (without it, image won't load) -->
<img
class="image"
src="https://i.imgur.com/CeMXQB0.png"
referrerpolicy="no-referrer"
/>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
script.js 0 → 100644
+ 10
− 0
View file @ f66b0802
let dt = new Date();
let time = document.querySelector(".datetime");
time.innerHTML = (("0"+dt.getDate()).slice(-2)) +"."+ (("0"+(dt.getMonth()+1)).slice(-2)) +"."+ (dt.getFullYear()) +"&nbsp; - &nbsp;"+ (("0"+dt.getHours()).slice(-2)) +":"+ (("0"+dt.getMinutes()).slice(-2));
// updates time every 5 seconds
setInterval(() => {
let d = new Date();
time.innerHTML = (("0"+d.getDate()).slice(-2)) +"."+ (("0"+(d.getMonth()+1)).slice(-2)) +"."+ (d.getFullYear()) +"&nbsp; - &nbsp;"+ (("0"+d.getHours()).slice(-2)) +":"+ (("0"+d.getMinutes()).slice(-2));
}, 5_000);
style.css 0 → 100644
+ 81
− 0
View file @ f66b0802
/* color palette: https://colorhunt.co/palette/8200004e6c50f2debafaecd6 */
/* https://colorhunt.co/palettes/vintage */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Courier New", Courier, monospace;
}
body {
background-color: #080808;
/* prevent text select */
-webkit-user-select: none; /* Safari */
-ms-user-select: none; /* IE 10 and IE 11 */
user-select: none; /* Standard syntax */
}
h1,
ul,
li,
p {
color: #f7f7f7;
}
ul {
list-style-type: none; /* removes bullet points */
}
a {
color: inherit;
text-decoration: none;
cursor: default;
}
a:hover {
/* color: #1d81b2; */
/* color: #FEC260; */
color: #D36B00;
}
.main {
height: 100vh;
width: 100vw;
display: flex;
align-items: center;
}
.main-container {
width: 80vw;
min-width: 800px;
display: flex;
justify-content: center;
z-index: 1;
}
.link-container {
margin: 0 26px;
}
.title {
font-size: 20px;
font-weight: 400;
margin-bottom: 0.15rem;
}
.datetime {
color: #f7f7f7;
position: fixed;
font-size: 18px;
top: 1.3rem;
right: 2rem;
}
.image {
position: fixed;
bottom: 0;
right: 0;
z-index: 0;
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment