API tools faq
paste
sriyanto

portfolio

sriyanto
Feb 8th, 2022 (edited)
588
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 7.08 KB | None | 0 0
raw download clone embed print report
  1. <body>
  2.     <header id="header-resume">
  3.  
  4.         <nav id="header-nav">
  5.             <ul type="none" class="text-center nav-menu">
  6.                 <li><a href="#">Home</a></li>
  7.                 <li><a href="#about-section">About</a></li>
  8.                 <li><a href="#skills">Skills</a></li>
  9.                 <li><a href="#favourites">Favourites</a></li>
  10.                 <li><a href="#education">Education</a></li>
  11.                 <li><a href="#portfolio">Portfolio</a></li>
  12.             </ul>
  13.         </nav>
  14.    
  15.         <div id="name-container">
  16.             <div id="myName" class="text-center">
  17.                 <h2>Super Man</h2>
  18.             </div>
  19.         </div>
  20.     </header>
  21.     <main>
  22.         <section id="about-section">
  23.             <div id="myPhoto" class="text-center">
  24.                 <img src="images/kid.jpg" alt="My Photo">
  25.             </div>
  26.             <div id="about-profile" class="text-center">
  27.                 <p>
  28.                     Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  29.                 </p>
  30.             </div>
  31.         </section>
  32.         <section id="skills">
  33.             <div class="section-heading text-center">
  34.                 <span>
  35.             <i class="fas fa-chalkboard-teacher"></i>
  36.         </span>
  37.         <span>SKILLS</span>
  38.             </div>
  39.             <div class="skills-display row">
  40.                 <div class="skill-progress col-3">
  41.                     <div class="fifty-percent blue skill-box">
  42.                         <div class="skill-name">
  43.                             <span> Painting </span>
  44.                         </div>
  45.                     </div>
  46.                 </div>
  47.                 <div class="skill-progress col-3">
  48.                     <div class="eighty-five-percent orange skill-box">
  49.                         <div class="skill-name">
  50.                             <span> Basketball </span>
  51.                         </div>
  52.                     </div>
  53.                 </div>
  54.  
  55.                
  56.                 <div class="skill-progress col-3">
  57.                     <div class="eighty-percent light-purple skill-box">
  58.                         <div class="skill-name">
  59.                             <span> Cricket </span>
  60.                         </div>
  61.                     </div>
  62.                 </div>
  63.                
  64.                 <div class="skill-progress col-3">
  65.                     <div class="fifty-percent teal skill-box">
  66.                         <div class="skill-name">
  67.                             <span> Drawing </span>
  68.                         </div>
  69.                     </div>
  70.                 </div>
  71.                 <div class="skill-progress col-3">
  72.                     <div class="fifty-percent blue skill-box">
  73.                         <div class="skill-name">
  74.                             <span> Cooking </span>
  75.                         </div>
  76.                     </div>
  77.                 </div>
  78.                 <div class="skill-progress col-3">
  79.                     <div class="eighty-percent light-purple skill-box">
  80.                         <div class="skill-name">
  81.                             <span> Playing an instrument </span>
  82.                         </div>
  83.                     </div>
  84.                 </div>
  85.  
  86.             </div>
  87.         </section>
  88.         <section id="favourites">
  89.             <div class="section-heading text-center">
  90.                 <span>
  91.                     <i class="fas fa-th-list"></i>
  92.                 </span>
  93.                 <span>My favourites</span>
  94.             </div>
  95.  
  96.             <div class="row text-center">
  97.                 <div class="col-2">
  98.                     <h3>My Favourite Sports</h3>
  99.                     <h4>Football</h4>
  100.                     <p>
  101.                         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  102.                     </p>
  103.                 </div>
  104.                 <div class="col-2">
  105.                     <img src="images/football.jpg">
  106.                 </div>
  107.             </div>
  108.  
  109.      
  110.             <div class="row text-center">
  111.                 <div class="col-2">
  112.                     <img src="images/book.jpg">
  113.                 </div>
  114.                 <div class="col-2">
  115.                     <h3>My Favourite Book</h3>
  116.                     <h4>IKGAI</h4>
  117.                     <p>
  118.                         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  119.                     </p>
  120.                     <p>
  121.                         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  122.                     </p>
  123.                 </div>
  124.             </div>
  125.         </section>
  126.         <section id="education">
  127.             <div class="section-heading text-center">
  128.                 <span>
  129.                     <i class="fas fa-th-list"></i>
  130.                 </span>
  131.                 <span>Education</span>
  132.             </div>
  133.             <div class="education-details text-center">
  134.                 <img src="images/education.jpg">
  135.                 <h3>School Name</h3>
  136.                 <p>
  137.                     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  138.                 </p>
  139.                 <p>
  140.                     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  141.                 </p>
  142.                 <p>
  143.                     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  144.                 </p>
  145.             </div>
  146.         </section>
  147.         <section id="portfolio">
  148.             <div class="section-heading text-center">
  149.                 <span>
  150.                     <i class="fas fa-th-list"></i>
  151.                 </span>
  152.                 <span>Portfolio</span>
  153.             </div>
  154.         <div class="portfolio-display row">
  155.                 <div class="portfolio-img col-3">
  156.                     <img src="images/portfolio1.jpg">
  157.                     <div class="portfolio-text">
  158.                         <p>Image 1</p>
  159.                     </div>
  160.                 </div>
  161.                 <div class="portfolio-img col-3">
  162.                     <img src="images/portfolio2.jpg">
  163.                     <div class="portfolio-text">
  164.                         <p>Image 2</p>
  165.                     </div>
  166.                 </div>
  167.                 <div class="portfolio-img col-3">
  168.                     <img src="images/portfolio3.jpg">
  169.                     <div class="portfolio-text">
  170.                         <p>Image 3</p>
  171.                     </div>
  172.                 </div>
  173.                 <div class="portfolio-img col-3">
  174.                     <img src="images/portfolio4.jpg">
  175.                     <div class="portfolio-text">
  176.                         <p>Image 4</p>
  177.                     </div>
  178.                 </div>
  179.                 <div class="portfolio-img col-3">
  180.                     <img src="images/portfolio5.jpg">
  181.                     <div class="portfolio-text">
  182.                         <p>Image 5</p>
  183.                     </div>
  184.                 </div>
  185.                 <div class="portfolio-img col-3">
  186.                     <img src="images/portfolio6.jpg">
  187.                     <div class="portfolio-text">
  188.                         <p>Image 6</p>
  189.                     </div>
  190.                 </div>
  191.             </div>
  192.      
  193.         </section>
  194.     </main>
  195. </body>
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!