Edit file File name : blog-page.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>Home 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=Roboto:wght@700&display=swap" rel="stylesheet"> <link rel="stylesheet" href="style.css"> <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> </head> <body> <header class="header"> <div class="header__fader js-menu-close"></div> <div class="header__container container"> <div class="header__logo"> <a href="#"> <div class="header__logo-img"> <img src="./assets/img/logo.svg" alt="logo"> </div> <div class="header__logo-animation"> <div class="cube-box"> <div class="cube"> <div class="header__logo-front"> <h6>slick</h6> </div> <div class="header__logo-top"> <h6>scroll up</h6> </div> </div> </div> </div> </a> </div> <nav class="header__nav"> <div class="header__nav-close js-menu-close"> <button></button> </div> <ul class="header__menu"> <li> <a href="#">Services</a> </li> <li> <a href="#">Works</a> </li> <li> <a href="#">Blog</a> </li> <li> <a href="#">About</a> </li> <li> <a href="#">Approach</a> </li> <li> <a href="#">Team</a> </li> </ul> <div class="header__btn"> <a href="#fixed-form" class="btn btn--purple open-touch">Get in touch</a> </div> </nav> <div class="header__btns"> <div class="header__btn-for-mob"> <button class="btn btn--purple open-touch">Get in touch</button> </div> <div class="header__burger burger js-menu-open"> <div class="burger__line"></div> <div class="burger__line"></div> <div class="burger__line"></div> </div> </div> </div> </header> <main> <section class="hero hero--on-back"> <div class="hero__container container"> <div class="hero__text"> <ul class="hero__date-author" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="100"> <li>James Franco</li> <li><time>02 October, 2021</time></li> </ul> <h1 data-aos="fade-up" data-aos-duration="1000" data-aos-delay="100">We make digital<br> slick products all around the world <img src="./images/racket.png" alt="img"> <img src="./images/stars.png" alt="img"> </h1> <p data-aos="fade-up" data-aos-duration="1000" data-aos-delay="100">We will choose a designer who will guide the whole design process in your company </p> <div class="hero__btns" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="100"> <a href="#" class=" btn btn--purple">Read Details</a> </div> </div> <div class="hero__img" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="100"> <img src="./images/blog.jpg" alt="img"> </div> </div> </section> <section class="grid-with-blogs"> <div class="grid-with-blogs__container container"> <div class="grid-with-blogs__grid"> <a href="#" class="blog" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="100"> <div class="blog__img"> <img class="lazy" data-src="./images/blog1.jpg" alt="img"> </div> <div class="blog__content"> <ul class="blog__date-author"> <li>James Franco</li> <li><time>02 October, 2021</time></li> </ul> <h5>Mobile & Web app for pipeline monitoring Service </h5> <p>Our partnership means close collaboration with you and your teams, experiencing multiple </p> <div class="blog__more"> Read Details </div> </div> </a> <a href="#" class="blog" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="200"> <div class="blog__img"> <img class="lazy" data-src="./images/blog2.jpg" alt="img"> </div> <div class="blog__content"> <ul class="blog__date-author"> <li>James Franco</li> <li><time>02 October, 2021</time></li> </ul> <h5>Yoreevo - Real Estate <br> Mobile & Web </h5> <p>Our partnership means close collaboration with you and your teams, experiencing multiple </p> <div class="blog__more"> Read Details </div> </div> </a> <a href="#" class="blog" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="300"> <div class="blog__img"> <img class="lazy" data-src="./images/blog1.jpg" alt="img"> </div> <div class="blog__content"> <ul class="blog__date-author"> <li>James Franco</li> <li><time>02 October, 2021</time></li> </ul> <h5>Mobile & Web app for pipeline monitoring Service </h5> <p>Our partnership means close collaboration with you and your teams, experiencing multiple </p> <div class="blog__more"> Read Details </div> </div> </a> <a href="#" class="blog" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="100"> <div class="blog__img"> <img class="lazy" data-src="./images/blog1.jpg" alt="img"> </div> <div class="blog__content"> <ul class="blog__date-author"> <li>James Franco</li> <li><time>02 October, 2021</time></li> </ul> <h5>Mobile & Web app for pipeline monitoring Service </h5> <p>Our partnership means close collaboration with you and your teams, experiencing multiple </p> <div class="blog__more"> Read Details </div> </div> </a> <a href="#" class="blog" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="200"> <div class="blog__img"> <img class="lazy" data-src="./images/blog2.jpg" alt="img"> </div> <div class="blog__content"> <ul class="blog__date-author"> <li>James Franco</li> <li><time>02 October, 2021</time></li> </ul> <h5>Yoreevo - Real Estate <br> Mobile & Web </h5> <p>Our partnership means close collaboration with you and your teams, experiencing multiple </p> <div class="blog__more"> Read Details </div> </div> </a> <a href="#" class="blog" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="300"> <div class="blog__img"> <img class="lazy" data-src="./images/blog1.jpg" alt="img"> </div> <div class="blog__content"> <ul class="blog__date-author"> <li>James Franco</li> <li><time>02 October, 2021</time></li> </ul> <h5>Mobile & Web app for pipeline monitoring Service </h5> <p>Our partnership means close collaboration with you and your teams, experiencing multiple </p> <div class="blog__more"> Read Details </div> </div> </a> <a href="#" class="blog" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="100"> <div class="blog__img"> <img class="lazy" data-src="./images/blog1.jpg" alt="img"> </div> <div class="blog__content"> <ul class="blog__date-author"> <li>James Franco</li> <li><time>02 October, 2021</time></li> </ul> <h5>Mobile & Web app for pipeline monitoring Service </h5> <p>Our partnership means close collaboration with you and your teams, experiencing multiple </p> <div class="blog__more"> Read Details </div> </div> </a> <a href="#" class="blog" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="200"> <div class="blog__img"> <img class="lazy" data-src="./images/blog2.jpg" alt="img"> </div> <div class="blog__content"> <ul class="blog__date-author"> <li>James Franco</li> <li><time>02 October, 2021</time></li> </ul> <h5>Yoreevo - Real Estate <br> Mobile & Web </h5> <p>Our partnership means close collaboration with you and your teams, experiencing multiple </p> <div class="blog__more"> Read Details </div> </div> </a> <a href="#" class="blog" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="300"> <div class="blog__img"> <img class="lazy" data-src="./images/blog1.jpg" alt="img"> </div> <div class="blog__content"> <ul class="blog__date-author"> <li>James Franco</li> <li><time>02 October, 2021</time></li> </ul> <h5>Mobile & Web app for pipeline monitoring Service </h5> <p>Our partnership means close collaboration with you and your teams, experiencing multiple </p> <div class="blog__more"> Read Details </div> </div> </a> </div> <div class="grid-with-blogs__load-more" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="100"> <p>You’ve seen 12 out of 30 news</p> <div class="grid-with-blogs__progress"> <div class="grid-with-blogs__progress-line" style="--progress: 30%"></div> </div> <div class="grid-with-blogs__btn"> <a href="#" class="btn btn--black btn--with-img">Load More <div class="btn__img"><img class="lazy" data-src="./images/btn.svg" alt="img"></div> </a> </div> </div> </div> </section> </main> <footer class="footer"> <div class="footer__container container"> <div class="footer__main"> <div class="footer__contact"> <div class="footer__address aos-init aos-animate" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="100"> <a href="#"> <img class="lazy" data-src="./images/address.png" alt="img" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==">San Jose, California </a> </div> <h2 data-aos="fade-up" data-aos-duration="1000" data-aos-delay="100" class="aos-init aos-animate"> Let's start something completely new together </h2> <p data-aos="fade-up" data-aos-duration="1000" data-aos-delay="100" class="aos-init aos-animate"> Drop us a line, and we'll get in touch.<br> We'll see if we're a match and how we can help each other. </p> <div class="footer__references aos-init aos-animate" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="100"> <a href="mailto:hi@slick.studio"> <span>Email</span> hi@slick.studio </a> <a href="mailto:hi@slick.studio"> <span>Calendly</span> book a meeting </a> </div> <a href="#" class="btn btn--purple open-touch aos-init aos-animate" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="100">Get in touch</a> </div> <div class="fixed-form" id="fixed-form"> <div class="fixed-form__wrapper"> <div class="fixed-form__close aos-init aos-animate" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="100"> <h3>Let's start something <br> completely new together</h3> <button class="close-touch"></button> </div> <div class="fixed-form__form aos-init aos-animate" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="100"> <form action="#"> <div class="field fixed-form__form-filed"> <input type="text" placeholder="Name"> </div> <div class="field fixed-form__form-filed"> <input type="email" placeholder="Email"> </div> <div class="field fixed-form__form-filed fixed-form__form-filed--full-width"> <textarea placeholder="Lil about you or your company"></textarea> </div> <div class="fixed-form__form-filed fixed-form__form-filed--full-width"> <p>Est. Budget</p> <div class="fixed-form__radio"> <input type="radio" id="choice1" name="contact" checked=""> <label for="choice1">$5k - $20k</label> <input type="radio" id="choice2" name="contact"> <label for="choice2">$20k - $50k</label> <input type="radio" id="choice3" name="contact"> <label for="choice3">$50k - $100k</label> <input type="radio" id="choice4" name="contact"> <label for="choice4">$100k+</label> </div> </div> <div class="fixed-form__form-filed fixed-form__form-filed--full-width"> <button class="btn btn--purple">Submit</button> </div> </form> </div> <div class="temp-form"> <div role="form" class="wpcf7" id="wpcf7-f6-o1" lang="en-US" dir="ltr"> <div class="screen-reader-response"><p role="status" aria-live="polite" aria-atomic="true"></p> <ul></ul></div> <form action="/blog/#wpcf7-f6-o1" method="post" class="wpcf7-form init" novalidate="novalidate" data-status="init"> <div style="display: none;"> <input type="hidden" name="_wpcf7" value="6"> <input type="hidden" name="_wpcf7_version" value="5.5.3"> <input type="hidden" name="_wpcf7_locale" value="en_US"> <input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f6-o1"> <input type="hidden" name="_wpcf7_container_post" value="0"> <input type="hidden" name="_wpcf7_posted_data_hash" value=""> </div> <div class="fixed-form__radio"> <span class="wpcf7-form-control-wrap radio-522"><span class="wpcf7-form-control wpcf7-radio"><span class="wpcf7-list-item first"><label><input type="radio" name="radio-522" value="Test1" checked="checked"><span class="wpcf7-list-item-label">Test1</span></label></span><span class="wpcf7-list-item"><label><input type="radio" name="radio-522" value="Test2"><span class="wpcf7-list-item-label">Test2</span></label></span><span class="wpcf7-list-item"><label><input type="radio" name="radio-522" value="Test3"><span class="wpcf7-list-item-label">Test3</span></label></span><span class="wpcf7-list-item last"><label><input type="radio" name="radio-522" value="Test4"><span class="wpcf7-list-item-label">Test4</span></label></span></span></span> </div> <p><input type="submit" value="Submit" class="wpcf7-form-control has-spinner wpcf7-submit"><span class="wpcf7-spinner"></span></p> <div class="wpcf7-response-output" aria-hidden="true"></div></form></div> </div> </div> </div> </div> <div class="footer__bottom"> <ul class="footer__social aos-init aos-animate" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="100"> <li> <a href="#">Dribbble</a> </li> <li> <a href="#">Behance</a> </li> <li> <a href="#">Insragram</a> </li> <li> <a href="#">Linkedin</a> </li> </ul> <div class="footer__copyright aos-init aos-animate" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="100"> <p>All Rights Reserved</p> <p>© Slick studio 2021</p> </div> </div> </div> </footer> <div class="feedback-from"> <div class="feedback-from__container"> <div class="feedback-from__icon"> <img src="./images/tick.svg" alt="img"> </div> <span>Thanks for reaching out</span> <div class="feedback-from__close"><button></button></div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> <script src="js/main.js"></script> </body> </html>Save