Portfolio Flat

Developer
Joo Vctor De Oliveira Santos
Size
3,642 Kb
Views
46,552
  1. Portfolio Flat Previews
  2. Portfolio Flat HTML Codes
  3. Portfolio Flat CSS Codes

How do I make an portfolio flat?

This is a simple page that I have made for my girlfriend replicate and learn some CSS and HTML stuffs. (Sorry if some class isn't in English, I have firstly created this in Portuguese).. What is a portfolio flat? How do you make a portfolio flat? This script and codes were developed by Joo Vctor De Oliveira Santos on 27 August 2022, Saturday.

Portfolio Flat Previews
IQ Test

Portfolio Flat - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Portfolio Flat</title> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <body> <nav> <ul class="ariaMenu"> <li><a href="#mainMenu">Go to main menu</a></li> <li><a href="#mainContent">Go to content</a></li> </ul> </nav> <header> <div class="pgHeader"> <h1 class="pageHeader">My Portfolio</h1> <span class="pageSubHeader">I like! </span> </div> <div class="subHeader"> <nav> <ul id="mainMenu" class="navMenu mainNavMenu"> <li class="active"><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Contact</a></li> </ul> </nav> <ul class="navMenu socialMedia"> <li> <a href="#"><img alt="Facebook Button" src="http://i.imgur.com/o4r0urr.png" /></a> </li> <li> <a href="#"><img alt="Google Button" src="http://i.imgur.com/fWgZemm.png" /></a> </li> <li> <a href="#"><img alt="Youtube Button" src="http://i.imgur.com/5Lb92Io.png" /></a> </li> </ul> </div> </header> <main id="mainContent"> <div class="introduction"> <img src="https://www.placecage.com/640/640" alt="Foto" /> <span>Consectetur adipiscing elit.Suspendisse ac velit non ex maximus ornare non pretium lorem.Integer dictum purus a egestas vehicula.Vestibulum non mauris sapien. Integer ac libero turpis</span> </div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tristique tortor nec lorem mattis fringilla. Donec lacinia condimentum sem quis vehicula. Aliquam aliquet tincidunt venenatis. Aenean eu quam porta libero laoreet consequat eget a odio. Aenean eros leo, pulvinar nec augue sed, elementum porta turpis. Morbi semper nisi at ante molestie, a tempor lectus feugiat. Proin ac urna commodo, imperdiet justo vel, facilisis leo. Proin molestie mi vitae condimentum lobortis. Vivamus sodales leo risus, et sagittis purus malesuada non. Praesent odio diam, luctus eu tortor et, mollis dictum lacus. Vivamus nisi nulla, semper sed dolor eget, aliquam venenatis metus. Nunc eleifend elit eros, eget tempor dui viverra ac. Donec a nisl sed risus congue elementum. Quisque aliquam vulputate auctor. Nulla pellentesque justo eu orci vehicula rutrum. </p> <p>Aenean nec dui vel orci sodales pulvinar ac sed nisi. Suspendisse id dignissim nisi, nec lacinia libero. Morbi scelerisque neque et leo pulvinar, efficitur facilisis ipsum scelerisque. Ut non sapien vel nisi sagittis semper. Aliquam facilisis tellus eu augue euismod, vel pharetra sapien elementum. Cras ac lorem ac magna porttitor congue. Aliquam et dapibus sapien, id rhoncus nisl. Etiam malesuada elit consectetur tristique faucibus. Mauris ultricies urna urna, eu aliquet lectus porta eget. Nulla imperdiet, nibh nec rutrum placerat, sapien mi interdum orci, ut euismod nisi libero ut arcu. </p> <p>Interdum et malesuada fames ac ante ipsum primis in faucibus. In id nulla congue, mattis elit et, pretium augue. Morbi eget sapien iaculis, pretium orci eu, dignissim mi. Etiam viverra eu metus in laoreet. Nullam eu nisl posuere enim hendrerit lacinia. Curabitur vestibulum libero nec quam semper ornare. Phasellus dictum accumsan laoreet. Nulla rhoncus aliquam tortor, sed volutpat felis elementum non. Donec imperdiet tortor sit amet augue facilisis accumsan. Suspendisse tincidunt egestas dui, non hendrerit quam vehicula sit amet. In eget urna varius, maximus sem vitae, ultricies odio. Sed non est neque. Nullam laoreet nunc in ultrices condimentum. Aliquam blandit tortor non ullamcorper euismod. Duis pellentesque tempor nulla, vel sagittis ex hendrerit ac. </p> </main>
</body>
</body>
</html>

Portfolio Flat - Script Codes CSS Codes

* { font-family: Roboto, sans-serif; font-weight: 200;
}
.ariaMenu { list-style: none; margin: 0; height: 0;
}
.ariaMenu >li { display: block;
}
.ariaMenu > li > a { margin: 0; padding: 15px; width: auto; position: absolute; margin-top: -100px; left: 0; text-decoration: none;
}
.ariaMenu > li > a:focus { background-color: black; color: white; margin-top: 0;
}
html,
body { margin: 0; width: 100%;
}
.pgHeader { margin: 0; background-image: url("http://i.imgur.com/Ef2Pr3e.jpg"); background-repeat: no-repeat; background-attachment: fixed; background-position: center -305px; background-size: 100% auto; width: 100%; height: 270px; background-color: #2196F3; color: white; color: rgba(255, 255, 255, 0.4);
}
.pageHeader { position: absolute; margin-top: 15px; margin-left: 5px; font-size: 6em;
}
.pageSubHeader { margin: 200px 0 0 0; font-size: 3em; position: absolute; right: 0;
}
.subHeader { width: 100%; height: 75px; background-color: #1565C0; color: black; box-shadow: 0 4px 8px -1px black;
}
.navMenu { margin: 0; list-style: none;
}
.navMenu > li { margin-top: 18px; display: block; float: left;
}
.navMenu > li > a { text-decoration: none; color: white; padding: 18px; font-size: 2em;
}
.navMenu > .active > a,
.navMenu > .active > a:hover { background-color: #2196F3;
}
.mainNavMenu > li > a:hover { background-color: #1976d2;
}
.socialMedia { position: absolute; right: 0;
}
.socialMedia > li { margin-right: 0; margin-left: 0;
}
.socialMedia > li > a > img { width: 80px; height: auto; margin-top: 15px; border-radius: 100%; box-shadow: 0 4px 8px -1px black; background-color: black;
}
.introduction { width: auto; height: 169px; margin: 25px; display: flex; align-items: center;
}
.introduction > img { margin: 0; margin-right: 60px; border-radius: 100%; width: 169px; height: auto; vertical-align: middle;
}
.introduction > span { display: inline-block; width: 600px;
}
main { width: 90%; margin-left: auto; margin-right: auto; font-size: 1.4em;
}
body,
main { background-color: #f9f9f9;
}
Portfolio Flat - Script Codes
Portfolio Flat - Script Codes
Home Page Home
Developer Joo Vctor De Oliveira Santos
Username jvhti
Uploaded August 27, 2022
Rating 3
Size 3,642 Kb
Views 46,552
Do you need developer help for Portfolio Flat?

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!

Joo Vctor De Oliveira Santos (jvhti) Script Codes
Name
Price Table
JQuery UI Playground
Stylize Stories
Pomodoro
Simon Game
Page Size Menu Example
Tic Tac Toe Game
Youtube Random Video With Cover Image
Wikipedia Viewer
A Pen by Joo Vctor de Oliveira Santos
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!