Skip to content

Commit cdb4e91

Browse files
logustralogustra
committed
add project 3
1 parent 6619bc6 commit cdb4e91

25 files changed

+502
-238
lines changed

‎card-slider-widget.html

Lines changed: 152 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,152 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1">
8+
<title>Simple Jquery Project</title>
9+
<link rel="shortcut icon" href="assets/public/images/logo.png" type="image/png">
10+
11+
<!-- Bootstrap -->
12+
<link rel="stylesheet" href="public/css/bootstrap.min.css">
13+
14+
<!-- Font Awesome -->
15+
<link rel="stylesheet" href="public/css/font-awesome.min.css">
16+
17+
<!-- Style -->
18+
<link rel="stylesheet" href="public/css/main.css">
19+
20+
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
21+
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
22+
<!--[if lt IE 9]>
23+
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
24+
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
25+
<![endif]-->
26+
</head>
27+
28+
<body class="card-slider-widget">
29+
30+
<main>
31+
<div class="container">
32+
<h1>Card Slider Widget</h1>
33+
34+
<div class="item active" data-slider="1" data-background="linear-gradient( rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), url('public/images/deer.jpg') center center no-repeat">
35+
<div class="col-md-3">
36+
<img class="center-block img-responsive" src="public/images/deer.png" alt="deer">
37+
</div>
38+
<!-- .columns -->
39+
40+
<div class="col-md-9">
41+
<h2>Deer</h2>
42+
<p>
43+
Consequat magna tempor enim nisi reprehenderit. Eiusmod laboris ex non dolore pariatur qui magna consectetur sunt qui. Veniam
44+
proident aliqua eu non culpa qui in. Consequat magna tempor enim nisi reprehenderit. Eiusmod laboris
45+
ex non dolore pariatur qui magna consectetur sunt qui. Veniam proident aliqua eu non culpa qui in.
46+
Consequat magna tempor enim nisi reprehenderit. Eiusmod laboris ex non dolore pariatur qui magna
47+
consectetur sunt qui. Veniam proident aliqua eu non culpa qui in. Consequat magna tempor enim nisi
48+
reprehenderit. Eiusmod laboris ex non dolore pariatur qui magna consectetur sunt qui. Veniam proident
49+
aliqua eu non culpa qui in. Consequat magna tempor enim nisi reprehenderit. Eiusmod laboris ex non
50+
dolore pariatur qui magna consectetur sunt qui. Veniam proident aliqua eu non culpa qui in.
51+
</p>
52+
</div>
53+
<!-- .columns -->
54+
</div>
55+
<!-- .item -->
56+
57+
<div class="item" data-slider="2" data-background="linear-gradient( rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), url('public/images/wolf.jpeg') center center no-repeat">
58+
<div class="col-md-3">
59+
<img class="center-block img-responsive" src="public/images/wolf.png" alt="wolf">
60+
</div>
61+
<!-- .columns -->
62+
63+
<div class="col-md-9">
64+
<h2>Wolf</h2>
65+
<p>
66+
Consequat magna tempor enim nisi reprehenderit. Eiusmod laboris ex non dolore pariatur qui magna consectetur sunt qui. Veniam
67+
proident aliqua eu non culpa qui in. Consequat magna tempor enim nisi reprehenderit. Eiusmod laboris
68+
ex non dolore pariatur qui magna consectetur sunt qui. Veniam proident aliqua eu non culpa qui in.
69+
Consequat magna tempor enim nisi reprehenderit. Eiusmod laboris ex non dolore pariatur qui magna
70+
consectetur sunt qui. Veniam proident aliqua eu non culpa qui in. Consequat magna tempor enim nisi
71+
reprehenderit. Eiusmod laboris ex non dolore pariatur qui magna consectetur sunt qui. Veniam proident
72+
aliqua eu non culpa qui in. Consequat magna tempor enim nisi reprehenderit. Eiusmod laboris ex non
73+
dolore pariatur qui magna consectetur sunt qui. Veniam proident aliqua eu non culpa qui in.
74+
</p>
75+
</div>
76+
<!-- .columns -->
77+
</div>
78+
<!-- .item -->
79+
80+
<div class="item" data-slider="3" data-background="linear-gradient( rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), url('public/images/owl.jpg') center center no-repeat">
81+
<div class="col-md-3">
82+
<img class="center-block img-responsive" src="public/images/owl.png" alt="owl">
83+
</div>
84+
<!-- .columns -->
85+
86+
<div class="col-md-9">
87+
<h2>Owl</h2>
88+
<p>
89+
Consequat magna tempor enim nisi reprehenderit. Eiusmod laboris ex non dolore pariatur qui magna consectetur sunt qui. Veniam
90+
proident aliqua eu non culpa qui in. Consequat magna tempor enim nisi reprehenderit. Eiusmod laboris
91+
ex non dolore pariatur qui magna consectetur sunt qui. Veniam proident aliqua eu non culpa qui in.
92+
Consequat magna tempor enim nisi reprehenderit. Eiusmod laboris ex non dolore pariatur qui magna
93+
consectetur sunt qui. Veniam proident aliqua eu non culpa qui in. Consequat magna tempor enim nisi
94+
reprehenderit. Eiusmod laboris ex non dolore pariatur qui magna consectetur sunt qui. Veniam proident
95+
aliqua eu non culpa qui in. Consequat magna tempor enim nisi reprehenderit. Eiusmod laboris ex non
96+
dolore pariatur qui magna consectetur sunt qui. Veniam proident aliqua eu non culpa qui in.
97+
</p>
98+
</div>
99+
<!-- .columns -->
100+
</div>
101+
<!-- .item -->
102+
103+
<div class="item" data-slider="4" data-background="linear-gradient( rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), url('public/images/butterfly.jpg') center center no-repeat">
104+
<div class="col-md-3">
105+
<img class="center-block img-responsive" src="public/images/butterfly.png" alt="butterfly">
106+
</div>
107+
<!-- .columns -->
108+
109+
<div class="col-md-9">
110+
<h2>Butterfly</h2>
111+
<p>
112+
Consequat magna tempor enim nisi reprehenderit. Eiusmod laboris ex non dolore pariatur qui magna consectetur sunt qui. Veniam
113+
proident aliqua eu non culpa qui in. Consequat magna tempor enim nisi reprehenderit. Eiusmod laboris
114+
ex non dolore pariatur qui magna consectetur sunt qui. Veniam proident aliqua eu non culpa qui in.
115+
Consequat magna tempor enim nisi reprehenderit. Eiusmod laboris ex non dolore pariatur qui magna
116+
consectetur sunt qui. Veniam proident aliqua eu non culpa qui in. Consequat magna tempor enim nisi
117+
reprehenderit. Eiusmod laboris ex non dolore pariatur qui magna consectetur sunt qui. Veniam proident
118+
aliqua eu non culpa qui in. Consequat magna tempor enim nisi reprehenderit. Eiusmod laboris ex non
119+
dolore pariatur qui magna consectetur sunt qui. Veniam proident aliqua eu non culpa qui in.
120+
</p>
121+
</div>
122+
<!-- .columns -->
123+
</div>
124+
<!-- .item -->
125+
126+
<div class="col-sm-12 btn-card-slider">
127+
<button class="btn btn-success btn-prev-slider">
128+
<i class="fa fa-chevron-left"></i>
129+
</button>
130+
<button class="btn btn-success btn-next-slider">
131+
<i class="fa fa-chevron-right"></i>
132+
</button>
133+
<div class="pull-right">
134+
<button class="btn btn-success btn-prev-slider">Slide
135+
<span class="current-slide">1</span> of
136+
<span class="totals-slide">x</span>
137+
</button>
138+
</div>
139+
</div>
140+
<!-- .btn-sliders -->
141+
</div>
142+
<!-- .container -->
143+
</main>
144+
145+
<!-- Jquery -->
146+
<script src="public/js/jquery-3.2.1.min.js"></script>
147+
148+
<!-- Tabs Widget -->
149+
<script src="public/js/card-slider-widget.js"></script>
150+
</body>
151+
152+
</html>

