Personal Portfolio

Developer
Kevin Bäckstäde
Size
4,516 Kb
Views
14,168
  1. Personal Portfolio Previews
  2. Personal Portfolio HTML Codes
  3. Personal Portfolio CSS Codes

How do I make an personal portfolio?

What is a personal portfolio? How do you make a personal portfolio? This script and codes were developed by Kevin Bäckstäde on 24 November 2022, Thursday.

Personal Portfolio Previews
IQ Test

Personal Portfolio - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Personal Portfolio</title> <title>Personal Portfolio</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
<link href="https://fonts.googleapis.com/css?family=Amatic+SC:700|Lobster" rel="stylesheet">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="header"> <div class="headerwidth"> <ul> <a href="#content1"><li class="header-list">About</li></a> <a href="#content2"><li class="header-list">Portfolio</li></a> <a href="#content3"><li class="header-list">Contact</li></a> </ul> </div>
</div> <!--header-->
<div class="content-box"> <div class="page1" id="About-me"> <div class="shader"> <div class="content1" id="content1"> <h2>Who Am I?</h2> <div class="about-text row"> <p class="col-md-8">I am a self-taught coder and html designer (so far!). I am still a studen in the swedish "gymnasium" wich is comparable to the american high-school. I am currently living on the small island gotland in sweden but I am planning to move when i finish my three years left of "high-school" here on gotland. </p> <div class="col-md-4"><img src="https://yt3.ggpht.com/-6EFVFgaCtiA/AAAAAAAAAAI/AAAAAAAAAAA/YiqXMN-YWwA/s900-c-k-no-mo-rj-c0xffffff/photo.jpg" alt="Picture of me" class="about-image"/> </div> </div> <div class="about-text" id="text2"> <p>I am very motivated to learn and get better at coding. My future plan is to learn to code JavaScript and from there move on to coding games. But I really enyoy designing html sites too. It seems like a good start and I feel like I will learn the overall basics by doing so.</p> </div> <div> </div> </div>
</div> <!--about me page--> <div class="border"> <div class="border2"> </div> </div>
<div class="page2" id="content2"> <div class="shader"> <div class="content2"> <h2>Portfolio</h2> <div class="scrollthing"> <div class="portfolio-square row"> <!--row 1--> <div class="portfolio-row"> <div class="col-md-1"></div> <a href="https://codepen.io/Kevsterking/full/dWVaoY/"><div class="col-md-4 tiger"></div></a> <div class="col-md-2"></div> <div class="col-md-4 placeholder"></div> </div> <!--row 1 end --> <!--row 2--> <div class="portfolio-row"> <div class="col-md-1"></div> <div class="col-md-4 placeholder"></div> <div class="col-md-2"></div> <div class="col-md-4 placeholder"></div> </div> <!--row 2 end --> <!--row 3--> <div class="portfolio-row"> <div class="col-md-1"></div> <div class="col-md-4 placeholder"></div> <div class="col-md-2"></div> <div class="col-md-4 placeholder"></div> </div> <!--row 3 end --> <!--row 4--> <div class="portfolio-row"> <div class="col-md-1"></div> <div class="col-md-4 placeholder"></div> <div class="col-md-2"></div> <div class="col-md-4 placeholder"></div> </div> <!--row 4 end --> <!--row 5--> <div class="portfolio-row-end"> <div class="col-md-1"></div> <div class="col-md-4 placeholder"></div> <div class="col-md-2"></div> <div class="col-md-4 placeholder"></div> </div> <!--row 5 end --> </div><!--scrollthingy--> </div> </div> </div>
</div> <!--portfolio page--> <div class="border"> <div class="border2"> </div> </div>
<div class="page3" id="Contact me"> <div class="shader"> <div class="content3" id="content3"> <h2>Contact Me!</h2> <div class="contact-square row"> <div class="col-md-4 media"> <div> <h6>Contact me via mail or medias...</h6> <!--media symboler--> <div class="symbols"> <a href="mailto:[email protected]" target="_blank" class="mail"><i class="symbol fa fa-envelope-o" aria-hidden="true"></i></a> <p>Mail</p> <a href="https://www.facebook.com/messages/t/100007945578376" target="_blank" class="facebook"><i class="symbol fa fa-facebook-square" aria-hidden="true"></i></a> <p>Facebook</p> <a href="https://twitter.com/messages/compose?recipient_id=4592895683" target="_blank" class="twitter"><i class="symbol fa fa-twitter-square" aria-hidden="true"></i></a> <p>Twitter</p> </div> </div> </div> <div class="col-md-8 message"> <h6>Or send me a private message here if you are intreted to talk to me about coding/webdesign.</h6> <div class="contact row"> <div class="placer"> <div class="contact-left col-md-6"> <form id="contact-form" action="#" method="get"> <div class="form-item"><label for="name"></label><input id="name" type="text" placeholder="Name" required/></div> <div class="form-item"><label for="email"></label><input id="email" type="email" placeholder="Email Adress" required/></div> <div class="form-item"><label for="phone"></label><input id="phone" type="tel" placeholder="Phone Number" required/></div>
</div> <!--contact left end--> <div class="contact-right col-md-6"> <div class="form-item"><label for="message"></label><textarea id="message" rows="20" placeholder="Message" required/></textarea></div> </div> <div> <button type="submit" value="Submit" class="btn-primary" id="send">Send <i class="fa fa-paper-plane" aria-hidden="true"></i></button> </div> </form> <p class="message-text">I will try to read and answer your messages as soon as I can!</p> </div> </div> </div><!--content3 end--> </div> </div>
</div>
</div>
</body>
</html>

