forked from jlbdev/Skills-Assessment
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
84 lines (66 loc) · 4.08 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
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<!-- styles -->
<!-- Google Fonts Link Here -->
<link href="https://fonts.googleapis.com/css?family=Montserrat:500,600,900" rel="stylesheet">
<link rel="stylesheet" href="./minified/styles.min.css">
<link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet">
<!-- scripts -->
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script type="text/javascript" src="./minified/scripts.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/aos.js"></script>
<title>Sean Cramer's Skills Assessment</title>
</head>
<body class="jlb-assessment-page">
<div class="header">
<div class="text-box">
<div class="heading-primary">
<div class="heading-primary-main">LORE<span style="letter-spacing: -7px;">M </span>IPSUM</div>
<div class="heading-primary-secondary">DOLOR SIT AMET ARAN</div>
<p class="heading-primary-slug">Pri ei sumo falli, homero euismod reformidans sed cu, stet ornatus eos at. Cu sed nulla praesent, nihil voluptaria liberavisse ut usa, mei iusto noster ut.</p>
</div>
</div>
<div class="header-hero-img">
<img id="hero" src="">
</div>
</div>
<div class="collage-master">
<section class="collage-container1">
<img src="./assets/COLLAGE_IMAGE_1.jpg" style="margin-right: -9px" id="fade-right" data-aos="fade-right" data-aos-anchor="#fade-right">
<img src="./assets/COLLAGE_IMAGE_5.jpg" style="width: 31%;" id="fade-down" data-aos="fade-down" data-aos-anchor="#fade-down">
<img src="./assets/COLLAGE_IMAGE_4.jpg" style="width: 67.1%; margin-right: 0;" id="zoom-in" data-aos="zoom-in" data-aos-anchor="#zoom-in">
</section>
<section class="collage-container2">
<iframe width="660" height="360"
src="https://www.youtube.com/embed/XUF13xMDe8M?controls=1">
</iframe>
<img src="./assets/COLLAGE_IMAGE_2.jpg" style="width: 50.55%;" id="fade-up" data-aos="fade-up" data-aos-anchor="#fade-up">
<img src="./assets/COLLAGE_IMAGE_3.jpg" style="width: 31.13%;" id="fade-left" data-aos="fade-left" data-aos-anchor="#fade-left">
</section>
<section class="txtblock-container">
<div>
<div class="txtblock-heading1">WELCOME TO YOUR</div>
<div class="txtblock-heading2">SKILLS ASSESSMENT.</div>
<div class="txtblock-hr"></div>
<p class="txtblock-main" style="margin-top: 27px;">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. At vero eos et accusam et justo duo dolores et ea rebum.</p>
<p class="txtblock-main" style="margin-top: 15px;">Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit sed diam nonummy nibh euismod.</p>
<p class="txtblock-main-red" style="margin-top: 15px;">Appetere percipit et vis, labores accumsan accusamus pri ut. Purto quidam aeterno pro an, ea rebum simul vix, eros dissentiunt nec id. His ei lorem iuvaret.</p>
</div>
</section>
</div>
<script>
AOS.init({
duration: 1300,
easing: 'ease-out-sine',
anchorPlacement: 'top'
});
window.addEventListener('load', AOS.refresh)
</script>
</body>
</html>