CodingSheets/page-template.html at main · MicroRay620/CodingSheets · 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
<!--This is a template for the code cheatsheet files-->
<!--This file is also used as a test file by Ruby-->
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
	<!--Start of Head-->
	<head>
		<!--Start Title-->
		<title>
			Page Name <!--Change to the file's name-->
		</title>
		<!--End Title-->

		<!--Start of Meta-->
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <!--End of Meta-->

		<!--Start of CSS Connect-->
        <!--These files are found in the 'CSS' folder-->
		<link type="text/css" rel="stylesheet" href="css/global.css"/> <!--CSS used in every file-->
		<link type="text/css" rel="stylesheet" href="css/code-options.css"/> <!--CSS used for the Cheatsheet files-->
		<link type="text/css" rel="stylesheet" href="css/template.css"/> <!--CSS for this file--> <!--Change 'template' to the html file's name-->
		<!--End of CSS Connect-->

        <!--Start of JS Connect-->
        <!--These files are found in the 'JS' folder-->
        <script src="js/global.js"></script> <!--JS in every file-->
        <script src="js/template.js"></script> <!--JS for this file--> <!--Change 'template' to this file's name-->
        <!--End JS Connect-->
	</head>
	<!--End of Head-->

	<!--Start of Body-->
	<body>
		<!--Start Page Title-->
		<h1 class="title"> <!--The CSS code is found in 'global.css'-->
			Page Name <!--Change to the file's name with spaces and the start of each word is capitalized-->
            <!--Capitalize each letter in an acronym-->
		</h1>
		<!--End Page Title-->

        <!--'<div class="main">' is put after a heading, no heading should be inside this div code-->
		<div class="main"> <!--The CSS code is found in 'global.css'-->
			<!--Start Introduction-->
			<p>
				Put your introduction to the file here
			</p>
			<!--End Introduction-->
		</div>

		<!--Start Sidebar-->
        <!--Is on the right side of the page-->
		<div class="sidenav"> <!--The CSS code is found in 'global.css'-->
			<br> <!--Makes the logo look a bit nicer on webpage, moves it down one line-->
			<!--Start Logo-->
			<!--!!!DO NOT REMOVE LOGO!!!-->
			<h1>
				<a href="homepage.html"><span id="c">Coding</span><span id="s">Sheets</span></a><!--Span CSS code is found in 'global.css'-->
			</h1>
			<!--End Logo-->

			<div class="dropdown">
			<!--The Button's color is done in the css file linked to this one, in this file it is called 'template.css'-->
				<!--Start Cheatsheet Dropdown-->
				<button class="dropbtn" id="cheat">Cheatsheets</button> <!--Cheatsheet dropdown button-->
				<!--The id determines background color and placement-->

				<!--Start Cheatsheet Pages-->
				<div class="dropdown-content" id="cheat"> <!--Breaks if called anything other than 'dropdown-content'-->
					<a href="html-cheatsheet.html">HTML</a>
					<a href="css-cheatsheet.html">CSS</a>
					<a href="js-cheatsheet.html">JS</a>
					<a href="md-cheatsheet.html">Markdown</a>
					<a href="python-cheatsheet.html">Python</a>
					<a href="spreadsheet-cheatsheet.html">Spreadsheet</a>
				</div>
				<!--End Cheatsheet Pages-->
				<!--End Cheatsheet Dropdown-->

				<!--Start Other Page Dropdowns-->
				<!--Will be used at a later date-->
				<!--<button class="dropbtn" id="extra">Other</button>--?

				<!--Start Extra Pages-->
				<!--<div class="dropdown-content" id="extra">
					<a href="homepage.html">Home</a>
					<a href="bug-report.html">Report</a>
				</div>-->
				<!--End Extra Pages-->
				<!--End Other Page Dropdowns-->
			</div>
			<!--End Cheatsheet Dropdown-->

            <!--Will remove the list when a better idea for getting text placement happens--> <!--Going to be changed to Bootstrap-->
			<!--Start Heading List-->
			<ul> <!--The List is invisible on the page-->
				<li>
					<a href="#<!--heading-->"></a>
				</li>
			</ul>
			<!--End Heading List-->
		</div>
		<!--End Sidebar-->

		<!--Start Key Terms-->
		<h2>
			Key Term
		</h2>

		<div class="main"> <!--The CSS code is found in 'global.css'-->
			<p>
				<!--Put Text here-->
			</p>

			<!--Start of Key Term Table-->
			<div class="table"> <!--The CSS code is found in 'global.css'-->
				<!--Start Main Table-->
				<ul>
					<li>
						<span class="bold"><!--Term Name--></span> <!--Term Meaning-->
					</li>
					<!--Repeat for each term-->
				</ul>
				<!--End Main Table-->
			</div>
			<!--End of Key Term Table-->
		</div>
		<!--End of Key Terms-->

		<!--Start of Footer-->
		<footer>
		</footer>
		<!--End of Footer-->
	</body>
	<!--End of Body-->
</html>