View file File name : blog.html Content :<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Blog page</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet"> <link rel="stylesheet" href="style.css"> </head> <body> <header class="header"> <div class="header__fader js-menu-close"></div> <div class="header__container container"> <div class="header__logo"> <a href="#"> <img src="./assets/img/logo.svg" alt="img"> </a> </div> <nav class="header__navigation"> <div class="header__close js-menu-close"><button></button></div> <ul class="header__menu"> <li> <a href="#">Leistungen</a> </li> <li> <a href="#">Über Uns</a> </li> <li> <a href="#">Blog</a> </li> <li> <a href="#">Karriere</a> </li> </ul> <div class="header__btns"> <a href="#" class="lang"><img src="./assets/img/icons/flag.svg" alt="img">EN</a> <a href="#" class="login">Login</a> <a href="#" class="btn">Termin vereinbaren</a> </div> </nav> <div class="header__burger burger js-menu-open"> <span></span> <span></span> <span></span> </div> </div> </header> <main> <section class="grid-with-categories"> <div class="grid-with-categories__container"> <div class="grid-with-categories__title container"> <h2>Unser Blog</h2> <h3>Kombiniertes Wissen aus mehr als 10.000 Experimenten</h3> </div> <div class="grid-with-categories__navigaton container"> <ul> <li class="grid-with-categories__nav-item grid-with-categories__nav-item--active"><a href="#">Alle Beiträge</a></li> <li class="grid-with-categories__nav-item"><a href="#">Strategy</a></li> <li class="grid-with-categories__nav-item"><a href="#">Design & UX</a></li> <li class="grid-with-categories__nav-item"><a href="#">Company News</a></li> <li class="grid-with-categories__nav-item"><a href="#">Data & Analytics</a></li> <li class="grid-with-categories__nav-item"><a href="#">Tools & Platforms</a></li> <li class="open-search"><a href="#"><img src="./assets/img/icons/search.svg" alt="img"> Suche</a></li> </ul> <div class="grid-with-categories__input open-search"> <div class="grid-with-categories__close"></div> <input type="text"> </div> </div> <div class="grid-with-categories__wrapper"> <div class="container"> <div class="grid-with-categories__grid"> <a href="#" class="category"> <div class="category__img"> <img src="./assets/img/categories/category1.png" alt="img"> </div> <div class="category__content"> <ul> <li>Strategy</li> <li>5 min Lesezeit</li> </ul> <h6>Advanced A/B-Testing für Unternehmen</h6> <p> Quis mauris tincidunt magna purus nunc, vitae diam blandit. Cursus etiam turpis arcu enim vel ipsum orci. </p> </div> </a> <a href="#" class="category"> <div class="category__img"> <img src="./assets/img/categories/category2.png" alt="img"> </div> <div class="category__content"> <ul> <li>Design & UX</li> <li>5 min Lesezeit</li> </ul> <h6>Warum deine A/B Tests dich Geld kosten</h6> <p> Quis mauris tincidunt magna purus nunc, vitae diam blandit. Cursus etiam turpis arcu enim vel ipsum orci. </p> </div> </a> <div class="grid-with-categories__list"> <h6><span>Beliebte Artikel</span></h6> <ul> <li> <a href="#"> <div class="grid-with-categories__list-img"> <img src="./assets/img/categories/list1.png" alt="img"> </div> <div class="grid-with-categories__list-content"> <p>Advanced A/B-Testing für Unternehmen</p> <span>Strategy </span> </div> </a> </li> <li> <a href="#"> <div class="grid-with-categories__list-img"> <img src="./assets/img/categories/list2.png" alt="img"> </div> <div class="grid-with-categories__list-content"> <p>Advanced A/B-Testing für Unternehmen</p> <span>Design & UX</span> </div> </a> </li> <li> <a href="#"> <div class="grid-with-categories__list-img"> <img src="./assets/img/categories/list3.png" alt="img"> </div> <div class="grid-with-categories__list-content"> <p>Advanced A/B-Testing für Unternehmen</p> <span>Data & Analytics</span> </div> </a> </li> <li> <a href="#"> <div class="grid-with-categories__list-img"> <img src="./assets/img/categories/list4.png" alt="img"> </div> <div class="grid-with-categories__list-content"> <p>Advanced A/B-Testing für Unternehmen</p> <span>Company News</span> </div> </a> </li> </ul> </div> <a href="#" class="category"> <div class="category__img"> <img src="./assets/img/categories/category3.png" alt="img"> </div> <div class="category__content"> <ul> <li>Company News</li> <li>5 min Lesezeit</li> </ul> <h6>Advanced A/B-Testing für Unternehmen</h6> <p> Quis mauris tincidunt magna purus nunc, vitae diam blandit. Cursus etiam turpis arcu enim vel ipsum orci. </p> </div> </a> <a href="#" class="category"> <div class="category__img"> <img src="./assets/img/categories/category4.png" alt="img"> </div> <div class="category__content"> <ul> <li>Data & Analytics</li> <li>5 min Lesezeit</li> </ul> <h6>Advanced A/B-Testing für Unternehmen</h6> <p> Quis mauris tincidunt magna purus nunc, vitae diam blandit. Cursus etiam turpis arcu enim vel ipsum orci. </p> </div> </a> <a href="#" class="category"> <div class="category__img"> <img src="./assets/img/categories/category5.png" alt="img"> </div> <div class="category__content"> <ul> <li>Strategy</li> <li>5 min Lesezeit</li> </ul> <h6>Advanced A/B-Testing für Unternehmen</h6> <p> Quis mauris tincidunt magna purus nunc, vitae diam blandit. Cursus etiam turpis arcu enim vel ipsum orci. </p> </div> </a> <a href="#" class="category"> <div class="category__img"> <img src="./assets/img/categories/category6.png" alt="img"> </div> <div class="category__content"> <ul> <li>Strategy</li> <li>5 min Lesezeit</li> </ul> <h6>Advanced A/B-Testing für Unternehmen</h6> <p> Quis mauris tincidunt magna purus nunc, vitae diam blandit. Cursus etiam turpis arcu enim vel ipsum orci. </p> </div> </a> <a href="#" class="category"> <div class="category__img"> <img src="./assets/img/categories/category7.png" alt="img"> </div> <div class="category__content"> <ul> <li>Strategy</li> <li>5 min Lesezeit</li> </ul> <h6>Advanced A/B-Testing für Unternehmen</h6> <p> Quis mauris tincidunt magna purus nunc, vitae diam blandit. Cursus etiam turpis arcu enim vel ipsum orci. </p> </div> </a> <a href="#" class="category"> <div class="category__img"> <img src="./assets/img/categories/category1.png" alt="img"> </div> <div class="category__content"> <ul> <li>Strategy</li> <li>5 min Lesezeit</li> </ul> <h6>Advanced A/B-Testing für Unternehmen</h6> <p> Quis mauris tincidunt magna purus nunc, vitae diam blandit. Cursus etiam turpis arcu enim vel ipsum orci. </p> </div> </a> </div> <div class="grid-with-categories__pagination"> <ul> <li class="active"><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">6</a></li> </ul> </div> </div> </div> </div> </section> <section class="text-with-numbers"> <div class="text-with-numbers__container container"> <div class="text-with-numbers__title"> <h2>Lass uns deinen Shop gemeinsam auf das nächste Level bringen.</h2> </div> <div class="text-with-numbers__btns"> <a href="#" class="btn btn--light">Email schreiben</a> <a href="#" class="btn">Termin vereinbaren</a> </div> <ul class="text-with-numbers__list"> <li> <div class="text-with-numbers__icon"> <img src="./assets/img/icons/tick.svg" alt="img"> </div> <div class="text-with-numbers__content"> <h6> <span class="count" akhi="1500">0</span>+ </h6> <p>abgeschlossene Tests</p> </div> </li> <li> <div class="text-with-numbers__icon"> <img src="./assets/img/icons/tick.svg" alt="img"> </div> <div class="text-with-numbers__content"> <h6> <span class="count" akhi="30"> 0 </span> Mio+ </h6> <p>Mehrumsatz pro Jahr</p> </div> </li> <li> <div class="text-with-numbers__icon"> <img src="./assets/img/icons/tick.svg" alt="img"> </div> <div class="text-with-numbers__content"> <h6> <span class="count" akhi="45">0</span>% </h6> <p>Winrate bei Tests</p> </div> </li> </ul> </div> </section> <section class="grid-cards-on-back"> <div class="grid-cards-on-back__back"> <img src="./assets/img/icons/back-dots.svg" alt="img"> </div> <div class="grid-cards-on-back__container container"> <div class="grid-cards-on-back__grid"> <div class="grid-cards-on-back__card"> <h6>Kontakt</h6> <ul> <li><a href="mailto:info@dripagency.de"><img src="./assets/img/social/mail.svg" alt="img">info@dripagency.de</a></li> <li><a href="+4915111435858"><img src="./assets/img/social/tel.svg" alt="img">+49 1511 1435858</a></li> <li><img src="./assets/img/social/calendar.svg" alt="img"><time>Termin vereinbaren</time> </li> </ul> </div> <div class="grid-cards-on-back__card"> <h6>Karriere</h6> <p> Wir sind immer auf der Suche nach motivierten Leuten für unser Team. Melde dich bei uns :) </p> <a href="#" class="btn">offene Stellen ansehen</a> </div> <div class="grid-cards-on-back__card"> <h6>LinkedIn</h6> <p> Wir sind immer auf der Suche nach motivierten Leuten für unser Team. Melde dich bei uns :) </p> <a href="#" class="btn">folge uns auf LinkedIn</a> </div> </div> </div> </section> </main> <footer class="footer"> <div class="footer__container container"> <div class="footer__logo-and-social"> <div class="footer__logo"> <a href="#"><img src="./assets/img/logo.svg" alt="img"></a> </div> <ul class="footer__social"> <li><a href="#"><img src="./assets/img/social/linkedin.svg" alt="img"></a></li> <li><a href="#"><img src="./assets/img/social/youtube.svg" alt="img"></a></li> </ul> </div> <div class="footer__lists"> <div class="footer__list"> <h6>UNTERNEHMEN</h6> <ul> <li> <a href="#">Über Uns</a> </li> <li> <a href="#">Karriere</a> </li> </ul> </div> <div class="footer__list"> <h6>Dienstleistung</h6> <ul> <li> <a href="#">Aktuelle A/B Tests</a> </li> <li> <a href="#">Services</a> </li> </ul> </div> <div class="footer__list"> <h6>Kontakt</h6> <ul> <li> <a href="#">Termin vereinbaren</a> </li> <li> <a href="#">Email schreiben</a> </li> </ul> </div> </div> </div> </footer> <script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@17.5.0/dist/lazyload.min.js"></script> <script src="js/main.js"></script> </body> </html>