<!DOCTYPE html>
<head>
<title>landing page portifolio</title>
<meta charset="UTF-8"/>
<meta name="athour" content="weptim">
<meta name="description" content="simple resume">
<!-- viewport -->
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<!-- css -->
<link rel="stylesheet" href="./css/main.css" type="text/css"/>
<script src="https://kit.fontawesome.com/bcb93d6703.js"></script>
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
<!--fontawesome-->
<!--font family-->
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/bcb93d6703.js"></script>
<style>
</style>
<body>
<!--header-->
<header id="main-header">
<div class="content">
<img src="https://images.pexels.com/photos/555790/pexels-photo-555790.png?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940">
<h1>john doe</h1>
<h3>freelance web developer</h3>
<a href="#about" class="btn">learn more</a>
</div>
</header>
<!-- about us-->
<section id="about">
<div class="container">
<div>
<img src="https://images.pexels.com/photos/555790/pexels-photo-555790.png?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940">
</div>
<div>
<h1 style="text-align: center;" class="title">who i am </h1>
<p class="lead">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris dignissim purus ac risus fermentum efficitur. Curabitur blandit aliquam posuere. Mauris egestas dignissim est, vel ultricies lorem venenatis tempor. Pellentesque malesuada laoreet erat, id interdum ligula aliquet sed.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris dignissim purus ac risus fermentum efficitur. Curabitur
</p>
<div>
<h3>html</h3>
<progress value="90" max="100"></progress>
</div>
<div>
<h3>css</h3>
<progress value="80" max="100" width="100%"></progress>
</div>
<div>
<h3>javascript</h3>
<progress value="50" max="100" width="100%"></progress>
</div>
</div>
</div>
</section>
<!--experence-->
<section id="experience">
<div class="container">
<div>
<h3 class="title">my experience</h3>
<p class="lead">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris dignissim purus ac risus fermentum efficitur. Curabitur blandit aliquam posuere. Mauris egestas dignissim est, vel ultricies lorem venenatis tempor
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris dignissim purus ac risus fermentum efficitur. Curabitur blandit aliquam posuere. Mauris egestas dignissim est, vel ultricies lorem venenatis tempor
</p>
</div>
<div>
<h3 class="title">my education</h3>
<p class="lead">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris dignissim purus ac risus fermentum efficitur. Curabitur blandit aliquam posuere. Mauris egestas dignissim est, vel ultricies lorem venenatis tempor
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris dignissim purus ac risus fermentum efficitur. Curabitur blandit aliquam posuere. Mauris egestas dignissim est, vel ultricies lorem venenatis tempor
</p>
</div>
</div>
</section>
<!--sercices-->
<section id="services">
<div class="container">
<h3 class="title">my offered services</h3>
<p class="lead">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris dignissim purus ac risus fermentum efficitur. Curabitur blandit aliquam posuere. Mauris egestas dignissim est, vel ultricies lorem venenatis tempor</p>
<div class="services">
<div>
<h3 class="title">web design</h3>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris dignissim purus ac risus fermentum efficitur. Curabitur blandit aliquam posuere. Mauris egestas dignissim est, vel ultricies lorem venenatis tempor</p>
</div>
<div>
<h3 class="title">graphic design </h3>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris dignissim purus ac risus fermentum efficitur. Curabitur blandit aliquam posuere. Mauris egestas dignissim est, vel ultricies lorem venenatis tempor</p>
</div>
<div>
<h3 class="title">web maintenance </h3>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris dignissim purus ac risus fermentum efficitur. Curabitur blandit aliquam posuere. Mauris egestas dignissim est, vel ultricies lorem venenatis tempor</p>
</div>
</div>
</section>
<!--projects-->
<section id="project">
<div class="container">
<h3 class="title">some projects i have worked on</h3>
<div class="project">
<img src="https://source.unsplash.com/collection/190727/1600x901">
<img src="https://source.unsplash.com/collection/190727/1600x902">
<img src="https://source.unsplash.com/collection/190727/1600x903">
<img src="https://source.unsplash.com/collection/190727/1600x904">
<img src="https://source.unsplash.com/collection/190727/1600x905">
<img src="https://source.unsplash.com/collection/190727/1600x906">
</div>
</div>
</section>
<!--contact-->
<section id="contact">
<div class="container">
<h1 class="title">contact me</h1>
<p class="lead">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris dignissim purus ac risus fermentum efficitur
</p>
<div class="contact">
<div>
<i class="fas fa-phone-alt"></i>
<p>
<a href="tel:+256702907">+256702907958</a>
</p>
</div>
<div>
<i class="fas fa-envelope-square"></i>
<p>
<a href="mailto:weptimug@gmail.com">something@gmail.com</a>
</p>
</div>
<div>
<i class="fab fa-whatsapp"></i>
<p>
<a href="#">whatsapp</a>
</p>
</div>
</div>
</div>
</section>
<!--footer-->
<footer id="main-footer">
<div class="footer">
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
</div>
<div class="copyright">
<p class="lead">copyright©2019</p>
</div>
</footer>
</body>
</html>/*ccs*/
* {
margin:0;
padding:0;
box-sizing:border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: 'Roboto', sans-serif;
font-size:1em;
background:#f8f8f8;
color:#222;
}
a {
color:#fff;
text-decoration:none;
}
i {
font-size:3em;
}
.container {
width:80%;
margin:auto;
}
.title {
color:#000;
text-transform: uppercase;
font-weight:400;
padding-bottom:0.5em;
text-align: center;
}
.lead {
font-size:1em;
}
/* end 0g global variables */
img {
width:100%;
}
#main-header {
height:100vh;
width:100%;
color:#fff;
background:linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0.4)), url('https://images.unsplash.com/photo-1463442263688-acc82a9611f8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60');
background-position:center;
background-size:cover;
background-repeat:no-repeat;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;
}
#main-header img {
height:auto;
width:15%;
border-radius:50%;
}
#main-header h1 {
font-weight:400;
text-transform:uppercase;
}
#main-header h3 {
font-weight:400;
}
.btn {
display:inline-block;
margin-top:10px;
background:transparent;
border:1px solid #eee;
padding:0.5em 1em;
transition:background 2s;
}
.btn:hover {
color:#222;
background:#f6f6f6;
border:none;
}
/* about */
#about .container{
padding:5em 0;
display:grid;
grid-gap:1em;
grid-template-columns: 2fr 2fr;
}
#about .lead {
margin-bottom: 0.5em;
}
#about img {
width:80%;
height: auto;
box-shadow: 2px 5px 5px #888;
}
progress {
width:100%;
background:lightgrey;
border-radius: 10px;
margin:.5em 0;
}
/* experiece */
#experience .container{
padding-bottom:5em;
display:grid;
grid-template-columns:1fr 1fr;
grid-gap:1em;
text-align:center;
}
#experience h3 {
text-align: center;
background:#555;
color:#eee;
}
#experience p {
padding:1em;
border:1px solid grey;
}
#services {
padding:5em 0;
background:#eee;
}
#services .lead {
text-align:center;
}
.services {
display:grid;
grid-template-columns:1fr 1fr 1fr;
grid-gap:1em;
text-align:center;
}
.services div{
padding:2em 0;
}
.services div p:hover {
background:#333;
color:#eee;
border:none;
}
.services div p {
border:1px solid #111;
padding:2em 1em;
}
.services div h3 {
background:#333;
color: #f8f8f8;
}
/*project*/
#project {
padding:5em 0;
}
.project{
display: block;
display:grid;
grid-template-columns:1fr 1fr 1fr;
grid-gap:1em;
}
#contact {
color:#f8f8f8;
background:linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)), url('https://images.pexels.com/photos/34225/spider-web-with-water-beads-network-dewdrop.jpg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940');
background-size:cover;
background-position:center;
background-repeat:no-repeat;
height:50vh;
display:flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align:center;
}
#contact h1 {
color:#f8f8f8;
padding-top: 1em;
}
#contact .lead {
text-align:center;
}
.contact {
text-allign:center;
display:grid;
grid-template-columns:1fr 1fr 1fr;
grid-gap:1em;
}
/*main-footer*/
#main-footer {
background:#222;
color: #eee;
}
.footer {
display:grid;
grid-gap: repeat(4,1fr);
}
i {
background:#eee;
}
/* media queies */
@media (max-width:500px) {
body {
overflow-x: hidden;
}
.container {
width:90%;
margin:auto;
}
#main-header {
height:50vh;
}
.lead {
font-size:0.9em;
}
#about .container {
grid-template-columns: 1fr;
padding:1em 0;
}
.title {
padding:0.3em 0;
}
#project {
padding:3em 0;
}
.project{
grid-template-columns:1fr;
}
#about img {
display: none;
}
#experience .container{
padding-bottom:3em;
grid-template-columns:1fr;
}
#experience .container{
padding-bottom:3em;
grid-template-columns:1fr;
}
/*services*/
.services {
grid-template-columns: 1fr;
}
#services {
padding:3em 0;
}
.services div{
padding:1em 0;
}
/*project*/
#project {
grid-template-columns: 1fr;
}
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.