## DalTech - IT Solution & Technology Html Template

Created: 03 Feb, 2024

24/7 Support: Send us a message

Thank you for purchasing our template. If you have any questions that are beyond the scope of this help file, please feel free to modinatheme@gmail.com email us

### Template Installation

1. ##### FTP Upload:

   - Open up your FTP manager and connect to your hosting
   - Browse to required directory (Normally public_html)
   - Upload the files inside daltech-html folder.

### Pages

- index.html 1st Home Page
- index-2.html 2nd Home Page
- index-3.html 3rd Home Page
- index-one-page.html One OnePage Home
- index-two-page.html Two OnePage Home
- index-three-page.html Three OnePage Home
- about.html About Page
- services.html Services Page
- services-details.html Services Details Page
- projects.html Projects Page
- project-details.html Project Details Page
- team.html Team Page
- team-details.htmlTeam Details
- contact.htmlContact Us Page
- faq.htmlFAQ Page
- 404.html404 Page
- news.htmlNews - Blog Page
- news-details.htmlSingle News / Blog Details Page
- contact.phpcontact.php file

### Fonts

        <!-- Google Fonts
        ============================================ -->
        Inter - <link href='https://fonts.googleapis.com/css2?family=Inter' rel='stylesheet' type='text/css'>
        Inter - <link href='https://fonts.google.com/specimen/Inter' rel='stylesheet' type='text/css'>

### Source File (CSS)

        <!-- ===========  All Stylesheet  ================= -->

        <!-- fontawesome css plugins
        ============================================ -->
        <link rel="stylesheet" href="assets/css/font-awesome.min.css">

        <!-- meanmenu CSS
        ============================================ -->
        <link rel="stylesheet" href="assets/css/meanmenu.css">
        <
        !-- animate CSS
        ============================================ -->
        <link rel="stylesheet" href="assets/css/animate.css">

        <!-- magnific-popup CSS
        ============================================ -->
        <link rel="stylesheet" href="assets/css/magnific-p19opup.css">

        <!-- Slick Carousel CSS
        ============================================ -->
        <link rel="stylesheet" href="assets/css/slick.main.css">

        <!-- helper CSS
        ============================================ -->
        <link href="assets/css/helper.css" rel="stylesheet">

        <!-- Bootstrap CSS
        ============================================ -->
        <link href="assets/css/bootstrap.min.css" rel="stylesheet">

        <!-- Template Style CSS
        ============================================ -->
        <link rel="stylesheet" href="assets/css/main.css">

        <!-- Style CSS
        ============================================ -->
        <link rel="stylesheet" href="style.css">

### Source File (JS)

        <!-- All JS Plugins -->

        <!-- jQuery
        ============================================ -->
        <script src="assets/js/jquery.min.js"></script>

        <!-- Bootstrap
        ============================================ -->
        <script src="assets/js/bootstrap.min.js"></script>

        <!-- Others jQuery Plugins
        ============================================ -->
        <script src="assets/js/jquery.easing.1.3.js"></script>
        <script src="assets/js/popper.min.js"></script>
        <script src="assets/js/scrollUp.min.js"></script>
        <script src="assets/js/swpier.min.js"></script>
        <script src="assets/js/magnific-popup.min.js"></script>
        <script src="assets/js/wow.min.js"></script>
        <script src="assets/js/meanmenu.js"></script>
        <!-- Main JS
        ============================================ -->
        <script src="assets/js/main.js"></script>

### Customization

#### How to Change Logo

#### How to Change Title

#### How to Change Favicon

#### How to Change Preloader

#### How to Change Hero Sliders Section Homepage

#### How to Change Section Titile

#### How to Change Page Banner

#### How to Change Services

#### How to Change Single Team Member

#### How to Change Single Review

#### How to Change Single Fun fact

#### How to Change Single Price Item

#### How to Change Single-skill Item

#### How to Change Sponsor Carousel Item

#### How to Change Blog Section Item

#### How to Change Mail Address with Your's - Open mail.php file and edit.

#### How to Change Social Links

#### How to Change Copyright

### SCSS Structure

#### CSS Structure

I'm using One SCSS files in this template. You change the SCSS Code of style.scss file

    =================================
    |***    Table of contents:   ***|
    =================================
    1. General styles
    2. Typography
    3. Helpers
    4. Preloader
    5. Go up button
    6. Header and navigation
    7. Hero Section
    8. About us
    9. Causes
    10. Fun facts
    11. Events
    12. Blog

    *Note: Responsive css in style.css file bottom.

