Joe Warren Portfolio Deluxe

Developer
Joe Warren
Size
13,097 Kb
Views
28,336
  1. Joe Warren Portfolio Deluxe Previews
  2. Joe Warren Portfolio Deluxe HTML Codes
  3. Joe Warren Portfolio Deluxe CSS Codes
  4. Joe Warren Portfolio Deluxe JS Codes

How do I make an joe warren portfolio deluxe?

Based on MOHAMMED ERRAYSY's Free Code Camp portfolio http://codepen.io/merraysy/pen/KzpwJG, https://twitter.com/merraysy. What is a joe warren portfolio deluxe? How do you make a joe warren portfolio deluxe? This script and codes were developed by Joe Warren on 04 July 2022, Monday.

Joe Warren Portfolio Deluxe Previews
IQ Test

Joe Warren Portfolio Deluxe - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Joe Warren Portfolio Deluxe</title> <link rel='stylesheet prefetch' href='http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.2/normalize.css'>
<link rel='stylesheet prefetch' href='http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- Based on MOHAMMED ERRAYSY's Free Code Camp portfolio http://codepen.io/merraysy/pen/KzpwJG -->
<!-- NAV-BAR -->
<div id="nav-bar"> <div class="nav-container"> <div class="toggle-nav"> <i class="fa fa-bars"></i> </div> <ul class="nav-list"> <li class="active"> <a data-title="home">Home</a> </li> <li> <a data-title="about">About</a> </li> <li> <a data-title="portfolio">Portfolio</a> </li> <li> <a data-title="contact">Contact</a> </li> </ul> </div> <!-- end-nav-container -->
</div>
<!-- end-nav-bar -->
<!-- HOME -->
<div id="home" class="section"> <div class="section-container"> <div class="profil"> <div class="profil-img"></div> <h1>JOE WARREN</h1> <p><u>Front End Developer</u></p> </div> <!-- end-profil --> <div class="social-links"> <a href="https://github.com/MightyJoeW" target="_blank"><i class="fa fa-github"></i></a> <a href="https://www.linkedin.com/in/josephmwarren" target="_blank"><i class="fa fa-linkedin"></i></a> <a href="https://twitter.com/MightyJoeW" target="_blank"><i class="fa fa-twitter"></i></a> <a href="https://youtube.com/MightyJoeW" target="_blank"><i class="fa fa-youtube"></i></a> </div> <!-- end-social-links --> </div> <!-- end-home-container --> <div class="scroll-icon"> <div class="scroll-container"> <figure> <svg id="mouse" viewBox="0 0 106 106" width="40" height="60"> <g> <rect y="81" width="106" height="60" /> <polygon points="40,18 50,18 50,0 0,0 0,75 50,75 50,58 40,58	"/> <polygon points="56,0 56,18 66,18 66,58 56,58 56,75 106,75 106,0	"/> <rect class="wheel" x="45" y="23" width="16" height="30" /> </g> </svg> </figure> <i class="fa fa-angle-double-down"></i> </div> </div> <!-- end-scroll-icon -->
</div>
<!-- end-home -->
<!-- ABOUT -->
<div id="about" class="section"> <div class="section-container"> <div class="intro"> <h1>My name is JOE WARREN</h1> <p>I'm a Front-End developer in development who's driven daily by my passion for technology along with my desire to make our lives more efficient <i> and </i> entertaining. I'm currently working towards my Front End Development Certification with <a href="https://www.freecodecamp.com" target="about_blank">Free Code Camp</a> as well as participating in <a href="https://twitter.com/search?vertical=default&q=%23100daysofcode&src=typd" target="_blank">#100DaysofCode</a>.</p> </div> <div class="skills"> <h2 class="title">My skills</h2> <ul> <li> Responsive Design <ul class="lvl-1"> <li><span class="skill-bar">50%</span><u>Bootstrap</u></li>
<!-- <li><span class="skill-bar">80%</span><u>Neat</u></li> --> </ul> </li> <li> CSS Tools <ul class="lvl-1"> <li><span class="skill-bar">10%</span><u>SASS</u></li>
<!-- <li><span class="skill-bar">0%</span><u>#</u></li> --> </ul> </li> <li> Javascript Tools <ul class="lvl-1"> <li><span class="skill-bar">20%</span><u>jQuery</u></li> <li><span class="skill-bar">05%</span><u>React</u></li> </ul> </li> <li> Workflow <ul class="lvl-1"> <li><span class="skill-bar">10%</span><u>Git</u></li> <li><span class="skill-bar">0%</span><u>Grunt</u></li> </ul> </li> </ul> </div> <!-- end-skills --> </div> <!-- end-about-container -->
</div>
<!-- end-home -->
<!-- PORTFOLIO -->
<div id="portfolio" class="section"> <div class="section-container"> <div class="title"> <h2>My Projects</h2> </div> <div class="thumbnails"> <ul> <li> <a href="#"> <img src="https://images.unsplash.com/photo-1486475554424-2fa50cd59f18?dpr=1&auto=format&fit=crop&w=250&h=250&q=80&cs=tinysrgb&crop=" alt="JS Drum Machine" /> <span> <h2>JavaScript Drum Kit</h2> <p>Jam out with your desktop keyboard!</p> <i class="fa fa-link"></i> </span> </a> </li> <li> <a href="#"> <img src="https://lh3.googleusercontent.com/D1sIr_AIdTiVpA68VAYFpXaB9x-Sh95PVDdrC620s5C1qVSjKiFU87rv1ApVgDhX1d19zwP_eVvZc580yDoa9EIIHJbuNM0dD-CwgcsknL25d0nWDeIUadtuvzWX7qzie4TJx42bI78PubHklURRB8S_tPxxmqo87_TjTYsBR-ODkcfEAwwzVEQj1zUfdWf_hyH6HwaBBFiTccXpqSn_4C6Zt03P2hImAsaoKhIw2U_efwfL6uua7t6Uub2hIt9FwFinZ-CXtR8zYik-JJQSUo5LFhi3ZjCDAxkF1R9n8pRRvSRtfte5T30P6oJ8s2igwXIwy5L7IQpP7hctsl3SeF-spAut1flPWnmvmQ0PXTA1tygVpWrwJ3Grcjth3c1l2iDUGqDYQLMt4uuO-gSWSxW67kQQcKHB5hhHEz44I7xCiKXG8fYZoit0ka_KGyEQHhVde3dBkLd65ln5QeETH44cy9GAuM0aoHirrDVMYWKOX5mugbnOyMEXBO7lnw3OyVhXfqAHZpNnXhLlbZo_JGXA1w2fAkQ2zva4Ps1jNodlPmFmsRc_vu8NjVkCd-50y6g7unorCq7-ZcFwXSlfkN3XtVPzjtTWqrBhvfrgNPXhI0T4acXivA=w1450-h825-no" alt="Simon Game" /> <span> <h2>Simon Game</h2> <p>Test your memory skills.</p> <i class="fa fa-link"></i> </span> </a> </li> <li> <a href="#"> <img src="https://lh3.googleusercontent.com/HxazmGfMObLh6A2D8ITMhoOAQp4hzT25MADJ2PAMGTnTM5_tN8ihixkg4l-kL9ccM0AYquhGU6x8JmFqmzBGW5MdkctrqzDoKuZ0qeXX72R6H9G_p4EYGo2Y9X6UJvz2jTS3z6HebZ0TROCc8_JVarkncnP-gHZ9LyzEmv6wtHQ40eDR4SDe-voyRVw3nNgKNPTsWo0sTydOALomoID7yR2AoyFsfsbYY0UiOgf3b8KSqWCGRR9l8gZ_DZbcwzqfzVhqy2XWP4iElDzaA-1naEJkr10lRQsyrPy23Fi6QkcBvbh4shF6yU95gCsH_XDZl9EY1QXyo7ZllOZnh-ojBFfcHR482KPmsE3Q4oq6rkolxsSjYOB8YZWmDvGeAlfCWWA1pblMwFc1wrmrrp4ujzzXqTnN6omKtOAXb2rMvaxMa92mzIe3sZjBHW0oA3LOfxneILorNRiZt66E6ZkT7_MolTSmvWSKioqoTd9XIQiaccm5wQFm9ue5hU_8vt_IrHe11apuKKIrm5_zALUcCsQM8WE2r4i0AsM4c6tuajDY6TdVbsXiPOSBBLLKH6d60TYLTeDj3Ryp_ICq50m6yVpFPG_lHEv4Rj7GSc5-00S9RFIL-0YZIg=w1194-h679-no" height="250" width="250" alt="Games and Keys Landing Page" /> <span> <h2>Games and Keys Landing Page</h2> <p>Video Game Piano Tutorials, Sheet Music, & Midi Files</p> <i class="fa fa-link"></i> </span> </a> </li> <li> <a href="#"> <img src="https://images.unsplash.com/photo-1429051781835-9f2c0a9df6e4?dpr=1&auto=format&fit=crop&w=1450&h=825&q=80&cs=tinysrgb&crop=" alt="My CSS Blog" /> <span> <h2>My CSS Blog</h2> <p>Inside the mind of Mighty Joe</p> <i class="fa fa-link"></i> </span> </a> </li> </ul> </div> <!-- end-thumbnails --> </div> <!-- end-portfolio-container -->
</div>
<!-- end-home -->
<!-- CONTACT -->
<div id="contact" class="section"> <div class="section-container"> <div class="title"> <h2>Let's connect</h2> </div> <!-- end-title --> <div class="form-container"> <form action="#project-form"> <div class="form-group profil-img"> <input required id="name" type="text" name="name" placeholder="Name"> </div> <div class="form-group profil-img"> <input required id="email" type="email" name="email" placeholder="Email"> </div> <div class="form-group profil-img"> <input required id="subject" type="text" name="subject" placeholder="Subject"> </div> <div class="form-group profil-img"> <textarea required name="description" id="description" placeholder="Description"></textarea> </div> <div class="form-group profil-img"> <button type="reset" class="btn clear" name="clear">CLEAR</button> <button type="submit" class="btn action" name="submit">SEND</button> </div> </form> <!-- and-form --> </div> <!-- end-form-container --> </div> <!-- end-contact-container -->
</div>
<!-- end-contact --> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.12/jquery.mousewheel.js'></script> <script src="js/index.js"></script>
</body>
</html>

