API tools faq
paste
Advertisement
madis89

menu mobile HTML

madis89
May 19th, 2021 (edited)
1,139
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 7.78 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="pl">
  3.  
  4. <head>
  5.   <meta charset="utf-8">
  6.   <title>Front-end developer Maderka.pl</title>
  7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.   <meta name="description" content="Dzięki profesjonalne wykonanej stonie pozyskasz kijentów, zobacz dlaczego warto ze mną współpracować !!">
  9.   <meta name="keywords" content=" Portfolio, strony dynamiczne, Strony statyczne, profesjonalne strony www, Dla kijentów indywidualnych i biznesowych">
  10.   <link rel="preconnect" href="https://fonts.gstatic.com">
  11.   <link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;700&display=swap" rel="stylesheet">
  12.   <script src="https://kit.fontawesome.com/f12ec749b6.js" crossorigin="anonymous"></script>
  13.   <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
  14.   <link rel="icon" type="image/png" sizes="16x16" href="img/favicon.ico">
  15.   <link rel="stylesheet" href="css/reset.css">
  16.   <link rel="stylesheet" href="css/style.css">
  17. </head>
  18.  
  19. <body id="top">
  20.   <header class="topbar">
  21.     <h1 class="brand">www.maderka.pl</h1>
  22.     <nav>
  23.       <h2 class="hidden">główna nawigacja strony</h2>
  24.       <ul class="menu">
  25.         <li><a href="#top" onclick="menuMobile();">Strona główna</a></li>
  26.         <li><a href="#about" onclick="menuMobile();">O mnie</a></li>
  27.         <li><a href="#cooperation" onclick="menuMobile();">Współpraca</a></li>
  28.         <li><a href="#contact" onclick="menuMobile();">Kontakt</a></li>
  29.       </ul>
  30.       <button class="burger" onclick="menuMobile();">
  31.         <i class="fas fa-bars"></i>
  32.         <i class="fas fa-times close"></i>
  33.       </button>
  34.     </nav>
  35.   </header>
  36.   <aside class="banner">
  37.     <img src="img/1.jpg" alt="">
  38.     <img src="img/2.jpg" alt="">
  39.     <img src="img/3.jpg" alt="">
  40.     <h3>Animacja 1</h3>
  41.     <h3>Animaja 2</h3>
  42.     <h3>Animacja 3</h3>
  43.   </aside>
  44.   <main>
  45.     <section class="templates">
  46.       <header>
  47.         <h2>moje projekty</h2>
  48.         <div class="container">
  49.           <figure class="template">
  50.             <a href="img/template.jpg"><img src="img/template.jpg" alt=""></a>
  51.             <figcaption><a href="img/template.jpg">Zobacz szablon</a></figcaption>
  52.           </figure>
  53.           <figure class="template">
  54.             <a href="img/template.jpg"><img src="img/template.jpg" alt=""></a>
  55.             <figcaption><a href="img/template.jpg">Zobacz szablon</a></figcaption>
  56.           </figure>
  57.           <figure class="template">
  58.             <a href="img/template.jpg"><img src="img/template.jpg" alt=""></a>
  59.             <figcaption><a href="img/template.jpg">Zobacz szablon</a></figcaption>
  60.           </figure>
  61.           <figure class="template">
  62.             <a href="img/template.jpg"><img src="img/template.jpg" alt=""></a>
  63.             <figcaption><a href="img/template.jpg">Zobacz szablon</a></figcaption>
  64.           </figure>
  65.           <figure class="template">
  66.             <a href="img/template.jpg"><img src="img/template.jpg" alt=""></a>
  67.             <figcaption><a href="img/template.jpg">Zobacz szablon</a></figcaption>
  68.           </figure>
  69.           <figure class="template">
  70.             <a href="img/template.jpg"><img src="img/template.jpg" alt=""></a>
  71.             <figcaption><a href="img/template.jpg">Zobacz szablon</a></figcaption>
  72.           </figure>
  73.         </div>
  74.       </header>
  75.     </section>
  76.     <section class="about" id="about">
  77.       <header>
  78.         <h2>o mnie</h2>
  79.       </header>
  80.       <div class="container">
  81.         <figure class="myphoto">
  82.           <img src="img/photo.jpg" alt="Arkadiusz Madera">
  83.         </figure>
  84.         <article class="mydescription">
  85.           <h2 class="hidden">Najlepszy programista świata </h2>
  86.           <p>
  87.             Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias mollitia similique vitae quis tempora commodi excepturi ad totam, consectetur neque vel incidunt ullam expedita praesentium, voluptas id nisi aliquam odit quae consequuntur quod dolor
  88.             asperiores odio non. Culpa corporis explicabo debitis ipsa sit libero quas rerum quod repellendus quibusdam sint nisi id accusamus odit esse minus a, minima molestias omnis. Unde, ipsa nobis? Laudantium, iusto! Eum corrupti dolores quo consequatur,
  89.             ipsa iusto atque itaque tempora? Deleniti cupiditate fugiat sequi similique?
  90.           </p>
  91.         </article>
  92.       </div>
  93.     </section>
  94.     <section class="cooperations" id="cooperation">
  95.       <header>
  96.         <h2>Czego można ode mnie oczekiwać podczas Współpracy.</h2>
  97.       </header>
  98.       <div class="container">
  99.         <section class="cooperation">
  100.           <h2>Lorem, ipsum dolor.</h2>
  101.           <p>
  102.             Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellendus porro doloremque in delectus repellat debitis ipsum sapiente libero, et quis sint quod, cumque sed vel, optio ducimus voluptatum qui blanditiis!
  103.           </p>
  104.         </section>
  105.         <section class="cooperation">
  106.           <h2>Lorem, ipsum dolor.</h2>
  107.           <p>
  108.             Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ea, blanditiis tempore. Suscipit officia id error officiis omnis deleniti aliquid dicta explicabo temporibus eveniet. Magnam sunt exercitationem, suscipit dicta quibusdam tenetur!
  109.           </p>
  110.         </section>
  111.         <section class="cooperation">
  112.           <h2>Lorem, ipsum dolor.</h2>
  113.           <p>
  114.             Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quidem nisi, perferendis in repellat facilis laborum ratione ut tempore non aliquam, quos natus cupiditate nemo iusto, laudantium aperiam dolore voluptate soluta?
  115.           </p>
  116.         </section>
  117.         <section class="cooperation">
  118.           <h2>Lorem, ipsum dolor.</h2>
  119.           <p>
  120.             Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero, qui eos. Laboriosam tempora, magnam modi assumenda dignissimos perferendis ullam pariatur autem ipsa! Libero officiis fugiat quae nemo. Accusamus, architecto adipisci.
  121.           </p>
  122.         </section>
  123.         <section class="cooperation">
  124.           <h2>Lorem, ipsum dolor.</h2>
  125.           <p>
  126.             Oddaję doszlifowane projekty Nie cierpię fuszerki. Pracuję nad projektem tak długo, aż obydwoje będziemy usatysfakcjonowani. Jeśli pod czymś się podpisuję, to gwarantuję, że będzie to spełniać swoje zadanie.
  127.           </p>
  128.         </section>
  129.         <section class="cooperation">
  130.           <h2>Lorem, ipsum dolor.</h2>
  131.           <p>
  132.             Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione ipsam eaque perferendis accusamus veritatis facere enim optio ullam, eum provident, rem voluptatibus obcaecati doloremque laboriosam excepturi aliquam unde autem quis!
  133.           </p>
  134.         </section>
  135.       </div>
  136.     </section>
  137.     <section class="contact" id="contact">
  138.       <header>
  139.         <h2>Zapraszam do kontaktu w celu nawiązania owocnej współpracy.</h2>
  140.       </header>
  141.       <div class="form-contact">
  142.         <header>
  143.           <h2 class="hidden">Zapraszam do kontaktu w celu nawiązania owocnej współpracy.</h2>
  144.         </header>
  145.         <form action="#" method="POST">
  146.           <input type="text" name="firstname" placeholder="Wpisz swoje imię">
  147.           <input type="text" name="lastname" placeholder="Wpisz swoje imię">
  148.           <input type="email" name="email" placeholder="Wpisz swój email">
  149.           <textarea name="message" placeholder="Napisz domnie"></textarea>
  150.           <input type="submit" value="Wyślij wiadomość">
  151.         </form>
  152.       </div>
  153.     </section>
  154.     <footer class="footer">
  155.       <p>
  156.         Lorem ipsum dolor sit amet.
  157.       </p>
  158.     </footer>
  159.   </main>
  160.   <script src="js/jquery.js"></script>
  161.   <script src="js/stickyfill.js"></script>
  162.   <script src="js/code.js"></script>
  163. </body>
  164.  
  165. </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!