SHARE
TWEET

Untitled

a guest Jun 19th, 2017 169 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8"/>
  5.         <link rel="stylesheet" href="style.css"/>
  6.         <title>Portfolio</title>
  7.     </head>
  8.     <body>
  9.         <div class="contain">
  10.             <div class="welcome-wrapper">
  11.                 <div class="welcome">
  12.                     <header>
  13.                         <div>
  14.                             <ul class="lien-header">
  15.                                 <li><a href="#">About Me</a></li>
  16.                                 <li><a href="#">UI-UX Design</a></li>
  17.                                 <li><a href="#">Graphic Design</a></li>
  18.                                 <li><a href="#">Photography</a></li>
  19.                             </ul>
  20.                         </div>
  21.                     </header>
  22.                     <div class="decoration">
  23.                         <img src="images/stars.png">
  24.                     </div>
  25.                     <h1 class="tagline"> <span class="head-line"> Hi ! </span> </br>
  26.                         <span class="middle-line"> I’m </span> <span class="name"> Mélanie, </span></br>
  27.                         <span class="tag-line"> UX UI Designer </span> <span class="location"> from Paris. </span>
  28.                     </h1>
  29.                 </div>
  30.                 <div class="clouds">
  31.                     <div class="signature">Mélanie Lancelle</div>
  32.                 </div>
  33.                
  34.                 <div class="navigation">
  35.                     <div class="circle-top-border">
  36.                         <a class="circle-top" href="#"></a>
  37.                     </div>
  38.                     <div class="circle-top-border">
  39.                         <a class="circle-two" href="#"></a>
  40.                     </div>
  41.                     <div class="circle-top-border">
  42.                         <a class="circle-three" href="#"></a>
  43.                     </div>
  44.                     <div class="circle-top-border">
  45.                         <a class="circle-four" href="#"></a>
  46.                     </div>
  47.                     <div class="circle-top-border">
  48.                         <a class="circle-last" href="#"></a>
  49.                     </div>
  50.                 </div>
  51.             </div>
  52.            
  53.         <div class="section-about-me">
  54.             <div id="container-line">
  55.                 <div class="line"></div>
  56.             </div>
  57.             <div id="container-circle">
  58.                 <div class="circle"></div>
  59.             </div>
  60.             <div class="about-me"> ABOUT ME </div>
  61.             <div class="presentation">
  62.                 <img class="myface-illu" src="images/myface_illu.png">
  63.                 <div class="info_container">
  64.                     <div class="info-block">
  65.                         <span class="info-block-title">
  66.                             FULL NAME
  67.                         </span>
  68.                         <span class="info-block-content">
  69.                             Mélanie Lancelle
  70.                         </span>
  71.  
  72.                         <span class="info-block-title">
  73.                             E-MAIL
  74.                         </span>
  75.                         <span class="info-block-content">
  76.                             lancelle.melanie@gmail.com
  77.                         </span>
  78.                         <span class="info-block-title">
  79.                             PHONE NUMBER
  80.                         </span>
  81.                         <span class="info-block-content">
  82.                             06-30-50-92-16
  83.                              </span>
  84.                     </div>
  85.                     </div>
  86.                     <div class="biography">
  87.                             <div class="bold"> Hello, I’m Mélanie, <br> </div>
  88.                             Since always I love to capture the most beautiful of what I see.
  89.                             That is why I started my life by doing <div class="bold">photography.</div>
  90.                             From thread to needle I therefore turned to <div class="bold">graphic and visual communication. <br></div>
  91.                             Today from the top of my 26 years,  I landed on the island of <div class="bold"> UX/UI Design.</div>
  92.                             Which is today what I dedicate my passion towards.
  93.                             Indeed creating beautiful and simple user experiences, that take the users' feelings into account is what I truly love.
  94.                         </div>
  95.                     </div>
  96.                 </div> 
  97.  
  98.                 <div>
  99.                     <img class="pyramide-1" src="images/pyramides.png">
  100.                     <img class="pyramide-2" src="images/pyramides.png">
  101.                     <img class="pyramide-3" src="images/pyramides2.png">
  102.                 </div>
  103.                 <div>
  104.                     <img class="pyramide-1-inverted" src="images/pyramides-inverted.png">
  105.                     <img class="pyramide-2-inverted" src="images/pyramides-inverted.png">
  106.                     <img class="pyramide-3-inverted" src="images/pyramides2-inverted.png">
  107.                 </div>
  108.             </div>
  109.  
  110.             <div class="project-container">
  111.                     <div class="section-project1">
  112.                     <div class="info-projet-container">
  113.                         <div class="title-project1"> Betterlife </div>
  114.                         <div> Betterlife is my personnal project about developpement personnal. </div>
  115.                         <div>He is based on gamification and reward for to encourage the user.</div>
  116.                         <div>The UI is inspirate of meteo application to give a UX more pleasant </div>
  117.                     </div>
  118.                     <div class="info-projet-container">
  119.                         <img class="pictures-project1" src="images/image2.png">
  120.                     </div>
  121.                     <div class="info-projet-container">
  122.                         <img class="pictures-project1" src="images/image1.png">
  123.                     </div>
  124.                     <div class="info-projet-container">
  125.                         <img class="pictures-project1" src="images/wireframes-betterlife.png">
  126.                     </div>
  127.                 </div>
  128.             </div>
  129.     </body>
  130. </html>
RAW Paste Data
Top