-
Notifications
You must be signed in to change notification settings - Fork 0
/
css.html
134 lines (97 loc) · 5.67 KB
/
css.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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<!DOCTYPE html>
<html>
<head>
<!-- App Title -->
<title>PROJECT</title>
<!-- App Description -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="css/animate.css"/>
<link rel="stylesheet" type="text/css" href="css/main.css"/>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/wow.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<style type="text/css">
a:hover{
font-size: 20pt;
transition: 0.3s;
color: white;
color: aqua;
font-style: italic;
}
#pic1:hover {-webkit-transform:scale(1.2);transform:scale(1.2);}#pic1{-webkit-transition: all 0.7s ease;transition: all 0.7s ease;}
.imb:hover #pic2 {-webkit-transform:scale(1.3);transform:scale(1.3);transition: 0.7s;}#container {overflow:hidden;width:200px;height:150px;}#pic3 {
-webkit-transition: all 0.7s ease;transition: all 0.7s ease;}
.imb:hover #pic3 {-webkit-transform:scale(1);transform:scale(1);}#container {overflow:hidden;width:200px;height:150px;}#pic3 {-webkit-transform:scale(1.3);>transform:scale(1.3);-webkit-transition: all 0.7s ease;transition: all 0.7s ease;}
.imb:hover #pic4{-webkit-transform: rotateY(180deg);
-webkit-transform-style: preserve-3d;transform: rotateY(180deg);transform-style: preserve-3d;}#container #pic4, #container:hover #pic4 {-webkit-transition: all 0.7s ease;transition: all 0.7s ease;}
#pic5:hover {-webkit-box-shadow: 0px 0px 15px 15px #fff;box-shadow: 0px 0px 15px 15px #fff;border-radius:50%;opacity: 0.6;-webkit-transform: rotate(720deg);transform: rotate(720deg);}#pic5 {opacity: 1;-webkit-transition: all 0.7s ease;transition: all 0.7s ease;}
#pic6:hover {border-radius:50%;box-shadow: 0 10px 6px -6px white;}#pic6{-webkit-transition: all 0.7s ease;transition: all 0.7s ease;}
#pic7:hover {-webkit-transform: rotate(45deg);transform: rotate(45deg);}#pic7{-webkit-transition: all 0.7s ease;transition: all 0.7s ease;}
#pic8:hover {-webkit-transform: rotate(-45deg);transform: rotate(-45deg);}#pic7{-webkit-transition: all 0.7s ease;transition: all 0.7s ease;}
</style>
</head>
<body>
<!-- Header Section -->
<header>
<div class="container">
<div class="heading pull-left animated wow bounceInLeft">
<h1>QUICK GAME</h1>
</div>
<nav class="pull-left">
<ul class="list-unstyled">
<li class="animated wow bounceInLeft" data-wow-delay="0s"><a href="index.php"> Home</a></li>
<li class="animated wow bounceInLeft" data-wow-delsay="0s"><a href="index.php#about"> About</a></li>
<li class="animated wow bounceInLeft" data-wow-delay=".8s"><a href="css.html">upcoming games </a></li>
<li class="animated wow bounceInLeft" data-wow-delay="1.2s"><a href="index.php#copy">Contact Us</a></li>
</ul>
</nav>
</div>
</header>
<!-- End Header Section -->
<div class="container">
<h1>UPCOMING GAMES</h1>
<div class="row text-center">
<div class="col-sm-4 col-md-4 details animated wow bounceInLeft" data-wow-delay="0s">
<div class="imb"> <img id="pic1" src="img/home.jpeg" id="pic" alt="" title=""></div>
<h1 class="text-uppercase">HomeFront THE REVOLUTION</h1>
</div>
<div class="col-sm-4 col-md-4 details animated wow bounceInLeft" data-wow-delay=".6s">
<div class="imb"> <img id="pic2" src="img/star.jpeg" id="pic" alt="" title=""></div>
<h1 class="text-uppercase">Star Citizen</h1>
</div>
</div>
<div class="row text-center">
<div class="col-sm-4 col-md-4 details animated wow bounceInLeft" data-wow-delay="1s">
<div class="imb"> <img id="pic3" src="img/tom.jpeg" id="pic" height="200px" width="200px" alt="" title=""></div>
<h1 class="text-uppercase">Rainbow's SIX Siege</h1>
</div>
<div class="col-sm-4 col-md-4 details animated wow bounceInLeft" data-wow-delay="1.2s">
<div class="imb" > <img id="pic4" src="img/creed.jpeg" id="pic" height="200px" width="200px" alt="" title="" style="box-shadow:10px 10px #000;"></div>
<h1 class="text-uppercase">ASSASSIN's CREED VICTORY</h1>
</div>
</div>
<div class="row text-center">
<div class="col-sm-4 col-md-4 details animated wow bounceInLeft" data-wow-delay="1.5s">
<div class="imb"> <img id="pic5" src="img/hell.jpeg" id="pic" height="200px" width="200px" alt="" title=""></div>
<h1 class="text-uppercase">HELLBLADE</h1>
</div>
<div class="col-sm-4 col-md-4 details animated wow bounceInLeft" data-wow-delay="1.5s">
<div class="imb"> <img id="pic6" src="img/mirror.jpeg" id="pic" height="200px" width="300px" alt="" title=""></div>
<h1 class="text-uppercase">Mirror's EDGE 2</h1>
</div>
</div>
<div class="row text-center">
<div class="col-sm-4 col-md-4 details animated wow bounceInLeft" data-wow-delay="1.5s">
<div class="imb"> <img id="pic7" src="img/silent.jpeg" id="pic" height="200px" width="200px" alt="" title=""></div>
<h1 class="text-uppercase">SILENT HILLS</h1>
</div>
<div class="col-sm-4 col-md-4 details animated wow bounceInLeft" data-wow-delay="1.5s">
<div class="imb"> <img id="pic8" src="img/dead.jpeg" id="pic" height="200px" width="200px" alt="" title=""></div>
<h1 class="text-uppercase">Dead ISLAND 2</h1>
</div>
</div>
</div>
</body>
</html>