-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtutorial.html
188 lines (173 loc) · 10.7 KB
/
tutorial.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
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
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Webpage Information -->
<title>DHCWeblog • Tutorials</title>
<!-- Links: Styling & Icon -->
<link rel="icon" href="img/icon.svg">
<link rel="stylesheet" href="styles/css/main.css"><!-- Make sure this LINK is above all other stylesheet LINKS -->
<link rel="stylesheet" href="styles/css/popup.css"><!-- Make sure this LINK is under the main.css LINK -->
<link rel="stylesheet" href="styles/css/search-box.css"><!-- Make sure this LINK is under the main.css LINK -->
<link rel="stylesheet" href="web-tools/css/movables.css"><!-- Make sure this LINK is under the main.css LINK -->
<!-- Meta -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Claasgreeneye">
<meta name="description" content="A portfolio website with the purpose of showcasing my knowledge in website development and beyond!">
<!-- Scripts -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script defer src="scripts/js/popup.jquery.js"></script>
<script defer src="web-tools/js/movables.jquery.js"></script>
<script src="scripts/js/main.search.jquery.js"></script>
<script src="scripts/js/tutorial-search.jquery.js"></script>
<script src="scripts/js/disclaimer.jquery.js"></script>
</head>
<body>
<!-- In-Website Search -->
<div class="search-box closed">
<div class="container" id="sb-container">
<div class="searcher">
<input type="search" id="searchInput" placeholder="Search by keyword..." data-locale="data/json/search.json">
<button id="searchActionButton"><img src="img/icon/000/search.svg" alt="Search"></button>
<button id="searchCloseButton"><img src="img/icon/000/close.svg" alt="Close"></button>
</div>
<div class="search-results" id="searchResultsContainer"></div>
<div class="search-error">Could not find any results using such keyword(s)</div>
<div class="search-empty">Start searching by entering a keyword...</div>
</div>
</div>
<!-- Pop Up Boxes -->
<!-- Social Media (MySocials) -->
<div class="popup closed" id="mySocials">
<div class="container">
<div class="head">
<span class="title">My Socials & Connections</span>
<button class="popupCloseButton tp-box"><img src="img/icon/000/close.svg" alt="close button"><span class="tooltip">Close</span></button>
</div>
<div class="body">
<div class="socials-container">
<a href="https://discord.gg/u9UhQG5ggW" target="_blank"><img alt="discord" src="img/icon/icons8/icons8-discord-96.png"><span>Discord (Invite Link)</span></a>
<a href="https://github.com/MuckyDriver" target="_blank"><img alt="github" src="img/icon/icons8/icons8-github-96.png"><span>Github</span></a>
<a href="https://twitter.com/Claasgreeneye" target="_blank"><img alt="x" src="img/icon/icons8/icons8-twitter-96.png"><span>X/Twitter</span></a>
<a href="https://bsky.app/profile/dhcweblogistics.net" target="_blank"><img alt="bsky" src="https://bsky.app/static/favicon-32x32.png"><span>Bluesky</span></a>
<a href="https://www.youtube.com/@claasgreeneye" target="_blank"><img alt="youtube" src="img/icon/icons8/icons8-youtube-96.png"><span>Youtube</span></a>
<a href="mailto:[email protected]"><img alt="protonmail" src="img/icon/icons8/icons8-protonmail-96.png"><span>ProtonMail</span></a>
</div>
<div class="credit-icons8">
Social icons by <a href="https://icons8.com">Icons8</a>
</div>
</div>
</div>
</div>
<!-- Expansions and Services (Expansions Popup) -->
<div class="popup closed" id="myServices">
<div class="container">
<div class="head">
<span class="title">Services</span>
<button class="popupCloseButton tp-box"><img src="img/icon/000/close.svg" alt="close button"><span class="tooltip">Close</span></button>
</div>
<div class="body faded">
<p><i>Expansions and services are still to be developed, come back another time.</i></p>
<p>
What would the expansions and services be? Expansions will be different websites which are directly linked to my brand and myself.
This will eventually include a whole range of websites including subdomains for people to visit and use in the future.
</p>
</div>
</div>
</div>
<!-- Index Page welcome banner (using main) -->
<main>
<div class="top">
<div class="logo">
<img src="img/icon.svg" alt="logo icon svg">
<span>DHC<br>WEBLOG<sup>©</sup></span>
</div>
<div class="services">
<div class="tp-box">
<button data-find-id="myServices" class="popupOpenButton"><img src="img/icon/fff/apps_waffleicon.svg" alt="services" width="30"></button>
<div class="tooltip right">Expansions / Services</div>
</div>
<div class="tp-box">
<button id="searchOpenButton"><img src="img/icon/fff/search.svg" alt="services" width="30"></button>
<div class="tooltip">Search</div>
</div>
</div>
</div>
<!-- Header section will include quick navigation which will stick to the top of the page after index page welcome banner. -->
<header>
<nav>
<a href="/" class="tp-box"><img src="img/icon/9fafc1/homepage.svg" alt="index"><div class="tooltip">Homepage</div></a>
<a href="about-me.html" class="tp-box"><img src="img/icon/9fafc1/person_profile.svg" alt="about me"><div class="tooltip">About Me</div></a>
<a href="tutorial.html" class="tp-box active"><img src="img/icon/9fafc1/edu_tutorial.svg" alt="tutorials"><div class="tooltip">Development Tutorials</div></a>
<a href="website-history.html" class="tp-box"><img src="img/icon/9fafc1/versions.svg" alt="history"><div class="tooltip">Website History</div></a>
<a href="https://projects.dhcweblogistics.net" class="tp-box"><img src="img/icon/9fafc1/design_or_projects.svg" alt="projects"><div class="tooltip">Projects</div></a>
</nav>
</header>
</main>
<!-- Main content of page is below -->
<section>
<div class="wrapper">
<h2>Development <span class="greenify">Tutorials</span></h2>
<p class="greyify">
Here is my collection of online development tutorials for everyone. The development tutorials include topics about basics of website design and other tools
that can be used to develop websites and more. To use the <u>search feature</u>, first select what category your desired tutorial is going to be in and then
put something in the search box - this will only show things relating to both the category and the search input data.
</p>
</div>
</section>
<!-- Development tutorials -->
<section>
<div class="wrapper">
<div class="tutorial-search">
<div>
<input type="search" id="tutorialSearchInput" placeholder="Find...">
<button id="tutorialSearchButton"><img src="img/icon/9fafc1/search.svg" alt="Search"></button>
</div>
<!-- Each search criteria must be within a category from below. -->
<div>
<select autocomplete="off" id="selectTutorialType">
<option value="recent">Recently Added</option>
<option value="js">JavaScript</option>
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="animation">Animation</option>
<option value="other">Other</option>
</select>
</div>
</div>
<!-- In case of no search results please show... -->
<div class="tutorialSearchError">
<img src="img/icon/9fafc1/info_about.svg" width="36" style="padding: 5px;" alt="info about">
<span>Could not find any tutorials matching search criteria given!</span>
</div>
<!-- Where all the results will be shown :) -->
<div class="tutorialListContainer">
<a href="tutorial/custom-loading-spinner.html" data-keywords="recent css animation html">
<img src="img/icon/87cc0f/guide_tutorial.svg" alt="tut-icon"><span class="tutListTitle">Custom Loading Spinner</span><span class="tag">CSS</span>
</a>
</div>
</div>
</section>
<div style="margin-top: auto">
<!-- Footer Design Wave-->
<img src="img/svg/StackedWave1.svg" alt="stac" style="display: block; width: 100%;">
<!-- Footer -->
<footer>
<div class="wrapper">
<div class="socials-button-container movable opacity">
<button class="popupOpenButton" data-find-id="mySocials">My Socials</button>
</div>
<div class="copyright movable opacity fast-delay">
Website created by <span class="greenify">Claasgreeneye</span>.<br> © Copyright 2025
</div>
</div>
<div class="wrapper w2">
<div class="extra-footer-buttons">
<a href="disclaimers.html" target="_blank">Disclaimers & Credits</a>
<a href="version-changelog.html" target="_blank">Version Changelog</a>
</div>
</div>
</footer>
</div>
</body>
</html>