<!DOCTYPE html>
<html>
<head>
<title> Skills </title>
<style>
p{
font-family:Helvetica;
color: white;
background-color: black;
font-size: 130%;
}
ul li
{
font-family:Helvetica;
font-size: 150%;
text-shadow: 1px 1px #ccd9ff;
}
.menu {
display: flex;
justify-content: center;
}
#myDIV1{
width: 100%;
padding: 50px 0;
text-align: left;
background-color: #ccd9ff;
margin-top:20px;
display: none;
text-shadow: 4px 4px 3px rgba(0,0,0,0.1);
font: 30 30px/0.8 'Great Vibes', Helvetica, sans-serif;
border-radius: 30%;
word-wrap: break-word
}
#myDIV, #myDIV2 {
width: 100%;
padding: 50px 0;
text-align: left;
background-color: #ffa280;
margin-top:20px;
display: none;
text-shadow: 4px 4px 3px rgba(0,0,0,0.1);
font: 30 30px/0.8 'Great Vibes', Helvetica, sans-serif;
border-radius: 30%;
word-wrap: break-word
}
.listClass{
-webkit-column-width: 300px; /* Chrome, Safari, Opera */
-moz-column-width: 300px; /* Firefox */
column-width: 300px;
}
#button1, #button3 {
border: 2px, black;
padding: 15px 15px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
border-collapse: separate;
border-spacing: 10px 50px;
border-radius: 50%;
background-image: url("https://static.pexels.com/photos/45911/peacock-plumage-bird-peafowl-45911.jpeg");
}
#button2 {
border: 2px, black;
padding: 50px 50px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
border-collapse: separate;
border-spacing: 10px 50px;
text-shadow: 4px 4px 3px rgba(0,0,0,0.1);
border-radius: 50%;
background-image: url("https://static.pexels.com/photos/206935/pexels-photo-206935.jpeg");
}
.hr
{
color: #6666ff;
text-shadow: 4px 4px 3px rgba(0,0,0,0.1);
}
#skillshead {
font: 300 80px/0.8 'Great Vibes', Helvetica, sans-serif;
color: #6666ff;
text-shadow: 4px 4px 3px rgba(0,0,0,0.1);
text-align: center;
}
h2 {
font: 300 40px/0.8 'Great Vibes', Helvetica, sans-serif;
color: #6666ff;
text-shadow: 4px 4px 3px rgba(0,0,0,0.1);
text-align: center;
display: inline-block;
}
#divButtons {
font: 300 20px/0.8 'Great Vibes', Helvetica, sans-serif;
color: #6666ff;
text-shadow: 4px 4px 3px rgba(0,0,0,0.1);
text-align: left;
}
img {
height: 200px;
width: 300px;
border-radius: 50%;
float: left;
clear: left;
box-shadow: 10px 10px 5px #888888;
}
</style>
</head>
<body background ="https://static.pexels.com/photos/430207/pexels-photo-430207.jpeg">
<div id = skillshead> Skills </div>
<hr>
<p>Click the buttons to hide and show parts of the resume. This website was created utilizing <b>HMTL</b> code, <b>CSS</b> code, and <b>javascript </b>.
<b><i> It might be necessary to click twice</i></b></p> </div>
<ul>
<hr>
<div class = "menu">
<div id = "button1"><li><button onclick="myFunction()"><div id = "divButtons">Programming Skills</div></button></li></div>
<div id = "button2"><li><button onclick="myFunction1()"><div id = "divButtons">Non-programming Computing Skills</div></button></li></div>
<div id = "button3"><li><button onclick="myFunction2()"><div id = "divButtons">Other Workplace Skills</div></button></li></div>
</div>
</ul>
<hr>
<div id="myDIV">
<h2>Programming Skills</h2>
<img src="https://static.pexels.com/photos/97077/pexels-photo-97077.jpeg" alt="programming code">
<div class = "listClass">
<ul>
<li>Python programming</li>
<li>Automating processes with python</li>
<li>Perl Programming</li>
<li>Java Programming</li>
<li>iSeries programming</li>
<li>QBasic Programming</li>
<li>Object-oriented C++ programming</li>
<li>GUI Building with C++</li>
<li>Utilizing classes</li>
<li> PL/SQL Programming</li>
<li> MySQL Programming </li>
<li> Javascript Programming</li>
</ul>
</div>
</div>
<div id="myDIV1">
<img src="https://static.pexels.com/photos/7350/startup-photos.jpg" alt="computer startup">
<h2>Non-programming Computing Skills</h2>
<div class = "listClass">
<ul>
<li>Created Games in Gamemaker 8</li>
<li>Made Construct 2 Games </li>
<li>Created Websites using HTML </li>
<li>Created hierarchal business, data, and program structures using Visio. </li>
<li>Planned programs and program interfaces utilizing Visio to create models
of the GUI. </li>
<li> HTML Programming</li>
<li> CSS Formatting </li>
<li>Using Powerpoint to </li>
<li> Utilizing Micosoft Access to create databases</li>
</ul>
</div>
</div>
<div id="myDIV2">
<h2>Other Workplace Skills</h2>
<img src="https://static.pexels.com/photos/416405/pexels-photo-416405.jpeg" alt="workplace">
<div class = "listClass">
<ul>
<li>Typing rate at 73 words per minute with 98% accuracy</li>
<li>Able to use information and critical thinking to form conclusions</li>
<li>Thorough planner and implementier</li>
<li> Excellent ability to create PowerPoint presentations and make public speeches</li>
<li>Is an independent worker and self-learner.</li>
<li>Has a great ability to collaborate on projects including SCRUM development </li>
<li>Understand and speak some Spanish</li>
<li>Excellent writing skills</li>
<li>Excellent problem solver with the ability to analyze and utilize research</li>
<li>Excellent math and discrete mathematics skills</li>
<li>Detail-oriented and able to correct mistakes</li>
<li>Ability to utilize the scientific method and step by step processes.</li>
</ul>
</div>
</div>
<script>
function myFunction() {
var x = document.getElementById('myDIV');
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
</script>
<script>
function myFunction1() {
var x = document.getElementById('myDIV1');
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
</script>
<script>
function myFunction2() {
var x = document.getElementById('myDIV2');
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
</script>
</body>
</html>
Comments