Personal Portfolio - Script Codes CSS Codes

* { padding: 0; margin: 0; box-sizing: border-box;
}
body { widht: 100vh; height: 100vh;
}
.header { width:100%; top:0; height: 80px; position: fixed; background-color: rgba(255, 255, 255, .9); z-index:2000;
}
.headerwidth { width:1000px; height: 100%; margin: 0 auto;
}
li.header-list { font-family: "Helvetica", serif; font-size: 3em; list-style: none; float: left; margin-top: 20px; margin-left: 140px; border: 2px solid #000; padding: 0 30px; border-top-left-radius:10px; border-top-right-radius:10px; border-width: 0 0 5px 0; transition: .5s;
}
li.header-list:hover { color: #fff; background-color: #000;
}
.headerwidth a:hover{ text-decoration: none; color: #fff;
}
.headerwidth a:link{ text-decoration: none; color: #000;
}
.headerwidth a:visited{ text-decoration: none; color: #000;
}
.border { height: 50px; background-color: #000;
}
.shader { background-color: rgba(0,0,0, .8);
}
.page1 { height: 900px; background-image: url("https://static.pexels.com/photos/2324/skyline-buildings-new-york-skyscrapers.jpg"); background-size: cover;
}
.page2 { height: 900px; background-image: url("https://newevolutiondesigns.com/images/freebies/city-wallpaper-2.jpg"); background-size: cover; border
}
.page3 { height: 950px; background-image: url("https://newevolutiondesigns.com/images/freebies/city-wallpaper-5.jpg"); background-size: cover;
}
.content-box { margin-top: 80px; background-color: white; width:1920px;
}
div.content1 { width:70%; margin-left: 50%; transform: translate(-50%); height: 900px;
}
div.about-text { background: rgba(255, 255, 255, 0.3); margin: 20px 170px 0 170px;; padding: 0 0 20px 0; box-shadow: 10px 10px 10px black;
}
img.about-image { width: 250px; height: 250px; margin-top: 20px; margin-right: 50px; border:5px solid #fff; border-radius:50%; box-shadow: 10px 10px 10px black;
} h2 { font-family: 'Lobster', cursive; padding-top: 60px; font-size: 10em; text-align: center; color: #fff; text-shadow: 4px 4px 4px black;
}
.content1 p { font-family: 'Amatic SC', cursive; font-size: 3em; color: #fff; padding: 20px 50px; text-shadow: 2px 2px 2px black;
}
div.content2 { width:70%; margin-left: 50%; transform: translate(-50%); height: 900px;
}
div.portfolio-square { background: rgba(255, 255, 255, 0.3); box-shadow: 10px 10px 10px black;
}
.scrollthing { width:80%; height: 79%; margin: 20px auto 0 auto; padding: 0 0 20px 0; overflow-y: scroll; overflow-x: hidden;
}
.portfolio-row{ margin-top: 50px; width:100%; height:300px;
}
.portfolio-row-end{ margin-top: 50px; margin-bottom: 50px; width:100%; height:300px;
}
.placeholder { border:2px solid white; height:100%; box-shadow: 10px 10px 10px black; background-image: url("http://placehold.it/346x296");
}
.tiger { border:2px solid white; height:100%; box-shadow: 10px 10px 10px black; background: url("https://gyazo.com/826f85736bc60f6a563eb9fda4068c3d.jpg") no-repeat center center; background-size: cover;
}
div.content3 { width:70%; margin-left: 50%; transform: translate(-50%); height: 900px;
}
div.contact-square { height: 79%; width: 80%; margin: 20px auto 0 auto; background: rgba(255, 255, 255, 0.3); box-shadow: 10px 10px 10px black;
}
h6 { padding: 20px; font-family: 'Lobster', cursive; font-size: 3em; color: #fff; border: 0 solid rgba(255, 255, 255, 0.3); border-width: 0 0 2px 0; text-shadow: 2px 2px 2px black;
}
.media h6, .message h6 { margin: 0 30px;
}
div.media { border: 0 solid rgba(255, 255, 255, 0.3); border-width: 0 1px 0 0; padding:0;
}
.media i { font-size: 8em;
}
div.message { border: 0px solid rgba(255, 255, 255, 0.3); border-width: 0 0 0 1px; padding:0;
}
.symbols p { font-family: "Amatic CS", cursive; font-size: 3em; text-align: center; color: #fff; text-shadow: 3px 3px 3px black;
}
.symbol { font-size: 1.5em; margin-left: 50%; margin-top: 50px; transform: translate(-50%);
}
.symbols a:link { color: rgb(50,50,50); text-decoration: none; text-shadow: 3px 3px 3px black;
}
.symbols a:visited { color: rgb(50,50,50); text-decoration: none; text-shadow: 3px 3px 3px black;
}
a.facebook:hover { color: #3b5998; text-shadow: 3px 3px 3px black;
}
a.mail:hover { color: #dd4b39;
}
a.twitter:hover { color: #55acee;
}
.placer { margin-top: 40px;
}
.contact { width:100%; margin-left: 50%; transform: translate(-50%);
}
input { color:#fff;
}
#name, #email, #phone, #message { background: none; background-color: rgba(0,0,0,.2); margin-top: 20px; margin-left: 50%; transform: translate(-50%); color: #fff; border-width: 0 0 2px 0; width: 80%; height: 60px; font-size: 3em; text-shadow: 3px 3px 3px black; box-shadow: 3px 3px 3px black;
}
#message { height: 250px; text-shadow: 3px 3px 3px black;
}
#send { width:86%; font-size: 3em; height: 60px; margin-top: 20px; margin-left: 50%; transform: translate(-50%); text-shadow: 3px 3px 3px black; box-shadow: 3px 3px 3px black;
}
p.message-text { margin-top: 20px; font-size: 4em; color: #fff; font-family: "Lobster", cursive; text-align: center; text-shadow: 3px 3px 3px black;
}
/*placeholder color fix*/
::-webkit-input-placeholder { color: #fff; text-shadow: 3px 3px 3px black;
}
:-moz-placeholder { color: #fff; opacity: 1; text-shadow: 3px 3px 3px black;
}
::-moz-placeholder { color: #fff; opacity: 1; text-shadow: 3px 3px 3px black;
}
:-ms-input-placeholder { color: #fff; text-shadow: 3px 3px 3px black;
}
Personal Portfolio - Script Codes
Personal Portfolio - Script Codes
Home Page Home
Developer Kevin Bäckstäde
Username Kevsterking
Uploaded November 24, 2022
Rating 3
Size 4,516 Kb
Views 14,168
Do you need developer help for Personal Portfolio?

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!

Kevin Bäckstäde (Kevsterking) Script Codes
Name
Tiger Woods Tribute
Random Quote Machine
Create amazing art & images 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!