-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
58 lines (57 loc) · 2.31 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
<html lang="en">
<head>
<meta charset="UTF-8">
<meta
name="viewport"
content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Alata&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Russo+One&display=swap" rel="stylesheet">
<title>CSS Modal</title>
</head>
<body>
<div class="button">
<a href="#modal">Open CSS Modal</a>
</div>
<div
id="modal"
class="modal">
<div class="modal__wrapper">
<div class="modal__header">
<div class="modal__header__title">CSS Modal</div>
<a
href="#"
class="modal__header__close">
<span class="modal__header__close__x">x</span>
</a>
</div>
<div class="modal__content">
This is a modal example made with css only.
<p class="modal__content__github">Check the source code on my github repository:
<a
href="https://github.com/rafagm/CSS-Modal"
target="_blank"
class="modal__content__link">
github
</a>
</p>
</div>
<div class="modal__footer">
Made by
<a
href="https://twitter.com/Ro08503637"
target="_blank"
class="modal__footer__link">
@rafagm
</a>
<a href="https://twitter.com/Ro08503637"
target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" class="modal__footer__logo" width="24" height="24" viewBox="0 0 24 24">
<path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-.139 9.237c.209 4.617-3.234 9.765-9.33 9.765-1.854 0-3.579-.543-5.032-1.475 1.742.205 3.48-.278 4.86-1.359-1.437-.027-2.649-.976-3.066-2.28.515.098 1.021.069 1.482-.056-1.579-.317-2.668-1.739-2.633-3.26.442.246.949.394 1.486.411-1.461-.977-1.875-2.907-1.016-4.383 1.619 1.986 4.038 3.293 6.766 3.43-.479-2.053 1.08-4.03 3.199-4.03.943 0 1.797.398 2.395 1.037.748-.147 1.451-.42 2.086-.796-.246.767-.766 1.41-1.443 1.816.664-.08 1.297-.256 1.885-.517-.439.656-.996 1.234-1.639 1.697z"/>
</svg>
</a>
</div>
</div>
</div>
</body>
</html>