API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Sep 22nd, 2018
98
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 15.54 KB | None | 0 0
raw download clone embed print report
  1.  
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5.     <title>Week 15</title>
  6.     <meta charset="utf-8">
  7.  
  8.     <link rel="stylesheet" href="style.css">
  9.     <link href='https://fonts.googleapis.com/css?family=Dosis:400,600,700' rel='stylesheet' type='text/css'>
  10.  
  11. </head>
  12. <body>
  13.  
  14.  
  15. <nav id="asideMenu">
  16.  
  17.         <button id="closeMenu"><img src="img/close.png" alt=""></button>
  18.  
  19.         <ul class="aside-menu">
  20.  
  21.             <li id="home">HOME</li>
  22.             <li id="aboutUs">WHO WE ARE</li>
  23.             <li id="services">SERVICES</li>
  24.             <li id="works">WORKS</li>
  25.             <li id="industries">INDUSTRIES</li>
  26.             <li id="news">NEWS</li>
  27.             <li id="contact">CONTACT</li>  
  28.  
  29.         </ul>
  30.        
  31. </nav>
  32.  
  33.  
  34.  
  35. <header class="page-header">
  36.  
  37.  
  38.     <div class="main-slider">
  39.  
  40.         <div class="slide active" id="slide1">
  41.             <h1>AGENCY</h1>
  42.             <h2>Slide 1</h2>
  43.             <hr class="header-hr">
  44.             <p>Maecenas suscipit imperdiet nisi ac hendrerit. Nam congue felis ac massa rutrum pulvinar. Donec sodales eros sed efficitur mattis. Integer tincidunt, felis a placerat maximus, eros nulla dapibus dui, at facilisis enim odio at velit. Aenean dictum eleifend mi sit amet luctus.</p>
  45.         </div>
  46.         <div class="slide" id="slide2">
  47.             <h1>AGENCY</h1>
  48.             <h2>Slide 2</h2>
  49.             <hr class="header-hr">
  50.             <p>Maecenas suscipit imperdiet nisi ac hendrerit. Nam congue felis ac massa rutrum pulvinar. Donec sodales eros sed efficitur mattis. Integer tincidunt, felis a placerat maximus, eros nulla dapibus dui, at facilisis enim odio at velit. Aenean dictum eleifend mi sit amet luctus.</p>
  51.         </div>
  52.         <div class="slide" id="slide3">
  53.             <h1>AGENCY</h1>
  54.             <h2>Slide 3</h2>
  55.             <hr class="header-hr">
  56.             <p>Maecenas suscipit imperdiet nisi ac hendrerit. Nam congue felis ac massa rutrum pulvinar. Donec sodales eros sed efficitur mattis. Integer tincidunt, felis a placerat maximus, eros nulla dapibus dui, at facilisis enim odio at velit. Aenean dictum eleifend mi sit amet luctus.</p>
  57.         </div>
  58.         <div class="slide" id="slide4">
  59.             <h1>AGENCY</h1>
  60.             <h2>Slide 4</h2>
  61.             <hr class="header-hr">
  62.             <p>Maecenas suscipit imperdiet nisi ac hendrerit. Nam congue felis ac massa rutrum pulvinar. Donec sodales eros sed efficitur mattis. Integer tincidunt, felis a placerat maximus, eros nulla dapibus dui, at facilisis enim odio at velit. Aenean dictum eleifend mi sit amet luctus.</p>
  63.         </div>
  64.         <div class="slide" id="slide5">
  65.             <h1>AGENCY</h1>
  66.             <h2>Slide 5</h2>
  67.             <hr class="header-hr">
  68.             <p>Maecenas suscipit imperdiet nisi ac hendrerit. Nam congue felis ac massa rutrum pulvinar. Donec sodales eros sed efficitur mattis. Integer tincidunt, felis a placerat maximus, eros nulla dapibus dui, at facilisis enim odio at velit. Aenean dictum eleifend mi sit amet luctus.</p>
  69.         </div>
  70.  
  71.     </div> <!-- // slide -->
  72.  
  73.     <div class="header-pic">
  74.        
  75.  
  76.         <div class="slider-pagination">
  77.            
  78.             <div class="slider-link activeSliderLink" id="link1"></div>
  79.             <div class="slider-link" id="link2"></div>
  80.             <div class="slider-link" id="link3"></div>
  81.             <div class="slider-link" id="link4"></div>
  82.             <div class="slider-link" id="link5"></div>
  83.  
  84.         </div>
  85.  
  86.     </div> <!-- // header-pic -->
  87.  
  88.     <div class="top-bar">
  89.  
  90.         <a href="index.html"><img src="img/logo.png" alt="" id="page-logo"></a>
  91.  
  92.         <button id="openMenu"><img src="img/hamburger.png" alt="" ></button>
  93.  
  94.         <nav>
  95.            
  96.             <ul class="main-menu">
  97.  
  98.                 <li id="home">HOME</li>
  99.                 <li id="aboutUs">WHO WE ARE</li>
  100.                 <li id="services">SERVICES</li>
  101.                 <li id="works">WORKS</li>
  102.                 <li id="industries">INDUSTRIES</li>
  103.                 <li id="news">NEWS</li>
  104.                 <li id="contact">CONTACT</li>
  105.  
  106.             </ul>
  107.  
  108.         </nav>
  109.  
  110.     </div>  <!-- // top bar -->
  111.  
  112.    
  113.     <div class="scroll-arrow-holder">
  114.  
  115.         <div class="scroll-arrow">
  116.            
  117.             <img src="img/down-arrow.png" alt="">
  118.  
  119.         </div> <!-- // scroll arrow -->
  120.  
  121.     </div> <!-- // scroll arrow holder -->
  122.  
  123. </header>
  124.  
  125.  
  126. <section id="clientsSection">
  127.    
  128.     <header>
  129.        
  130.         <p>OUR CLIENTS</p>
  131.         <a href="">View all</a>
  132.  
  133.     </header>
  134.  
  135.     <div class="companies">
  136.         <img src="img/comp1.png" alt="" class="company">
  137.         <img src="img/comp2.png" alt="" class="company">
  138.         <img src="img/comp3.png" alt="" class="company">
  139.         <img src="img/comp4.png" alt="" class="company">
  140.         <img src="img/comp5.png" alt="" class="company">
  141.         <img src="img/comp6.png" alt="" class="company">
  142.     </div>
  143.  
  144. </section> <!-- // clients -->
  145.  
  146.  
  147. <section id="aboutUsSection">
  148.  
  149.     <div class="content">
  150.    
  151.         <header class="section-header">
  152.            
  153.             <h3>HELLO</h3>
  154.             <h5>LOREM IPSUM SOLOR NOM NEEL</h5>
  155.             <hr class="section-hr">
  156.  
  157.         </header>
  158.  
  159.         <p>Curabitur et dapibus leo. Donec eleifend pharetra sem, et interdum nunc semper vel. Sed interdum magna eu faucibus faucibus.
  160.         Nulla varius faucibus arcu, eget aliquet tortor sollicitudin ut. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam sollicitudin felis quis varius porta. Donec sit amet diam a elit pulvinar pretium. </p>
  161.  
  162.         <button class="section-btn">SEE MORE ABOUT US</button>
  163.  
  164.     </div>
  165.  
  166. </section> <!--  // about us -->
  167.  
  168.  
  169. <section id="servicesSection">
  170.    
  171.     <div class="text-content">
  172.        
  173.         <header class="section-header">
  174.  
  175.             <h3>EXPERIENCE</h3>
  176.             <h5>ALL EXPERT DIGITAL SERVICES</h5>
  177.             <hr class="section-hr">
  178.  
  179.         </header>
  180.  
  181.         <p>Maecenas suscipit imperdiet nisi ac hendrerit. Nam congue felis ac massa rutrum pulvinar. Donec sodales eros sed efficitur mattis. Integer tincidunt, felis a placerat maximus, eros nulla dapibus dui.</p>
  182.  
  183.         <button class="section-btn">SEE OUR SERVICES</button>
  184.  
  185.     </div> <!-- // text-content -->
  186.    
  187.     <div class="services-panels">
  188.        
  189.         <div class="panels-row">
  190.             <div class="services-panel"><img src="img/comp-icon.png" alt="-"><p>WEBSITE DESIGN &amp; DEVELOPMENT</p></div>
  191.             <div class="services-panel"><img src="img/lock-icon.png" alt="-"><p>WEB SECURITY &amp; OPTIMIZATION</p></div>
  192.         </div> <!-- // panels row -->
  193.  
  194.         <div class="panels-row">
  195.             <div class="services-panel"><img src="img/paper-icon.png" alt="-"><p>DIGITAL MARKETING</p></div>
  196.             <div class="services-panel"><img src="img/opt-icon.png" alt="-"><p>CONVERSION OPTIMIZATION</p></div>
  197.         </div> <!-- // panels row -->
  198.  
  199.     </div> <!-- // services-panels -->
  200.  
  201.  
  202. </section> <!--  // services -->
  203.  
  204.  
  205. <section id="worksSection">
  206.  
  207.     <div class="recent-work">
  208.    
  209.         <header class="section-header">
  210.            
  211.             <h4>RECENT WORK</h4>
  212.             <hr class="section-hr">
  213.             <p>Donec sodales eros sed efficitur mattis. Integer tincidunt, felis a placerat maximus, eros nulla dapibus dui, at facilisis enim odio at velit. </p>
  214.  
  215.         </header>
  216.  
  217.         <div class="work-description">
  218.            
  219.             <p class="work-title">CustomerDomain.com</p>
  220.             <p>Donec lacus leo, vestibulum et erat eget, viverra posuere est. Maecenas dapibus mi erat. Duis egestas tempus leo, non euismod velit dictum eu. </p>
  221.  
  222.             <hr class="work-hr">
  223.  
  224.             <table class="work-detail">
  225.                
  226.                 <tr>
  227.                     <td>Client</td>
  228.                     <td>:</td>
  229.                     <td>Customer</td>
  230.                 </tr>
  231.  
  232.                 <tr>
  233.                     <td>Location</td>
  234.                     <td>:</td>
  235.                     <td>UK</td>
  236.                 </tr>
  237.  
  238.                 <tr>
  239.                     <td>Services</td>
  240.                     <td>:</td>
  241.                     <td>Search engine optimization</td>
  242.                 </tr>
  243.  
  244.                 <tr>
  245.                     <td>Website link</td>
  246.                     <td>:</td>
  247.                     <td><a href="">www.CustomerDomain.com</a></td>
  248.                 </tr>
  249.  
  250.             </table>
  251.  
  252.         </div> <!-- // work description -->
  253.  
  254.     </div> <!-- // recent work -->
  255.  
  256.     <div class="other-works">
  257.  
  258.         <div class="works-slider">
  259.        
  260.             <div class="works-set">
  261.  
  262.                 <div class="works-slide">
  263.                     <img src="img/work1.png" alt="Website logo">
  264.                     <div class="works-slide-hover">
  265.                         <img src="img/work1-hover.png" alt="Website logo">
  266.                         <p> <b>OpportunityNetwork.com</b> is the professional website which researches and develops innovation for organizations using a refreshing and simple approach.</p>
  267.                         <a href="">View details</a>
  268.                     </div>
  269.                 </div>
  270.  
  271.                 <div class="works-slide">
  272.                     <img src="img/work2.png" alt="Website logo">
  273.                     <div class="works-slide-hover">
  274.                         <img src="img/work2-hover.png" alt="Website logo">
  275.                         <p> <b>Ivivu.com</b> is the professional website which researches and develops innovation for organizations using a refreshing and simple approach.</p>
  276.                         <a href="">View details</a>
  277.                     </div>
  278.                 </div>
  279.  
  280.                 <div class="works-slide">
  281.                     <img src="img/work3.png" alt="Website logo">
  282.                     <div class="works-slide-hover">
  283.                         <img src="img/work3-hover.png" alt="Website logo">
  284.                         <p> <b>Futurethink.com</b> is the professional website which researches and develops innovation for organizations using a refreshing and simple approach.</p>
  285.                         <a href="">View details</a>
  286.                     </div>
  287.                 </div>
  288.  
  289.             </div> <!-- works set -->
  290.  
  291.             <div class="works-set active-set">
  292.  
  293.                 <div class="works-slide">
  294.                     <img src="img/discogs.png" alt="Website logo">
  295.                     <div class="works-slide-hover">
  296.                         <img src="img/discogs-hover.png" alt="Website logo">
  297.                         <p> <b>Discogs.com</b> is the professional website which researches and develops innovation for organizations using a refreshing and simple approach.</p>
  298.                         <a href="">View details</a>
  299.                     </div>
  300.                 </div>
  301.  
  302.                 <div class="works-slide">
  303.                     <img src="img/arseblog.png" alt="Website logo">
  304.                     <div class="works-slide-hover">
  305.                         <img src="img/arseblog-hover.png" alt="Website logo">
  306.                         <p> <b>Arseblog.com</b> is the professional website which researches and develops innovation for organizations using a refreshing and simple approach.</p>
  307.                         <a href="">View details</a>
  308.                     </div>
  309.                 </div>
  310.  
  311.                 <div class="works-slide">
  312.                     <img src="img/filmweb.png" alt="Website logo">
  313.                     <div class="works-slide-hover">
  314.                         <img src="img/filmweb-hover.png" alt="Website logo">
  315.                         <p> <b>Filmweb.com</b> is the professional website which researches and develops innovation for organizations using a refreshing and simple approach.</p>
  316.                         <a href="">View details</a>
  317.                     </div>
  318.                 </div>
  319.  
  320.             </div> <!-- works set -->
  321.  
  322.         </div> <!-- // works slider -->
  323.  
  324.         <div class="works-slider-nav">
  325.            
  326.             <div id="prev"><img src="img/left-arrow.png" alt=""></div>
  327.             <button>SHOW ALL</button>
  328.             <div id="next"><img src="img/right-arrow.png" alt=""></div>
  329.  
  330.         </div> <!-- // works-slider-nav -->
  331.  
  332.     </div> <!-- // other works -->
  333.  
  334. </section> <!--  // works -->
  335.  
  336.  
  337. <section id="industriesSection">
  338.  
  339.     <div class="content">
  340.    
  341.         <header class="section-header">
  342.            
  343.             <h3>WE FOCUS</h3>
  344.             <h5>ON KEY INDUSTRIES</h5>
  345.             <hr class="section-hr">
  346.  
  347.             <p>Donec nulla justo, pharetra in nulla in, lacinia pulvinar nunc rutrum nisi vel nib.</p>
  348.  
  349.         </header>
  350.  
  351.         <div class="industries-panel">
  352.             <img src="img/camera.png" alt="">
  353.             <p>DIGITAL MARKETING</p>
  354.         </div>
  355.  
  356.         <div class="industries-panel">
  357.             <img src="img/sport.png" alt="">
  358.             <p>SPORT &amp; ENTERTAINMENT</p>
  359.         </div>
  360.  
  361.         <div class="industries-panel">
  362.             <img src="img/health.png" alt="">
  363.             <p>HEALTH &amp; FITNESS</p>
  364.         </div>
  365.  
  366.         <div class="industries-panel">
  367.             <img src="img/law.png" alt="">
  368.             <p>LAW FIRMS AND REAL ESTATES</p>
  369.         </div>
  370.  
  371.         <div class="industries-panel">
  372.             <img src="img/pro.png" alt="">
  373.             <p>PROFFESIONAL SERVICES</p>
  374.         </div>
  375.  
  376.         <div class="industries-panel">
  377.             <img src="img/fashion.png" alt="">
  378.             <p>FASHION &amp; BEAUTY</p>
  379.         </div>
  380.  
  381.         <div class="industries-panel">
  382.             <img src="img/food.png" alt="">
  383.             <p>FOOD &amp; BEVERAGE</p>
  384.         </div>
  385.  
  386.         <div class="industries-panel">
  387.             <img src="img/games.png" alt="">
  388.             <p>GAMES &amp; COMICS</p>
  389.         </div>
  390.  
  391.         <div class="industries-panel">
  392.             <img src="img/travel.png" alt="">
  393.             <p>TRAVEL &amp; HOTELS</p>
  394.         </div>
  395.  
  396.         <div class="button-box">
  397.             <button class="section-btn orange-btn">SHOW ALL</button>
  398.         </div>
  399.  
  400.     </div> <!-- // content -->
  401.  
  402. </section> <!-- // industries section -->
  403.  
  404.  
  405. <section id="featureSection">
  406.  
  407.     <div class="img-holder">
  408.  
  409.         <img src="img/mockup-book.png" alt="Mockup Book">
  410.  
  411.     </div>
  412.    
  413.     <div class="text-content">
  414.    
  415.         <header class="section-header">
  416.            
  417.             <h3>FEATURE</h3>
  418.             <h5>ALL EXPERT DIGITAL SERVICES</h5>
  419.             <hr class="section-hr">
  420.  
  421.         </header>
  422.  
  423.         <p>Etiam vitae dui quis mi pharetra facilisis. Aenean volutpat nisi dui, vel tempus metus euismod in. Quisque vitae volutpat nulla. Curabitur cursus leo lacus, a ullamcorper augue iaculis vel. <br>
  424.         Cras in risus vitae leo feugiat lobortis euismod quis dui. Integer tempor urna quis quam volutpat, non consequat augue iaculis. Proin malesuada sem sagittis imperdiet rutrum. </p>
  425.  
  426.         <button class="section-btn">SEE MORE</button>
  427.         <button class="section-btn download-btn">DOWNLOAD</button>
  428.  
  429.     </div> <!-- // text-content -->
  430.  
  431. </section> <!-- // feature section -->
  432.  
  433. <section id="blogSection">
  434.    
  435.     <header class="section-header">
  436.        
  437.         <h4>RECENT BLOG</h4>
  438.         <hr class="section-hr">
  439.         <p>Donec nulla justo, pharetra in nulla in, lacinia pulvinar nunc. Nunc rutrum nisi vel nibh cursus, nec vestibulum orci feugiat.</p>
  440.  
  441.     </header>
  442.  
  443.     <div class="blog-box">
  444.        
  445.         <div class="blog-post">
  446.             <img src="img/post1.png" alt="Post picture">
  447.  
  448.             <header class="post-header">
  449.  
  450.                 <p class="post-title">Is there a hope for SEO profession?</p>
  451.                 <p class="post-author">Post by <b>Michał Milowicz</b></p>
  452.                 <hr class="post-hr">
  453.  
  454.             </header>
  455.  
  456.             <p>Donec nulla justo, pharetra in nulla in, lacinia pulvinar nunc. Nunc rutrum nisi vel nibh cursus, nec vestibulum orci feugiat. Nunc in luctus lacus. Integer eget dui nisi. Integer mauris lacus.</p>
  457.             <a href="">Read more</a>
  458.  
  459.         </div>
  460.  
  461.         <div class="blog-post">
  462.             <img src="img/post2.png" alt="Post picture">
  463.  
  464.             <header class="post-header">
  465.  
  466.                 <p class="post-title">Koala miś jest misiem austrlijskim</p>
  467.                 <p class="post-author">Post by <b>Michał Milowicz</b></p>
  468.                 <hr class="post-hr">
  469.  
  470.             </header>
  471.  
  472.             <p>Donec nulla justo, pharetra in nulla in, lacinia pulvinar nunc. Nunc rutrum nisi vel nibh cursus, nec vestibulum orci feugiat. Nunc in luctus lacus. Integer eget dui nisi. Integer mauris lacus.</p>
  473.             <a href="">Read more</a>
  474.  
  475.         </div>
  476.  
  477.         <div class="blog-post">
  478.             <img src="img/post3.png" alt="Post picture">
  479.  
  480.             <header class="post-header">
  481.  
  482.                 <p class="post-title">Precyzyjność jakbym kroczył po linie</p>
  483.                 <p class="post-author">Post by <b>Michał Milowicz</b></p>
  484.                 <hr class="post-hr">
  485.  
  486.             </header>
  487.  
  488.             <p>Donec nulla justo, pharetra in nulla in, lacinia pulvinar nunc. Nunc rutrum nisi vel nibh cursus, nec vestibulum orci feugiat. Nunc in luctus lacus. Integer eget dui nisi. Integer mauris lacus.</p>
  489.             <a href="">Read more</a>
  490.  
  491.         </div>
  492.  
  493.     </div>  <!-- // blog box -->
  494.  
  495.     <p class="load-more">+ LOAD MORE</p>
  496.  
  497. </section> <!-- // blog -->
  498.  
  499. <footer class="page-footer">
  500.    
  501.     <div class="footer-column">
  502.        
  503.         <p class="website-name">AGENCY CREATIVE</p>
  504.         <p class="copyright">&copy; 2015 k3nnyart. All rights reserved</p>
  505.         <a href="">PRIVACE POLICY</a>
  506.  
  507.     </div>
  508.  
  509.     <div class="footer-column">
  510.  
  511.         <header class="footer-header">
  512.             <p>ADDRESS</p>
  513.         </header>
  514.  
  515.         <p>ABC Agency Creative<br>
  516.         4111 Deer Haven Drive Greenville, SC 29601 <br>
  517.         Hours: Mon-Fri 9am - 6:00pm
  518.         </p>
  519.        
  520.     </div>
  521.  
  522.     <div class="footer-column">
  523.        
  524.         <header class="footer-header">
  525.             <p>GET IN TOUCH</p>
  526.         </header>
  527.  
  528.         <p>Tel: +1 234-567-890 <br>
  529.             Fax: +1 646-216-9789 <br>
  530.             Email: info@yourdomain.com
  531.         </p>
  532.  
  533.     </div>
  534.  
  535.     <div class="footer-column">
  536.        
  537.         <header class="footer-header">
  538.             <p>SUBSCRIBE TO OUR MAILING LIST</p>
  539.         </header>
  540.  
  541.         <form action="" id="newsletterForm">
  542.            
  543.             <input type="email" placeholder="Enter your email">
  544.             <button type="submit"><img src="img/mail.png" alt=""></button>
  545.  
  546.         </form>
  547.  
  548.     </div>
  549.  
  550. </footer>
  551.  
  552.  
  553.  
  554. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  555. <script src="main.js"></script>
  556. </body>
  557. </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!