API tools faq
paste
Advertisement
jrothra

JLR New Design HTML

jrothra
Apr 2nd, 2017
385
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 8.61 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en-US">
  3.    <head>
  4.       <meta charset="utf-8">
  5.       <title>Dr. John L. Rothra | Resume and Blog</title>
  6.       <link rel="stylesheet" href="css/style.css">
  7.       <link href="https://fonts.googleapis.com/css?family=Libre+Baskerville:400,400i|Montserrat:200,400,400i,700,700i" rel="stylesheet">
  8.    </head>
  9.    <body>
  10.  
  11. <!-- HEADER & HERO AREA -->
  12.       <header id="hero-area">
  13.          <div id="nav-bar">
  14.             <img src="img/svg/JR-Logo-White.svg" id="logo"><img src="img/svg/Menu-Hamburger-white.svg" id="hamburger">
  15.          </div>
  16.          <div id="hero-name-area">
  17.             <h1>John L. Rothra</h1>
  18.          </div>
  19.          <div id="hero-blurb-area">
  20.             Observations and analysis of faith and society
  21.          </div>
  22.          <div id="hero-arrow-area">
  23.             <img src="img/svg/Down-Arrow-white.svg" id="down-arrow">
  24.          </div>
  25.       </header>
  26.  
  27. <!-- MAIN BODY -->
  28.       <div id="main-body">
  29.  
  30. <!-- My Story Section -->
  31.          <div id="fp-my-story">
  32.             <h2>My Story</h2>
  33.             <p class="fp-body-text">On social media I describe myself as an author, speaker, blogger, bassist, and huge Buffalo Bills fan.</p>
  34.             <p class="fp-body-text">There's more to me, though, than just skills and interests.</p>
  35.             <p><a href="#" class="white-button">Read More</a></p>
  36.          </div>
  37.  
  38. <!-- Latest Blog Section -->
  39.          <div id="fp-blogroll">
  40.             <h2>Lastest Articles</h2>
  41.             <div class="blogroll-flexbox">
  42. <!-- Blogroll Start -->
  43.                <div class="blog-post">
  44.                   <div class="entry-thumb">
  45.                      <a href="#" title="blog post thumbnail"><img src="img/BooksandGirl.jpg" alt="alt description" /></a>
  46.                   </div>
  47.                   <h4 class="entry-title"><a href="#" title="title">Blog Title Appears Right Here in This Location and is a Link</a></h4>
  48.                   <div class="entry-summary">
  49.                      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pharetra dignissim augue, gravida aliquam purus tristique vel.</p>
  50.                   </div>
  51.                </div>
  52.                <div class="blog-post">
  53.                   <div class="entry-thumb">
  54.                      <a href="#" title="blog post thumbnail"><img src="img/BooksandGirl.jpg" alt="alt description" /></a>
  55.                   </div>
  56.                   <h4 class="entry-title"><a href="#" title="title">Blog Title Appears Right Here in This Location and is a Link</a></h4>
  57.                   <div class="entry-summary">
  58.                      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pharetra dignissim augue, gravida aliquam purus tristique vel.</p>
  59.                   </div>
  60.                </div>
  61.                <div class="blog-post">
  62.                   <div class="entry-thumb">
  63.                      <a href="#" title="blog post thumbnail"><img src="img/BooksandGirl.jpg" alt="alt description" /></a>
  64.                   </div>
  65.                   <h4 class="entry-title"><a href="#" title="title">Blog Title Appears Right Here in This Location and is a Link</a></h4>
  66.                   <div class="entry-summary">
  67.                      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pharetra dignissim augue, gravida aliquam purus tristique vel.</p>
  68.                   </div>
  69.                </div>
  70.                <div class="blog-post">
  71.                   <div class="entry-thumb">
  72.                      <a href="#" title="blog post thumbnail"><img src="img/BooksandGirl.jpg" alt="alt description" /></a>
  73.                   </div>
  74.                   <h4 class="entry-title"><a href="#" title="title">Blog Title Appears Right Here in This Location and is a Link</a></h4>
  75.                   <div class="entry-summary">
  76.                      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pharetra dignissim augue, gravida aliquam purus tristique vel.</p>
  77.                   </div>
  78.                </div>
  79.                <div class="blog-post">
  80.                   <div class="entry-thumb">
  81.                      <a href="#" title="blog post thumbnail"><img src="img/BooksandGirl.jpg" alt="alt description" /></a>
  82.                   </div>
  83.                   <h4 class="entry-title"><a href="#" title="title">Blog Title Appears Right Here in This Location and is a Link</a></h4>
  84.                   <div class="entry-summary">
  85.                      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pharetra dignissim augue, gravida aliquam purus tristique vel.</p>
  86.                   </div>
  87.                </div>
  88.                <div class="blog-post">
  89.                   <div class="entry-thumb">
  90.                      <a href="#" title="blog post thumbnail"><img src="img/BooksandGirl.jpg" alt="alt description" /></a>
  91.                   </div>
  92.                   <h4 class="entry-title"><a href="#" title="title">Blog Title Appears Right Here in This Location and is a Link</a></h4>
  93.                   <div class="entry-summary">
  94.                      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pharetra dignissim augue, gravida aliquam purus tristique vel.</p>
  95.                   </div>
  96.                </div>            
  97. <!-- Blogroll End -->
  98.             </div>
  99.             <a href="#" class="blue-button">Visit the Blog Archive</a>              
  100.          </div>
  101.  
  102. <!-- YouTube Featured Vid Section -->
  103.          <div id="fp-youtube">
  104.             <h2>Latest Videos</h2>
  105.             <div id="youtube-flexbox">
  106.                <div class="video-container">
  107.                   <iframe width="1280" height="720" src="http://www.youtube.com/embed?max-results=1&controls=1&showinfo=0&rel=0&listType=user_uploads&list=jrothra" frameborder="0" allowfullscreen></iframe>
  108.                </div>
  109.                <div class="video-container">
  110.                   <iframe width="1280" height="720" src="https://www.youtube.com/embed/__b7hjTGsYg" frameborder="0" allowfullscreen></iframe>
  111.                </div>
  112.                <div class="video-container">
  113.                   <iframe width="1280" height="720" src="http://www.youtube.com/embed?max-results=1&controls=1&showinfo=0&rel=0&listType=user_uploads&list=jrothra" frameborder="0" allowfullscreen></iframe>
  114.                </div>
  115.                <div class="video-container">
  116.                   <iframe width="1280" height="720" src="https://www.youtube.com/embed/__b7hjTGsYg" frameborder="0" allowfullscreen></iframe>
  117.                </div>
  118.             </div>
  119.             <a href="#" target="_blank" class="white-button">View John's Channel</a>
  120.          </div>
  121. <!-- YouTube End -->
  122.       </div>
  123.  
  124. <!-- FOOTER -->
  125.       <footer>
  126.          <div id="footer-container">
  127.             <div id="footer-flexbox">
  128.                <div class="footer-area">
  129.                   <h3>Contact</h3>
  130.                   <div class="footer-content">
  131.                      <p class="footer-content-contact"><img class="footer-contact-icons" src="img/svg/Twitter-bird-white.svg" alt="Tweet John" /> @jrothra</p>
  132.                      <p class="footer-content-contact"><img class="footer-contact-icons" src="img/svg/mail-white.svg" alt="Email John" /> jrothra@gmail.com</p>
  133.                      <p class="footer-content-contact"><img class="footer-contact-icons" src="img/svg/smart-phone.svg" alt="Text John" /> 916-459-2459</p>
  134.                   </div>
  135.                </div>
  136.  
  137.                <div class="footer-area">
  138.                   <h3>Follow Me</h3>
  139.                   <div class="footer-content">
  140.                      <img class="footer-social-icons" src="img/svg/Twitter-white.svg">
  141.                      <img class="footer-social-icons" src="img/svg/Facebook-white.svg">
  142.                      <img class="footer-social-icons" src="img/svg/LinkedIn-white.svg">
  143.                      <img class="footer-social-icons" src="img/svg/YouTube-white.svg">
  144.                      <img class="footer-social-icons" src="img/svg/Google-white.svg">
  145.                      <img class="footer-social-icons" src="img/svg/Instagram-white.svg">
  146.                   </div>
  147.                </div>
  148.  
  149.                <div class="footer-area">
  150.                   <h3>Recommended</h3>
  151.                   <p>John Rothra proudly uses Leaver &amp; Co. web hosting.</p>
  152.                   <a href="http://www.mediaserve.com/aff.php?aff=017"><img src="img/LeaverCo-Light.png" alt="Leaver and Company web hosting" /></a>
  153.                </div>
  154.             </div>
  155.             <div id="copyright">
  156.                   Copyright &copy; 2006-<?php echo date("Y"); ?> John L. Rothra. All Rights Reserved.
  157.             </div>
  158.          </div>
  159.       </footer>
  160.    </body>
  161. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!