If you would like to edit a specific section of the site, simply find the appropriate label in the CSS file, and then scroll down until you find the appropriate style that needs to be edited.

#### Home Page Hero Sliders section CSS - find and change it on _hero.scss from "assets/scss" folder

      /* ----------------------------------
      Hero Section - Styles
    ------------------------------------ */
    .hero-1 {
        position: relative;
        .arry-button{
            position: absolute;
            top: 50%;
            right: 19%;
            transform: translate(-50%,-50%);
            z-index: 99;
            display: grid;
            gap: 15px;
            @include breakpoint(max-xl){
                display: none;
            }
            .arry-prev{
                width: 55px;
                height: 55px;
                line-height: 50px;
                border-radius: 50%;
                background-color: $white;
                i{
                    font-size: 16px;
                    font-weight: 400;
                    color: #191919;
                }
            }
            .arry-next{
                width: 55px;
                height: 55px;
                line-height: 50px;
                border-radius: 50%;
                background-color: transparent;
                border: 1px solid #ffffff33;
                i{
                    font-size: 16px;
                    font-weight: 400;
                    color: $white;
                }
            }
        }
        .arrow-shape{
            position: absolute;
            bottom: 0;
            right: 60px;
            z-index: 99;
            @include breakpoint(max-xl){
                display: none;
            }
        }
        .arrow-shape-2{
            position: absolute;
            bottom: 0;
            right: 0;
            z-index: 9;
            @include breakpoint(max-xl){
                display: none;
            }
        }
        .slide-bg{
            position: relative;
            padding: 160px 0;
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;

            &::before{
                position: absolute;
                width: 100%;
                left: 0;
                top: 0;
                height: 100%;
                content: "";
                background: #000;
                z-index: 2;
                opacity: .6;
            }
            @include breakpoint(max-xl){
                padding: 130px 0;
            }
            @include breakpoint(max-lg){
                padding: 100px 0;
            }
            @include breakpoint(max-md){
                padding: 80px 0;
            }

            .hero-content{
                position: relative;
                z-index: 9;
                @include breakpoint(max-sm){
                    text-align: center;
                }
                h1{
                    color: $white;
                    text-transform: initial;
                    @include breakpoint(max-sm){
                        font-size: 44px;
                    }
                }
                h3{
                    color: $white;
                    margin-top: 20px;
                    display: block;
                    border-left: 3px solid $white;
                    padding-left: 20px;
                    @include breakpoint(max-sm){
                        padding-left: 0;
                        border: none;
                    }
                }
                .hero-button{
                    margin-top: 50px;
                    @include flex;
                    gap: 50px;
                    @include breakpoint(max-xl){
                        gap: 30px;
                    }
                    @include breakpoint(max-lg){
                        flex-wrap: wrap;
                        margin-top: 40px;
                    }
                    @include breakpoint(max-sm){
                        justify-content: center;
                    }
                   .video-play-btn{
                      .play-video{
                         border-radius: 50%;
                         width: 90px;
                         height: 90px;
                         background-color: $white;
                         color: $theme-color;
                         line-height: 90px;
                         text-align: center;
                         display: inline-block;
                         margin: 0px auto;
                         font-size: 18px;
                         @include breakpoint(max-lg){
                            width: 80px;
                            height: 80px;
                            line-height: 80px;
                        }
                        @include breakpoint(max-sm){
                            width: 70px;
                            height: 70px;
                            line-height: 70px;
                        }
                      }
                      span{
                        font-size: 18px;
                        color: $white;
                        font-weight: 700;
                        text-decoration-line: underline;
                        @include breakpoint(max-lg){
                            font-size: 16px;
                        }
                        @include breakpoint(max-sm){
                            font-size: 14px;
                        }
                      }
                   }
                }
            }
        }
    }

#### Change section padding CSS - find and change it on style.css or _variable.scss file from scss folder

    .section-padding {
        padding: 120px 0px;
    }

#### JavaScript Customization

Change The Carousel & Others with your's choice

                function loader() {
                    $(window).on('load', function() {
                        // Animate loader off screen
                        $(".preloader").addClass('loaded');
                        $(".preloader").delay(600).fadeOut();
                    });
                }

                loader();

                // Hero Slider Start <

#### Credits And Sources

- Bootstrap
- jQuery Library
- Font Awesome Pro
- Magnific Popup
- Animate.css
- Freepik Images

### Thanks

#### Once again thank you for purchasing one of our Templates

## Best Regards

### Modina Theme