WhatTheHack/Perfect_trip.html at master · lightjacket/WhatTheHack · GitHub

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
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" >
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Perfect Trip</title>
<style>

body{
    position:absolute;
    width:100%;
    height:100%;
    margin:0;
    padding:0;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight:900;
    font-size:1.3em;
    color: white;
    background: url('empire.jpg');
    background-position: 24% 0%;
    background-repeat: no-repeat;
    text-align: center;
}

video#bgvid {
position: absolute; right: 0; bottom: 0;
min-width: 100%; min-height: 100%;
width: auto; height: auto;
z-index: -100;
background: url(sample.png) no-repeat;
background-size: cover;
}
video { display: block; }

.myButton {
background-size: 400px;
margin:0 auto;
width: 80%;

}

p{
text-align:top;
}

    #footer{
        position:absolute;
        height:50%;
        bottom:0;
        width:100%;
        left:0;
        padding:3em;
        box-sizing:border-box;
        text-align:center;
    }

    #footer a{
        font-size:1.3em;
        color:white;
    }

</style>
<!--[if lt IE 9]>
<script>
document.createElement('video');
</script>
<![endif]-->


</head>

<body>
<div id="header">
<h1></h1>
</div>

<video autoplay loop poster="sample.jpg" id="bgvid">
<source src="sample.mp4" type="video/mp4">
</video>
<p>
</p>
<img src="button.png" class="myButton"></img>
<div id="footer">
Welcome to Perfect Trip, where you and your pals can decide on the perfect destination for your group travel.<br><br><a href='form2.html'>Do it ></a>
</div>


</body>
</html>