-
Notifications
You must be signed in to change notification settings - Fork 0
/
article1.html
126 lines (112 loc) · 7.93 KB
/
article1.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="Style/article_style.css" type="text/css">
<title>Article 1</title>
</head>
<body>
<header>
<div class="logo_container">
<a href="index.html"><svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 46.58 37.54"><defs><style>.cls-1,.cls-4{font-size:12px;fill:#fff;font-family:Arial-Black, Arial;font-weight:800;}.cls-2{letter-spacing:-0.01em;}.cls-3{font-size:9px;font-family:ArialMT, Arial;font-weight:400;}.cls-3,.cls-4{letter-spacing:0.04em;}</style></defs><title>Logo</title><text class="cls-1" transform="translate(0 10.86)">ARÉ<tspan class="cls-2" x="27.33" y="0">N</tspan><tspan x="37.21" y="0">A</tspan><tspan class="cls-3"><tspan x="0" y="10">KOMORNÍ</tspan></tspan></text><text class="cls-4" transform="translate(0.38 33.72)">S</text><text class="cls-4" transform="translate(8.74 33.72)">C</text><text class="cls-1" transform="translate(18 33.86)">É<tspan class="cls-2" x="8.67" y="0">N</tspan><tspan x="18.54" y="0">A</tspan></text><text x="-556.02" y="-270.97"/></svg></a>
</div>
<input type="checkbox" id="nav_toggle" class="nav_toggle">
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="pricing.html">Tickets</a></li>
<li><a href="feedback_form.html">Feedback</a></li>
<li><a onclick="scrollSmoothTo('contact')" class="pointer">Contact</a></li>
</ul>
</nav>
<label for="nav_toggle" class="nav_toggle_label"><span>☰</span></label>
</header>
<main>
<div class="main_article_grid">
<div class="article_content">
<div class="article_title">
<h2>Title 1</h2>
<time datetime="2020-10-29">29.10.2020</time>
</div>
<p>
<span class="first"> Lorem </span> ipsum dolor sit amet consectetur, adipisicing elit. Maxime at repellendus quis tempore, delectus commodi voluptatum? Nisi officia in culpa alias reiciendis totam delectus, fuga aperiam quam voluptatem, labore officiis quaerat. Sequi velit veritatis atque facilis placeat fugit corporis iure, necessitatibus itaque ad temporibus reiciendis ipsam eveniet dolore? Consequatur, sunt! Harum eius laborum magni officiis vero eaque, nostrum ab tenetur in doloribus aliquam molestias veniam reprehenderit voluptatibus quibusdam, soluta animi quasi cumque et? Voluptatum modi enim odit accusantium debitis nostrum corporis doloremque consequatur ex maxime quidem dignissimos facere, ea saepe quasi quos officia. Cum consectetur labore animi nulla dolorum placeat autem delectus, optio sint ad
<a target="_blank" href="images/Unsplash_play1-1200.jpg">
<picture>
<source media="(min-width: 480px)" srcset="images/Unsplash_play1-800.jpg 800w, images/Unsplash_1200.jpg 1200w" sizes="80vw">
<img src="images/Unsplash_play1-400.jpg" alt="Band on stage">
</picture>
</a>
quidem dignissimos facere, ea saepe quasi quos officia. Cum consectetur labore animi nulla dolorum placeat autem delectus, optio sint ad libero minus, fuga, saepe molestias culpa iusto rem! Consequuntur, aliquam placeat animi tempore fuga nam ipsa in soluta ex minus cumque rerum delectus mollitia. Omnis recusandae adipisci iste fugit voluptatum beatae iusto, doloribus amet esse repellat at. Eveniet optio laudantium in nisi. Ad amet quibusdam incidunt voluptate. Accusantium nam saepe asperiores eos itaque perspiciatis atque nihil maxime molestias necessitatibus similique dignissimos, laudantium velit laboriosam a consequatur rem assumenda, illum unde impedit eius non molestiae vitae blanditiis.
</p>
<span class="italic"><q cite="https://www.lipsum.com/">Lorem ipsum dolor sit amet.</q></span>
<h3>Caption</h3>
<p>
optio sint ad libero minus, fuga, saepe molestias culpa iusto rem! Consequuntur, aliquam placeat animi tempore fuga nam ipsa in soluta ex minus cumque rerum delectus mollitia. Omnis recusandae adipisci iste fugit voluptatum beatae iusto, doloribus amet esse repellat at. Eveniet optio laudantium in nisi. Ad amet quibusdam incidunt voluptate. Accusantium nam saepe asperiores eos itaque perspiciatis atque nihil maxime molestias necessitatibus similique dignissimos, laudantium velit laboriosam a consequatur rem assumenda, illum unde impedit eius non molestiae vitae blanditiis. Illum fuga earum omnis aliquam voluptatem. Incidunt harum a at doloremque aliquam velit error ab ea blanditiis fuga, minima porro similique ad reprehenderit quaerat culpa cumque eius excepturi tempora voluptas rem iusto laborum placeat?
Voluptatibus doloremque voluptatum, repudiandae.
</p>
<p style="text-indent: 1.5em;"> numquam similique molestias sapiente eum ducimus totam et soluta dignissimos voluptates. Illo velit autem unde nam earum in hic! Earum quae ratione consectetur modi perspiciatis iure voluptatibus. Dignissimos perspiciatis dicta hic id asperiores dolore quibusdam, amet laborum, reiciendis fugit delectus nisi, soluta aliquam? Et error amet maiores quaerat sed, excepturi odio quis quam dolore delectus optio, repudiandae dolorem labore at.
</p>
</div>
<form class="rate_form" id="rating_form" action="nothing_for_now" method="POST">
<fieldset>
<legend>Rate the article:</legend>
<div class="rate_group">
<label class="rating_label" for="bad">
<input type="radio" name="rating" id="bad" value="bad" >Bad
</label>
<label class="rating_label" for="average">
<input type="radio" name="rating" id="average" value="average" >Average
</label>
<label class="rating_label" for="good">
<input type="radio" name="rating" id="good" value="good" >Good
</label>
</div>
<button id="rate_button" type="submit" name="action" value="rate">Rate</button>
</fieldset>
</form>
<div id="form_response"></div>
</div>
</main>
<footer>
<div class="footer_pos">
<div class="footer_grid">
<!-- About us -->
<div class="footer_box">
<h2>About Us</h2>
<p>
Welcome to our little Moravian theatre where big things happen, we are playing every day in a week except wednesdays and weekends. We are also offering free spaces for your celebrations, meetings or work conferencies. Do not hesitate and Visis Us or Contact Us.
</p>
</div>
<!-- Address -->
<div class="footer_box">
<h2>Address</h2>
<div class="address">
<p>
příspěvková organizace<br>
28. října 2<br>
701 85 Moravská Ostrava<br>
<a href="https://divadloarena.cz/subdom/arena2/vstupenky/prodej" target="_blank">Divadlo Arena</a>
</p>
</div>
</div>
<!-- Response -->
<div class="footer_box">
<h2 id="contact">Contact Us</h2>
<form action="mailto:40490454@live.napier.ac.uk" method="GET" enctype="text/plain">
<label for="mail">EMAIL <span >*</span></label>
<input type="email" name="email" id="mail" required>
<label for="mess">MESSAGE <span >*</span></label>
<textarea name="mess" id="mess" placeholder="50 words or less" maxlength="300" rows="4" cols="50" required></textarea>
<button type="submit" name="contact_button">Send</button>
</form>
</div>
</div>
</div>
<div class="author">
<p><span class="Colored">Karel Z.</span> project aks © 2020</p>
</div>
</footer>
<script src="Javascript/Javascript.js"></script>
</body>
</html>