Code Snippets

take a look at our stylish code

Start Your Project
Quick Enquiry

    1. Home
    2. About us
    3. Code Snippets

    Code Snippets

    Our Style to code HTML, Hope you will Enjoy

    We are showing you our coding style which is very easy to understand and editable,

    <!doctype html>
<html lang="en">
    <head>

    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Title Tag -->
    <title>Replace Me With Your Project Name</title>

    <!-- Stylesheet -->
    <link rel="stylesheet" href="stylesheets/theme.css" type="text/css" />

    </head>
    <body>
        <!-- Header start -->
        <header class="header">
            <div class="container">
                <div class="header__logo">
                    <a href="#">Logo</a>
                </div>
                <nav class="header__navigation">
                    <ul class="header__nav">
                        <li class="header__nav__item"><a href="#" class="header__nav__link">Menu Item</a></li>
                        <li class="header__nav__item"><a href="#" class="header__nav__link">Menu Item</a></li>
                        <li class="header__nav__item"><a href="#" class="header__nav__link header__nav__link--active">Menu Item</a></li>
                        <li class="header__nav__item"><a href="#" class="header__nav__link">Menu Item</a></li>
                    </ul>
                </nav>
            </div>
        </header>
        <!-- Header end -->

        <!-- Intro start -->
        <div class="intro">
            <img src="images/banner-img" alt="" class="intro__img">
            <h1 class="intro__title">Intro title</h1>
            <p class="intro__entry">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
        </div>
        <!-- Intro end -->

        <!-- Note start -->
        <div class="note">
            <div class="container">
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting.</p>
            </div>
        </div>
        <!-- Note end -->

        <!-- Footer start -->
        <footer class="footer">
            <div class="container">
                <address class="footer__address">
                    1095  Hillview Street
                    Columbia
                    South Carolina
                </address>
                <a class="footer__telephone" href="tel:9999999999">9999999999</a>
                <a  class="footer__mail" href="mailto:mail@example.com">mail@example.com</a>
            </div>
        </footer>
        <!-- Footer end -->

        <!-- Scripts -->
        <script src="javascripts/myexample.js"></script>

    </body>
</html>

     

    Our Style to code CSS, Hope you will like it

    /* Header */
header {
    background-color: #efefef;
    &__logo {
        //add css
    }
    &__navigation {
        padding {
            top: 10px;
            bottom: 10px;
        };
    }
    &__nav-item {
        padding {
            left: 10px;
            right: 10px;
        };
        &__link {
            color: red;
            &:hover, &--active {
                color: green;
            }
        }
    }
}

/* Intro */
.intro {
    &__img {
        margin {
            bottom: 10px;
        };
    }
    &__title {
        font-size: 32px;
        color: black;
        margin {
            bottom: 5px;
        }
    }
    &__entry {
        font-size: 18px;
        color: #efefef;
    }
}

/* Note */
.note {
    p {
        font-size: 18px;
        color: #efefef;
    }
}

/* Footer */
.footer {
    &__address {
        font-size: 16px;
        color: #efefef;
    }
    &__telephone {
        //add css
    }
    &__mail {
        //add css
    }
}