WPDES - Personal Portfolio Page - Freecodecamp

Developer
Jan Van Der Westhuizen
Size
3,596 Kb
Views
12,144
  1. WPDES - Personal Portfolio Page - Freecodecamp Previews
  2. WPDES - Personal Portfolio Page - Freecodecamp HTML Codes
  3. WPDES - Personal Portfolio Page - Freecodecamp CSS Codes

How do I make an wpdes - personal portfolio page - freecodecamp?

This is an assignment for freecodecamp.com where I need to build a single page personal portfollio for a me.. What is a wpdes - personal portfolio page - freecodecamp? How do you make a wpdes - personal portfolio page - freecodecamp? This script and codes were developed by Jan Van Der Westhuizen on 05 December 2022, Monday.

WPDES - Personal Portfolio Page - Freecodecamp Previews
IQ Test

WPDES - Personal Portfolio Page - Freecodecamp - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>WPDES - Personal Portfolio Page - Freecodecamp</title> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <head>	<link href="https://fonts.googleapis.com/css?family=Kumar+One+Outline" rel="stylesheet">	<script src="https://use.fontawesome.com/6ddfcefb4c.js"></script>
</head>
<nav class="navbar navbar-inverse navbar-fixed-top">	<div class="container">	<div class="navbar-header">	<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>	<a href="#" class="navbar-brand">	<span class="w">W</span>	<span class="p">P</span>	<span class="d">D</span>	<span class="e">E</span>	<span class="s">S</span>	</a>	</div>	<!--nav header-->	<div class="collapse navbar-collapse" id="navbar-collapse">	<ul class="nav nav-pills navbar-right">	<li class="nav-item"><a class="nav-link" href="#">About</a></li>	<li class="nav-item"><a class="nav-link" href="#">Portfolio</a></li>	<li class="nav-item"><a class="nav-link" href="#">Contact</a></li>	</ul>	</div>	<!--nav-->	</div>	<!--container-->
</nav>
<div class="jumbotron section-white">	<div class="container">	<h1>A bit about me</h1>	<div class="img-row">	<img src="https://dummyimage.com/200" class="img-circle img-responsive" alt="">	<img src="https://dummyimage.com/200" class="img-circle img-responsive" alt="">	<img src="https://dummyimage.com/200" class="img-circle img-responsive" alt="">	<img src="https://dummyimage.com/200" class="img-circle img-responsive" alt="">	<img src="https://dummyimage.com/200" class="img-circle img-responsive" alt="">	</div>	<!--about-->	<p>I am currently working as a fibre optic technician, but I am getting bored with the work. I was alway curious about web development and coding, and built some knowledge over time but nothing spectaculor.</p>	<p>So here I am doing the freecodecamp thing, trying to build real knowledge and skill. I must say, I know a lot less than I thought I did but that is all about to change as I learn more, and builld more.</p>	</div>	<!--container-->
</div>
<!--jumbotron-->
<div class="jumbotron section-grey">	<div class="container">	<h1>Some of my work</h1>	</div>	<!--container-->	<div class="row img-row">	<div class="col-md-2">	<a href="www.google.com"><img src="https://dummyimage.com/300" class="img-fluid" alt="www.google.com"></a>	</div>	<!--col-->	<div class="col-md-2">	<a href="www.google.com"><img src="https://dummyimage.com/300" class="img-fluid" alt="www.google.com"></a>	</div>	<!--col-->	<div class="col-md-2">	<a href="www.google.com"><img src="https://dummyimage.com/300" class="img-fluid" alt="www.google.com"></a>	</div>	<!--col-->	<div class="col-md-2">	<a href="www.google.com"><img src="https://dummyimage.com/300" class="img-fluid" alt="www.google.com"></a>	</div>	<!--col-->	</div>	<!--row-->	<div class="row img-row">	<div class="col-md-2">	<a href="www.google.com"><img src="https://dummyimage.com/300" class="img-fluid" alt="www.google.com"></a>	</div>	<!--col-->	<div class="col-md-2">	<a href="www.google.com"><img src="https://dummyimage.com/300" class="img-fluid" alt="www.google.com"></a>	</div>	<!--col-->	<div class="col-md-2">	<a href="www.google.com"><img src="https://dummyimage.com/300" class="img-fluid" alt="www.google.com"></a>	</div>	<!--col-->	<div class="col-md-2">	<a href="www.google.com"><img src="https://dummyimage.com/300" class="img-fluid" alt="www.google.com"></a>	</div>	<!--col-->	</div>	<!--row-->
</div>
<!--jumbotron-->
<div class="jumbotron section-white">	<div class="container">	<h1>Get in touch with me</h1>	<div class="social-icons">
<a href="#" class="fa fa-free-code-camp fa-3x" aria-hidden="true"></a>	<a href="#" class="fa fa-codepen fa-3x" aria-hidden="true"></a>	<a href="#" class="fa fa-github fa-3x" aria-hidden="true"></a>	<a href="#" class="fa fa-wordpress fa-3x" aria-hidden="true"></a>	<a href="#" class="fa fa-google-plus fa-3x" aria-hidden="true"></a>	</div><!--social-->	<form id="contact_form" action="#" method="POST" enctype="multipart/form-data">	<div class="row">	<label for="name">Name</label><br />	<input id="name" class="input" name="name" type="text" value="" size="30" /><br />	</div>	<div class="row">	<label for="email">Email</label><br/>	<input id="email" class="input" name="email" type="text" value="" size="30" /><br/>	</div>	<div class="row">	<label for="message">Message:</label><br/>	<textarea id="message" class="input" name="message" rows="7" cols="30"></textarea><br/>	</div>	<input id="submit_button" type="submit" value="Send"/>	</form>	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec volutpat at dolor et viverra. Donec pulvinar ornare lectus sed accumsan. Curabitur condimentum vulputate pretium. Suspendisse lobortis rutrum vulputate. Sed vestibulum erat erat, in blandit	tortor vestibulum eget. Aenean feugiat gravida sem sed suscipit. Sed fermentum lorem et eros tempor, id iaculis turpis lobortis.</p>	</div>	<!--container-->
</div>
<!--jumbotron-->
<footer class="footer">	<div class="container">	<span><span class="footer-brand"><span class="w">W</span>	<span class="p">P</span>	<span class="d">D</span>	<span class="e">E</span>	<span class="s">S</span></span> © 2016. All Rights Reserved.</span>	</div>
</footer> <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'></script>
</body>
</html>

