Skills

<!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>