API tools faq
paste
ernasjobs

index.html

ernasjobs
Oct 9th, 2019
89
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 7.68 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  5.     <link rel="stylesheet" type="text/css" href="css/main.css">
  6.     <title>Learn Bootstrap</title>
  7. </head>
  8. <body>
  9.     <!-- Navigation section -->
  10. <nav class="navbar navbar-expand-lg fixed-top ">  
  11.      <a class="navbar-brand active" href="#">Home</a>
  12.     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">  
  13.      <span class="navbar-toggler-icon"></span>
  14.     </button>
  15.     <div class="collapse navbar-collapse " id="navbarSupportedContent">
  16.         <ul class="navbar-nav mr-4">
  17.          
  18.           <li class="nav-item">
  19.             <a class="nav-link" data-value="about" href="#about">About</a>
  20.           </li>
  21.           <li class="nav-item">
  22.             <a class="nav-link " data-value="portfolio" href="#portfolio">Portfolio</a>
  23.           </li>
  24.           <li class="nav-item">
  25.             <a class="nav-link " data-value="blog" href="#blog">Blog</a>
  26.           </li>
  27.           <li class="nav-item">
  28.             <a class="nav-link " data-value="team" href="#team">
  29.             Team</a>
  30.           </li>
  31.           <li class="nav-item">
  32.             <a class="nav-link " data-value="contact" href="#contact">Contact</a>
  33.           </li>
  34.         </ul>
  35.        
  36.       </div>
  37. </nav>
  38. <!-- Header section -->
  39. <header class="header">
  40.     <div class="overlay"></div>
  41.     <div class="container">
  42.         <div class="description">
  43.             <h1>Hello ,Welcome To My official Website
  44.              <p> cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>  
  45.             <button class="btn btn-outline-secondary btn-lg">See more</button>   </h1>  
  46.         </div>
  47.     </div>
  48. </header>
  49. <!-- About section -->
  50. <div class="about" id="about">
  51.         <div class="container">
  52.             <h2 class="text-center">About</h1>
  53.           <div class="row">
  54.                 <div class="col-lg-4 col-md-4 col-sm-12">
  55.                     <img src="images/member.png" class="img-fluid">
  56.                     <span class="text-justify">S.Web Developer</span>
  57.                      
  58.                 </div>
  59.  
  60.                 <div class="col-lg-8 col-md-8 col-sm-12 desc">
  61.                     <h3>D.John</h3>
  62.                     <p>
  63.                        ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  64.                      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  65.                      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  66.                      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  67.                      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  68.                      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  69.                     </p>
  70.                 </div>
  71.          </div>
  72.     </div>
  73. </div>
  74. <!-- Portfolio section -->
  75. <div class="portfolio" id="portfolio">
  76.     <div class="container">
  77.         <h1 class="text-center">Portfolio</h2>
  78.         <div class="row">
  79.             <div class="col-lg-4 col-md-4 col-sm-12">
  80.                 <img  class="img-fluid" src="images/portofolio/port1.jpg"> 
  81.             </div>
  82.             <div class="col-lg-4 col-md-4 col-sm-12">
  83.                 <img class="img-fluid" src="images/portofolio/port2.jpg">  
  84.             </div>
  85.             <div class="col-lg-4 col-md-4 col-sm-12">
  86.                 <img class="img-fluid" src="images/portofolio/port3.png">  
  87.             </div>
  88.             <div class="col-lg-4 col-md-4 col-sm-12">
  89.                 <img class="img-fluid" src="images/portofolio/port4.jpg">
  90.             </div>
  91.             <div class="col-lg-4 col-md-4 col-sm-12">
  92.                 <img  class="img-fluid"src="images/portofolio/port5.jpg">  
  93.             </div>
  94.             <div class="col-lg-4 col-md-4 col-sm-12">
  95.                 <img class="img-fluid" src="images/portofolio/port6.jpg">          
  96.             </div> 
  97.         </div> 
  98.     </div>
  99. </div>
  100. <!-- Posts section -->
  101. <div class="blog" id="blog">
  102.     <div class="container">
  103.     <h1 class="text-center">Blog</h1>
  104.         <div class="row">
  105.             <div class="col-lg-4 col-md-4 col-sm-12">
  106.                 <div class="card">
  107.                     <div class="card-img">
  108.                         <img src="images/posts/post1.jpg" class="img-fluid">   
  109.                     </div >
  110.                     <div class="card-body">
  111.                         <h4 class="card-title">Post Title</h4>
  112.                         <p class="card-text">proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  113.                     </div>
  114.                     <div class="card-footer">
  115.                         <a href="#" class="card-link">Read More</a>
  116.                     </div> 
  117.                 </div>
  118.             </div>
  119.             <div class="col-lg-4 col-md-4 col-sm-12">
  120.                 <div class="card">
  121.                     <div class="card-img">
  122.                         <img src="images/posts/post2.png" class="img-fluid">   
  123.                     </div >
  124.                     <div class="card-body">
  125.                         <h4 class="card-title">Post Title</h4>
  126.                         <p class="card-text">proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  127.                     </div>
  128.                     <div class="card-footer">
  129.                         <a href="#" class="card-link">Read More</a>
  130.                     </div> 
  131.                 </div>
  132.             </div>
  133.             <div class="col-lg-4 col-md-4 col-sm-12">
  134.                 <div class="card">
  135.                     <div class="card-img">
  136.                         <img src="images/posts/post3.png" class="img-fluid">   
  137.                     </div >
  138.                     <div class="card-body">
  139.                         <h4 class="card-title">Post Title</h4>
  140.                         <p class="card-text">proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  141.                     </div>
  142.                     <div class="card-footer">
  143.                         <a href="#" class="card-link">Read More</a>
  144.                     </div> 
  145.                 </div>
  146.             </div>
  147.  
  148.  
  149.            
  150.         </div>
  151.        
  152.     </div>
  153.    
  154. </div>
  155. <!--Team Section -->
  156. <div class="team" id="team">
  157.     <div class="container">
  158.         <h1 class="text-center">Our Team </h1>
  159.         <div class="row">
  160.             <div class="col-lg-3 col-md-3 col-sm-12 item">
  161.                 <img src="images/team/team1.png" class="img-fluid" alt="team">
  162.                 <div class="des">
  163.                     Sara
  164.                 </div>
  165.                 <span class="text-muted">Manager</span>
  166.             </div>
  167.             <div class="col-lg-3 col-md-3 col-sm-12 item">
  168.                 <img src="images/team/team2.jpg" class="img-fluid" alt="team">
  169.                 <div class="des">
  170.                     Chris
  171.                 </div>
  172.                 <span class="text-muted">S.Engineer</span>
  173.             </div>
  174.             <div class="col-lg-3 col-md-3 col-sm-12 item">
  175.                 <img src="images/team/team3.jpg" class="img-fluid" alt="team">
  176.                 <div class="des">
  177.                     Layla
  178.                 </div>
  179.                 <span class="text-muted">Front End Developer</span>
  180.             </div>
  181.             <div class="col-lg-3 col-md-3 col-sm-12 item">
  182.                 <img src="images/team/team4.jpg" class="img-fluid" alt="team">
  183.                 <div class="des">
  184.                     Danile
  185.                 </div>
  186.                 <span class="text-muted">Director</span>
  187.             </div>
  188.         </div>
  189.     </div> 
  190. </div>
  191. <!-- Contact form -->
  192. <div class="contact-form" id="contact">
  193.     <div class="container">
  194.         <form>
  195.             <div class="row">
  196.                 <div class="col-lg-4 col-md-4 col-sm-12">
  197.                     <h1>Get in touch</h1>
  198.                 </div>
  199.                 <div class="col-lg-8 col-md-8 col-sm-12 right">
  200.                     <div class="form-group">
  201.                         <input type="text" class="form-control form-control-lg" placeholder="Your name" name="">
  202.                     </div>
  203.                     <div class="form-group">
  204.                         <input type="email" class="form-control form-control-lg" placeholder="[email protected]" name="email">
  205.                     </div>
  206.                     <div class="form-group">
  207.                         <textarea class="form-control form-control-lg"></textarea>
  208.                     </div>
  209.                     <input type="submit" class="btn btn-secondary btn-block" value="Send" name="">
  210.                 </div>
  211.                
  212.             </div>
  213.         </form>
  214.     </div>
  215.    
  216. </div>
  217.  
  218. <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  219. <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  220. <script type="text/javascript" src='js/main.js'></script>
  221.  
  222. </body>
  223. </html>
Advertisement
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!