WPDES - Personal Portfolio Page - Freecodecamp - Script Codes CSS Codes

.w {	color: #396387;
}
.p {	color: #D5573B;
}
.d {	color: #53DD6C;
}
.e {	color: #870058;
}
.s {	color: #E9D758;
}
.navbar-inverse {	background-color: #0D0D0D;	box-shadow: 0 2px 2px -2px #F3F3F3;
}
.navbar-inverse .navbar-brand {	font-family: Kumar One Outline, cursive;	font-weight: bold;	font-size: 2em;	line-height: 1em;
}
.navbar-nav li a {	line-height: 2em;
}
button .icon-bar {	color: #F3F3F3;
}
.nav-pills {	padding: 4px;
}
.nav-pills .nav-link {	color: #F3F3F3;
}
.nav-pills>li>a:hover {	background-color: #F3F3F3;	color: #0D0D0D;
}
.nav-pills>li>a:focus {	background-color: #F3F3F3;	color: #0D0D0D;
}
.jumbotron {	margin: 0;
}
h1 {	font-size: 400%;	font-weight: bold;	text-align: center;	padding: 1%;
}
p {	font-size: 150%;	padding: 0.5%;
}
.img-row {	display: flex;	justify-content: space-between;	padding: 1.5%;
}
.section-white {	background-color: #F3F3F3;	color: #0D0D0D;
}
.section-grey {	background-color: #0D0D0D;	color: #F3F3F3;
}
footer {	background-color: #0D0D0D;	color: #F3F3F3;	font-size: 1.2em;	text-align: center;	padding: 0;
}
.footer-brand {	font-family: Kumar One Outline, cursive;	font-weight: bold;
}
.fa {	color: #0D0D0D;	padding: 0 2% 2% 2%;	style: none;
}
.fa-free-code-camp:hover { color: #396387;	text-decoration: none;
}
.fa-codepen:hover { color: #D5573B;	text-decoration: none;
}
.fa-github:hover { color: #53DD6C;	text-decoration: none;
}
.fa-wordpress:hover { color: #870058;	text-decoration: none;
}
.fa-google-plus:hover { color: #E9D758;	text-decoration: none;
}
WPDES - Personal Portfolio Page - Freecodecamp - Script Codes
WPDES - Personal Portfolio Page - Freecodecamp - Script Codes
Home Page Home
Developer Jan Van Der Westhuizen
Username yunnimun
Uploaded December 05, 2022
Rating 3
Size 3,596 Kb
Views 12,144
Do you need developer help for WPDES - Personal Portfolio Page - Freecodecamp?

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!

Jan Van Der Westhuizen (yunnimun) Script Codes
Name
Elon Musk - Tribute Page - FreeCodeCamp
Create amazing SEO 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!