-
Notifications
You must be signed in to change notification settings - Fork 0
/
modal-test.html
122 lines (113 loc) · 5.43 KB
/
modal-test.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Colmar Academy</title>
<link rel="stylesheet" href="./assets/css/reset.css">
<link rel="stylesheet" href="./assets/css/modal.css">
</head>
<body>
<!-- begin Main -->
<main>
<section id="campus">
<div class="col-1">
<div class="box">
<picture>
<source media="(min-width: 769px)" srcset="./assets/images/information-main.jpg">
<img src="./assets/images/information-main.jpg" alt="Man reading a book">
</picture>
<div class="info">
<h3>It doesn't hurt to keep practicing</h3>
<blockquote>
"Maecenas nec tortor convallis, pharetra leo eu, vulputate erat. Mauris dapibus justo non nisi finibus, non tincidunt turpis convallis. Nunc sed sapien orci. Nulla sed ullamcorper ligula. Praesent ut ante sit amet eros convallis scelerisque. Nullam dignissim ipsum sem, sit amet gravida urna scelerisque vel. Vestibulum maximus aliquet vulputate. Sed id sagittis tellus, in dictum purus. Donec convallis et est."
</blockquote>
<p class="quote-author">Emanuel, Sr Strategist at Hiring.com</p>
</div>
</div>
</div><!-- end col-1 -->
<div class="col-2">
<div class="row flex">
<div class="box">
<picture class="image">
<source media="(min-width: 960px)" srcset="./assets/images/information-orientation.jpg">
<source media="(max-width: 959px)" srcset="./assets/images/information-orientation-mobile.jpg">
<img src="./assets/images/information-orientation.jpg"" alt="Overhead view of walking students">
</picture>
<div class="info">
<h4>Orientation date</h4>
<p>Tue 10/11 & Wed 10/12: 8am-3pm</p>
<a href="#modal-one" class="pop">Read more</a>
</div>
</div>
</div>
<div class="row flex">
<div class="box">
<picture class="image">
<source media="(min-width: 960px)" srcset="./assets/images/information-campus.jpg">
<source media="(max-width: 959px)" srcset="./assets/images/information-campus-mobile.jpg">
<img src="./assets/images/information-campus.jpg"" alt="A view of an inviting classroom">
</picture>
<div class="info">
<h4>Our Campus</h4>
<p>Find which campus is close by you</p>
<a href="#" class="pop">Read more</a>
</div>
</div>
</div>
<div class="row flex">
<div class="box">
<picture class="image">
<source media="(min-width: 960px)" srcset="./assets/images/information-guest-lecture.jpg">
<source media="(max-width: 959px)" srcset="./assets/images/information-guest-lecture-mobile.jpg">
<img src="./assets/images/information-guest-lecture.jpg"" alt="The guest lecturer">
</picture>
<div class="info">
<h4>Our guest lecture</h4>
<p>Join a keynote with Oliver Sack about music in medical treatment</p>
<a href="#" class="pop">Read more</a>
</div>
</div>
</div>
</div><!-- end col-2 -->
</section><!-- end #campus -->
</main>
<!-- Modal content -->
<div class="modal" id="modal-one" aria-hidden="true">
<div class="modal-box">
<div class="modal-body">
<p>Vestibulum ultricies augue nec dolor pulvinar faucibus. Aliquam malesuada pharetra fringilla. Vivamus eu purus ac turpis hendrerit venenatis vel dignissim nisi. Quisque id molestie purus, ac fringilla mi. Curabitur sed nunc purus. Sed iaculis mi nec metus maximus varius. Suspendisse potenti. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Class aptent taciti sociosqu ad litora.</p>
<a href="#" class="btn-close" aria-hidden="true">Close</a>
</div>
</div>
</div>
<div class="modal" id="modal-two" aria-hidden="true">
<div class="modal-box">
<div class="modal-body">
<p>Praesent et odio ut ante auctor lobortis vel pretium massa. Phasellus tristique faucibus nunc, non vulputate neque porta non. Ut eu metus a nisi vehicula lobortis placerat eu sapien. Ut imperdiet neque ornare est molestie, quis venenatis lorem pharetra. Nullam auctor neque at accumsan dignissim. Sed nulla enim, placerat eget.</p>
<a href="#" class="btn-close" aria-hidden="true">Close</a>
</div>
</div>
</div>
<div class="modal" id="modal-three" aria-hidden="true">
<div class="modal-box">
<div class="modal-body">
<p>Donec cursus sodales ultrices. Suspendisse potenti. Quisque malesuada elit risus, eu tempus nunc egestas vel. Vivamus hendrerit in nunc non gravida. Pellentesque habitant morbi tristique senectus et netus et malesuada.</p>
<a href="#" class="btn-close" aria-hidden="true">Close</a>
</div>
</div>
</div>
<!-- end Main -->
<!-- begin Footer -->
<footer>
<section class="flex-foot">
<div class="copy">© 2016 Colmar Academy. All rights reserved</div>
<div class="links" role="presentation">
<span><a href="#">Terms</a></span>
<span><a href="#">Privacy</a></span>
</div>
</section>
</footer>
<!-- end Footer -->
</body>
</html>