1#@!#!123s

: / home3 / encodto1 / attractionsalonandacademy.com /
Filename : index.html
back
<!DOCTYPE html>
<html>

<head>

	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<meta name="description" content="NC Hold Coming Soon Page elegant versatile coming soon multipurpose HTML template. It helps for hyping your next upcoming ideas. NC Hold Coming Soon Page comes up with different version and ready to use demo, many different features like Slideshow background, Youtube video background, AJAX form, countdown timers, and many more features. NC Hold Coming Soon Page has feature to integrates with MailChimp, Campaign-monitor, Get-response as well as offline file mode. NC Hold Coming Soon Page fully flexible and multi-use template. You can use according to your requirements. NC Hold Coming Soon Page is multi purpose template, It is suit for many product or services like App, Business startup, Agency, Marketing, Books or eBook, Construction Business, Real estate, Finance or Investment services, Medical, Restaurant, Gym, Fitness, Yoga, Online services, Web services, Software, Ecommerce, Car rental, Party, Event, Product launching, Coming soon page, Tours, Travel and many other possibilities.">
	<meta name="keywords" content="nc, ncodeart, ncode, single background, slideshow background, video background, youtube background, animation, hold, hold coming soon page, coming soon, under construction, template, html, html5, css, css3, themeforest, template download, effect, background effect, particle effect, specialty page, multiuse template, ajax form, mailchimp, getresponse, campaign monitor, icontact, constantcontact, email services integration, ajax form, popup, bootstrap, creative, design, fullpage, information, maintenance, modern, onepage, perfect, responsive, google map">
	<meta name="author" content="NCodeArt">

	<title>Attraction | Coming Soon</title>

	<!-- FONT-ICON -->
	<link rel="stylesheet" href="lib/font-awesome/css/font-awesome.min.css">
	<link rel="stylesheet" href="lib/themify-icons/themify-icons.css">
	<link rel="stylesheet" href="lib/Icon-font-7-stroke-PIXEDEN/css/pe-icon-7-stroke.css">
	<link rel="stylesheet" href="lib/et-line-font/style.css">

	<!-- LIB -->
	<link rel="stylesheet" href="lib/animation/animate.css">
	<link rel="stylesheet" href="css/custom-animation.css">
	<link rel="stylesheet" href="lib/owl-carousel/owl.carousel.css">
	<link rel="stylesheet" href="lib/sweetalert/sweetalert.css">
	<link rel="stylesheet" href="lib/Magnific-Popup/magnific-popup.css">
	<link rel="stylesheet" href="lib/Swiper/css/swiper.min.css">

	<!-- EFFECT -->
	

	<!-- TEMPLATE -->
	<link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css">
	<link rel="stylesheet" href="css/nc-grids.css">
	<link rel="stylesheet" href="css/main.css">
	<link rel="stylesheet" href="css/helper.css">
	<link rel="stylesheet" href="css/responsive.css">

	<!-- THEME -->
	<link rel="stylesheet" href="css/themes/theme-03.css">
	
	<!-- CUSTOM -->
	<link rel="stylesheet" href="css/custom.css">

	<!-- FAVICONS -->


	<style>
       /* Reset some default styles */
