Personal Portfolio Webpage

Developer
Eleftheria Batsou
Size
8,863 Kb
Views
14,168
  1. Personal Portfolio Webpage Previews
  2. Personal Portfolio Webpage HTML Codes
  3. Personal Portfolio Webpage CSS Codes
  4. Personal Portfolio Webpage JS Codes

How do I make an personal portfolio webpage?

This is a personal portfolio webpage by Batsou Eleftheria for herself.. What is a personal portfolio webpage? How do you make a personal portfolio webpage? This script and codes were developed by Eleftheria Batsou on 27 October 2022, Thursday.

Personal Portfolio Webpage Previews
IQ Test

Personal Portfolio Webpage - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Personal Portfolio Webpage</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css'>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <html>
<body>
<div class="container-fluid background-all"> <div class="row-intro"> <div class="row"> <!-- Introduction --> <div class="col-xs-6"> <h3>Batsou Eleftheria</h3> </div> <!-- end first col-xs-6 --> <div class="col-xs-6"> <div class="up-buttons text-right"> <button class="btn target"> <a href="#Home">Home </a> </button> <button class="btn target"> <a href="#About">About </a> </button> <button class="btn target"> <a href="#Portofolio">Portfolio </a> </button> <button class="btn target"> <a href="#Contact">Contact </a> </button> </div> </div> <!-- end second col-xs-6 --> </div> <!-- End Introduction --> </div> <!-- End class row-intro--> <div class="row" id="Home"> <!-- Home --> <img class="img-responsive image" src="http://i1356.photobucket.com/albums/q729/eleftheria_b/portofolio%20codepen%20image%20with%20words_zpsijpuce5c.jpg"> </div> <!-- End class Home--> <div class="row" id="About"> <!-- == About == --> <div class="col-xs-6"> <!-- about me --> <p>Hi! I am Eleftheria and I am a Web Developer currently based in Amsterdam. I have a degree from the university of Western Macedonia in the field of Informatics and Telecommunication engineering. <br></br> My passion is to use technology based solutions, to help solve real world challenges.<br></br> I like travelling and dancing.</p> </div> <!-- end class col-xs-6 --> <div class="col-xs-6"> <!-- my picture --> <!-- start: code for flipping the image --> <!-- code insiration: https://davidwalsh.name/css-flip--> <div class="flip-container" ontouchstart="this.classList.toggle('hover');"> <div class="flipper"> <div class="front"> <!-- front content --> <img class="face-image img-responsive text-center" src="http://i1356.photobucket.com/albums/q729/eleftheria_b/my%20face/kappalambdataurho-v3_zpseh1dg7kw.png" alt="profile photo-front" > </div> <!-- end: class front--> <div class="back"> <!-- back content --> <img class="face-image img-responsive text-center" src="http://i1356.photobucket.com/albums/q729/eleftheria_b/my%20face/9fe14b75-c096-49f0-b7a7-63c318cfc171_zpsaqjlwakm.png" alt="profile photo with filter"> </div> <!-- end: class back --> </div> <!-- end: class flipper--> </div> <!-- end: class flip-container--> <!-- end: code for flipping the image --> </div> <!-- end class col-xs-6, my picture--> </div> <!-- end About --> <div class="row rowLM"> <!-- code for Collapse with js and css --> <!-- Don t forget the things in the head--> <button id="button" class="btn target"><a href="#LearnMore">Learn more about me :) </a></button> <br></br> <br></br> <div id="wrapper"> <p> <b>Languages and Frameworks:</b> <li>Good Knowledge: HTML5, CSS3, Bootstrap, Javascript, JQuery, Photoshop </li> <li>Basic Knowledge: Php, Java, C++, C, Matlab, Git</li> <li>Web Developing CMS: Drupal, WordPress </li> <li>Databases: MySQL</li> <li>Operating Systems: Windows, Linux</li> </p> <p> <b>Tools & Expertise: </b> <li>Responsive Web Design</li> <li>Image Processing</li> <br></br> </p> </div> <!-- end class wrapper --> <!-- end code for Collaspe --> </div> <!-- end class row rowLM --> <div class="row" id="Portofolio" style="background-color:orange"> <!-- Portofolio --> <h2 class="text-center"> Portfolio </h2> <h4 class="text-center">Javascript, Jquery, Bootstrap and API Projects </h4> <!-- code inspiration for the image gallery: http://www.the-art-of-web.com/css/infinite-photo-carousel/#vertical --> <div id="stage"> <div id="rotator" style="-webkit-animation-name: rotator;"> <!-- Javascript, Jquery, Bootstrap and API Projects-->	<a href="https://codepen.io/EleftheriaBatsou/full/RRYgqP/" target="_blank"><img src="http://i1356.photobucket.com/albums/q729/eleftheria_b/project%20images%20js%20and%20jq/11e40fa3-22d2-4c71-8aa4-7d53c994ae68_zpsc3eigb9e.jpg" alt="Digital Clock" width="140" title="Digital Clock"/></a>	<a href="https://codepen.io/EleftheriaBatsou/full/vKzmyR" target="_blank"><img src="http://i1356.photobucket.com/albums/q729/eleftheria_b/project%20images%20js%20and%20jq/70966daf-c278-41ae-ae7c-ec9e71f51d62_zps5zitomr8.jpg" alt="Sketch" width="140" title="Sketch"></a>	<a href="https://codepen.io/EleftheriaBatsou/full/Gqdvgd" target="_blank"><img src="http://i1356.photobucket.com/albums/q729/eleftheria_b/project%20images%20js%20and%20jq/b2a83c86-d2d7-4a04-8b04-e9a14da4fbc6_zpsgqmehd97.jpg" alt="Code Player" width="140" title="Code Player"></a>	<a href="https://codepen.io/EleftheriaBatsou/full/vKjmqN" target="_blank"><img src="http://i1356.photobucket.com/albums/q729/eleftheria_b/project%20images%20js%20and%20jq/c56b74f4-9af3-47c5-b586-8cbb99c76189_zpsvn7g43pu.jpg" alt="Test your reactions game" width="140" title="Test your reactions game"></a>	<a href="https://codepen.io/EleftheriaBatsou/full/zBWNyB" target="_blank"><img src="http://i1356.photobucket.com/albums/q729/eleftheria_b/project%20images%20js%20and%20jq/b3944858-29f4-4e97-8c2c-e3b96729e1f0_zpsvd4x4m0d.jpg" alt="Flipboard" width="140" title="Flipboard"></a>	<a href="https://codepen.io/EleftheriaBatsou/full/NAYbbp" target="_blank"><img src="http://i1356.photobucket.com/albums/q729/eleftheria_b/project%20images%20js%20and%20jq/newsReader_zpsusk6mfen.jpg" alt="Newsreader" width="140" title="Newsreader"></a>	<a href="https://codepen.io/EleftheriaBatsou/full/qNoNyA" target="_blank"><img src="http://i1356.photobucket.com/albums/q729/eleftheria_b/project%20images%20js%20and%20jq/pushMenu_zpsartzv5co.jpg" alt="Push Menu" width="140" title="Push Menu"></a>	<a href="https://codepen.io/EleftheriaBatsou/full/QEAgkJ" target="_blank"><img src="http://i1356.photobucket.com/albums/q729/eleftheria_b/project%20images%20js%20and%20jq/validationForm_zpsi7psyi3u.jpg" alt="Validation Form" width="140" title="Validation Form"></a>	<a href="https://codepen.io/EleftheriaBatsou/full/vKdkkp" target="_blank"><img src="http://i1356.photobucket.com/albums/q729/eleftheria_b/project%20images%20js%20and%20jq/465ec332-b18f-4984-8734-b0faada69d5b_zpsqhdprelj.jpg" alt="Accordion Style" width="140" title="Accordion Style"></a>	<a href="https://codepen.io/EleftheriaBatsou/full/QKwVZO" target="_blank"><img src="http://i1356.photobucket.com/albums/q729/eleftheria_b/project%20images%20js%20and%20jq/sun%20earth%20and%20code_zpshwxtlyyp.jpg" alt="Sun, Earth, Code" width="140" title="Sun, Earth, Code"></a>	<a href="https://codepen.io/EleftheriaBatsou/full/dporQp" target="_blank"><img src="http://i1356.photobucket.com/albums/q729/eleftheria_b/project%20images%20js%20and%20jq/Animate%20your%20name_zpsoojpnxvj.jpg" alt="Animatate Your name" width="140" title="Animatate Your name"></a>	<!-- Bootstrap + API projects-->	<a href="https://codepen.io/EleftheriaBatsou/full/pbVOPo" target="_blank"><img src="http://i1356.photobucket.com/albums/q729/eleftheria_b/project%20images%20bootsrap%20and%20api/LandingPageForAnApp_zpstxo81kfk.jpg" alt="Landind Page For An App" width="140" title="Landind Page For An App"></a>	<a href="https://codepen.io/EleftheriaBatsou/full/EyLwqr" target="_blank"><img src="http://i1356.photobucket.com/albums/q729/eleftheria_b/project%20images%20bootsrap%20and%20api/bootstrapMenu_zpsejqiv98s.jpg" alt="Bootstrap Menu" width="140" title="Bootstrap Menu"></a>	<a href="https://codepen.io/EleftheriaBatsou/full/BzOaqp" target="_blank"><img src="http://i1356.photobucket.com/albums/q729/eleftheria_b/project%20images%20bootsrap%20and%20api/twitterApi_zpsoexyucpf.jpg" alt="Twitter Api" width="140" title="Twitter Api"></a>	<a href="https://codepen.io/EleftheriaBatsou/full/kXRNjg" target="_blank"><img src="http://i1356.photobucket.com/albums/q729/eleftheria_b/project%20images%20bootsrap%20and%20api/PostalCodeFor_zpsvrkiznbc.jpg" alt="Postal Code For" width="140" title="Postal Code For"></a> </div> <!-- end: id rotator--> </div> <!-- -end: id stage --> <h4 class="text-center">FreeCodeCamp Front-End Projects </h4> <!-- FreeCodeCamp Front-End Projects--> <div class="stageFCC" style="width: 220px; height: 220px;"> <div class="cubespinner"> <div class="face1"> <a href="https://s.codepen.io/EleftheriaBatsou/debug/JXjPxZ" target="_blank"><img src="http://i1356.photobucket.com/albums/q729/eleftheria_b/codepen%20-%20front%20end%20pictures/b635fc9c-f83b-4d5c-8477-e146acba64f8_zpsvwdm6p2q.png" alt="calculator" title="Calculator"/></a> </div> <div class="face2"> <a href="https://codepen.io/EleftheriaBatsou/full/jqEPBg/" target="_blank"><img src="http://i1356.photobucket.com/albums/q729/eleftheria_b/codepen%20-%20front%20end%20pictures/b8c9c68f-66de-4d92-911d-5a0093ef9d7c_zpsva41a6vl.png" alt="Pomodoro Clock" title="Pomodoro Clock"></a> </div> <div class="face3"> <a href="https://codepen.io/EleftheriaBatsou/full/NxZYoE/" target="_blank"><img src="http://i1356.photobucket.com/albums/q729/eleftheria_b/codepen%20-%20front%20end%20pictures/a800e61a-ab53-41fd-91ad-16dbd1a5616e_zpsk6igea3b.png" alt="Random quote generator" title="Random quote generator"></a> </div> <div class="face4"> <a href="https://codepen.io/EleftheriaBatsou/full/JXdEQe/" target="_blank"><img src="http://i1356.photobucket.com/albums/q729/eleftheria_b/codepen%20-%20front%20end%20pictures/96e6f6cc-2f10-4bfe-8031-78c161fc918e_zps19s1uovm.png" alt="Simon Game" title="Simon Game"></a> </div> <div class="face5"> <a href="https://codepen.io/EleftheriaBatsou/full/JXddGX" target="_blank"><img src="http://i1356.photobucket.com/albums/q729/eleftheria_b/codepen%20-%20front%20end%20pictures/d53a1107-8913-4a44-95bc-c33e567cfe84_zps4hmoyj6y.png" alt="Tac tac toe game" title="Tac tac toe game" ></a> </div> <div class="face6"><a href="https://codepen.io/EleftheriaBatsou/full/MKNppY/" target="_blank"><img src="http://i1356.photobucket.com/albums/q729/eleftheria_b/codepen%20-%20front%20end%20pictures/fbaea6c0-2bdf-447b-a313-5c89246379b5_zpshwrlhhk2.png" alt="Wikipedia Viewer"></a></div> </div> </div> </div> <!-- End portofolio--> <div class="row" id="Contact" style="background-color:#94ed64"> <!-- Contact --> <div class="col-xs-6">	<p>Let's stay in touch!</br>Whatever the reason is, don't hesitate to contact me at: </br><b>[email protected]</b></p> </div> <div class="col-xs-6"> <p> Υou can also find me here: </p> <div id="media"> <button class="target contactButtons" id="Twitter" title="Twitter"><a href="https://twitter.com/BatsouElef" target="_blank"><img src="http://www.foodspotting.com/images/twitter-icon.png?1458072226"></a></button> <button class="target contactButtons" id="Github" title="GitHub"><a href="https://github.com/EleftheriaBatsou" target="_blank"><img src="http://www.fancyicons.com/free-icons/222/simple/png/32/github_32.png"></a></button> <button class="target contactButtons" id="LinkedIn" title="LinkedIn"><a href="https://gr.linkedin.com/in/eleftheriabatsou" target="_blank"><img src="http://codersblock.com/images/social-icons/footer/linkedin.png"></a></button> <button class="target contactButtons" id="GooglePlus" title="Google Plus"><a href="https://plus.google.com/106572474276639965035" target="_blank"><img src="http://scottyzen.com/images/social/googleplus.png"></a></button> <button class="target contactButtons" id="CodePen" title="CodePen"><a href="https://codepen.io/EleftheriaBatsou" target="_blank"><img src="https://chriswrightdesign.com/img/icon_codepen.svg"></a></button> <button class="target contactButtons" id="FCC" title="Free Code Camp"><a href="https://www.freecodecamp.com/eleftheriabatsou" target="_blank"><img src=" https://d262ilb51hltx0.cloudfront.net/fit/c/32/32/1*MotlWcSa2n6FrOx3ul89kw.png"></a></button> </div> <!-- End: media--> </div> </div> <!-- end Contact --> <div class="row"> <!-- All rights --> <p class="text-center p-bottom">Copyright © <a href="http://www.eleftheriabatsou.com" target="_blank">Eleftheria </a> | <a href="https://codepen.io/EleftheriaBatsou" target="_blank">Projects</a> | <a href="https://www.youtube.com/channel/UCC-WwYv3DEW7Nkm_IP6VeQQ" target="_blank"> Coding videos </a>| 2017. </p> </div> <!-- End: All rights -->
</div> <!--End class container-fluid background-all -->
</body>
</html> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Personal Portfolio Webpage - Script Codes CSS Codes