Joe Warren Portfolio Deluxe - Script Codes CSS Codes

@import url(http://fonts.googleapis.com/css?family=Oswald:300|Open+Sans:700,400);
html { box-sizing: border-box;
}
*, *::after, *::before { box-sizing: inherit;
}
/*	=================================================================================================	Base styles.	=================================================================================================
*/
html { margin: 0; padding: 0; overflow: auto;
}
::selection { background-color: #2FC5CC;
}
::-moz-selection { background-color: #2FC5CC;
}
* { -moz-box-sizing: border-box; box-sizing: border-box;
}
body { background-color: #0e393b; font-family: "Open Sans", Arial, sans-serif; font-size: 16px; color: #F4F7F7;
}
p { margin: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 { font-family: "Oswald", Helvetica, sans-serif; font-size: 2rem; font-weight: 300; margin-top: 0; margin-bottom: 25.6px;
}
a,
a:link,
a:visited,
a:active { text-decoration: none; color: #2FC5CC; -webkit-transition: all 0.2s ease-in 0s; -moz-transition: all 0.2s ease-in 0s; transition: all 0.2s ease-in 0s;
}
a:hover,
a:link:hover,
a:visited:hover,
a:active:hover { border-bottom-color: #2FC5CC; border-bottom-style: solid; border-bottom-width: 0.125rem;
}
ul { list-style: none; padding: 0; margin: 0;
}
#container { position: relative;
}
/*	=================================================================================================	Typography.	=================================================================================================
*/
/*	=================================================================================================	Grids.	=================================================================================================
*/
/*	=================================================================================================	Forms.	=================================================================================================
*/
form input { background-color: #F4F7F7; color: #0e393b; height: 51.2px; width: 100%; padding-left: 1rem; outline: none; border: none; -webkit-transition: all 0.2s ease-in 0s; -moz-transition: all 0.2s ease-in 0s; transition: all 0.2s ease-in 0s;
}
form input:focus { border-left-color: #f7bf07; border-left-style: solid; border-left-width: 0.25rem;
}
form textarea { background-color: #F4F7F7; color: #0e393b; height: 102.4px; width: 100%; max-width: 100%; padding-left: 1rem; padding-top: 1rem; outline: none; border: none; -webkit-transition: all 0.2s ease-in 0s; -moz-transition: all 0.2s ease-in 0s; transition: all 0.2s ease-in 0s;
}
form textarea:focus { border-left-color: #f7bf07; border-left-style: solid; border-left-width: 0.25rem;
}
/*	=================================================================================================	Modules.	=================================================================================================
*/
.btn { background-color: #0e393b; color: #F4F7F7; border: none; outline: none; padding: 0.8rem 1.5625rem; -webkit-transition: all 0.2s ease-in 0s; -moz-transition: all 0.2s ease-in 0s; transition: all 0.2s ease-in 0s; float: left;
}
@media screen and (max-width: 559px) { .btn { width: 100%; }
}
.btn.clear { background-color: #0e393b; margin-right: 1rem;
}
@media screen and (max-width: 559px) { .btn.clear { margin-right: 0; margin-bottom: 1rem; }
}
.btn.action { background-color: #f7bf07; color: #F4F7F7;
}
.btn:hover { background-color: #0e393b; color: #F4F7F7;
}
.btn:active { background-color: #0e393b; color: #F4F7F7;
}
.scroll-icon { position: absolute; width: 100%; text-align: center; bottom: 25.6px;
}
@media screen and (max-width: 1023px) { .scroll-icon { display: none; }
}
@media screen and (max-width: 559px) { .scroll-icon { display: none; }
}
@media screen and (max-height: 719px) { .scroll-icon { display: none; }
}
.scroll-icon figure { margin: 0;
}
.scroll-icon figure svg { fill: #F4F7F7;
}
.scroll-icon figure svg .wheel { fill: #f7bf07; -webkit-animation: flash 1s ease infinite alternate; -moz-animation: flash 1s ease infinite alternate; animation: flash 1s ease infinite alternate;
}
@keyframes flash { from { fill: #F4F7F7; } to { fill: #f7bf07; }
}
.scroll-icon i { height: 3.2rem; width: 3.2rem; line-height: 3.2rem; font-size: 2rem; color: #F4F7F7; -webkit-animation: scroll 1s ease-out infinite alternate; -moz-animation: scroll 1s ease-out infinite alternate; animation: scroll 1s ease-out infinite alternate;
}
@keyframes scroll { from { margin-bottom: 1.5625rem; } to { margin-bottom: 0; }
}
.scroll-icon i.animate { -webkit-animation: scroll 1s ease-out infinite; -moz-animation: scroll 1s ease-out infinite; animation: scroll 1s ease-out infinite;
}
.social-links { margin-bottom: 25.6px; position: relative; max-width: 34.375rem; margin-left: auto; margin-right: auto; padding: 0 1rem;
}
.social-links::after { clear: both; content: ""; display: block;
}
@media screen and (max-width: 559px) { .social-links { margin-bottom: 25.6px; }
}
.social-links a { display: inline-block; background-color: #F4F7F7; color: #0e393b; height: 51.2px; width: 51.2px; line-height: 51.2px; margin-right: 1rem; -webkit-transition: all 0.2s ease-in 0s; -moz-transition: all 0.2s ease-in 0s; transition: all 0.2s ease-in 0s;
}
@media screen and (max-width: 559px) { .social-links a { height: 40.96px; width: 40.96px; line-height: 40.96px; margin-right: 0.5rem; }
}
.social-links a:last-of-type { margin-right: 0;
}
.social-links a i { font-size: 1.25rem; text-align: center;
}
.social-links a:hover { background-color: #2FC5CC; color: #F4F7F7; border: none;
}
@media screen and (max-width: 559px) { .social-links a:hover { background-color: #F4F7F7; color: #0e393b; }
}
@media screen and (max-width: 559px) { .social-links a:active { background-color: #2FC5CC; color: #F4F7F7; }
}
/*	=================================================================================================	Section.	=================================================================================================
*/
.section { position: absolute; height: 100%; width: 100%;
}
@media screen and (max-width: 1023px) { .section { position: relative; height: 100vh; padding: 102.4px 0; }
}
@media screen and (max-width: 559px) { .section { position: relative; height: auto; padding: 102.4px 0; }
}
@media screen and (max-height: 719px) { .section { position: relative; height: auto; padding: 102.4px 0; }
}
.section .section-container { position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);
}
@media screen and (max-width: 559px) { .section .section-container { top: 0; transform: none; }
}
@media screen and (max-height: 719px) { .section .section-container { top: 0; transform: none; }
}
/*	=================================================================================================	Nav Bar.	=================================================================================================
*/
#nav-bar { display: none; position: absolute; left: 0; top: 0; height: 100%; z-index: 9999;
}
@media screen and (max-width: 1023px) { #nav-bar { display: block; position: fixed; height: auto; width: 100%; background-color: #f7bf07; }
}
@media screen and (max-width: 559px) { #nav-bar { display: block; position: fixed; height: auto; width: 100%; background-color: #f7bf07; }
}
@media screen and (max-height: 719px) { #nav-bar { display: block; position: fixed; height: auto; width: 100%; background-color: #f7bf07; }
}
#nav-bar .nav-container { position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); padding: 3.125rem; text-align: center;
}
@media screen and (max-width: 1023px) { #nav-bar .nav-container { transform: none; top: 0; padding: 0; }
}
@media screen and (max-width: 559px) { #nav-bar .nav-container { transform: none; top: 0; padding: 0; }
}
@media screen and (max-height: 719px) { #nav-bar .nav-container { transform: none; top: 0; padding: 0; }
}
#nav-bar .nav-container .toggle-nav { display: none; position: fixed; z-index: 9999; top: 0; left: 0; height: auto; width: 100%; text-align: center; background-color: #f7bf07; padding: 0.625rem;
}
@media screen and (max-width: 559px) { #nav-bar .nav-container .toggle-nav { display: block; position: relative; }
}
#nav-bar .nav-container .toggle-nav i { color: #F4F7F7; font-size: 3rem;
}
#nav-bar .nav-container .toggle-nav i:hover { border: none;
}
#nav-bar .nav-container .toggle-nav i:active { color: #0e393b;
}
@media screen and (max-width: 559px) { #nav-bar .nav-container ul { display: none; }
}
#nav-bar .nav-container ul li { text-align: center;
}
@media screen and (max-width: 1023px) { #nav-bar .nav-container ul li { display: inline-table; }
}
@media screen and (max-height: 719px) { #nav-bar .nav-container ul li { display: inline-table; }
}
@media screen and (max-width: 559px) { #nav-bar .nav-container ul li { display: block; }
}
#nav-bar .nav-container ul li a { color: #F4F7F7; display: block; text-transform: uppercase; padding: 0.9375rem 0.9375rem;
}
@media screen and (max-width: 1023px) { #nav-bar .nav-container ul li a { cursor: pointer; }
}
@media screen and (max-height: 719px) { #nav-bar .nav-container ul li a { cursor: pointer; }
}
@media screen and (max-width: 559px) { #nav-bar .nav-container ul li a { font-size: 2rem; padding: 0.9375rem 0.625rem; cursor: pointer; }
}
#nav-bar .nav-container ul li a:hover { border: none; color: #F4F7F7;
}
@media screen and (max-width: 1023px) { #nav-bar .nav-container ul li a:hover { color: #0e393b; }
}
@media screen and (max-width: 559px) { #nav-bar .nav-container ul li a:hover { color: #F4F7F7; }
}
@media screen and (max-height: 719px) { #nav-bar .nav-container ul li a:hover { color: #0e393b; }
}
#nav-bar .nav-container ul li.active a { background-color: #f7bf07; color: #F4F7F7;
}
@media screen and (max-width: 1023px) { #nav-bar .nav-container ul li.active a { background-color: #c59906; border: none; color: #F4F7F7; }
}
@media screen and (max-width: 559px) { #nav-bar .nav-container ul li.active a { background-color: #c59906; color: #F4F7F7; }
}
@media screen and (max-height: 719px) { #nav-bar .nav-container ul li.active a { background-color: #f7bf07; color: #F4F7F7; }
}
@media screen and (max-height: 719px) { #nav-bar .nav-container ul li.active a:hover { color: #0e393b; }
}
/*	=================================================================================================	Home Page.	=================================================================================================
*/
#home { background-image: url(//i.imgsafe.org/8717961.jpg); background-size: cover; text-align: center; z-index: 99;
}
#home .profil { position: relative; max-width: 34.375rem; margin-left: auto; margin-right: auto; padding: 0 1rem; margin-bottom: 25.6px;
}
#home .profil::after { clear: both; content: ""; display: block;
}
#home .profil .profil-img { color: transparent; background-image: url(https://lh3.googleusercontent.com/OkCqiak95eWnGniqoMVIFDfJyGXWkJ5guUO7aHLs4bpvQLEPQftdzIEDgpRS2zkoddvGZt47r5iUSwbj-9dQtOTRGzPmQBwQWHrho9rLEnv5052KnCRebN6jYPKRKOnM9xXq-DQ7bqbvKxoYpE-gmwFWwDChNJH2_zv7q-f_RSwP5ff84Ia7nK6meIRd6_Tg2zxaADUGyaXR3xLUH3zLEr101HI2xygz6_oTiJz-qTt-zuqQrD2Rnv3jx-xicZVH9DZdYejlzhxKC5V0-YK58QI0cM9o-7-3TWmBJXkc-2l8VlHEEl2WyQ5_MTQyRpO8hs23qgkBFiEf0ZEUlp7qELOwHFjToqpl8ps_pyLZgEhYv5DFWdGhDIuXD14i4mLvis1mB5u3qr2DAqOum3VP-xz7LasitQlLPvF-2xRHvtlZ9DUemPy1FNztVJcwqBacDOkB-ob-ctEqoVeOA9Lqqd7d0KamR4QdJz0sEuKfB3coX6o8eLbbtpcMSbeNYHH_NCXSw-c82Oj6gZl8r4srPwA8sPsFEA_XyWGmsbTXG-d2kzZOG5tTvYg1RZZcl8xg-XPA_83nEZBQmJwMuF0WyjZKfFzMP7nWzSyIxJOiYE26e5z_r3NY_A=s439-no); background-size: contain; height: 10.5rem; width: 10.5rem; margin: 0 auto 25.6px auto; box-shadow: 0 0.0625rem 0.125rem #0e393b; -webkit-transition: all 0.2s ease-in 0s; -moz-transition: all 0.2s ease-in 0s; transition: all 0.2s ease-in 0s;
}
@media screen and (max-width: 1023px) { #home .profil .profil-img { height: 10.5rem; width: 10.5rem; }
}
@media screen and (max-width: 559px) { #home .profil .profil-img { height: 8.25rem; width: 8.25rem; }
}
#home .profil h1 { font-size: 3.5rem; margin-bottom: 0; background-color: #2FC5CC; color: #F4F7F7; text-shadow: 0.25rem 0.25rem #0e393b; display: inline-block; padding: 0.3125rem 1.25rem; -webkit-transition: all 0.2s ease-in 0s; -moz-transition: all 0.2s ease-in 0s; transition: all 0.2s ease-in 0s;
}
@media screen and (max-width: 1023px) { #home .profil h1 { font-size: 3rem; }
}
@media screen and (max-width: 559px) { #home .profil h1 { font-size: 2.25rem; text-shadow: 0.1875rem 0.1875rem #0e393b; }
}
#home .profil p u { display: inline-block; color: #F4F7F7; background-color: #f7bf07; padding: 0.3125rem 1.25rem; text-decoration: none;
}
/*	=================================================================================================	About Page.	=================================================================================================
*/
#about { background-image: url(//i.imgsafe.org/7b4884d.jpg); background-size: cover; text-align: center; z-index: 98;
}
#about .intro { position: relative; max-width: 34.375rem; margin-left: auto; margin-right: auto; padding: 0 1rem; margin-bottom: 51.2px;
}
#about .intro::after { clear: both; content: ""; display: block;
}
#about .intro h1 { font-size: 2rem; color: #F4F7F7;
}
@media screen and (max-width: 1023px) { #about .intro h1 { font-size: 1.625rem; }
}
#about .intro p { margin: 0 auto;
}
#about .skills { position: relative; max-width: 34.375rem; margin-left: auto; margin-right: auto; padding: 0 1rem;
}
#about .skills::after { clear: both; content: ""; display: block;
}
#about .skills h2 { background-color: #2FC5CC; display: inline-block; padding: 0 0.9375rem;
}
#about .skills ul { text-align: center;
}
#about .skills ul li { position: relative; display: inline-block; width: 15.625rem; margin-bottom: 25.6px;
}
#about .skills ul li:last-child { margin-bottom: 0;
}
@media screen and (max-width: 559px) { #about .skills ul li { display: block; width: auto; }
}
#about .skills ul li .lvl-1 { position: relative; margin: 25.6px auto 0 auto;
}
#about .skills ul li .lvl-1 li { position: relative; display: inline-block; width: 15rem; background-color: #0e393b; padding: 0.625rem; margin-bottom: 0.625rem;
}
#about .skills ul li .lvl-1 li:last-child { margin-bottom: 0;
}
@media screen and (max-width: 559px) { #about .skills ul li .lvl-1 li { display: block; width: auto; }
}
#about .skills ul li .lvl-1 li span { position: absolute; z-index: 1; left: 0; top: 0; height: 100%; background-color: #f7bf07; overflow: hidden; font-size: 1px; text-indent: -9999px;
}
#about .skills ul li .lvl-1 li u { position: relative; z-index: 2; text-decoration: none; color: #F4F7F7;
}
/*	=================================================================================================	Portfolio Page.	=================================================================================================
*/
#portfolio { background-image: url(//i.imgsafe.org/8586dee.jpg); background-size: cover; text-align: center; z-index: 97;
}
#portfolio .title { position: relative; max-width: 34.375rem; margin-left: auto; margin-right: auto; padding: 0 1rem;
}
#portfolio .title::after { clear: both; content: ""; display: block;
}
#portfolio .title h2 { background-color: #2FC5CC; display: inline-block; padding: 0 0.9375rem;
}
#portfolio .thumbnails { position: relative; max-width: 34.375rem; margin-left: auto; margin-right: auto; padding: 0 1rem;
}
#portfolio .thumbnails::after { clear: both; content: ""; display: block;
}
#portfolio .thumbnails ul li { position: relative; display: inline-block;
}
#portfolio .thumbnails ul li a { position: relative; display: block; height: 15.625rem; width: 15.625rem; padding: 0; overflow: hidden;
}
#portfolio .thumbnails ul li a img { position: relative; z-index: 1; height: 100%; width: 100%;
}
#portfolio .thumbnails ul li a span { position: absolute; z-index: 2; height: 100%; width: 100%; top: 0; left: 0; background-color: #0e393b; color: #F4F7F7; opacity: 0; -webkit-transition: all 0.15s ease-out 0s; -moz-transition: all 0.15s ease-out 0s; transition: all 0.15s ease-out 0s; padding: 25.6px 0.625rem;
}
#portfolio .thumbnails ul li a span h2 { margin-top: 0; color: #f7bf07;
}
#portfolio .thumbnails ul li a span p { color: #F4F7F7; margin-bottom: 25.6px;
}
#portfolio .thumbnails ul li a span i { font-size: 2rem;
}
#portfolio .thumbnails ul li a:hover { border: none;
}
#portfolio .thumbnails ul li a:hover span { opacity: .8;
}
/*	=================================================================================================	Contact Page.	=================================================================================================
*/
#contact { background-image: url(//i.imgsafe.org/t/86c1376.jpg); background-size: cover; text-align: center; z-index: 96;
}
#contact .title { position: relative; max-width: 34.375rem; margin-left: auto; margin-right: auto; padding: 0 1rem; margin-bottom: 25.6px;
}
#contact .title::after { clear: both; content: ""; display: block;
}
@media screen and (max-height: 719px) { #contact .title { margin-top: 0; }
}
#contact .title h2 { background-color: #2FC5CC; display: inline-block; padding: 0 0.9375rem;
}
#contact .form-container { position: relative; max-width: 34.375rem; margin-left: auto; margin-right: auto; padding: 0 1rem;
}
#contact .form-container::after { clear: both; content: ""; display: block;
}
#contact .form-container .form-group { margin-bottom: 25.6px;
}
#contact .form-container .form-group:last-of-type { margin-bottom: 0;
}

