Edit file File name : single-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="single-blog"> <div class="single-blog__container container"> <div class="single-blog__arrow-back" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="100"> <a href="#"><img src="./images/arrow-back.svg" alt="img"></a> </div> <div class="single-blog__title" > <time class="single-blog__flex" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="100"> <img src="./images/clock.png" alt="img">02 October, 2021 </time> <h2 data-aos="fade-up" data-aos-duration="1000" data-aos-delay="100"> Mobile & Web app for pipeline monitoring service </h2> <div class="single-blog__flex" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="100"> <img src="./images/pencil.png" alt="img"> James Franco </div> </div> <div class="single-blog__content"> <div class="single-blog__img" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="100"> <img src="./images/single-blog.jpg" alt="img"> </div> <div class="single-blog__text" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="100"> <p> Let’s do something a little different here. If you’re reading this, you’ve likely read my design hacks, perhaps my take on color theory, maybe even my 3,000 word article in which I design a single button. Today, I want to get even more in the weeds (what is WITH this guy?). </p> <p> We’re going to take an awful design and make it look good. At each step, I’m going to explain exactly why I’m doing what I’m doing. I’m going to give you techniques you can put into your design toolkit. </p> <p> The Before: from a homework assignment submitted by a student in Learn UI Design, my course on user interface design. With all due respect, it’s pretty nasty (the design, jury’s out on the course).<br> The After: What we’re going to build today.<br> Ready? Let’s dive right in. </p> <p> To answer the question some of you might be asking: why on Earth are you designing on an iPhone SE-sized screen!? I get it. iPhone X is huuuuge compared to the 320x568 screen here. But that’s exactly the point. It’s harder to make everything fit on a smaller screen, therefore, we’re going to start designing on a smaller screen. Scaling it up is easy, and scaling it down? Well, we don’t have to. </p> <p> Better, but not by all that much. So while fixing the colors is simple, fixing the typography is… not so simple. We’re going to need a little more work here. </p> <p> Now when I’m redesigning something like this, I’m going to be doing some analysis of the text styles in my head. But I’ll make it explicit for you. Watch what happens when I replace each piece of text with a description of its style. </p> </div> </div> </div> </section> <section class="grid-with-blogs"> <div class="grid-with-blogs__container container"> <div class="grid-with-blogs__title" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="100"> <h3>Similar topics</h3> </div> <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> </div> </div> </section> </main> <footer class="footer"> <div class="footer__container container"> <div class="footer__main"> <div class="footer__contact"> <div class="footer__address" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="100"> <a href="#"> <img class="lazy" data-src="./images/address.png" alt="img">San Jose, California </a> </div> <h2 data-aos="fade-up" data-aos-duration="1000" data-aos-delay="100"> Let's start something completely new together </h2> <p data-aos="fade-up" data-aos-duration="1000" data-aos-delay="100"> 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" 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" 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" 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" 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> </div> </div> <div class="footer__bottom" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="100"> <ul class="footer__social"> <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" 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