-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
115 lines (97 loc) · 4.89 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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<!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">
<!-- Custom Browser colors on Mobile -->
<meta name="theme-color" content="#1843c1" />
<meta name="apple-mobile-web-app-status-bar-style" content="#1843c1">
<!-- Primary Meta Tags -->
<title>Build simpler websites in small steps</title>
<meta name="title" content="Build simpler websites in small steps">
<meta name="description"
content="With Simpler Websites you can edit and experiment with your content to make it accessible.">
<link rel="stylesheet" href="styles/main.css">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://metatags.io/">
<meta property="og:title" content="Build simpler websites in small steps">
<meta property="og:description"
content="With Simpler Websites you can edit and experiment with your content to make it accessible.">
<!-- 1200 x 628 -->
<meta property="og:image" content="">
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://metatags.io/">
<meta property="twitter:title" content="Build simpler websites in small steps">
<meta property="twitter:description"
content="With Simpler Websites you can edit and experiment with your content to make it accessible.">
<meta property="twitter:image" content="">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600&display=swap" rel="stylesheet">
</head>
<body class="theme-dark grid gap">
<main data-barba="wrapper" class="">
<header class="responsive-flex flex flex-ai-c flex-jc-sb">
<h1>Simpler Websites</h1>
<nav>
<a href="/about.html">About</a>
<a href="/observer.html">Observer</a>
<a href="/">Home</a>
</nav>
</header>
<div class="load-container">
<div class="loading-screen">
<img class="loading-dog" src="./images/dog.gif" alt="">
</div>
</div>
<section class="barba-container" data-barba="container" data-barba-namespace="home">
<h2 class="animate-fade-up">Home</h2>
<h3 >Lorem ipsum dolor sit amet.</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nihil recusandae voluptates repudiandae dolorem
expedita dignissimos earum officiis quo provident nam cum molestiae perspiciatis dolores, facere hic
minus, quae
itaque quasi.</p>
<h2 class="animate-fade-up">More is less</h2>
<h3>Lorem.</h3>
<figure>
<img width="1500" height="628" src="https://picsum.photos/1400/628" alt="Placeholder Image">
<figcaption>A placeholder image</figcaption>
</figure>
<h2 class="animate-fade-up">More is less</h2>
<h3>Lorem.</h3>
<figure>
<img width="1500" height="628" src="https://picsum.photos/1000/628" alt="Placeholder Image">
<figcaption>A placeholder image</figcaption>
</figure>
<h2 class="animate-fade-up">More is less</h2>
<h3>Lorem. Coffee.</h3>
<video loop muted playsinline preload="none" class="js-viewport-aware-video coffee-video" poster="./images/coffee.jpg">
<source type="video/mp4" src="./videos/coffee.mp4">
</video>
</section>
</main>
<aside class="">
<section>
<h2>Reveal on Scroll</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores rerum sequi numquam officia repellat
maxime, quis unde consectetur est debitis neque, illo enim voluptate animi modi adipisci eum aliquam!
Rem, tempore veritatis fuga dolorem nobis ullam necessitatibus voluptatibus dolores, alias aspernatur
sunt unde minus cum incidunt iste fugiat placeat obcaecati laboriosam ipsum. Temporibus repudiandae ipsa
repellat aperiam voluptate sapiente reiciendis?</p>
<h3>Lorem ipsum dolor sit.</h3>
<ul>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
</ul>
</section>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.6.0/dist/gsap.min.js"></script>
<!-- <script src="https://unpkg.com/@barba/core"></script> -->
<script src="https://cdn.jsdelivr.net/npm/@barba/core"></script>
<script src="./scripts/transitions.js"></script>
</body>
</html>