This repository has been archived by the owner on Oct 13, 2020. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
83 lines (73 loc) · 5.68 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>triPi | Developers</title>
<style>
@font-face{font-family:KeepCalm;src:url("../KeepCalm.ttf")}body,html{margin:0;height:100%;width:100%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;font-family:'Century Gothic', sans-serif}header{height:58px;background:#454545;border-bottom:2px solid #898f9c}header div{height:100%}header div .logo{height:100%;width:220px;background-image:url("../_images/logo.png");float:left}header div nav{height:100%;text-align:center;display:flex;justify-content:flex-end}header div nav a{height:100%;min-width:100px;font-size:20px;font-weight:bolder;line-height:58px;text-decoration:none;color:#f7941d;background-size:100% 200%;background-image:linear-gradient(to bottom, transparent 50%, #f7941d 50%);-webkit-transition:background-position 0.2s;-moz-transition:background-position 0.2s;transition:background-position 0.2s, color 0.2s}header div nav a:hover{background-position:0 -100%;color:#454545}.hook{height:80px;background-color:#f7941d;box-shadow:inset 0 0 70px 0 rgba(0,0,0,0.2);display:flex;justify-content:center;align-items:center;transition:height 0.8s}.hook div{display:flex;align-items:center}.hook div h2{margin:0 20px 0 0;font-family:'KeepCalm', 'Century Gothic', sans-serif;letter-spacing:0.04em;font-size:3em;color:white;text-shadow:0 2px 12px rgba(0,0,0,0.8)}.hook div button{height:44px;font-size:16px;padding:6px 12px;cursor:pointer;outline:0;border:2px solid #454545;color:white;background:transparent;border-radius:6px;transition:background 0.2s}.hook div button:hover{background:#898f9c}.wrapper{height:calc(100% - 140px);transition:height 0.8s}.wrapper .content{padding:10px 0 0}.wrapper h1{width:100%;font-size:17em;margin:0;line-height:0.666;padding-top:58px;text-align:center;font-family:'KeepCalm', 'Century Gothic', sans-serif}.current{height:calc(100% - 140px);overflow:hidden}.current iframe{height:calc(100% + 1px);width:100%}.aboutcontent main{margin-top:10px;display:flex}.aboutcontent aside{border:1px solid black;width:300px;height:300px;float:left;flex:none}.aboutcontent div{float:left;flex:auto}.aboutcontent p{margin:20px 0 0 20px}.projectscontent main{margin-top:14px;display:flex;flex-direction:column;flex-wrap:wrap}.projectscontent h1{padding-top:0;line-height:1.148}.projectscontent a{width:100%;height:100px;margin-bottom:14px;font-weight:bold;line-height:100px;text-align:center;text-decoration:none;font-size:28px;color:white;text-shadow:0 0 4px rgba(0,0,0,0.4);box-shadow:0 0 14px 0 rgba(0,0,0,0.4);background-color:#898f9c;background-image:url("../_images/EmptySilhouette2.png");background-size:100%;background-position:top;transition:height 0.4s, background 0.3s, color 1s, text-shadow 1s}.projectscontent a:hover{background-image:url("../_images/MOTACSystems.png");background-position:bottom;height:300px;line-height:300px;color:transparent;text-shadow:0 0 0 transparent;transition:height 0.4s, line-height 0.4s, background 1s, background-position 5s, color 0.3s, text-shadow 0.3s}.container{max-width:1200px;margin:0 auto}.hidden{display:none}.invis{opacity:0}.noselect{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.new{height:calc(100% - 60px)}.fresh{height:0}
</style>
<!-- <noscript> -->
<!-- <meta http-equiv="refresh" content="0; URL='flat'" /> -->
<!-- </noscript> -->
</head>
<body>
<header>
<div class="container noselect">
<a href="." class="logo"></a>
<nav>
<a href="javascript:void(0)" class="btn aboutbtn">About</a>
<a href="javascript:void(0)" class="btn projectsbtn">Projects</a>
<a href="javascript:void(0)" class="btn contactbtn">Contact</a>
<a href="javascript:void(0)" class="btn blogbtn">Blog</a>
</nav>
</div>
</header>
<!-- new here -->
<div class="hook">
<div>
<h2 class="">Find out what we're working on</h2>
<h2 class="invis hidden">Read More</h2>
<button class="noselect current">With One Click</button>
</div>
</div>
<!-- fresh here -->
<div class="wrapper container">
<div class="aboutcontent content invis hidden">
<h1>About</h1>
<main>
<aside></aside>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum excepturi a illo, tempore ipsa modi cum saepe numquam voluptatem officiis! Temporibus aperiam magnam atque repellendus fugiat quae necessitatibus voluptatem tempore.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum excepturi a illo, tempore ipsa modi cum saepe numquam voluptatem officiis! Temporibus aperiam magnam atque repellendus fugiat quae necessitatibus voluptatem tempore.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum excepturi a illo, tempore ipsa modi cum saepe numquam voluptatem officiis! Temporibus aperiam magnam atque repellendus fugiat quae necessitatibus voluptatem tempore.</p>
</div>
</main>
<div class="skills">
we got skiws
</div>
</div>
<div class="projectscontent content">
<h1>Projects</h1>
<main>
<a href="#" class="stripe">
Swoly
</a>
</main>
</div>
<div class="contactcontent content invis hidden">
<p>Contact</p>
</div>
</div>
<!-- <script>
navbtns = document.querySelectorAll(".btn");
hook = document.querySelector(".hook");
wrapper = document.querySelector(".wrapper");
for (var i = 0; i < navbtns.length; i++) {
navbtns[i].addEventListener("click", function(){
hook.classList.remove("new");
wrapper.classList.remove("fresh");
});
}
</script> -->
</body>
</html>