API tools faq
paste
Advertisement
Asterian

Cubahtml

Asterian
Oct 25th, 2018
134
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 10.58 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>Cuba</title>
  5.     <meta charset="utf-8">
  6.     <link rel="stylesheet" type="text/css" href="reset.css">
  7.     <link rel="stylesheet" type="text/css" href="style.css">
  8.     <link href="https://fonts.googleapis.com/css?family=Titillium+Web:300,400,400i,700" rel="stylesheet">
  9. </head>
  10. <body>
  11.  
  12. <!-- **************************************** SECTION 1 **************************************** -->
  13. <!-- **************************************** SECTION 1 **************************************** -->
  14. <!-- **************************************** SECTION 1 **************************************** -->
  15.  
  16.     <header>
  17.         <div class="header">
  18.         <img src="img/logo2.png">
  19.         <nav class="menu">
  20.             <ul>
  21.                 <li><a href="#">HOME</a></li>
  22.                 <li><a href="#">ABOUT</a></li>
  23.                 <li><a href="#">WORK</a></li>
  24.                 <li><a href="#">BLOG</a></li>
  25.                 <li><a href="#">CONTACT</a></li>
  26.             </ul>
  27.         </nav>
  28.         <h1>
  29.             Hi there! We are the new kids on the block<br>
  30.             and we build awesome wesites and mobile apps.
  31.         </h1>
  32.         <div class="submitwork">
  33.             <input type="submit" name="workwithus" value="WORK WITH US!"></div>
  34.         </div>
  35.     </header>
  36.  
  37. <!-- **************************************** SECTION 2 **************************************** -->
  38. <!-- **************************************** SECTION 2 **************************************** -->
  39. <!-- **************************************** SECTION 2 **************************************** -->
  40.  
  41.     <section class="servicesprovide">
  42.     <div class="containerservices">
  43.         <h2>SERVICES WE PROVIDE</h2>
  44.         <hr class="onehr">
  45.         <h3>We are working with both individuals and businesses from all over the globe<br>to create awesome websites and applications </h3>
  46.         <div class="containersection2">
  47.             <ul>
  48.                 <li>
  49.                     <img src="img/branding.png">
  50.                     <h4>BRANDING</h4>
  51.                     <p>Lorem ipsum dolor sit amet,<br> consectetur adipisicing elit,<br>sed diam nonummy nibn.</p>
  52.                 </li>
  53.                 <li>
  54.                     <img src="img/design.png">
  55.                     <h4>DESIGN</h4>
  56.                     <p>Sed ut perspiciatis unde<br>omnis iste natus error sit<br>voluptatem.</p>
  57.                 </li>
  58.                 <li>
  59.                     <img src="img/development.png">
  60.                     <h4>DEVELOPMENT</h4>
  61.                     <p>At vero oes et accuasamus et<br>iusto odio dignissimos qui<br>blanditiis praesentium.</p>
  62.                 </li>
  63.                 <li>
  64.                     <img src="img/rocket.png">
  65.                     <h4>ROCKET SCIENCE</h4>
  66.                     <p>Et harum quidem return est<br>et expedita distinctio.Nam<br>liberotempore.</p>
  67.                 </li>
  68.             </ul>
  69.         </div>
  70.     </div></section>
  71.  
  72. <!-- **************************************** SECTION 3 **************************************** -->
  73. <!-- **************************************** SECTION 3 **************************************** -->
  74. <!-- **************************************** SECTION 3 **************************************** -->
  75.  
  76.     <section class="meetoutbeautiful">
  77.         <div class="containermeetou">
  78.             <h5>MEET OUT BEAUTIFUL TEAM</h5>
  79.             <hr class="toohr">
  80.             <p>We are a small tea of designers and developers , who help brands with big ideas</p>
  81.             <div class="containersection3">
  82.                 <ul>
  83.                     <li>
  84.                         <div></div>
  85.                         <h5 class="name">ANNE HATHAWAY</h5>
  86.                         <h6>CEO / Marketing Guru</h6>
  87.                         <p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna.</p>
  88.                         <a href="#"><img src="img/facebookicon.png"></a>
  89.                         <a href="#"><img src="img/tvittericon.png"></a>
  90.                         <a href="#"><img src="img/inicon.png"></a>
  91.                         <a href="#"><img src="img/mailicon.png"></a>                   
  92.                     </li>
  93.                     <li>
  94.                         <div></div>
  95.                         <h5 class="name">KATE UPTOM</h5>
  96.                         <h6>Creative Director</h6>
  97.                         <p>Duis aute irure dolor in in voluptate velit esse cillum dolore fugiat nulla pariatur. Excepteur sint occaecat non diam proident.</p>
  98.                         <a href="#"><img src="img/tvittericon.png"></a>
  99.                         <a href="#"><img src="img/inicon.png"></a>
  100.                         <a href="#"><img src="img/mailicon.png"></a>
  101.                     </li>
  102.                     <li>
  103.                         <div></div>
  104.                         <h5 class="name">OLIVIA WILDE</h5>
  105.                         <h6>Lead Designer</h6>
  106.                         <p>Nemo enim ipsam voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem nesciunt.</p>
  107.                         <a href="#"><img src="img/facebookicon.png"></a>
  108.                         <a href="#"><img src="img/tvittericon.png"></a>
  109.                         <a href="#"><img src="img/inicon.png"></a>
  110.                         <a href="#"><img src="img/mailicon.png"></a>
  111.                     </li>
  112.                     <li>
  113.                         <div></div>
  114.                         <h5 class="name">ASHLEY GREENE</h5>
  115.                         <h6>SEO / Developer</h6>
  116.                         <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
  117.                         <a href="#"><img src="img/facebookicon.png"></a>
  118.                         <a href="#"><img src="img/tvittericon.png"></a>
  119.                         <a href="#"><img src="img/mailicon.png"></a>
  120.                     </li>
  121.                 </ul>
  122.             </div>
  123.         </div>
  124.     </section>
  125.  
  126. <!-- **************************************** SECTION 4 **************************************** -->
  127. <!-- **************************************** SECTION 4 **************************************** -->
  128. <!-- **************************************** SECTION 4 **************************************** -->
  129.  
  130.     <section class="wegotskills">
  131.         <h5>WE GOT SKILLS!</h5>
  132.         <hr>
  133.         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod<br> tempor incididunt ut labore et dolore magna aliqua</p>
  134.         <table>
  135.             <tr>
  136.                 <td>
  137.                     <div class="pictograma1">
  138.                         <div class="firstpart1">95%</div>
  139.                         <div class="secondypart1"></div>
  140.                         <div class="thirdypart1"></div>
  141.                     </div>
  142.                     <text class="pictogramatext">WEB DESIGN</text>
  143.                 </td>
  144.                 <td>
  145.                     <div class="pictograma2">
  146.                         <div class="firstpart2">75%</div>
  147.                         <div class="secondypart2"></div>
  148.                         <div class="thirdypart2"></div>
  149.                     </div>
  150.                     <text class="pictogramatext">HTML / CSS</text>
  151.                 </td>
  152.                 <td>
  153.                     <div class="pictograma3">
  154.                         <div class="firstpart3">70%</div>
  155.                         <div class="secondypart3"></div>
  156.                         <div class="thirdypart3"></div>
  157.                     </div>
  158.                     <text class="pictogramatext">GRAPHIC DESIGN</text>
  159.                 </td>
  160.                 <td>
  161.                     <div class="pictograma4">
  162.                         <div class="firstpart4">85%</div>
  163.                         <div class="secondypart4"></div>
  164.                         <div class="thirdypart4"></div>
  165.                     </div>
  166.                     <text class="pictogramatext">UI / UX</text>
  167.                 </td>
  168.             </tr>
  169.         </table>
  170.     </section>
  171.  
  172. <!-- **************************************** SECTION 5 **************************************** -->
  173. <!-- **************************************** SECTION 5 **************************************** -->
  174. <!-- **************************************** SECTION 5 **************************************** -->
  175.  
  176.     <section class="portfolio">
  177.         <div class="containerportfolio">
  178.             <h5>OUR PORTFOLIO</h5>
  179.             <hr>
  180.             <p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet<br>consectetur, adipisci velit, sed quia non numquam</p>
  181.             <div class="containerullportfol">
  182.                 <ul>
  183.                     <li><input type="submit" name="All" value="ALL"></li>
  184.                     <li><input type="submit" name="WEB" value="WEB"></li>
  185.                     <li><input type="submit" name="APPS" value="APPS"></li>
  186.                     <li><input type="submit" name="ICONS" value="ICONS"></li>
  187.                 </ul>
  188.             </div>
  189.             <table>
  190.                 <tr>
  191.                     <td><img src="img/isometrik.png"><p>ISOMETRIC PERSPECTIVE MOCK-UP</p></td>
  192.                     <td><img src="img/timezone.png"><p>TIME ZONE APP UL</p></td>
  193.                 </tr>
  194.  
  195.                 <tr>
  196.                     <td><img src="img/viromedia.png"><p>VIRO MEDIA PLAYERS UL</p></td>
  197.                     <td><img src="img/blog.png"><p>BLOG / MAGAZINE FLAT UI KIT</p></td>
  198.                 </tr>
  199.             </table>
  200.             <input type="submit" name="loadmorepr" value="LOAD MORE PROJECTS">
  201.         </div>
  202.     </section>
  203.  
  204.     <!-- **************************************** SECTION 6 **************************************** -->
  205.     <!-- **************************************** SECTION 6 **************************************** -->
  206.     <!-- **************************************** SECTION 6 **************************************** -->
  207.  
  208.  
  209.     <section class="reviews">
  210.         <div class="containerreviews">
  211.             <h5>WHAT POEPLE SAY ABOUT US</h5>
  212.             <hr>
  213.             <h6>Our clients love us!</h6>
  214.             <table>
  215.                 <tr>
  216.                     <td>
  217.                         <div></div>
  218.                         <p>“Nullam dapibus blandit orci, viverra<br>gravida dui lobortis eget. Maecenas<br>fringilla urna eu nisl scelerisque.“</p>
  219.                         <h5>CHANEL IMAN</h5>
  220.                         <h6>CEO of Pinterest</h6>
  221.                     </td>
  222.                     <td>
  223.                         <div></div>
  224.                         <p>“Vivamus luctus urna sed urna ultricies<br>ac tempor dui sagittis. In condimentum<br>facilisis porta.”</p>
  225.                         <h5>ADRIANA LIMA</h5>
  226.                         <h6>Founder of Instagram</h6>
  227.                     </td>
  228.                 </tr>
  229.                 <tr>
  230.                     <td>
  231.                         <div></div>
  232.                         <p>“Vivamus luctus urna sed urna ultricies<br>ac tempor dui sagittis. In condimentum<br>facilisis porta.”</p>
  233.                         <h5>ANNE HATHAWAY</h5>
  234.                         <h6>Lead Designer at Behance</h6>
  235.                     </td>
  236.                     <td>
  237.                         <div></div>
  238.                         <p>“Phasellus non purus vel arcu tempor<br>commodo. Fusce semper, purus vel luctus<br>molestie, risus sem cursus neque.”</p>
  239.                         <h5>EMMA STONE</h5>
  240.                         <h6>Co-Founder of Shazam</h6>
  241.                     </td>
  242.                 </tr>
  243.             </table>
  244.         </div>
  245.     </section>
  246.  
  247.     <!-- **************************************** SECTION 7 **************************************** -->
  248.     <!-- **************************************** SECTION 7 **************************************** -->
  249.     <!-- **************************************** SECTION 7 **************************************** -->
  250.  
  251.     <section class="getintouch">
  252.         <div class="containergetintocuh">
  253.             <h5>GET IN TOUCH</h5>
  254.             <hr>
  255.             <h6>1600 Pennsylvania Ave NW, Washington, DC 20500, United States of America. Tel: (202) 456-1111</h6>
  256.             <form>
  257.                 <input type="text" name="name" placeholder="Your Name" class="name">
  258.                 <input type="text" name="email" placeholder="Your Email" class="email"><br>
  259.                 <textarea class="message" placeholder="Your Message"></textarea><br>
  260.                 <input type="submit" name="send" value="SEND MESSAGE" class="submit">
  261.             </form>
  262.         </div>
  263.     </section>
  264.     <!-- **************************************** SECTION 8 **************************************** -->
  265.     <!-- **************************************** SECTION 8 **************************************** -->
  266.     <!-- **************************************** SECTION 8 **************************************** -->
  267.     <footer>
  268.         <div class="footer">
  269.             <div class="contakt">
  270.                 <ul>
  271.                     <li><a href="#">Facebook</a></li>
  272.                     <li><a href="#">Twitter</a></li>
  273.                     <li><a href="#">Google+</a></li>
  274.                     <li><a href="#">Linkedln</a></li>
  275.                     <li><a href="#">Behance</a></li>
  276.                     <li><a href="#">Dribbble</a></li>
  277.                     <li><a href="#">GitHub</a></li>
  278.                 </ul>
  279.             </div>
  280.         </div>
  281.     </footer>
  282. </body>
  283. </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!