refactoredenter.html

{% load static %}

<div class="container-main">
    <div>
        <img class="center-image" src="../static/images/brands.png" alt="">
    </div>
    <div class="container-inner">
        <div class="left">
            <h3 class="title-heading">
                What are Favicons?
            </h3>
            <p class="center-p">
                Favicons are the little icons that appear next to the webpage title in a browser tab to represent
                a website or web page.
                It serves as a visual identifier for users to spot your website around the web.
            </p>
        </div>
        <div class='right'>
            <div class="empty">
                <div class="flex-image">
                    <img class="center-image1" id="flex-1" src="../static/images/Group 144.png" alt=""></img>
                    <img class="center-image2" id="flex-2" src="../static/images/Group 144.png" alt=""></img>
                    <img class="center-image3" id="flex-3" src="../static/images/Group 144.png" alt=""></img>
                </div>
            </div>
        </div>
    </div>
    <div class="container-inner-center">
        <p class="center-p2 down" id='how-it-works'>
            The easiest way to get and use a favicon for your website
        </p>
    </div>
    <div class="container-inner">
        <div class='right'>
            <div class="empty">
                <img class="center-image" src="../static/images/Image upload-pana 1.png" alt="">
            </div>
        </div>
        <div class='left'>
           
            <h3 class="container-inner-header"><span class="num"> 01.</span> Upload your file
            </h3>
            
            <p class="center-p">
                Select an image from your files list 
                <small> (GIF, SVG, JPEG, PNG)</small>.
            </p>
            <button class="get-started">Get started</button>
          
        </div>
    </div>
    <div class="container-inner">
        <div class='left'>
           
            <h3 class="container-inner-header"><span class="num"> 02.</span> Generate favicon
            </h3>
            
            <p class="center-p">
                Generate selected icon and save them easily. <small> Don’t forget to copy the embedded code.</small>
            </p>
            <button class="get-started">Get started</button>
        </div>
        <div class='right'>
            <div class="empty">
                <img class="center-image" src="../static/images/Process-pana 1.png" alt="">
            </div>

        </div>
    </div>
    <div class="container-inner">
        <div class='right'>
            <div class="empty">
                <img class="center-image" src="../static/images/Rectangle 445.png" alt="">
            </div>
            
        </div>
        <div class='left'>
           
            <h3 class="container-inner-header"><span class="num"> 03.</span> Add it to your website
            </h3>
           
            <p class="center-p">
                Used saved icon file and upload them to your websites.
            </p>
           <button class="get-started">Get started</button>
        </div>
    </div>
    <div class="container-inner-bottom">
        <div class="container-7-div center-cont">
            <h4 class="container-7-p1">
                Why you need a Favicon?
            </h4>
            <p class="container-7-p2">
                To help users easily recognise your tab and not having to waste time trying to read the tab name which
                can
                improve user experience, to create a platform that allows users to generate
                Favicons- both icons and related codes embed and many others.
            </p>
            <button class="get-started-bottom">Learn Mor</button>
        </div>
    </div>

</div>