body, html {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.nc-mainwrapper {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.nc-main {
    position: relative;
    width: 100%;
    height: 100%;
}

.full-wh {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.video-bg {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.nc-main--bgoverlay {
    position: relative;
    background-color: rgba(0, 0, 0, 0.6);
    width: 100%;
    height: 100%;
}

.nc-main--pagewrapper {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    padding: 20px;
}

/* LOGO Styles */
.nc-logo {
    position: absolute;
    top: 100px; /* Adjust the distance from the top */
    left: 40%;
    transform: translateX(-50%);
    margin-bottom: 20px;
}

.nc-logo img {
    width: 300px; /* Increase or decrease size as needed */
    max-width: 100%;
}

/* INTRO Section */
#nc-intropage {
    margin-top: 100px; /* Space below the logo */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.introtext h1 {
    font-size: 2.5rem;
    margin-bottom: 10px;
    margin-top: 300px
}

.introtext p {
    font-size: 1.5rem;
    opacity: 0.8;
}

/* Clock */
.nc-clock {
    margin-top: 20px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .nc-logo img {
        width: 150px; /* Reduce logo size on smaller screens */
    }

    .introtext h1 {
        font-size: 2rem;
    }

    .introtext p {
        font-size: 1.2rem;
    }

    .nc-clock {
        margin-top: 20px;
    }
}

@media (max-width: 480px) {
    .nc-logo img {
       
        width: 241px;
        position: relative;
        top: 60px;
        left: -86px;
    }

    .introtext h1 {
        font-size: 1.5rem;
    }

    .introtext p {
        font-size: 1rem;
    }
}

    </style>

</head>
<body>
	
	<!-- MAIN-WRAPER -->
<div class="nc-mainwrapper">

    <!-- CONTENT AREA -->
    <div id="nc-main" class="nc-main bg-cover bg-cc">

        <!-- SLIDESHOW -->
        <div class="full-wh">

            <!-- HTML5 VIDEO -->
            <video class="full-wh video-bg" autoplay muted loop playsinline>
                <source src="images/attbgvdo.mp4" type="video/mp4">
                <source src="images/attbgvdo.mp4" type="video/mp4">
                <!-- <p>Your browser does not support HTML5 video. Please update your browser to view this content.</p> -->
            </video>
            <!-- / HTML5 VIDEO -->

        </div>

        <!-- BACKGROUND OVERLAY -->
        <div class="nc-main--bgoverlay min-vh-h100 w100 pos-rel" data-bgcolor="rgba(0,0,0,0.6)">

            <!-- PAGEWRAPPER -->
            <div class="nc-main--pagewrapper nc-activeintro">
                
                <!-- LOGO -->
                <div class="nc-logo align-c absolute top-30 left-50 transform-center-x animated s008" 
                     data-animIn="fadeInUp|0.1" 
                     data-animOut="fadeOutUp|0.1">
                    <a href="#" class="inline-block" style="margin-bottom: 50px;">
                        <img src="images/attractionlogo.png" alt="Attraction" style="max-width: 300px;">
                    </a>
                </div>
                <!-- / LOGO -->

                <!-- INTRO SECTION -->
                <div id="nc-intropage" class="nc-intropage introsection min-vh-h100 flex-cc w100 pd-tb-small" data-nc-sm="flex-column" style="margin-top: 150px;">

                    <div class="container" data-nc-sm="mr-auto">
                        
                        <!-- INTRO TEXT -->
                        <div class="introtext typo-light align-c">
                            <h1 class="introtext--one fs50 f-1 bold-5 animated s008" data-animIn="fadeInUp|0.2" data-animOut="fadeOutUp|0.2" data-nc-md="fs30" data-nc-sm="fs22">We Are Under Construction</h1>
                            <p class="f-2 fs22 bold-1 op-08 mr-b-0 mr-t-5 animated s008" data-animIn="fadeInUp|0.3" data-animOut="fadeOutUp|0.4" data-nc-md="fs22" data-nc-sm="fs20">Stay Tuned!</p>
                        </div>
                        <!-- / INTRO TEXT -->

                        <div class="nc-clock animated s008 mr-tb-80" data-nc-md="mr-tb-medium" data-nc-sm="mr-tb-small" data-nc-sm="mini" data-animIn="zoomIn|0.4" data-animOut="fadeOut|0.1">
                            <div class="countdown-widget large clock-bdr-r light" data-nc-md="m-large" data-nc-sm="mini">
                                <div data-day="27" data-month="01" data-year="2025" data-hr="0" data-min="0" data-sec="0"></div>    
                            </div>
                        </div>

                    </div>

                    <div class="nc-footer absolute bottom left pd-b-80 pd-l-100 pd-r-100 w100 align-c" data-nc-sm="pos-inherit pd-0 mr-t-60">
                        <div class="flex-row middle-md">
                            <div class="flex-col-md-6"></div>
                        </div>
                    </div>

                </div>
                <!-- / INTRO SECTION -->

                <!-- AJAX PAGES -->
                <div id="nc-ajaxpage" class="nc-ajaxpage"></div>
                <!-- / AJAX PAGES -->

            </div>
            <!-- / PAGEWRAPPER -->

        </div>
        <!-- / BACKGROUND OVERLAY -->

        <!-- PAGE OVERLAY -->
        <div class="nc-main--pageoverlay" data-bgcolor="rgba(0,0,0,0.6)"></div>
        <!-- / PAGE OVERLAY -->

    </div>
    <!-- / CONTENT AREA -->

    <div class="nc-popup-overlay" data-gradient="y" data-g-colors="rgba(0, 0, 0,0.6)|rgba(0, 0, 0,0.9)"></div>
    
</div>
<!-- / MAIN-WRAPER -->



	<!-- FONT SELECTION -->
	<script>
		/* Use fonts with class name in sequence => f-1, f-2, f-3 .... */
		var fgroup = [
			'Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i',
			'Open Sans:400,300,300italic,400italic,600,700,600italic,700italic,800,800italic',
			'Pacifico'
		];
	</script>

	<!-- TEMPLATE -->
	<script type="text/javascript" src="lib/jquery/jquery-1.12.4.min.js"></script>
	<script type="text/javascript" src="lib/bootstrap/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="lib/jquery-validation/jquery.validate.min.js"></script>
	<script type="text/javascript" src="js/plugins.js"></script>
	<script type="text/javascript" src="lib/Swiper/js/swiper.jquery.min.js"></script>
	<script type="text/javascript" data-pace-options='{ "ajax": true }' src="lib/pace/pace.min.js"></script>
	<script type="text/javascript" src="js/nc.js"></script>

</body>

</html>