.background-all{ background-color: #6495ed; /* light blue */ color: #050017; /* dark blue */
}
body{ background-color:#6495ed; /* light blue */
}
a:link {color: #050017; text-decoration:none}
a:visited {color: #050017; text-decoration:none}
a:hover {color: #6495ed; text-decoration:none}
a:active {color: #050017; text-decoration:underline}
.up-buttons{ /* Menu buttons */ margin: 4% 4% 2%;
}
.image { /* Home Image with the h1 */ position: relative; width: 100%;
}
h1 { /* position: absolute; */
}
p { position: relative; font-size: 20px; margin:20% 0% 20% 20%; }
.face-image{ margin:20% 0% 20% 20%; height: 340px; /* was: 340px*/
}
.p-bottom{ /* For the: Copyright section*/ font-size:12px; margin: 5px;
}
/* changes 7/5/16 if I use the default hover (I set it above) the background color is blue so you cant see anything. In this way, i change the hover color to black
*/
.p-bottom a:hover{ color: black; text-decoration:underline;}
/* changes 2/4/16 */
/* mostly about the header and home*/
.row-intro{ position: fixed; right: 0; width: 100%; border: 3px solid #94ed64; /* green*/ background-color: #6495ed; z-index: 10; font-family: "Bauhaus 93", "Times New Roman"; font-size: 30%; font-color: #050017;
}
.row-intro h3{ font-size: 8em; margin: 4% 4% 4%; color: inherit;
}
#Home h1{ font-size: 500%; font-family: "Arial Black"; top: 50% /* to be in the vertical middle */
}
.btn{ background-color: orange; color: #050017; /* dark blue*/ font-size: 400%; font-family: "Bauhaus 93", "Arial Black"; margin-bottom: 4px; margin-right: 4px; border: 3px solid #94ed64; /* green */
}
.btn:hover{ /* enlarging image on mouseover*/ -moz-transform: scale(1.2) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg); -webkit-transform: scale(1.2) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg); -o-transform: scale(1.2) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg); -ms-transform: scale(1.2) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg); transform: scale(1.2) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg);
}
/** 04/04/16 * changes in the "About" section a.k.a "Learn More" * How to make the button "learn more about me"
**/
#wrapper { background: #6495ed; overflow: hidden; transition: max-height 300ms; max-height: 0; /* <---hide by default */ left: 50%;
}
#wrapper.open { max-height: 500px; /* <---when open, allow content to expand to take up as much height as it needs, up to e.g. 100px */
}
.rowLM { font-size: 50%; margin-left: 10%; margin-bottom: 0%; position: relative; top: -40px
}
.rowLM p{ margin: 0% 0% 20px 0%;
}
.rowLM li { font-size: 20px;
}
/* end "Learn More" */
/* 5/4/16 */
/* Changes in contact section */
#Contact p{ margin-top: 10%; margin-bottom: 5%;
}
/* 7/5/16 */
.contactButtons{ background-color: orange; padding: 3px; margin-bottom: 3px; border: 3px solid #6495ed; /* blue */
}
.contactButtons:hover{ /* enlarging image on mouseover*/ -moz-transform: scale(1.5) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg); -webkit-transform: scale(1.5) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg); -o-transform: scale(1.5) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg); -ms-transform: scale(1.5) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg); transform: scale(1.5) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg);
}
#media{ margin-left: 20%;
}
/* End contact section*/
/* Changes 11-09-16*/
/* About section: let's do sth better with the image, like flip it! */
/* entire container, keeps perspective */
.flip-container {	perspective: 1000px;
}	/* flip the pane when hovered */	.flip-container:hover .flipper, .flip-container.hover .flipper {	transform: rotateY(180deg);	}
.flip-container, .front, .back {	width: 320px; /* was 320px */	height: auto; /*was 480px */
}
/* flip speed goes here */
.flipper {	transition: 0.6s;	transform-style: preserve-3d;	position: relative;
}
/* hide back of pane during swap */
.front, .back {	backface-visibility: hidden;	position: absolute;	top: 0;	left: 0;
}
/* front pane, placed above back */
.front {	z-index: 2;	/* for firefox 31 */	transform: rotateY(0deg);
}
/* back, initially hidden pane */
.back {	transform: rotateY(180deg);
}
/* Changes 12-09-16 */
/* ========== Portfolio section ================ */
/* Image gallery: code priveded by --> http://www.the-art-of-web.com/css/infinite-photo-carousel/#vertical */
#stage { margin: 2em auto 1em 50%; height: 140px; -webkit-perspective: 1200px; -webkit-perspective-origin: 0 50%; } #rotator a { position: absolute; left: -81px; } #rotator a img { padding: 3px; border: 1px solid #94ed64; /* Light green */ background: #6495ed; /*Light blue */ -webkit-backface-visibility: hidden; } #rotator a:nth-of-type(1) img { -webkit-transform: rotateY(-90deg) translateZ(300px); } #rotator a:nth-of-type(2) img { -webkit-transform: rotateY(-60deg) translateZ(300px); } #rotator a:nth-of-type(3) img { -webkit-transform: rotateY(-30deg) translateZ(300px); } #rotator a:nth-of-type(4) img { -webkit-transform: translateZ(300px); background: #94ed64; /*was: #000 */ } #rotator a:nth-of-type(5) img { -webkit-transform: rotateY(30deg) translateZ(300px); } #rotator a:nth-of-type(6) img { -webkit-transform: rotateY(60deg) translateZ(300px); } #rotator a:nth-of-type(n+7) { display: none; }
/* a touch of animation*/ @-webkit-keyframes rotator { from { -webkit-transform: rotateY(0deg); } to { -webkit-transform: rotateY(30deg); } } #rotator { -webkit-transform-origin: 0 0; -webkit-transform-style: preserve-3d; -webkit-animation-timing-function: cubic-bezier(1, 0.2, 0.2, 1); -webkit-animation-duration: 1s; -webkit-animation-delay: 1s; } #rotator:hover { -webkit-animation-play-state: paused; }
/* =========================== */
/* code for freecodecamp front-end pforjects
inspired by: http://www.the-art-of-web.com/css/3d-transforms/
*/ @-webkit-keyframes spincube { from,to { -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); } 16% { -webkit-transform: rotateY(-90deg); } 33% { -webkit-transform: rotateY(-90deg) rotateZ(90deg); } 50% { -webkit-transform: rotateY(-180deg) rotateZ(90deg); } 66% { -webkit-transform: rotateY(-270deg) rotateX(90deg); } 83% { -webkit-transform: rotateX(90deg); } } @keyframes spincube { from,to { -moz-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); -ms-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); } 16% { -moz-transform: rotateY(-90deg); -ms-transform: rotateY(-90deg); transform: rotateY(-90deg); } 33% { -moz-transform: rotateY(-90deg) rotateZ(90deg); -ms-transform: rotateY(-90deg) rotateZ(90deg); transform: rotateY(-90deg) rotateZ(90deg); } 50% { -moz-transform: rotateY(-180deg) rotateZ(90deg); -ms-transform: rotateY(-180deg) rotateZ(90deg); transform: rotateY(-180deg) rotateZ(90deg); } 66% { -moz-transform: rotateY(-270deg) rotateX(90deg); -ms-transform: rotateY(-270deg) rotateX(90deg); transform: rotateY(-270deg) rotateX(90deg); } 83% { -moz-transform: rotateX(90deg); -ms-transform: rotateX(90deg); transform: rotateX(90deg); } } .cubespinner { -webkit-animation-name: spincube; -webkit-animation-timing-function: ease-in-out; -webkit-animation-iteration-count: infinite; -webkit-animation-duration: 12s; animation-name: spincube; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-duration: 12s; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform-origin: 60px 60px 0; -moz-transform-origin: 60px 60px 0; -ms-transform-origin: 60px 60px 0; transform-origin: 60px 60px 0; } .cubespinner div { position: absolute; width: 120px; height: 120px; border: 3px solid #94ed64; left: 50% } .cubespinner { margin-top: 25px; margin-bottom: auto; position: absolute; left: 37%; -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: center; }
#Portofolio{ height: 600px !important;
} .cubespinner .face1 { -webkit-transform: translateZ(60px); -moz-transform: translateZ(60px); -ms-transform: translateZ(60px); transform: translateZ(60px); -webkit-backface-visibility: hidden; } .cubespinner .face2 { -webkit-transform: rotateY(90deg) translateZ(60px); -moz-transform: rotateY(90deg) translateZ(60px); -ms-transform: rotateY(90deg) translateZ(60px); transform: rotateY(90deg) translateZ(60px); -webkit-backface-visibility: hidden; } .cubespinner .face3 { -webkit-transform: rotateY(90deg) rotateX(90deg) translateZ(60px); -moz-transform: rotateY(90deg) rotateX(90deg) translateZ(60px); -ms-transform: rotateY(90deg) rotateX(90deg) translateZ(60px); transform: rotateY(90deg) rotateX(90deg) translateZ(60px); -webkit-backface-visibility: hidden; } .cubespinner .face4 { -webkit-transform: rotateY(180deg) rotateZ(90deg) translateZ(60px); -moz-transform: rotateY(180deg) rotateZ(90deg) translateZ(60px); -ms-transform: rotateY(180deg) rotateZ(90deg) translateZ(60px); transform: rotateY(180deg) rotateZ(90deg) translateZ(60px); -webkit-backface-visibility: hidden; } .cubespinner .face5 { -webkit-transform: rotateY(-90deg) rotateZ(90deg) translateZ(60px); -moz-transform: rotateY(-90deg) rotateZ(90deg) translateZ(60px); -ms-transform: rotateY(-90deg) rotateZ(90deg) translateZ(60px); transform: rotateY(-90deg) rotateZ(90deg) translateZ(60px); -webkit-backface-visibility: hidden; } .cubespinner .face6 { -webkit-transform: rotateX(-90deg) translateZ(60px); -moz-transform: rotateX(-90deg) translateZ(60px); -ms-transform: rotateX(-90deg) translateZ(60px); transform: rotateX(-90deg) translateZ(60px); -webkit-backface-visibility: hidden; }