Joe Warren Portfolio Deluxe - Script Codes JS Codes

'use strict';
$(function() { function next(next, current, winHeight) { next.target.css({ display: 'block' }); next.target.promise().done(function() { current.target.animate({ marginTop: -winHeight, }, 500, 'easeInCubic'); current.target.promise().done(function() { $(this).css({ display: 'none' }); current.current = false; current.menuItem.parent().removeClass('active'); next.current = true; next.menuItem.parent().addClass('active'); }); }); } // end-next function prev(prev, current) { prev.target.css({ display: 'block' }); prev.target.promise().done(function() { $(this).animate({ marginTop: 0, }, 500, 'easeOutCubic'); $(this).promise().done(function() { current.target.css({ display: 'none' }); current.current = false; current.menuItem.parent().removeClass('active'); prev.current = true; prev.menuItem.parent().addClass('active'); }); }); } // end-prev function nextSlide(e, slides, winHeight) { var currentSlide = slides.filter(function(obj) { return obj.current; })[0], animtedSlide = slides.filter(function(obj) { return obj.target.is(':animated'); })[0], currentSlideIndex = slides.indexOf(currentSlide), nextSlide = slides[currentSlideIndex + 1]; if (currentSlideIndex !== slides.length - 1 && !animtedSlide) { if (nextSlide.target.is(':hidden')) { next(nextSlide, currentSlide, winHeight); } } // end-if } // end nextSlide function prevSlide(e, slides, winHeight) { var currentSlide = slides.filter(function(obj) { return obj.current; })[0], animtedSlide = slides.filter(function(obj) { return obj.target.is(':animated'); })[0], currentSlideIndex = slides.indexOf(currentSlide), prevSlide = slides[currentSlideIndex - 1]; if (currentSlideIndex !== 0 && !animtedSlide) { if (prevSlide.target.is(':hidden')) { prev(prevSlide, currentSlide); } } // end-else } // end prevSlide function scrollTo(e, slides) { var targetElementId = $(e.target).attr('data-title'), targetElement = slides.filter(function(obj) { return obj.id === targetElementId; })[0]; $body.animate({ scrollTop: targetElement.target.offset().top }); $body.promise().done(function() { targetElement.menuItem.parent().siblings().removeClass('active'); targetElement.menuItem.parent().addClass('active'); }); } // DOM var $body = $('body'); var $navBar = $('#nav-bar'); var $navList = $navBar.find('.nav-list'); var $navToggle = $navBar.find('.toggle-nav').find('i'); var slides = [ { id: 'home', target: $('#home'), menuItem: $navList.find('a[data-title=' + 'home' + ']'), current: true }, { id: 'about', target: $('#about'), menuItem: $navList.find('a[data-title=' + 'about' + ']'), current: false }, { id: 'portfolio', target: $('#portfolio'), menuItem: $navList.find('a[data-title=' + 'portfolio' + ']'), current: false }, { id: 'contact', target: $('#contact'), menuItem: $navList.find('a[data-title=' + 'contact' + ']'), current: false } ]; var $sections = $('.section'); var $skillBars = $('.skill-bar'); // Vars var winHeight = $(window).height(); function portfolio() { // Slides mode if ($sections.css('position') === 'absolute') { // Hide hidden slides slides.forEach(function(slide) { if (!slide.current) { slide.target.css({ display: 'none' }); } }); // Next slide mousewheel $body.on('mousewheel', function(e) { if (e.deltaY < 1) { nextSlide(e, slides, winHeight); } }); // Prev slide mousewheel $body.on('mousewheel', function(e) { if (e.deltaY === 1) { prevSlide(e, slides, winHeight); } }); } else { $sections.css({ display: 'block', marginTop: 0 }); } // end-if-section if ($navToggle.is(':hidden')) { $navList.css({ display: 'block' }); } else { $navList.css({ display: 'none' }); } // end-if-nav-toggle $skillBars.each(function() { $(this).css({ width: $(this).html() }); }); } // end-portfolio $(document).ready(function() { // Run my function portfolio(); // Update winHeight when resizing the window $(window).resize(function() { winHeight = $(window).height(); portfolio(); }); // Fixed Nav $navList.on('click', function(e) { scrollTo(e, slides); if (!$navToggle.is(':hidden') && $navToggle.hasClass('fa-close')) { $navList.hide(); $navToggle.addClass('fa-bars').removeClass('fa-close'); } }); // Mobile Nav $navToggle.on('click', function(e) { var self = $(this); if (self.hasClass('fa-bars')) { self.addClass('fa-close').removeClass('fa-bars'); } else { self.addClass('fa-bars').removeClass('fa-close'); } $navList.toggle(); }); });
});
Joe Warren Portfolio Deluxe - Script Codes
Joe Warren Portfolio Deluxe - Script Codes
Home Page Home
Developer Joe Warren
Username MightyJoeW
Uploaded July 04, 2022
Rating 3
Size 13,097 Kb
Views 28,336
Do you need developer help for Joe Warren Portfolio Deluxe?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Joe Warren (MightyJoeW) Script Codes
Name
HEEL Rock Paper Scissors
Bouncing Basketball
MLK Google Homepage project
Animated Android Logo
The Heart
First Gen Pokemon Chart
MightyJoeW Portfolio
Ball Fade
Google Homepage 2
Weather App 2
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!