‎images-slider-widget.html

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1">
8+
<title>Simple Jquery Project</title>
9+
<link rel="shortcut icon" href="assets/public/images/logo.png" type="image/png">
10+
11+
<!-- Bootstrap -->
12+
<link rel="stylesheet" href="public/css/bootstrap.min.css">
13+
14+
<!-- Font Awesome -->
15+
<link rel="stylesheet" href="public/css/font-awesome.min.css">
16+
17+
<!-- Style -->
18+
<link rel="stylesheet" href="public/css/main.css">
19+
20+
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
21+
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
22+
<!--[if lt IE 9]>
23+
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
24+
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
25+
<![endif]-->
26+
</head>
27+
28+
<body class="images-slider-widget">
29+
30+
<main>
31+
<div class="container">
32+
<h1>Images Slider Widget</h1>
33+
34+
<div class="slider-wrapper">
35+
<div class="slider">
36+
<ul>
37+
<li>
38+
<img src="public/images/deer.jpg" alt="image">
39+
</li>
40+
<li>
41+
<img src="public/images/wolf.jpeg" alt="image">
42+
</li>
43+
<li>
44+
<img src="public/images/owl.jpg" alt="image">
45+
</li>
46+
<li>
47+
<img src="public/images/butterfly.jpg" alt="image">
48+
</li>
49+
</ul>
50+
</div>
51+
<!-- .slider -->
52+
53+
<div class="btn-images-slider">
54+
<button class="btn btn-prev-slider">
55+
<i class="fa fa-chevron-left"></i>
56+
</button>
57+
<button class="btn btn-next-slider">
58+
<i class="fa fa-chevron-right"></i>
59+
</button>
60+
</div>
61+
</div>
62+
<!-- .slide-wrapper -->
63+
64+
</div>
65+
<!-- .container -->
66+
</main>
67+
68+
<!-- Jquery -->
69+
<script src="public/js/jquery-3.2.1.min.js"></script>
70+
71+
<!-- Tabs Widget -->
72+
<script src="public/js/images-slider-widget.js"></script>
73+
</body>
74+
75+
</html>

0 commit comments

Comments
 (0)