Personal Portfolio Webpage - Script Codes JS Codes

$(document).ready(function(){ });
// =============== About ==================//
// Start: Toggle Button
$(function() { var b = $("#button"); var w = $("#wrapper"); b.click(function() { w.toggleClass('open'); /* <-- toggle the application of the open class on click */ });
});
// End: Toggle Button
// ================ PORTFOLIO ==================//
/*
code for js, jq, bootstrap and api projects
detect when the animation has ended in order to coordinate the photos moving with the wheel reset. Without this the wheel would only alternate between the first two photos.
http://www.the-art-of-web.com/css/infinite-photo-carousel/#vertical
*/
document.addEventListener("DOMContentLoaded", function() { var rotateComplete = function() { target.style.webkitAnimationName = ""; target.insertBefore(arr[arr.length-1], arr[0]); setTimeout(function(el) { el.style.webkitAnimationName = "rotator"; }, 0, target); }; var target = document.getElementById("rotator"); var arr = target.getElementsByTagName("a"); target.addEventListener("webkitAnimationEnd", rotateComplete, false); }, false);
// Original JavaScript code by Chirp Internet: www.chirp.com.au // Please acknowledge use of this code by including this header. var rotateComplete = function() { with(target.style) { webkitAnimationName = MozAnimationName = msAnimationName = ""; } target.insertBefore(arr[arr.length-1], arr[0]); setTimeout(function(el) { with(el.style) { webkitAnimationName = MozAnimationName = msAnimationName = "rotator"; } }, 0, target); }; var target = document.getElementById("rotator"); var arr = target.getElementsByTagName("a"); target.addEventListener("webkitAnimationEnd", rotateComplete, false); target.addEventListener("animationend", rotateComplete, false); target.addEventListener("MSAnimationEnd", rotateComplete, false);
//==============================//
Personal Portfolio Webpage - Script Codes
Personal Portfolio Webpage - Script Codes
Home Page Home
Developer Eleftheria Batsou
Username EleftheriaBatsou
Uploaded October 27, 2022
Rating 3
Size 8,863 Kb
Views 14,168
Do you need developer help for Personal Portfolio Webpage?

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!

Eleftheria Batsou (EleftheriaBatsou) Script Codes
Name
Draw Like Never Before
Code Player
Animate Your Name
Postcode Finder and Map
Music App Template - FlexBox
Video Player Custom Controls
Whack - A - Mole
Vertical Timeline - My life
Etch-A-Sketch
Calculate Calories and Macros
Create amazing marketing copy 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!