Skip to content

Instantly share code, notes, and snippets.

@gabriel-dehan

gabriel-dehan/fichier.html

Created June 19, 2017 14:51
Show Gist options
  • Save gabriel-dehan/61e71aca83c36bd3886b027750239357 to your computer and use it in GitHub Desktop.
Save gabriel-dehan/61e71aca83c36bd3886b027750239357 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
fichier.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" href="style.css"/>
<title>Portfolio</title>
</head>
<body>
<div class="contain">
<div class="welcome-wrapper">
<div class="welcome">
<header>
<div>
<ul class="lien-header">
<li><a href="#">About Me</a></li>
<li><a href="#">UI-UX Design</a></li>
<li><a href="#">Graphic Design</a></li>
<li><a href="#">Photography</a></li>
</ul>
</div>
</header>
<div class="decoration">
<img src="images/stars.png">
</div>
<h1 class="tagline"> <span class="head-line"> Hi ! </span> </br>
<span class="middle-line"> I’m </span> <span class="name"> Mélanie, </span></br>
<span class="tag-line"> UX UI Designer </span> <span class="location"> from Paris. </span>
</h1>
</div>
<div class="clouds">
<div class="signature">Mélanie Lancelle</div>
</div>
<div class="navigation">
<div class="circle-top-border">
<a class="circle-top" href="#"></a>
</div>
<div class="circle-top-border">
<a class="circle-two" href="#"></a>
</div>
<div class="circle-top-border">
<a class="circle-three" href="#"></a>
</div>
<div class="circle-top-border">
<a class="circle-four" href="#"></a>
</div>
<div class="circle-top-border">
<a class="circle-last" href="#"></a>
</div>
</div>
</div>
<div class="section-about-me">
<div id="container-line">
<div class="line"></div>
</div>
<div id="container-circle">
<div class="circle"></div>
</div>
<div class="about-me"> ABOUT ME </div>
<div class="presentation">
<img class="myface-illu" src="images/myface_illu.png">
<div class="info_container">
<div class="info-block">
<span class="info-block-title">
FULL NAME
</span>
<span class="info-block-content">
Mélanie Lancelle
</span>
<span class="info-block-title">
E-MAIL
</span>
<span class="info-block-content">
[email protected]
</span>
<span class="info-block-title">
PHONE NUMBER
</span>
<span class="info-block-content">
06-30-50-92-16
</span>
</div>
</div>
<div class="biography">
<div class="bold"> Hello, I’m Mélanie, <br> </div>
Since always I love to capture the most beautiful of what I see.
That is why I started my life by doing <div class="bold">photography.</div>
From thread to needle I therefore turned to <div class="bold">graphic and visual communication. <br></div>
Today from the top of my 26 years, I landed on the island of <div class="bold"> UX/UI Design.</div>
Which is today what I dedicate my passion towards.
Indeed creating beautiful and simple user experiences, that take the users' feelings into account is what I truly love.
</div>
</div>
</div>
<div>
<img class="pyramide-1" src="images/pyramides.png">
<img class="pyramide-2" src="images/pyramides.png">
<img class="pyramide-3" src="images/pyramides2.png">
</div>
<div>
<img class="pyramide-1-inverted" src="images/pyramides-inverted.png">
<img class="pyramide-2-inverted" src="images/pyramides-inverted.png">
<img class="pyramide-3-inverted" src="images/pyramides2-inverted.png">
</div>
</div>
<div class="project-container">
<div class="section-project1">
<div class="info-projet-container">
<div class="title-project1"> Betterlife </div>
<div> Betterlife is my personnal project about developpement personnal. </div>
<div>He is based on gamification and reward for to encourage the user.</div>
<div>The UI is inspirate of meteo application to give a UX more pleasant </div>
</div>
<div class="info-projet-container">
<img class="pictures-project1" src="images/image2.png">
</div>
<div class="info-projet-container">
<img class="pictures-project1" src="images/image1.png">
</div>
<div class="info-projet-container">
<img class="pictures-project1" src="images/wireframes-betterlife.png">
</div>
</div>
</div>
</body>
</html>
Raw
machin.css
.project-container {
background-color: #7a82c0;
}
.section-project1 {
width: 1040px;
margin: 0 auto;
flex-wrap: wrap;
}
.info-projet-container {
width: 500px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment