Skip to content

Commit b347b2d

Browse files
xeon-zoltxeon-zolt
authored
Merge pull request #3 from xeon-zolt/master
added minimal landing page with no links
2 parents ba82487 + 856139e commit b347b2d

14 files changed

+131
-21515
lines changed

‎.DS_Store

-6 KB
Binary file not shown.

‎css/materialize.css

Lines changed: 0 additions & 9039 deletions
This file was deleted.

‎css/materialize.min.css

Lines changed: 0 additions & 13 deletions
This file was deleted.

‎css/style.css

Lines changed: 41 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,49 @@
1-
nav ul a,
2-
nav .brand-logo {
3-
color: #444;
1+
body {
2+
font: 400 1em/1.5 "Neuton";
3+
background: #090d00;
4+
color: rgba(255, 255, 255, 0.25);
5+
text-align: center;
6+
margin: 0;
47
}
58

69
p {
7-
line-height: 2rem;
8-
}
9-
10-
.sidenav-trigger {
11-
color: #26a69a;
12-
}
13-
14-
.parallax-container {
15-
min-height: 380px;
16-
line-height: 0;
17-
height: auto;
18-
color: rgba(255,255,255,.9);
10+
text-transform: uppercase;
11+
letter-spacing: .5em;
12+
display: inline-block;
13+
border: 4px double rgba(255, 255, 255, 0.25);
14+
border-width: 4px 0;
15+
padding: 1.5em 0em;
16+
position: absolute;
17+
top: 18%;
18+
left: 50%;
19+
width: 40em;
20+
margin: 0 0 0 -20em;
21+
}
22+
p span {
23+
font: 700 4em/1 "Oswald", sans-serif;
24+
letter-spacing: 0;
25+
padding: .25em 0 .325em;
26+
display: block;
27+
margin: 0 auto;
28+
text-shadow: 0 0 80px rgba(255, 255, 255, 0.5);
29+
/* Clip Background Image */
30+
background: url(https://i.imgur.com/9nKeCKC.png) repeat-y;
31+
-webkit-background-clip: text;
32+
background-clip: text;
33+
/* Animate Background Image */
34+
-webkit-text-fill-color: transparent;
35+
-webkit-animation: aitf 80s linear infinite;
36+
/* Activate hardware acceleration for smoother animations */
37+
-webkit-transform: translate3d(0, 0, 0);
38+
-webkit-backface-visibility: hidden;
1939
}
20-
.parallax-container .section {
21-
width: 100%;
22-
}
2340

24-
@media only screen and (max-width : 992px) {
25-
.parallax-container .section {
26-
position: absolute;
27-
top: 40%;
41+
/* Animate Background Image */
42+
@-webkit-keyframes aitf {
43+
0% {
44+
background-position: 0% 50%;
2845
}
29-
#index-banner .section {
30-
top: 10%;
46+
100% {
47+
background-position: 100% 50%;
3148
}
3249
}
33-
34-
@media only screen and (max-width : 600px) {
35-
#index-banner .section {
36-
top: 0;
37-
}
38-
}
39-
40-
.icon-block {
41-
padding: 0 15px;
42-
}
43-
.icon-block .material-icons {
44-
font-size: inherit;
45-
}
46-
47-
footer.page-footer {
48-
margin: 0;
49-
}

‎images/.DS_Store

-6 KB
Binary file not shown.

‎images/animation.png

5.35 KB
Loading

‎images/background1.jpg

-97.2 KB
Binary file not shown.

‎images/background2.jpg

-183 KB
Binary file not shown.

‎images/background3.jpg

-172 KB
Binary file not shown.

‎index.html

Lines changed: 74 additions & 153 deletions
Original file line numberDiff line numberDiff line change
@@ -1,164 +1,85 @@
11
<!DOCTYPE html>
2-
<html lang="en">
2+
<html lang="en" >
3+
34
<head>
4-
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
5-
<meta name="viewport" content="width=device-width, initial-scale=1"/>
5+
<meta charset="UTF-8">
66
<title>Yogdaan</title>
7+
<meta name="viewport" content="width=device-width, initial-scale=1">
8+
9+
10+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
11+
12+
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Neuton|Oswald'>
13+
14+
<style>
15+
/* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
16+
body {
17+
font: 400 1em/1.5 "Neuton";
18+
background: #090d00;
19+
color: rgba(255, 255, 255, 0.25);
20+
text-align: center;
21+
margin: 0;
22+
}
23+
24+
p {
25+
text-transform: uppercase;
26+
letter-spacing: .5em;
27+
display: inline-block;
28+
border: 4px double rgba(255, 255, 255, 0.25);
29+
border-width: 4px 0;
30+
padding: 1.5em 0em;
31+
position: absolute;
32+
top: 18%;
33+
left: 50%;
34+
width: 40em;
35+
margin: 0 0 0 -20em;
36+
}
37+
p span {
38+
font: 700 4em/1 "Oswald", sans-serif;
39+
letter-spacing: 0;
40+
padding: .25em 0 .325em;
41+
display: block;
42+
margin: 0 auto;
43+
text-shadow: 0 0 80px rgba(255, 255, 255, 0.5);
44+
/* Clip Background Image */
45+
background: url(images/animation.png) repeat-y;
46+
-webkit-background-clip: text;
47+
background-clip: text;
48+
/* Animate Background Image */
49+
-webkit-text-fill-color: transparent;
50+
-webkit-animation: aitf 80s linear infinite;
51+
/* Activate hardware acceleration for smoother animations */
52+
-webkit-transform: translate3d(0, 0, 0);
53+
-webkit-backface-visibility: hidden;
54+
}
55+
56+
/* Animate Background Image */
57+
@-webkit-keyframes aitf {
58+
0% {
59+
background-position: 0% 50%;
60+
}
61+
100% {
62+
background-position: 100% 50%;
63+
}
64+
}
65+
66+
</style>
67+
68+
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
769

8-
<!-- CSS -->
9-
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
10-
<link href="css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection"/>
11-
<link href="css/style.css" type="text/css" rel="stylesheet" media="screen,projection"/>
1270
</head>
13-
<body>
14-
<nav class="white" role="navigation">
15-
<div class="nav-wrapper container">
16-
<a id="logo-container" href="#" class="brand-logo">Logo</a>
17-
<ul class="right hide-on-med-and-down">
18-
<li><a href="#">Navbar Link</a></li>
19-
</ul>
20-
21-
<ul id="nav-mobile" class="sidenav">
22-
<li><a href="#">Navbar Link</a></li>
23-
</ul>
24-
<a href="#" data-target="nav-mobile" class="sidenav-trigger"><i class="material-icons">menu</i></a>
25-
</div>
26-
</nav>
27-
28-
<div id="index-banner" class="parallax-container">
29-
<div class="section no-pad-bot">
30-
<div class="container">
31-
<br><br>
32-
<h1 class="header center teal-text text-lighten-2">Title</h1>
33-
<div class="row center">
34-
<h5 class="header col s12 light">Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit error voluptas veritatis quae nihil quam. Asperiores dolorum ab, voluptates voluptatem fugit laudantium magnam nemo alias sit dolor quaerat, natus nostrum.</h5>
35-
</div>
36-
<div class="row center">
37-
<a href="#!" id="download-button" class="btn-large waves-effect waves-light teal lighten-1">Get Started</a>
38-
</div>
39-
<br><br>
40-
41-
</div>
42-
</div>
43-
<div class="parallax"><img src="images/background1.jpg" alt="Unsplashed background img 1"></div>
44-
</div>
45-
46-
47-
<div class="container">
48-
<div class="section">
49-
50-
<!-- Icon Section -->
51-
<div class="row">
52-
<div class="col s12 m4">
53-
<div class="icon-block">
54-
<h2 class="center brown-text"><i class="material-icons">domain</i></h2>
55-
<h5 class="center">Title</h5>
56-
57-
<p class="light">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate, id architecto perferendis ipsa, amet perspiciatis et incidunt praesentium, tempora veritatis fugit. Minus non exercitationem maxime ratione officiis, error doloribus esse.</p>
58-
</div>
59-
</div>
60-
61-
<div class="col s12 m4">
62-
<div class="icon-block">
63-
<h2 class="center brown-text"><i class="material-icons">group</i></h2>
64-
<h5 class="center">Title</h5>
65-
66-
<p class="light">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate, id architecto perferendis ipsa, amet perspiciatis et incidunt praesentium, tempora veritatis fugit. Minus non exercitationem maxime ratione officiis, error doloribus esse.</p>
67-
</div>
68-
</div>
69-
70-
<div class="col s12 m4">
71-
<div class="icon-block">
72-
<h2 class="center brown-text"><i class="material-icons">public</i></h2>
73-
<h5 class="center">Title</h5>
74-
75-
<p class="light">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate, id architecto perferendis ipsa, amet perspiciatis et incidunt praesentium, tempora veritatis fugit. Minus non exercitationem maxime ratione officiis, error doloribus esse.</p>
76-
</div>
77-
</div>
78-
</div>
79-
80-
</div>
81-
</div>
82-
83-
84-
<div class="parallax-container valign-wrapper">
85-
<div class="section no-pad-bot">
86-
<div class="container">
87-
<div class="row center">
88-
<h5 class="header col s12 light">Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis corrupti natus pariatur ducimus nisi unde nam? Expedita est, fugit officiis aliquid voluptatum odio. Repudiandae aut, facere ea ratione porro maiores.</h5>
89-
</div>
90-
</div>
91-
</div>
92-
<div class="parallax"><img src="images/background2.jpg" alt="Unsplashed background img 2"></div>
93-
</div>
94-
95-
<div class="container">
96-
<div class="section">
97-
98-
<div class="row">
99-
<div class="col s12 center">
100-
<h3><i class="mdi-content-send brown-text"></i></h3>
101-
<h4>Contact Us</h4>
102-
<p class="left-align light">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque id nunc nec volutpat. Etiam pellentesque tristique arcu, non consequat magna fermentum ac. Cras ut ultricies eros. Maecenas eros justo, ullamcorper a sapien id, viverra ultrices eros. Morbi sem neque, posuere et pretium eget, bibendum sollicitudin lacus. Aliquam eleifend sollicitudin diam, eu mattis nisl maximus sed. Nulla imperdiet semper molestie. Morbi massa odio, condimentum sed ipsum ac, gravida ultrices erat. Nullam eget dignissim mauris, non tristique erat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
103-
</div>
104-
</div>
105-
106-
</div>
107-
</div>
108-
109-
110-
<div class="parallax-container valign-wrapper">
111-
<div class="section no-pad-bot">
112-
<div class="container">
113-
<div class="row center">
114-
<h5 class="header col s12 light">Lorem ipsum dolor sit amet consectetur adipisicing elit. Et qui minima repudiandae atque, totam maiores possimus similique quod ab, saepe quasi blanditiis ut soluta natus libero temporibus, odit praesentium itaque?</h5>
115-
</div>
116-
</div>
117-
</div>
118-
<div class="parallax"><img src="images/background3.jpg" alt="Unsplashed background img 3"></div>
119-
</div>
120-
121-
<footer class="page-footer teal">
122-
<div class="container">
123-
<div class="row">
124-
<div class="col l6 s12">
125-
<h5 class="white-text">Title</h5>
126-
<p class="grey-text text-lighten-4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur, soluta omnis. Laudantium facilis, rerum deleniti, assumenda impedit maxime officia perspiciatis repudiandae saepe pariatur omnis praesentium nisi accusantium, cum molestias eligendi?</p>
12771

72+
<body>
12873

129-
</div>
130-
<div class="col l3 s12">
131-
<h5 class="white-text">Title</h5>
132-
<ul>
133-
<li><a class="white-text" href="#!">Link 1</a></li>
134-
<li><a class="white-text" href="#!">Link 2</a></li>
135-
<li><a class="white-text" href="#!">Link 3</a></li>
136-
<li><a class="white-text" href="#!">Link 4</a></li>
137-
</ul>
138-
</div>
139-
<div class="col l3 s12">
140-
<h5 class="white-text">Title</h5>
141-
<ul>
142-
<li><a class="white-text" href="#!">Link 1</a></li>
143-
<li><a class="white-text" href="#!">Link 2</a></li>
144-
<li><a class="white-text" href="#!">Link 3</a></li>
145-
<li><a class="white-text" href="#!">Link 4</a></li>
146-
</ul>
147-
</div>
148-
</div>
149-
</div>
150-
<div class="footer-copyright">
151-
<div class="container">
152-
Made with <span style="color: #e25555;">&hearts;</span> by devs.
153-
</div>
154-
</div>
155-
</footer>
74+
<p>
75+
<span>
76+
Yogdaan
77+
</span>
78+
</p>
79+
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
15680

81+
15782

158-
<!-- Scripts-->
159-
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
160-
<script src="js/materialize.js"></script>
161-
<script src="js/init.js"></script>
83+
</body>
16284

163-
</body>
16485
</html>

0 commit comments

Comments
 (0)