Commit 2d2fc5b7 authored by edpibu's avatar edpibu 🚵🏻

First version, unidirectionnal navigation

parent 0712afbf
This diff is collapsed.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=devics-width, initial-scale=1">
<title>Edgar P. Burkhart</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="left img"></div>
<div class="right main">
<div class="content">
<h1>Edgar P. <em>Burkhart</em></h1>
<h2>
<a href="#">@edpiburkhart</a>
&mdash;
<a href="mailto:edpibu@crans.org">edpibu@crans.org</a>
</h2>
</div>
<div class="next">
<a href="#next">>-></a>
</div>
</div>
<div class="after">
<div class="content">
<h1>Edgar P. <em>Burkhart</em></h1>
<h2>
<a href="#">@edpiburkhart</a>
&mdash;
<a href="mailto:edpibu@crans.org">edpibu@crans.org</a>
</h2>
</div>
<div class="next">
<a href="#next">>-></a>
</div>
</div>
<div class="after">
<div class="content">
<h1>Edgar P. <em>Burkhart</em></h1>
<h2>
<a href="#">@edpiburkhart</a>
&mdash;
<a href="mailto:edpibu@crans.org">edpibu@crans.org</a>
</h2>
</div>
</div>
<script src="main.js"></script>
</body>
</html>
\ No newline at end of file
/*
Colors: royalblue, #435999, #5CDAFF, #FFBE9C, #CC5335;
*/
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-family: IBM Plex Sans, sans-serif;
font-weight: 500;
color: #000000de;
font-size: 1.4rem;
overflow-x: hidden;
}
h1 {
font-weight: 400;
}
h2 {
font-weight: 200;
font-size: 1.1em;
}
em {
font-weight: 800;
font-style: normal;
text-transform: none;
}
a {
text-decoration: inherit;
color: inherit;
}
.right, .left, .after {
position: absolute;
top: 0;
bottom: 0;
width: 50%;
padding: 50px;
-webkit-transition: left 1s, box-shadow 1s;
-o-transition: left 1s, box-shadow 1s;
transition: left 1s, box-shadow 1s;
}
.right {
position: absolute;
left: 50%;
box-shadow: 0 0 25px #000000de;
-webkit-box-shadow: 0 0 25px #000000de;
}
.left {
left: 0;
background: white;
}
.img {
background-image: url("bg.jpg");
-webkit-background-size: cover;
background-size: cover;
background-position: center center;
}
.main {
color: #ffffffde;
background: #435999;
}
.after {
left: 100%;
}
.content {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
.next {
font-family: Fira Code;
position: absolute;
bottom: 50px;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
-webkit-transition: opacity 100ms;
-o-transition: opacity 100ms;
transition: opacity 100ms;
}
.next>a:hover {
opacity: .95;
}
.next>a:active {
opacity: .8;
}
.left .next {
display: none;
}
\ No newline at end of file
window.addEventListener("load", () => {
console.log(0);
document.querySelectorAll(".next>a").forEach((e) => {
e.addEventListener("click", () => {
document.querySelector(".right").classList.add("left");
document.querySelector(".right").classList.remove("right");
document.querySelector(".after").classList.add("right");
document.querySelector(".after").classList.remove("after");
});
});
});
\ No newline at end of file
Markdown is supported
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