-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcc_Portfolio.html
131 lines (127 loc) · 5.77 KB
/
cc_Portfolio.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
<!DOCTYPE html>
<html>
<head>
<title>Experience Rads</title>
<link rel="stylesheet" href="CSS/cc_Portfolio.css">
</head>
<body>
<div id="main">
<section id="welcome-section">
<h1>Jai Ross</h1>
</section>
<nav id="navbar">
<a class="nav-link" href="http://119.17.135.80:81/">Experience<strong>Rads</strong></a>
<a class="nav-link" href="#projects-section">Projects</a>
<a class="nav-link" href="#art-section">Art</a>
<a class="nav-link" id="profile-link" href="https://github.com/ExpMayVary" target="_blank"><img id="github" src="images/GitHub-Mark-120px-plus.png"></a>
</nav>
<section id="content-section">
<section id="projects">
<header>Projects:</header>
<div class="thumbnail-item">
<a class="thumbnail-img" id="thumbnail-1"href="/cc_Portfolio.html"></a>
<p class="thumbnail-site-name">Experience Rads</p>
</div>
<ul>
<li class="project-tile">Enromancy</li>
<li class="project-tile"><a href="http://119.17.135.80:81/codecamp/TechnicalPage.html">Lol Roller</a></li>
<li class="project-tile">Angel Game</li>
</ul>
</section>
<section id="art-section">
<header>Art Work from 2019</header>
<img class="art" src="Images/art/Athur and the Sword.png">
<img class="art" src="/Images/art/Clip Paint Avatar.png">
<img class="art" src="/Images/art/Watercolour Blend.png">
<img class="art" src="/Images/art/Glow.jpg">
</section>
</section>
<section id="content-section">
<section id="projects">
<header>Projects:</header>
<div class="thumbnail-item">
<a class="thumbnail-img" id="thumbnail-1"href="/cc_Portfolio.html"></a>
<p class="thumbnail-site-name">Experience Rads</p>
</div>
<ul>
<li class="project-tile">Enromancy</li>
<li class="project-tile"><a href="http://119.17.135.80:81/codecamp/TechnicalPage.html">Lol Roller</a></li>
<li class="project-tile">Angel Game</li>
</ul>
</section>
<section id="art-section">
<header>Art Work from 2019</header>
<img class="art" src="Images/art/Athur and the Sword.png">
<img class="art" src="/Images/art/Clip Paint Avatar.png">
<img class="art" src="/Images/art/Watercolour Blend.png">
<img class="art" src="/Images/art/Glow.jpg">
</section>
</section>
<section id="content-section">
<section id="projects">
<header>Projects:</header>
<div class="thumbnail-item">
<a class="thumbnail-img" id="thumbnail-1"href="/cc_Portfolio.html"></a>
<p class="thumbnail-site-name">Experience Rads</p>
</div>
<ul>
<li class="project-tile">Enromancy</li>
<li class="project-tile"><a href="http://119.17.135.80:81/codecamp/TechnicalPage.html">Lol Roller</a></li>
<li class="project-tile">Angel Game</li>
</ul>
</section>
<section id="art-section">
<header>Art Work from 2019</header>
<img class="art" src="Images/art/Athur and the Sword.png">
<img class="art" src="/Images/art/Clip Paint Avatar.png">
<img class="art" src="/Images/art/Watercolour Blend.png">
<img class="art" src="/Images/art/Glow.jpg">
</section>
</section>
</div>
<!-- Start of Button w/ Modal Component -->
<button id="myBtn">Site<br>Info</button>
<div id="myModal" class="modal">
<div class="modal-content"> <!-- Modal content -->
<span class="close">×</span>
<h4>Portfolio Page</h4>
<p>A Portfolio page I made for the FCC Responsive Website Design Course. I have made a new page so this will only be used as a proff of concept and Knowlage.<br> Code: HTML, CSS and JavaScript (Only for this button so far).<br> Hosting: nginx.<br> Misc: Git, GitHub.<br>Last Updated: 14/07/2020. </p>
</div>
</div>
<!-- End of Button w/ Modal Component -->
<footer id="ER-footer">
<h6 id="ER-footer-header">experience<strong>Rads</strong> network</h6>
<div id="ER-footer-div">
<a class="ER-footer-link" href="index.nginx-debian.html">experienceRads</a>
<a class="ER-footer-link" href="cc_Portfolio.html">Jai's Portfolio</a>
<a class="ER-footer-link" href="cc_TechnicalPage.html">Technical Page</a>
<a class="ER-footer-link" href="cc_LandingPage.html">Landing Page</a>
<a class="ER-footer-link" href="cc_Survey.html">Survey Form</a>
<a class="ER-footer-link" href="cc_TributePage.html">TributePage</a>
</div>
</footer>
</body>
<script>
// Start of Button w/ Modal component
// Get the modal
var modal = document.getElementById("myModal");
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}}
// End of Button w/ Modal component
</script>
</html>