Portfolio

Developer
Maria Marica
Size
4,158 Kb
Views
22,264
  1. Portfolio Previews
  2. Portfolio HTML Codes
  3. Portfolio CSS Codes

How do I make an portfolio?

What is a portfolio? How do you make a portfolio? This script and codes were developed by Maria Marica on 25 October 2022, Tuesday.

Portfolio Previews
IQ Test

Portfolio - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Portfolio </title> <meta charset="utf-8"> <title>My portfolio</title> <link href="https://fonts.googleapis.com/css?family=Voltaire|Quicksand:300,400" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css"/>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel= "stylesheet"> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<body> <div class="heading"> <div class="nav-wrap"> <div class="navdiv"> <ul> <li id="logo">Maria Marica</li> <li><a href="#contact">Contact</a></li> <li><a href="#portfolio">Portfolio</a></li> <li><a href="#about">About</a></li> <li><a href="#home">Home</a></li> </ul> </div> <!---/navdiv--> </div> <!--/maindiv---> <!----Home--> <a name="home"></a> <div class="heading-content center-align"> <h1> Hello!</h1> <h2>This website was created for learning purposes.</h2> <div class="icons-wrapper"> <a href="https://twitter.com/mariamarica3" class="round-btn" target="_blank"><i class="fa fa-twitter fa-4x" aria-hidden="true"></i></a> <a href="https://codepen.io/mariamarica/" class="round-btn"><i class="fa fa-codepen fa-4x" target="_blank" aria-hidden="true"></i></a> <a href="https://github.com/mariamarica" class="round-btn" target="_blank"><i class="fa fa-github fa-4x" aria-hidden="true"></i></a> <a href="https://medium.com/@mariamarica" class="round-btn" target="_blank"><i class="fa fa-medium fa-4x" aria-hidden="true"></i></a> </div> </div> </div> <!--heading--> <!-----putting About, Portofolio, Contact in a div, for background consistency----> <div class="container center-align"> <!---About---> <section class="abt"> <a name="about"></a> <div class="inner-wrapper"><h2>About me</h2> <img class="round-img" src="https://www.dropbox.com/s/0vb9y1h5aag6z7d/eu.png?raw=1" alt="This is me"> <h3> Web development enthousiast, business graduate, camper @FCC, continuous learner, Powerpuff.</h3> </div> </section> <!-----Portfolio---> <section class="portfolio"> <div class="inner-wrapper"> <a name="portfolio"></a> <h2>Portfolio<h2> <h3>I'm still at the beginning of my coding journey, will put up more projects along the way.</h3> <div class="projects"> <figure><a href="https://codepen.io/mariamarica/full/YGjpop/" target="_blank"><img src="https://www.dropbox.com/s/hp9fh0cdd8n5ea3/bresson.PNG?raw=1" title="Bresson tribute" alt="Bresson project caption"></a> <figcaption><p>Tribute page - Project for Free Code Camp, built with HTML and CSS.</p> </figcaption> </figure> <figure> <a href="#"><img src="https://images.unsplash.com/photo-1461749280684-dccba630e2f6?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=9d40ed55e2929fabf5e2fd86af5fe5e0" alt="thumbnail" title="working"></a> <figcaption><p>More projects to follow...</p></figcaption> </figure> <figure> <a href="#"><img src="https://images.unsplash.com/photo-1461749280684-dccba630e2f6?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=9d40ed55e2929fabf5e2fd86af5fe5e0" alt="thumbnail" title="working"></a> <figcaption><p>More projects to follow...</p></figcaption> </figure> </div> </section> <!----Contact---> <section class="contact"> <div class="inner-wrapper"> <h2 class="contact">Contact</h2> <div class="contact-wrapper"> <form action="action-page.php" method="post" class="contact-form"> <div class="left"> <label> Name: <input type="text" name="name" placeholder="Please enter your name here..." required> </label> <label> E-mail address: <input type="text" name="e-mail" placeholder="Please insert your e-mail address here..." required> </label> </div> <div class="right"> <label> Your message: <textarea name="message" placeholder="Write your message here..." required></textarea> </label> <button type="submit" class="btn-submit">Submit</button> </div> </form> </div> </div> </section> <!---footer----> <hr> <section class="footer center-align"> <p>Written and coded by Maria Marica</p> </section> </div> <!----/container-->
</body>
</body>
</html>

Portfolio - Script Codes CSS Codes

* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; ms-box-sizing: border-box; box-sizing: border-box; /*font-family: 'Quicksand', sans-serif;*/ font-family: 'Voltaire', sans-serif; padding:0; margin: 0;
}
/*.row {width: 100%; display: flex; flex-wrap: wrap; margin-left: auto; margin-right: auto;}*/
/* General style*/
.inner-wrapper {width: 100%; padding: 5em; text-align: center; }
h1 { font-size: 3.5rem; text-transform: uppercase;
}
h2 { font-size: 2.5rem;
}
/*Navbar*/
.nav-wrap { width: 100%; position: fixed; z-index: 1;
}
.navdiv { opacity: 0.70;
}
.navdiv ul { width: 100%; background: #DC143C; line-height: 3rem; float: right;
}
.navdiv ul a { text-decoration: none; color:	white; padding: 2em;
}
.navdiv ul li { list-style-type: none; display: inline-block; float: right; margin-right: 1em;
}
li:hover { background: white; transition: all 0.8s;
}
.navdiv ul a:hover { color: #DC143C; transition: all 0.8s; font-weight: bold;
}
#logo { float: left !important; font-size: 2em; margin-left: 1em; color: white;
}
#logo:hover { background: none;
}
/* Banner*/
.heading {position: relative; background: url("https://images.pexels.com/photos/131683/pexels-photo-131683.jpeg?w=940&h=650&auto=compress&cs=tinysrgb") center fixed no-repeat; background-size: cover; width: 100%; z-index:1;
}
.heading-content { padding: 15em; color:	white;
}
.icons-wrapper { padding: 2em;
}
.round-btn { display: inline-block; padding: 0.3em; color: #008080; border-radius: 40%; border: 3px solid white; background: white;
}
.round-btn:hover { background: #DC143C; color: white; transition: all 1s;
}
/*About*/
.container {position: relative; background: white; z-index:0;
}
.center-align { text-align: center;
}
.abt { padding-top: 10%; padding-bottom: 10%; color: #696969;
}
.round-img { height: 9em; width: 10em; border-radius: 50%; border: 2px double #BCBBBB;
}
/*Portfolio*/
.portfolio { width: 100%; padding: 5em; background:	#008080; color:	white;
}
.projects { width: 100%; padding: 2%;
}
figure { text-align: center; position: relative; display: inline-block; width: 30%; height: 16em; border: 2px solid white; /*#A0A0A0*/ vertical-align: top;
}
/*@media screen and (max-width: 450px){
figure {display:block;}*/
figure img { position: absolute; width: 90%; height: 80%; top: 30%; left: 50%; transform: translate(-50%, -30%);
}
figcaption { position: relative; font-size: 1.6em; top: 87%;
}
figcaption p {font-size:1.3em; position: relative; text-align: center;
}
.portfolio p { font-size: 0.5em;
}
/*Contact*/
.contact { width: 100%;
}
.contact h2 { color: #696969;
}
.contact-wrapper { padding: 3em; display: block; text-align: left;
}
.left,
.right { display: inline-block; width: 40%; vertical-align: top;
}
.left { margin-left: calc(10% - 15px); margin-right: 30px;
}
input,
textarea { display: block; width: 100%; font: 400 16px/26px 'Voltaire', sans-serif; outline: none; border: 1px solid rgba(0, 0, 0, .5);
}
input { height: 50px; line-height: 50px; padding: 15px; margin: 10px 0;
}
textarea { height: 200px; margin-top: 10px; margin-bottom: 12px; padding: 15px;
}
.contact-form label { margin-bottom: 20px;
}
button { line-height: 2em; background:	#008080; color: white; width: 15%; display: block; margin-left: 0;
}
.btn-submit:hover { background-color: #DC143C; transition: 0.8s;
}
/*footer*/
.footer { color: #808080;
}
@media screen and (min-width:1400px){ body, .nav-wrap {width: 1400px; margin-left:auto; margin-right:auto;}
Portfolio - Script Codes
Portfolio - Script Codes
Home Page Home
Developer Maria Marica
Username mariamarica
Uploaded October 25, 2022
Rating 3
Size 4,158 Kb
Views 22,264
Do you need developer help for 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!

Maria Marica (mariamarica) Script Codes
Name
Layout Shifter
Dropdown navbR
Tribute page
Dr. Love
Simon Game
A Pen by Maria Marica
Local weather
Off Canvas
Animation
Ppage
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!