<html> <head> <link rel='stylesheet' type='text/css' href='css/styles.css'> <script type='text/javascript' src='jquery.js'></script> <script type='text/javascript'> function main() { $('.skillset').hide(); $('.skillset').fadeIn(1000); $('.projects').hide(); $('.projects-button').on('click', function() { //$(this).next().toggle(); $(this).next().slideToggle(250); $(this).toggleClass('active'); $(this).text('Projects Viewed'); }); } </script> </head> <body> <h1>Proficient in:</h1> <div class='skillset'> <div class='skill-html'> <h1>HTML & CSS</h1> <p class='description'> <div class='projects-button'>Recent Projects</div> <ul class='projects'> <li>Broadway</li> <li>MOVE</li> </ul> </p> </div> <div class='skill-js'> <h1>JavaScript</h1> <p class='description'> <div class='projects-button'>Recent Projects</div> <ul class='projects'> <li>Password Validator</li> <li>Whale Talk</li> </ul> </p> </div> <div class='skill-jquery'> <h1>jQuery</h1> <p class='description'> <div class='projects-button'>Recent Projects</div> <ul class='projects'> <li>Coming soon...</li> </ul> </p> </div> </div> <script type='text/javascript'> $(document).ready(main); </script> </body> </html>
body { font-family: Helvetica; padding: 2em; background-color: whitesmoke; } h1 { font-size: 2.5em; } .skillset { display: flex; justify-content: space-between; flex-wrap: wrap; } .skill-html { background-color: #E55126; } .skill-js { background-color: #E5A227; } .skill-jquery { background-color: #0C73B8; } .skill-html, .skill-js, .skill-jquery { width: 100%; padding: 1em 3em 2em 2em; margin: 0.5em; color: whitesmoke; } .projects-button { padding: 0.75em 1.25em; background-color: whitesmoke; opacity: 0.9; width: 10em; color: black; } ul { list-style: none; padding: 0; } .projects { margin: 1em 0; } .active { background-color: #333333; color: whitesmoke; }
var
This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)