Secure-web-dev/Hchar.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
<!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>Hchar</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;
}
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;
}
</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 ="caesar.html"> Julius Caesar</a></li>
    <li>Explanation Page</li>

  </ul>
</div>


<div class="col-6 col-s-9">
  <h1>Locations</h1>
  <p>The characters chosen in the list were chosen from two different time periods: Ancient Rome and Ancient China. Both time periods gave the world men who till this day have an influence on society and perhaps changed the craft of the world we live in.</p>
  <h2> Ancient Rome </h2>
  <p> <img src="rome.jpg" alt="Rome" style="width:150px; height:150px;"/> Originally an Italic settlement, the Roman empire expanded to become one of the largest empires in the ancient world.
  With an estimated 50 to 90 million inhabitants and covering 5 million square kilometres at its peak in AD 117. </p>
  <h3> Ancient China </h3>
  <p> <img src="gwoc.jpg" alt="GWOC" style="width:150px; height:150px;"/>Record of the history of China can be found from as Early as 1500 BC, under the Shang Dynasty. Before this China is known to have gone thrugh three prehistoric stages: Paleolithic, Neolithic and The Bronze Age.</p>

</div>

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

    <h2>Tzu</h2>
    <p>"All warfare is based on deception"</p>
    <h2>Huang</h2>
    <p> "I am Emperor, my descendants will be numerous. From the second generation to the ten thousandth, my line will not end".</p>
    <h2>Caesar</h2>
    <p>"As a rule, men worry more about what they can't see than about what they can."</p>
    <h2> Aurelius </h2>
    <p> "The soul becomes dyed with the color of its thoughts"</p>
  </div>
</div>

</div>


</body>
</html>