-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
131 lines (99 loc) · 5.08 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
<!--
Message from Brad:
Thanks for watching CSS3 in 30 Days! You're awesome.
Want more fun design & coding courses? Check out my website.
https://codecollege.ca
(it's free to start)
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Only Modal Window | Code 30 Things in 30 Days with CSS3</title>
<!-- NORMALIZE CSS -->
<link rel="stylesheet" href="../_theme-styles/normalize.css">
<!-- PROJECT THEME CSS -->
<link rel="stylesheet" href="../_theme-styles/theme.css">
<!-- FINAL PROJECT CSS (use for reference) -->
<link rel="stylesheet" href="final.css">
<!-- SANDBOX CSS (this is your file!) -->
<link rel="stylesheet" href="sandbox.css">
<link href="https://fonts.googleapis.com/css?family=Bubblegum+Sans|Nova+Mono|Roboto+Condensed" rel="stylesheet">
</head>
<body>
<h1><small>Day #16</small> CSS Only Modal Window</h1>
<div class="sandbox">
<h2>Sandbox <small>This is where you play</small></h2>
<div class="content">
<p><strong>Instructions:</strong> Create an accessible modal window with just CSS & CSS3!</p>
<section>
<h4>CSS Only Modal Window</h4>
<input type="checkbox" id="click" style="display:none"/>
<label class="button" for="click">
<a class="button-theme">Click to launch modal</a>
</label>
<div class="modal">
<div class="modal__content">
<h3>Heading Title</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<label for="click" class="button">
<a class="button-theme">Close</a>
</label>
</div>
</div>
<div class="overlay"></div>
</section>
</div>
</div>
<div class="final-result">
<h2>Final Result <small>Use this for reference!</small></h2>
<div class="content">
<section>
<h4>CSS Only Modal Window</h4>
<input type="checkbox" id="final__click" style="display:none"/>
<label class="final__button" for="final__click">
<a class="button-theme">Click to launch modal</a>
</label>
<div class="final__modal">
<div class="final__modal__content">
<h3>Heading Title</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<label for="final__click" class="final__button">
<a class="button-theme">Close</a>
</label>
</div>
</div>
<div class="final__overlay"></div>
</section>
</div>
</div>
<div class="info">
<h2>Information <small>About this lesson</small></h2>
<h3>What are we making?</h3>
<p>Fun & fancy ways to create visually attractive pricing tables!</p>
<h3>Where can I use it?</h3>
<p>In your websites, client projects and applications as a way to display products and services!</p>
<h3>How compatible are these styles with major browsers?</h3>
<p>Check the CSS3 styles from your stylesheet <a href="http://caniuse.com/">on this website.</a> It allows you to see the compatibility of every CSS style with major browser.</p>
</div>
<footer>
<div class="logo">
<a href="http://codecollege.ca/" id="logo">
<img src="../_theme-styles/img/bggray.svg" width="60px" id="logo_bg-gray">
<img src="../_theme-styles/img/bgyellow.svg" width="60px" id="logo_bg-yellow">
<img src="../_theme-styles/img/codecollegelogo.svg" width="60px" id="logo_codecollege">
<!-- <img src="../_theme-styles/img/codecollegelogo.png" alt="Learn to Code at CodeCollege.ca" height="60px"> -->
</a>
</div>
<div class="made-by">
Made by <a href="http://bradhussey.ca/">Brad Hussey</a>
</div>
<div class="course">
<a href="http://codecollege.ca/">Code 30 things in 30 days with CSS3</a>
</div>
<div class="copyright">
©2018 Brightside Studios Inc.
</div>
</footer>
</body>
</html>