forked from zzseba78/Kick-Off
-
Notifications
You must be signed in to change notification settings - Fork 0
/
cover.html
107 lines (105 loc) · 5.04 KB
/
cover.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Cover - UIkit 3 KickOff</title>
<link rel="icon" href="img/favicon.ico">
<!-- CSS FILES -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.2/css/uikit.min.css">
<style>
.wrap::before {
position: absolute;
height: 100vh;
width: 100vw;
content: '';
z-index: 1;
background-color: rgba(0,0,0,0.5);
}
.lead {
font-size: 1.175em;
font-weight: 300;
}
.uk-logo img {
height: 28px;
}
</style>
</head>
<body class="uk-light wrap uk-background-norepeat uk-background-cover uk-background-center-center uk-cover-container uk-background-secondary">
<img srcset="https://picsum.photos/640/700/?image=482 640w,
https://picsum.photos/960/700/?image=482 960w,
https://picsum.photos/1200/900/?image=482 1200w,
https://picsum.photos/2000/1000/?image=482 2000w"
sizes="100vw"
src="https://picsum.photos/1200/900/?image=482" alt="" data-uk-cover data-uk-img
>
<div class="uk-flex uk-flex-center uk-flex-middle uk-height-viewport uk-position-z-index uk-position-relative" data-uk-height-viewport="min-height: 400">
<!-- NAV -->
<div class="uk-position-top">
<div class="uk-container uk-container-small">
<nav class="uk-navbar-container uk-navbar-transparent" data-uk-navbar>
<div class="uk-navbar-left">
<div class="uk-navbar-item">
<a class="uk-logo" href=""><img src="img/cover-logo.svg" alt="Logo"></a>
</div>
</div>
<div class="uk-navbar-right">
<ul class="uk-navbar-nav">
<li class="uk-active uk-visible@m"><a href="" data-uk-icon="home"></a></li>
<li class="uk-visible@s"><a href="">Features</a></li>
<li class="uk-visible@s"><a href="">Security</a></li>
<li class="uk-visible@s"><a href="">Testimonials</a></li>
<li><a class="uk-navbar-toggle" data-uk-toggle data-uk-navbar-toggle-icon href="#offcanvas-nav"></a></li>
</ul>
</div>
</nav>
</div>
</div>
<!-- /NAV -->
<!-- TEXT -->
<div class="uk-container uk-container-small uk-flex-auto uk-text-center" data-uk-scrollspy="target: > .animate; cls: uk-animation-slide-bottom-small uk-invisible; delay: 300">
<h1 class="uk-heading-primary animate uk-invisible" style="font-weight: 700;">Sleek, Fast and Reliable.</h1>
<div class="uk-width-4-5@m uk-margin-auto animate uk-invisible">
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. A ad, reiciendis maxime, facilis nam natus incidunt provident.</p>
</div>
<div class="uk-margin-medium-top animate uk-invisible" data-uk-margin data-uk-scrollspy-class="uk-animation-fade uk-invisible">
<a class="uk-button uk-button-default uk-button-large uk-width-2-3 uk-width-auto@s" data-uk-icon="arrow-right" title="Learn More">LEARN MORE</a>
<a class="uk-button uk-button-primary uk-button-large uk-width-2-3 uk-width-auto@s" data-uk-icon="check" title="Learn More">TRY IT OUT</a>
</div>
</div>
<!-- /TEXT -->
<!-- FOOT -->
<div class="uk-position-bottom-center uk-position-small">
<span class="uk-text-small uk-text-center">© 2019 | <a href="https://github.com/zzseba78/Kick-Off" title="Created by KickOff">Created by KickOff</a> | Built with <a href="http://getuikit.com" title="Visit UIkit 3 site" target="_blank" data-uk-tooltip><span data-uk-icon="uikit"></span></a></span>
</div>
<!-- /FOOT -->
</div>
<!-- OFFCANVAS -->
<div id="offcanvas-nav" data-uk-offcanvas="flip: true; overlay: false">
<div class="uk-offcanvas-bar uk-offcanvas-bar-animation uk-offcanvas-slide">
<button class="uk-offcanvas-close uk-close uk-icon" type="button" data-uk-close></button>
<ul class="uk-nav uk-nav-default">
<li class="uk-active"><a href="#">Active</a></li>
<li class="uk-parent">
<a href="#">Parent</a>
<ul class="uk-nav-sub">
<li><a href="#">Sub item</a></li>
<li><a href="#">Sub item</a></li>
</ul>
</li>
<li class="uk-nav-header">Header</li>
<li><a href="#js-options"><span class="uk-margin-small-right uk-icon" data-uk-icon="icon: table"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-small-right uk-icon" data-uk-icon="icon: thumbnails"></span> Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#"><span class="uk-margin-small-right uk-icon" data-uk-icon="icon: trash"></span> Item</a></li>
</ul>
<h3>Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<!-- /OFFCANVAS -->
<!-- JS FILES -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.2/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.2/js/uikit-icons.min.js"></script>
</body>
</html>