Core-Four-hackpoly2017/intro.html at master · dkoodev/Core-Four-hackpoly2017 · 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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<!DOCTYPE html>
<html>
<head>
	<title>HelloMundo</title>
	<link rel="icon" href="img/bubble.png">
	<style>
		body {
			margin: 0;
			padding: 0;
		}
		.background {
			height: 110vh;
			width: 100%;
			overflow: hidden;
			font-family: futura;
		    background: -webkit-linear-gradient(#E64A2D, #ECA534); /* For Safari 5.1 to 6.0 */
		    background: -o-linear-gradient(#E64A2D, #ECA534); /* For Opera 11.1 to 12.0 */
		    background: -moz-linear-gradient(#E64A2D, #ECA534); /* For Firefox 3.6 to 15 */
		    background: linear-gradient(#E64A2D, #ECA534);
		    text-align: center;
		    color: white;
		}
		.inner{
			position: absolute;
			top: 38%;
			left: 50%;
			border: 2px solid white;
			height: 300px;
			width: 300px;
			transform: translate(-50%, -50%);
			transition: all 1s ease-in-out;

		background: -webkit-linear-gradient(#E7552E,#E97A31); /* For Safari 5.1 to 6.0 */
		    background: -o-linear-gradient(#E7552E,#E97A31); /* For Opera 11.1 to 12.0 */
		    background: -moz-linear-gradient(#E7552E,#E97A31); /* For Firefox 3.6 to 15 */
		    background: linear-gradient(#E7552E,#E97A31);
		}

		.inner:hover {
			left: 25%;
			opacity: 0.5;

		}
		img {
			height: 250px;
			text-align: center;
			padding-right: 20px;
			padding-top: 20px
		}

		.info {
			position: absolute;
			top: 46%;
			left: 50%;
			height: 300px;
			width: 300px;
			transform: translate(-50%, -50%);
			padding: 100px;
		}

		a {
			position: absolute;
			top:67%;
			left: 50%;
			transform: translate(-50%, -50%);
			text-decoration: none;
			color: #E97A31;
			font-size: 30px;
			background-color: white;
			padding: 10px 108px;
			transition: all 0.4s ease-in-out;
		}

		a:hover {
			background-color: rgba(0, 0, 0, .5);
			color: white;
		}
		p {
			font-size: 24px;
			line-height: 20px;
		}

	</style>

</head>
<body>
 <div class="background">
  	<div class="info">
		<p>select your languages</p>
		<p>speak into the microphone</p>
		<p>watch the magic</p>
	</div>
 	<div class="box">
		<div class="inner">
			<img src="img/whitelogo.png"/>
		</div>
		<a href="index.php">start ></a>
	</div>
 </div>


</body>
</html>