Skip to content

Instantly share code, notes, and snippets.

@Alphabetus
Last active Dec 10, 2018
Embed
What would you like to do?
<!DOCTYPE html>
<html lang="eng">
<head>
<!-- charset def -->
<meta charset="utf-8">
<!-- make responsive -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- link css -->
<link rel="stylesheet" href="css/about_styles.css">
<!-- normalise css -->
<link rel="stylesheet" href="css/normalize.css">
<!-- title -->
<title>About me</title>
</head>
<body>
<section class="container">
<section class="header">
<h1>My header text</h1>
</section><!-- end of header -->
<section class="image column">
<span class="helper"></span>
<img src="img/webdev_01.png" alt="Web dev banner"/>
</section><!-- end of image -->
<section class="intro column">
<h2>About me</h2>
<p>
A passionated developer, my dedication and experience will help your team to achieve exactly what you are looking for. Among my wide offer, you will be able to find the perfect solution for your particular case, always with personalised treatment, active customer support and affordable fees.<br>
Scroll down to get to know me better and find my working history and associated customers.
</p>
</section><!-- end of intro -->
<section class="skill column">
<h2>My skills</h2>
<ul id="skill-list">
<li>
Full stack Wev development;
</li>
<li>
Web & Graphic design;
</li>
<li>
Android solutions;
</li>
</ul>
</section><!-- end of skill -->
<section class="main-text">
<h3>Get to know me better</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam lobortis enim neque. Proin venenatis porttitor purus, non volutpat quam aliquet quis. In varius purus ut nisl hendrerit feugiat. Donec mattis nibh accumsan magna ultrices vestibulum. Etiam at massa velit. Praesent at ultricies enim, eget congue ex. Praesent vitae erat non ligula rhoncus iaculis. Mauris quis quam nec tortor hendrerit viverra vel eu eros. Duis ullamcorper dui eu sem aliquet interdum. Aliquam venenatis, sapien at euismod tincidunt, nunc augue imperdiet libero, at tempus libero velit id ipsum. Nunc vitae nisi quis tortor vestibulum vulputate cursus et tortor. Cras in odio quis est ornare vulputate. Nulla a rhoncus sem, eget aliquam libero. Fusce et arcu sem. Cras vestibulum dapibus risus, ut rutrum arcu tempor sit amet.
</p>
</section><!-- end of main text -->
</section><!-- end of container -->
<section class="example">
</section><!-- end of example -->
</body>
<footer>
<a href="https://github.com/Alphabetus" target="_blank">GitHub</a> | <a href="mailto:dlgreis88@gmail.com">Diogo Gomes</a> <b>&copy;</b>2018
</footer>
</html>
/* about css */
* { box-sizing: border-box;}
.container{
margin: 0 auto;
width: 80%;
}
p{
text-align: justify;
}
.header h1{
text-align: center;
}
.column{
display: inline-block;
float: left;
width: 33%;
height: 50vh;
padding: 0 20px;
border-style: solid;
border-width: 0.5px;
border-color: lightblue;
border-radius: 5px;
}
.main-text{
padding: 60px 40px 60px 40px;
clear: both;
}
.helper {
display: inline-block;
height: 28%;
}
.image img{
width: 100%;
}
footer{
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-image: url("../img/background_01.jpg");
background-size: 100%;
background-repeat: no-repeat;
color: var(--text-header);
text-align: right;
padding: 0px 25px 0px 25px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment