Personal Portfolio of Hong

Developer
Hong
Size
3,487 Kb
Views
16,192
  1. Personal Portfolio of Hong Previews
  2. Personal Portfolio of Hong HTML Codes
  3. Personal Portfolio of Hong CSS Codes

How do I make an personal portfolio of hong?

What is a personal portfolio of hong? How do you make a personal portfolio of hong? This script and codes were developed by Hong on 21 October 2022, Friday.

Personal Portfolio of Hong Previews
IQ Test

Personal Portfolio of Hong - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Personal Portfolio of Hong</title> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/css-social-buttons/1.2.0/css/zocial.min.css'>
<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/font-awesome/4.5.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="intro"> <div class="btn-group position_fixed_topright"> <a href="#intro"><button type="button" class="btn btn-primary">Home</button></a> <a href="#portfolio"><button type="button" class="btn btn-primary">Portfolio</button></a> <a href="#contact"><button type="button" class="btn btn-primary">Contact</button></a> </div> <div class="text-center welcomecolorchange"> </br> <h1>Hong's Personal Portfolio</h1> <h2>Welcome to My Page</h2> </div> <div> <img id="butterfly1" class="butterfly-size" src="http://pngimg.com/upload/butterfly_PNG1053.png"> <img id="butterfly2" class="butterfly-size" src="http://pngimg.com/upload/butterfly_PNG1037.png"> </div> <center><img id="img1" src="http://pre08.deviantart.net/7812/th/pre/i/2011/311/8/7/mulan_by_ireprincess-d4ferc9.png" class="rotateY"></center>
</div>
<div class="btn-group btn-group-justified" id="buttonGroup"> <div class="btn-group"><a href="https://www.freecodecamp.com/designbuildshipsoftware" target="_blank"><button class="btn btn-success"><i class="fa fa-fire"></i> free Code Camp</button></a></div> <div class="btn-group"><a href="https://www.freecodecamp.com/designbuildshipsoftware" target="_blank"><button class="btn btn-primary"><i class="fa fa-linkedin"></i> Linkedin</button></a></div> <div class="btn-group"><a href="https://github.com/designBuildShipSoftware" target="_blank"><button class="btn btn-danger"><i class="fa fa-github"></i> Github</button></a></div> <div class="btn-group"><a href="https://github.com/designBuildShipSoftware" target="_blank"><button class="btn btn-info"><i class="fa fa-twitter"></i> Twitter</button></a></div>
</div>
<div id="portfolio"> </br> <h2 class="text-center">Portfolio</h2> <h4 class="text-center">Below you will find some of my recent projects.</h4></div>
<div> </br> <a href="https://github.com/designBuildShipSoftware/nerd-or-geek/commit/bbcc5f6aee331aa2763533a2bf5fd46909b073b2" target="_blank"> <center><span>Personality Test Written in Java</span></br><img src="https://regmedia.co.uk/2013/01/30/java_logo.jpg?x=1200&y=794" class="smaller-image thin-gray-border"></center> </a>
</div>
<div> </br> <center><a href="https://codepen.io/designbuildshipsoftware/pen/dMXpbZ" target="_blank">Tribute Page of Bill Gates</a></br> <iframe class="frame" src="https://s.codepen.io/designbuildshipsoftware/debug/dMXpbZ">
</iframe></center>
</div>
<div> </br> <center><a href="https://codepen.io/designbuildshipsoftware/pen/dMKoVz" target="_blank">Personal Portfolio of Hong</a></br> <iframe class="frame" src="https://s.codepen.io/designbuildshipsoftware/debug/dMKoVz">
</iframe></center>
</div>
<div> </br> <center><a href="https://codepen.io/designbuildshipsoftware/pen/RRaBNe" target="_blank">Random Quote Machine</a></br> <iframe class="frame" src="https://s.codepen.io/designbuildshipsoftware/debug/RRaBNe">
</iframe></center>
</div>
<div> </br> <center><a href="https://codepen.io/designbuildshipsoftware/pen/begJwJ" target="_blank">Local Weather App</a></br> <iframe class="frame" src="https://s.codepen.io/designbuildshipsoftware/debug/begJwJ">
</iframe></center>
</div>
<div> </br> <center><a href="https://codepen.io/designbuildshipsoftware/pen/akLVZQ" target="_blank">Wikipedia Viewer</a></br> <iframe class="frame" src="https://s.codepen.io/designbuildshipsoftware/debug/akLVZQ">
</iframe></center>
</div>
<div> </br> <center><a href="https://codepen.io/designbuildshipsoftware/pen/dXKgoZ" target="_blank">Use the Twitchtv JSON API</a></br> <iframe class="frame" src="https://s.codepen.io/designbuildshipsoftware/debug/dXKgoZ">
</iframe></center>
</div>
<div> </br> <center><a href="https://codepen.io/designbuildshipsoftware/pen/jrYKzE" target="_blank">JavaScript Calculator</a></br> <iframe class="frame" src="https://s.codepen.io/designbuildshipsoftware/debug/jrYKzE">
</iframe></center>
</div>
</br>
</br>
<div class="hline"></div>
<div id="contact" class="height"> </br> <h2 class="text-center">Contact Me</h2></br> <div class="btn-group btn-group-justified contactPosition" id="buttonGroup2"> <div class="btn-group"><a href="https://www.freecodecamp.com/designbuildshipsoftware" target="_blank"><button class="btn btn-success"><i class="fa fa-fire"></i> free Code Camp</button></a></div> <div class="btn-group"><a href="https://www.freecodecamp.com/designbuildshipsoftware" target="_blank"><button class="btn btn-primary"><i class="fa fa-linkedin"></i> Linkedin</button></a></div> <div class="btn-group"><a href="https://github.com/designBuildShipSoftware" target="_blank"><button class="btn btn-danger"><i class="fa fa-github"></i> Github</button></a></div> <div class="btn-group"><a href="https://github.com/designBuildShipSoftware" target="_blank"><button class="btn btn-info"><i class="fa fa-twitter"></i> Twitter</button></a></div> </div> </br>
</div>
</body>
</html>

