Skip to content

Commit 4ec2a9c

Browse files
LightinwayLightinway
authored
index.html added
1 parent 5c7da31 commit 4ec2a9c

File tree

1 file changed

+315
-0
lines changed

1 file changed

+315
-0
lines changed

‎index.html

+315
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,315 @@
1+
<!doctype html>
2+
3+
<html lang="en">
4+
<head>
5+
<meta charset="utf-8">
6+
7+
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
8+
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
9+
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
10+
<link href="https://fonts.googleapis.com/css?family=Thasadith|Titillium+Web" rel="stylesheet">
11+
12+
13+
</head>
14+
15+
<style>
16+
17+
18+
.container {
19+
margin: 0 auto;
20+
padding: 40px;
21+
width: 80%;
22+
color: #333;
23+
box-shadow:0 0 200px -50px #222;
24+
margin-top:200px;
25+
background:linear-gradient(180deg, #020202, #424242);
26+
}
27+
28+
/* Slick object classes */
29+
30+
.slick-slide {
31+
text-align: center;
32+
color: white;
33+
font-size:24px;
34+
}
35+
36+
.slick-track{
37+
padding:30px 0;
38+
height:19em;
39+
}
40+
41+
#slick-images{
42+
/* The nest around all the images */
43+
}
44+
45+
img{
46+
width:160px;
47+
height:210px;
48+
margin:0 auto;
49+
}
50+
51+
.slick-prev:before, .slick-next:before{
52+
color:white;
53+
line-height:2;
54+
opacity:0.50;
55+
font-size:26px;
56+
}
57+
58+
.slick-dots{
59+
bottom:-55px;
60+
}
61+
62+
.slick-dots li button:before{
63+
color:white;
64+
opacity:0.4;
65+
font-size: 8px
66+
}
67+
68+
.slick-dots li.slick-active button:before{
69+
color:white;
70+
opacity:0.75;
71+
}
72+
73+
.slick-center img {
74+
opacity: 1 !important;
75+
transition: all 1000ms ease-in-out;
76+
}
77+
78+
.slick-center img {
79+
transform: scale(1.2) !important;
80+
}
81+
82+
/* The upper texts - in my example it represents the title */
83+
.pub-title-div{
84+
position: relative;
85+
overflow: hidden;
86+
}
87+
88+
/* The lower texts - in my example it represents name */
89+
.pub-name-div{
90+
position: relative;
91+
overflow: hidden;
92+
}
93+
94+
/* The upper texts - styling and animation when the title become the center object */
95+
.slick-center .pub-title {
96+
max-width:160px;
97+
opacity:1;
98+
overflow:visible;
99+
text-overflow: initial !important;
100+
white-space: nowrap;
101+
102+
transform:translateX(200px);
103+
animation: titlescroll 8s linear infinite;
104+
}
105+
106+
.slick-center .pub-title {
107+
margin-bottom:30px;
108+
}
109+
110+
@keyframes titlescroll {
111+
0% {
112+
transform: translateX(10%);
113+
}
114+
100% {
115+
transform: translateX(-300%);
116+
}
117+
}
118+
119+
/* The lower texts - styling and animation when the name become the center object */
120+
.slick-center .pub-name {
121+
margin-top:30px;
122+
max-width:100%;
123+
opacity:0.8;
124+
overflow:visible;
125+
text-overflow: initial !important;
126+
}
127+
128+
/* Default styling and animation when the image is not the center object */
129+
.img-con img {
130+
opacity: 0.7;
131+
transition: all 500ms ease-in-out;
132+
}
133+
134+
.img-con img {
135+
transform: scale(0.9);
136+
}
137+
138+
/* Hover effect when an image is hovered over */
139+
.img-con img:hover {
140+
opacity: 1;
141+
transition: all 100ms linear;
142+
}
143+
144+
/* Default styling and animation for the title */
145+
.pub-title{
146+
font-family: "Titillium Web";
147+
opacity: 0.5;
148+
max-width:160px;
149+
margin:0 auto;
150+
white-space: nowrap;
151+
overflow:hidden;
152+
text-overflow: ellipsis;
153+
margin-bottom:5px;
154+
transform: scale(0.9);
155+
transition: all 1000ms ease-out;
156+
}
157+
158+
/* Default styling and animation for the name */
159+
.pub-name{
160+
font-family: "Open Sans";
161+
font-size:18px;
162+
font-weight:bold;
163+
opacity: 0.5;
164+
max-width:160px;
165+
height:auto;
166+
margin:0 auto;
167+
white-space: nowrap;
168+
overflow:hidden;
169+
text-overflow: ellipsis;
170+
margin-bottom:5px;
171+
transform: scale(0.9);
172+
transition: all 500ms ease-out;
173+
}
174+
175+
</style>
176+
177+
<body>
178+
179+
180+
<div class='container' style="width: 70%;height:25em;">
181+
<div id="slick-images">
182+
<div class="img-con">
183+
<div class="pub-title-div">
184+
<p class="pub-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
185+
</div>
186+
<img src='https://via.placeholder.com/160x210.png/FFFFFFFF/?text=IMG1'>
187+
<div class="pub-name-div">
188+
<p class="pub-name"> John Doe</p>
189+
</div>
190+
</div>
191+
<div class="img-con">
192+
<div class="pub-title-div">
193+
<p class="pub-title">Ut enim ad minim veniam</p>
194+
</div>
195+
<img src='https://via.placeholder.com/160x210.png/FFFFFFFF/?text=IMG2'>
196+
<div class="pub-name-div">
197+
<p class="pub-name"> Darragh Douglas</p>
198+
</div>
199+
</div>
200+
<div class="img-con">
201+
<div class="pub-title-div">
202+
<p class="pub-title">Id velit ut tortor pretium viverra suspendisse potenti nullam</p>
203+
</div>
204+
<img src='https://via.placeholder.com/160x210.png/FFFFFFFF/?text=IMG3'>
205+
<div class="pub-name-div">
206+
<p class="pub-name"> Ayrton Manning</p>
207+
</div>
208+
</div>
209+
<div class="img-con">
210+
<div class="pub-title-div">
211+
<p class="pub-title">Fringilla urna porttitor rhoncus dolor purus non enim praesent</p>
212+
</div>
213+
<img src='https://via.placeholder.com/160x210.png/FFFFFFFF/?text=IMG4'>
214+
<div class="pub-name-div">
215+
<p class="pub-name"> Zahara Simon</p>
216+
</div>
217+
</div>
218+
<div class="img-con">
219+
<div class="pub-title-div">
220+
<p class="pub-title">Eget nullam non nisi est sit amet</p>
221+
</div>
222+
<img src='https://via.placeholder.com/160x210.png/FFFFFFFF/?text=IMG5'>
223+
<div class="pub-name-div">
224+
<p class="pub-name"> Wei Chen</p>
225+
</div>
226+
</div>
227+
<div class="img-con">
228+
<div class="pub-title-div">
229+
<p class="pub-title">Feugiat nibh sed pulvinar proin</p>
230+
</div>
231+
<img src='https://via.placeholder.com/160x210.png/FFFFFFFF/?text=IMG6'>
232+
<div class="pub-name-div">
233+
<p class="pub-name"> Kohen Goulding</p>
234+
</div>
235+
</div>
236+
<div class="img-con">
237+
<div class="pub-title-div">
238+
<p class="pub-title">Tortor id aliquet lectus proin nibh nisl condimentum</p>
239+
</div>
240+
<img src='https://via.placeholder.com/160x210.png/FFFFFFFF/?text=IMG7'>
241+
<div class="pub-name-div">
242+
<p class="pub-name"> Bevan Coulson</p>
243+
</div>
244+
</div>
245+
<div class="img-con">
246+
<div class="pub-title-div">
247+
<p class="pub-title">Parturient montes nascetur ridiculus mus mauris vitae ultricies leo</p>
248+
</div>
249+
<img src='https://via.placeholder.com/160x210.png/FFFFFFFF/?text=IMG8'>
250+
<div class="pub-name-div">
251+
<p class="pub-name"> Khadija Skinner</p>
252+
</div>
253+
</div>
254+
255+
</div>
256+
</div>
257+
258+
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
259+
<script type="text/javascript" src="slick/slick.min.js"></script>
260+
261+
<script>
262+
263+
//Selects the html elements and makes it a slick carousel
264+
$("#slick-images").slick({
265+
centerMode: true,
266+
centerPadding: '60px',
267+
dots: true,
268+
slidesToShow: 5,
269+
slidesToScroll: 1,
270+
focusOnSelect: true,
271+
swipeToSlide:true,
272+
waitForAnimate:true,
273+
autoplay: true,
274+
autoplaySpeed: 4000,
275+
speed:1000,
276+
//responsive properties when the screen size is changed - represented by breakpoints
277+
responsive: [
278+
{
279+
breakpoint: 1200,
280+
settings: {
281+
arrows: false,
282+
centerMode: true,
283+
centerPadding: '40px',
284+
slidesToShow: 3,
285+
slidesToScroll: 3,
286+
}
287+
},
288+
{
289+
breakpoint: 767,
290+
settings: {
291+
arrows: false,
292+
centerMode: true,
293+
centerPadding: '40px',
294+
slidesToShow: 2,
295+
slidesToScroll: 2
296+
}
297+
},
298+
{
299+
breakpoint: 480,
300+
settings: {
301+
arrows: false,
302+
centerMode: true,
303+
centerPadding: '40px',
304+
slidesToShow: 1,
305+
slidesToScroll: 1
306+
}
307+
}
308+
]
309+
});
310+
311+
312+
</script>
313+
314+
</body>
315+
</html>

0 commit comments

Comments
 (0)