-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
80 lines (79 loc) · 4.73 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
<!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">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<link href="stylesheets/index.css" rel="stylesheet" >
<title>Shakespearean Translator</title>
</head>
<body>
<nav class="black">
<div class="nav-wrapper container">
<a style=" color: rgb(247, 240, 231);"href="#" class="brand-logo">The Shakespearean Translator</a>
<ul id="nav-mobile" class="collapsible right hide-on-med-and-down">
<!--<li><a href="#">About</a></li>-->
<!-- <ul class="collapsible"> -->
<div class="collapsible">
<li>
<a href="#" class="collapsible-header">Directions</a>
<div class="collapsible-body"><span>Welcome to the Shakeparean Translator. Have you ever wondered what you would have sounded like back in Olde Elizabethan England? Have you longed to sound like a poet and feel misunderstood?
Well now you can. Simply enter your text, click translate and wait with bated breath.
It's that simple. <br>If you have been a cheeky monkey and entered long text, you must use the forward arrow to see your full translation. Now if you are feeling particularly bawdy, click on the image of Master Shakespeare and see what happens. If you would like to learn a little bit more about
the Bard and images used, please behold the Info and Sources.<br>
"If we shadows have offended, think but this, and all is mended", twas all in good jest. <br> Enjoy!
</span></div>
</li>
<li>
<a href="#" class="collapsible-header">Info</a>
<div class="collapsible-body"><span>William Shakespeare (baptized 26 April 1564 ~ 23 April 1616) was an English playwright, poet and actor, widely regarded as the greatest writer in the English language and the world's greatest dramatist.
Born in Stratford-upon-Avon, and sometimes referred to as "The Bard", his works, include 39 plays, 154 sonnets, three narrative poems. (There are other works that may be his, but the debate rages on.) His works are performed more often than those of any other playwright
and he still reaches audiences today due to his unbelievable understanding of human nature and undeniable wit. ~ Wikipedia and myself combined
</span></div>
</li>
<li>
<a href="#" class="collapsible-header">Sources</a>
<div class="collapsible-body"><span>Background Image is an inset from the etching,
Long View of London from Bankside, by Wenceslaus Hollar, 1647. <br>
The Image of Shakespeare is from
The Chandos portrait, held by the National Portrait Gallery, in London. Attributed to John Taylor, is the most famous of the portraits that are believed to depict William Shakespeare (1564–1616).
Nobody knows for sure.</span></div>
</li>
</div>
</ul>
</div>
</nav>
<div class="container">
<div class="shakes-container">
<button data-target="modal1" class="btn modal-trigger" id="shakesBtn"><img src="shakes2.png" alt="Shakespeare" style="width:100px; height: 80px; border-radius: 50%"/></button>
<!-- Modal Trigger -->
<!-- Modal Structure -->
<div id="modal1" class="modal">
<div class="modal-content">
<p></p>
</div>
<div class="modal-footer">
<a href="#!" class="modal-close waves-effect waves-green btn-flat">Dismiss</a>
</div>
</div>
</div>
<div class="translate-container">
<input type="textarea" id="inputTxt" placeholder="insert your text"/>
<button id="translateButton">Translate</button>
<input type="textarea" id="outputTxt" placeholder="translation">
</div>
</div>
<script>
$(document).ready(function(){
$('.modal').modal();
$('.collapsible').collapsible();
});
</script>
<script src="javascripts/index.js"></script>
</body>
</html>