Personal Portfolio of Hong - Script Codes CSS Codes

#intro { background-image: /* url(https://49.media.tumblr.com/a62d2f050820931691b23d4dceeb2da3/tumblr_nups86vAi21txt22yo1_400.gif), */url(http://www.wallpaperandphoto.com/wp-content/uploads/2016/01/pink_cherry_flowers-wallpaper-2560x1600.jpg); background-size: cover;
}
body { background: -moz-linear-gradient(left, #a8a, #ddd, #a8a); background: -webkit-linear-gradient(left, #a8a, #ddd, #a8a); background: -webkit-gradient(left, #a8a, #ddd, #a8a); background: -o-linear-gradient(left, #a8a, #ddd, #a8a); background: -ms-linear-gradient(left, #a8a, #ddd, #a8a); background-size: cover;
}
.italic { font-style: italic;
}
.img-right { float: right; margin: 20px 20px 20px 20px;
}
p { font-family: "Times New Roman", Times, serif; font-size: 20px; font-weight: bold; text-indent: 10px;
}
.serif { font-family: "Times New Roman", Times, serif;
}
.SmallFont { font-size: 12px;
}
.auto-size { height: auto; max-width: 100%;
}
.smaller-image { width: 250px;
}
.butterfly-size { height: 70px;
}
.thin-gray-border { border-color: rgba(5, 5, 5, 0.3); border-width: 6px; border-style: solid; border-radius: 15%;
}
.rounded-corners { border-radius: 50%;
}
#img1 { width: 180px;
}
@keyframes rotateY { 50% { transform: rotateY(180deg); }
}
@-webkit-keyframes rotateY { 50% { transform: rotateY(180deg); }
}
.rotateY { animation-name: rotateY; -webkit-animation-name: rotateY; animation-duration: 5s; -webkit-animation-duration: 5s; animation-timing-function: ease-in; animation-delay: 11s; animation-iteration-count: 1;
}
.position_fixed_topright { position: fixed; top: 0; right: 0;
}
@keyframes btf1 { 20% { transform: rotateY(80deg); } 50% { transform: translate(100px, 180px); } 75% { transform: rotateY(80deg); }
}
#butterfly1 { position: relative; top: 200px; left: 10%; animation: btf1 5s linear 6s infinite;
}
@keyframes btf2 { 20% { transform: rotateY(80deg); } 50% { transform: translate(100px, -210px); } 75% { transform: rotateY(80deg); }
}
#butterfly2 { position: relative; top: 100px; left: 60%; animation: btf2 6s linear infinite;
}
.hline { width:100%; height:1px; background: #fff }
div.height { height: 580px;}
div.contactPosition { position: relative; top: 150px;}
@keyframes rotateZopacity { 10% { transform: rotateZ(20deg); } 30% { transform: rotateZ(-20deg); } 40% { transform: rotateZ(0); } 60% { opacity: 0.75; } 70% { opacity: 0.5; } 80% { opacity: 0.75; }
}
#buttonGroup2 {animation: rotateZopacity 5s linear infinite;}
@keyframes textcolorchange { 20% {color: green;} 40% {color: yellow;} 80% {color: yellow;}
}
.welcomecolorchange {animation: textcolorchange 3s linear 3;}
.frame { width: 800px; height: 520px; border: none;
}
a { font-size: 20px; animation: textcolorchange 3s linear infinite;
}
Personal Portfolio of Hong - Script Codes
Personal Portfolio of Hong - Script Codes
Home Page Home
Developer Hong
Username designbuildshipsoftware
Uploaded October 21, 2022
Rating 3
Size 3,487 Kb
Views 16,192
Do you need developer help for Personal Portfolio of Hong?

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!

Hong (designbuildshipsoftware) Script Codes
Name
LocalWeatherApp
Tribute Page of Bill Gates
Canvas
WikipediaViewer1
Pomodoro Clock8
Use the Twitchtv JSON API
Tabs
A Pen by Hong
Use the Twitchtv JSON API 2
WikipediaViewer
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!