-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathv2.html
More file actions
143 lines (127 loc) · 5.79 KB
/
v2.html
File metadata and controls
143 lines (127 loc) · 5.79 KB
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
135
136
137
138
139
140
141
142
143
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Two Columns Layout</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<style>
body{
font-family: "Open Sans";
color: #333;
}
/* Custom CSS for height */
.custom-height {
height: 500px;
display: flex;
align-items: center;
}
.row:not(:nth-child(1)){
margin-top:15rem;
}
</style>
</head>
<body>
<nav>
<div class="container d-flex justify-content-between py-3 align-items-right">
<form action="">
<select name="Select Variation" class="form-control" id="animationSelect" onchange="redirect()">
<option selected disabled>Please select animation type</option>
<option value="index.html" >Fade In</option>
<option value="v2.html">Bounce</option>
</select>
</form>
</div>
</nav>
<div class="container">
<div class="row mb-3">
<div class="col-md-6">
<div class="bg-white border p-3 custom-height">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa dicta ea enim fuga fugiat incidunt inventore ipsa mollitia natus nulla obcaecati, perspiciatis quia totam. Aliquam cum fugit harum quos sed?
</div>
</div>
<div class="col-md-6">
<div class="bg-white border p-3 custom-height">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa dicta ea enim fuga fugiat incidunt inventore ipsa mollitia natus nulla obcaecati, perspiciatis quia totam. Aliquam cum fugit harum quos sed?
Column 2
</div>
</div>
</div>
<!-- Repeat the above row for remaining 4 pairs of columns -->
<div class="row mb-3" data-aos="fade-up">
<div class="col-md-6">
<div class="bg-white border p-3 custom-height">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa dicta ea enim fuga fugiat incidunt inventore ipsa mollitia natus nulla obcaecati, perspiciatis quia totam. Aliquam cum fugit harum quos sed?
</div>
</div>
<div class="col-md-6">
<div class="bg-white border p-3 custom-height">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa dicta ea enim fuga fugiat incidunt inventore ipsa mollitia natus nulla obcaecati, perspiciatis quia totam. Aliquam cum fugit harum quos sed?
</div>
</div>
</div>
<div class="row mb-3" data-aos="fade-up">
<div class="col-md-6">
<div class="bg-white border p-3 custom-height">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa dicta ea enim fuga fugiat incidunt inventore ipsa mollitia natus nulla obcaecati, perspiciatis quia totam. Aliquam cum fugit harum quos sed?
</div>
</div>
<div class="col-md-6">
<div class="bg-white border p-3 custom-height">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa dicta ea enim fuga fugiat incidunt inventore ipsa mollitia natus nulla obcaecati, perspiciatis quia totam. Aliquam cum fugit harum quos sed?
</div>
</div>
</div>
<div class="row mb-3" data-aos="fade-up">
<div class="col-md-6">
<div class="bg-white border p-3 custom-height">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa dicta ea enim fuga fugiat incidunt inventore ipsa mollitia natus nulla obcaecati, perspiciatis quia totam. Aliquam cum fugit harum quos sed?
</div>
</div>
<div class="col-md-6">
<div class="bg-white border p-3 custom-height">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa dicta ea enim fuga fugiat incidunt inventore ipsa mollitia natus nulla obcaecati, perspiciatis quia totam. Aliquam cum fugit harum quos sed?
</div>
</div>
</div>
<div class="row mb-3" data-aos="fade-up">
<div class="col-md-6">
<div class="bg-white border p-3 custom-height">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa dicta ea enim fuga fugiat incidunt inventore ipsa mollitia natus nulla obcaecati, perspiciatis quia totam. Aliquam cum fugit harum quos sed?
</div>
</div>
<div class="col-md-6">
<div class="bg-white border p-3 custom-height">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa dicta ea enim fuga fugiat incidunt inventore ipsa mollitia natus nulla obcaecati, perspiciatis quia totam. Aliquam cum fugit harum quos sed?
</div>
</div>
</div>
</div>
<script>
function redirect() {
var selectBox = document.getElementById("animationSelect");
var selectedValue = selectBox.options[selectBox.selectedIndex].value;
if (selectedValue !== "") {
window.location.href = selectedValue;
}
}
</script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script>
AOS.init({
useClassNames: true,
animatedClassName: 'fadeup',
once: true,
mirror: false,
anchorPlacement: 'top-bottom',
easing: 'ease',
duration:"2000",
});
</script>
</body>
</html>