Secure-web-dev/sun.html at master · waz25th/Secure-web-dev · GitHub

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
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<!-- saved from url=(0054)file:///C:/Users/waz/Documents/ctec1412/labs/home.html -->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
		<title>Julius Caesar</title>
		<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
   <meta name="viewport" content="width=device-width; initial-scale=1.0"/>
        <style type="text/css">
body{
	background-color: grey;
	font-family: comic sans ms;}
* {
    box-sizing: border-box;
}
.container {
  position: relative;
  width: 50%;
}

.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #008CBA;
  overflow: hidden;
  width: 0;
  height: 100%;
  transition: .5s ease;
}

.container:hover .overlay {
  width: 100%;
}

.text {
  white-space: nowrap;
  color: white;
  font-size: 20px;
  position: absolute;
  overflow: hidden;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
img {
    width: 100%;
    height: auto;
    float: left;
    margin: 0 0 10px 10px;
    border-radius: 50%
}
.row:after {
    content: "";
    clear: both;
    display: table;
}
[class*="col-"] {
    float: left;
    padding: 15px;
    width: 100%;
}
@media only screen and (min-width: 600px) {
    .col-s-1 {width: 8.33%;}
    .col-s-2 {width: 16.66%;}
    .col-s-3 {width: 25%;}
    .col-s-4 {width: 33.33%;}
    .col-s-5 {width: 41.66%;}
    .col-s-6 {width: 50%;}
    .col-s-7 {width: 58.33%;}
    .col-s-8 {width: 66.66%;}
    .col-s-9 {width: 75%;}
    .col-s-10 {width: 83.33%;}
    .col-s-11 {width: 91.66%;}
    .col-s-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
}
html {
    font-family: "Lucida Sans", sans-serif;
}
.header {
    background-color: #821A1A;
    color: #ffffff;
    padding: 15px;
}
.menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.menu li {
    padding: 8px;
    margin-bottom: 7px;
    background-color :#808080
    color: #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);

}
.menu li:hover {
    background-color: grey;
}
.aside {
    background-color: #821A1A;
    padding: 15px;
    color: #ffffff;
    text-align: center;
    font-size: 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.footer {
    background-color: #0099cc;
    color: #ffffff;
    text-align: center;
    font-size: 12px;
    padding: 15px;
}
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;

    /* Position the tooltip */
    position: absolute;
    z-index: 1;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}
</style>
<script type="text/javascript">
		function changeCSS(linkid, sheet) {
			var thelink = document.getElementById(linkid);
			thelink.setAttribute("href", sheet);
		}
	</script>
</head>
<body>
	<div class="header">
  <h1>Historical Characters</h1>
</div>
<div class="row">

<div class="col-3 col-s-3 menu">
  <ul>
    <li><a href= "sun2.html"> Sun Tzu</a></li>
    <li><a href= "musashi.html"> Qin Shi Huang</a></li>
    <li><a href="Hchar.html"> Home</a></li>
    <li>Maximus Aurelius</li>

  </ul>
</div>

<div class="col-6 col-s-9">
  <h1>Gaius Julius Caesar</h1>
  <p> <img src="jc.jpg" alt="Caesar" style="width:150px; height:150px;"/> Born on 13/07/100BC, known as Julius Caesar; was a Roman politician, general and notable author of Latin prose, playing a critical role in the rise of the Roman Empire.</p>
 <p> An alleged descendant of the goddess Venus, he became the head of his family at the age of 16.</p>

 <h1> The Gallic Wars</h1>
 <p> These were a series of campaigns waged by Julius Caesar in his two terms as proconsul of Cisalpine Gaul, Transalpine Gaul and Illyricum, against several Gallic tribes.</p>

 </div>
<div class="col-3 col-s-12">
  <div class="aside">


<div class="tooltip"> 15th March, 44BC
	<span class="tooltiptext" This date marks the assassination of Gaius, who was due to appear at the Senate. Many had plotted on the death of Caesar. Marshalled by Cassius Longinus, Decimus Junius Brutus and Marcus Junius Brutus, Caesar was stabbed to death adjacent to the Theatre of Pompey</span>

	</div>


<h1> Politicial Reforms </h1>
<p>Holding both a dictatorship and tribunate and alternating between consulship and the preconsulship, he was appointed Dictator in 49 BC, resigned and then was appointed Dictator again in 48 BC. </p>
</div>
  </div>
</div>