-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
139 lines (139 loc) · 5.3 KB
/
index.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
135
136
137
138
139
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="reset.css" />
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="media.css" />
<link rel="icon" type="image/png" href="./images/favicon.png" />
<title>CSS Mem Slider</title>
</head>
<body>
<main>
<div class="slider">
<input type="radio" name="slide" id="radio_1" checked />
<input type="radio" name="slide" id="radio_2" />
<input type="radio" name="slide" id="radio_3" />
<input type="radio" name="slide" id="radio_4" />
<input type="radio" name="slide" id="radio_5" />
<input type="radio" name="slide" id="radio_6" />
<input type="radio" name="slide" id="radio_7" />
<input type="radio" name="slide" id="radio_8" />
<input type="radio" name="slide" id="radio_9" />
<div class="slider__slidesWrapper">
<div class="slider__slides">
<div class="slider__slide">
<img src="images/1.jpg" alt="mem" />
</div>
<div class="slider__slide">
<img src="images/2.jpg" alt="mem" />
</div>
<div class="slider__slide">
<img src="images/3.jpg" alt="mem" />
</div>
<div class="slider__slide">
<img src="images/4.jpg" alt="mem" />
</div>
<div class="slider__slide">
<img src="images/9.jpg" alt="mem" />
</div>
<div class="slider__slide">
<img src="images/5.jpg" alt="mem" />
</div>
<div class="slider__slide">
<img src="images/6.jpg" alt="mem" />
</div>
<div class="slider__slide">
<img src="images/10.jpg" alt="mem" />
</div>
<div class="slider__slide">
<img src="images/8.jpg" alt="mem" />
</div>
</div>
</div>
<div class="slider__bottom">
<div class="slider__caption">
<div class="slider__textList">
<div class="slider__text slider__text_1">
<p>То, что вы увидите, называется</p>
<p>Мемы</p>
</div>
<div class="slider__text slider__text_2">
<p>Когда тестировщик нашел баг</p>
<p>В день релиза</p>
</div>
<div class="slider__text slider__text_3">
<p>День пройдет быстрее</p>
<p>Если у тебя дедлайн</p>
</div>
<div class="slider__text slider__text_4">
<p>Тебя никто не сможет использовать</p>
<p>Если ты бесполезный</p>
</div>
<div class="slider__text slider__text_4">
<p>Работаю довольно редко</p>
<p>А недовольно - каждый день</p>
</div>
<div class="slider__text slider__text_4">
<p>Классно делать слайдер</p>
<p>Без позиционирования и фиксированных px</p>
</div>
<div class="slider__text slider__text_4">
<p>Жизнь удалась !</p>
<p>Марсель, 35 лет</p>
</div>
<div class="slider__text slider__text_4">
<p>Не так страшен чёрт, как его</p>
<p>Младший разработчик</p>
</div>
<div class="slider__text slider__text_4">
<p>Хорошие мемы подобрал</p>
<p>Но смеятся я конечно же не буду</p>
</div>
</div>
</div>
<div class="slider__bullets">
<label class="slider__bullet" for="radio_1"
><ul>
<li></li></ul
></label>
<label class="slider__bullet" for="radio_2"
><ul>
<li></li></ul
></label>
<label class="slider__bullet" for="radio_3"
><ul>
<li></li></ul
></label>
<label class="slider__bullet" for="radio_4"
><ul>
<li></li></ul
></label>
<label class="slider__bullet" for="radio_5"
><ul>
<li></li></ul
></label>
<label class="slider__bullet" for="radio_6"
><ul>
<li></li></ul
></label>
<label class="slider__bullet" for="radio_7"
><ul>
<li></li></ul
></label>
<label class="slider__bullet" for="radio_8"
><ul>
<li></li></ul
></label>
<label class="slider__bullet" for="radio_9"
><ul>
<li></li></ul
></label>
</div>
</div>
</div>
</main>
</body>
</html>