Personal Portfolio Webpage

Developer
Mr. Apex
Size
3,531 Kb
Views
10,120
  1. Personal Portfolio Webpage Previews
  2. Personal Portfolio Webpage HTML Codes
  3. Personal Portfolio Webpage CSS Codes

How do I make an personal portfolio webpage?

What is a personal portfolio webpage? How do you make a personal portfolio webpage? This script and codes were developed by Mr. Apex on 24 October 2022, Monday.

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> <title>Mr. Apex's Portfolio</title> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<header> <nav class="navbar navbar-default navbar-fixed-top" id="navbarheader" role= "navigation"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mynavbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" id="navbarbrand" href="#" >APEX MEDIA CONCEPT</a> </div> <div class ="collapse navbar-collapse" id="mynavbar"> <!--Right Align--> <ul class="nav navbar-nav navbar-right"> <li class="active"><a class="nav-link" href="#top">ABOUT</a></li> <li><a class="nav-link" href="#portfolio">PORTFOLIO</a></li> <li><a class="nav-link" href="#contact">CONTACT</a></li> </ul> </nav>
</header> <body>
<div class="wrapper" id="background-about"> <section class="about"> <div class="row"> <div class="col-sm-6"> <h2 id="top">Hi, I'm Apex.</h2> <h3>Front-End Developer and Graphic artist, with practical experience in branding, printing and currently a creative director at U-G lifestyle company. My flare for creativity inspires me to code!</h3> </div> <div class="container"> <div class="col-sm-6"> <img class="pull-right img-responsive" id="imgAvatar" src="http://i1156.photobucket.com/albums/p578/mista_apex/cropped%20avatar_zpsuekkjewa.jpg" alt="Apex"> </div> </div> </section> </div> <div id="background-portfolio"> <section class="portfolio"> <h2 class="text-center" id="portfolio">PORTFOLIO</h2> <div class="row"> <div class="col-md-4"> <img class="img-responsive pull-left" src="http://i1156.photobucket.com/albums/p578/mista_apex/FAHID_zpsld1ypmx2.jpg" alt="FAHID-UI"> </div> <div class="col-md-4"> <a href="https://codepen.io/apex005/full/vZYbyG" target="_blank"> <img class= "img-responsive" src= "http://i1156.photobucket.com/albums/p578/mista_apex/biography%20page%20of%20Asa_zpscyh3mjft.png" alt="Biography of Asa"></a> </div> <div class="col-md-4"> <img class="img-responsive" src="http://i1156.photobucket.com/albums/p578/mista_apex/bixz%20card%20amc%202_zpsdxkijg6w.jpg" alt="CC biz card"> </button> </div> </section> <button class="btn btn-block btn-primary" !important> <a href="https://codepen.io/apex005/full/bRGYzb/" style="color:white"> CLICK HERE TO SEE MORE</a> </div> <div id="background-contact"> <div class="container"> <h2 class="text-center" id="contact">CONTACT</h2> <form action="/#"> <label for="name">Name:</label> <input type="text" id="name" name="yourname" placeholder="Your name..."> <label for="email">E-mail:</label> <input type="text" id="email" name="email" placeholder="Your email..." required> <label for="phonenumber">Phone Number:</label> <input type="text" id="phonenumber" name="phonenumber" placeholder="Enter your phone number"> <label for="message">Message:</label> <textarea id="message" name="message" placeholder="Your message..." style="height:200px"> </textarea> <button type="submit" class="btn btn-primary"> Submit <i class="fa fa-paper-plane"></i></button> </form> </div> </div> <section> <footer class="footer"> <div id="background-footer"> <div class="row"> <div class="col-md-4"> <h3>ABOUT THIS PAGE</h3> <h4>Developed by <a id="aTarget" href="https://www.linkedin.com/in/qudus-alabi-apex-01128a41/" target="_blank">Apex Q. Alabi</a></h4> </div> <div class="container"> <div class="col-md-8"> <h3 class="text-right">Find out more about me</h3> <div class="pull-right"> <a href="www.facebook.com/alabiq" target="_blank"><i class="fa fa-facebook"></i></a> <a href="http://www.twitter.com/lifeofapex" target="_blank"><i class="fa fa-twitter"></i></a> <a href="#" target="_blank"><i class="fa fa-linkedin"></i></a> <a href="#" target="_blank"><i class="fa fa-google-plus"></i></a> <a href="#" target="_blank"><i class="fa fa-skype"></i></a> </div> </div> </div> </footer> </div> </section> </body>
</body>
</html>

Personal Portfolio Webpage - Script Codes CSS Codes

body{ margin-top: 6%; margin-right: 5%; margin-left: 5%; background-color: orange;
}
#background-about{ background-color: #FFFFFF; padding-left: 10%; padding-right: 5%; padding-top: 8%; padding-bottom: 2%; }
header{ padding: 10px;
} #navbarheader{ padding: 40px; background-color: silver; }
#navbarbrand{ font-family: raleway; background-color: white;
}
#background-portfolio{ background-color: #FF7BAC; padding-left: 5%; padding-right: 5%; padding-top: 2%; padding-bottom: 1%;
}
#imgAvatar{ border-radius: 50%; max-width: 300px;
}
#background-contact{ background-color: white; padding-left: 3%; padding-right: 3%; padding-top: 2%; padding-bottom: 2%;
}
/* Style inputs with type="text", select elements and textareas */
input[type=text], select, textarea { width: 100%; /* Full width */ padding: 12px; /* Some padding */ border: 1px solid orange; /* Orange border */ border-radius: 4px; /* Rounded borders */ box-sizing: border-box; /* Make sure that padding and width stays in place */ margin-top: 6px; /* Add a top margin */ margin-bottom: 16px; /* Bottom margin */ resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}
#background-footer{ background-color: #FF7BAC; padding: 5%;
}
button{ background-color: orange !important;
}
img{ height: 500px; width: 500px; padding: 3%;
}
footer a{ color: white; font-size: 30px; padding: 10px; border-right: 1px solid #C0C0C0; transition: all .5s ease;
}
#aTarget{ font-size: 19px;
}
Personal Portfolio Webpage - Script Codes
Personal Portfolio Webpage - Script Codes
Home Page Home
Developer Mr. Apex
Username apex005
Uploaded October 24, 2022
Rating 3
Size 3,531 Kb
Views 10,120
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!

Mr. Apex (apex005) Script Codes
Name
Biography Of Asa
Portfolio Page
A Pen by Mr. Apex
Welcome Page
Create amazing web content 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!