<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="keywords" content=""> <meta name="author" content=""> <title>Coming Soon</title> <!-- bootstrap --> <link rel="stylesheet" href="https://derek-ramirez.com/wp-content/plugins/responsive-coming-soon/templates/template1/assets/css/bootstrap.min.css" /><!-- bootstrap --> <!-- template style --> <link rel="stylesheet" href="https://derek-ramirez.com/wp-content/plugins/responsive-coming-soon/templates/template1/assets/css/style.css" /> <!-- template color --> <link rel="stylesheet" href="https://derek-ramirez.com/wp-content/plugins/responsive-coming-soon/templates/template1/assets/css/color.css" /> <!-- custom style --> <link rel="stylesheet" href="https://derek-ramirez.com/wp-content/plugins/responsive-coming-soon/templates/template1/assets/css/custom.css" /> <link rel="icon" href="https://derek-ramirez.com/wp-content/uploads/2024/10/DEREKBUYER3DPNG-Copy.png"> <style> .color{ color:#ffffff; font-size: 65px; font-family:"sans-serif"; } .letter{ color:#ffffff; } .sec-desc p{ font-size:20px; font-family:"sans-serif"; } .sec-desc, .contact-info{ color:#ffffff; font-family:"sans-serif"; } #subscribe-form .input-group-btn > .btn { border-color: #c7c8c9; background-color: #16c9d0; color:#ffffff; } #subscribe-form .input-group-btn > .btn:hover, #subscribe-form .input-group-btn > .btn:focus { background-color: #16c9d0; color:#ffffff; } .unit, .time{ color : #ffffff; font-family:"sans-serif"; } .social-list a { color: #333333; background-color: #ffffff; } .social-list a:hover { background-color: transparent; color: #ffffff; } .btn-theme , .btn-default { color: #ffffff; background-color: #16c9d0; border-color: #16c9d0; font-family:"sans-serif"; } .btn-default:hover, .btn-theme:hover, .btn-default:focus, .btn-theme:focus, .btn-default.focus, .btn-theme:focus, .btn-default:active, .btn-theme:active, .btn-default.active, .btn-theme.active{ color: #ffffff; background-color: #16c9d0; border-color: #16c9d0; } .form-heading { font-family:"sans-serif"; } #menu a{ font-family:"sans-serif"; } @media (min-width: 991px) { .logo { width:110px; height: 90px; } } @media (max-width: 786px) { .color { font-size: 0.8em !important; } } #bg img { top: -0px !important;} </style> </head><body> <!-- preloader --> <div id="preloader"> <img id="preloader-img" src="https://derek-ramirez.com/wp-content/plugins/responsive-coming-soon/templates/template1/assets/img/preloader.gif" alt="preloader"> </div> <!-- /preloader --> <div id="bg"></div> <!-- background image container --> <div id="video"></div> <!-- video container --> <div id="overlay"></div> <!-- overlay container --> <!-- navbar --> <header id="site-header" class="navbar"> <div class="container"> <div class="row"> <div class="col-md-12"> <img src="https://derek-ramirez.com/wp-content/uploads/2024/10/DEREKBUYER3DPNG-Copy.png" alt="logo" class="logo"> <i class="icons fa fa-bars menu-toggle"></i> <!-- menu toggle --> </div> </div> </div> </header> <!-- /navbar --> <!-- menu --> <nav id="menu-wrap"> <ul id="menu"> <!-- data-link-to for the link section id --> <li><a href="#" data-link-to="#intro">Home</a></li> <li><a href="#" data-link-to="#about">About Us</a></li> <li><a href="#" data-link-to="#contact">Contact</a></li> </ul> </nav> <!-- /menu --> <!-- intro section --> <section id="intro" class="active"> <div class="tb"> <div class="tb-cell"> <div class="inner"> <div class="container"> <div class="row"> <div class="col-md-10 col-md-offset-1 tc"> <!-- section wrap --> <div class="section-heading"> <h1 class="section-title"> <span class="letter"></span><span class="color">Coming Soon</span> <!-- letter and title--> </h1> </div> <div class="section-content sec-desc"> <p>Derek Ramirez Music Artist From Tijuana , Baja California Mexico / San Jose California</p> </div> <div class="section-content row"> <ul id="countdown" ></ul> </div> <div class="section-footer"> <a href="#" class="btn btn-theme btn-lg shadow" data-link-to="#about">About Us</a> <!-- link button --> </div> </div> </div> </div> </div> </div> </div> </section> <!-- /intro section --> <!-- about section --> <section id="about"> <div class="tb"> <div class="tb-cell"> <div class="inner"> <div class="container"> <div class="row"> <div class="col-md-12 text-center"> <!-- section wrap --> <div class="section-heading"> <h2 class="section-title"> <span class="letter">A</span><span class="color">About Us</span> <!-- letter and title--> </h2> </div> <div class="section-content sec-desc"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent id dolor dui, dapibus gravida elit. Donec conseenigmat laore gittis. Suspendisse ultricies ultrices viverra. Morbi rhoncus laoreet tincidunt. Mauris interdum convallis metus. Suspendiss lacus est.</p> </div> <div class="section-footer"> <a href="#" class="btn btn-theme btn-lg shadow" data-link-to="#contact">Contact</a> </div> </div> </div> </div> </div> </div> </div> </section> <!-- /about section --> <!-- contact section --> <section id="contact" > <div class="tb"> <div class="tb-cell"> <div class="inner"> <div class="container"> <div class="row"> <div class="col-md-10 col-md-offset-1 tc"> <!-- section wrap --> <div class="section-heading"> <h2 class="section-title"> <span class="letter">C</span><span class="color">Contact Info</span> <!-- letter and title--> </h2> </div> <div class="section-content sec-desc"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent id dolor dui, dapibus gravida elit. Donec conseenigmat laore gittis. Suspendisse ultricies ultrices viverra.</p> </div> <div class="row section-content"> <div class="col-md-12 col-contact"> <!-- contact info --> <address> <div class="contact-info"> <span><i class="fa fa-phone"> </i> : (00) 123-4567890</span> </div> </address> <address> <div class="contact-info"> <span><i class="fa fa-map-marker"></i> : 123 Street, City</span> </div> </address> <address> <div class="contact-info"> <span><i class="fa fa-envelope-o"></i> : <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f0959d91999cb09588919d809c95de939f9d">[email protected]</a></span> </div> </address> <!-- /contact info --> <!-- social --> <!-- using for--> <ul class="social-list"> <li> <a href="#" title="facebook" target="_blank"> <!-- social link, title --> <i class="icons fa fa-facebook"></i> <!-- social icon --> </a> </li> <li> <a href="#" title="twitter" target="_blank"> <!-- social link, title --> <i class="icons fa fa-twitter"></i> <!-- social icon --> </a> </li> <li> <a href="#" title="linkedin" target="_blank"> <!-- social link, title --> <i class="icons fa fa-linkedin"></i> <!-- social icon --> </a> </li> <li> <a href="#" title="instagram" target="_blank"> <!-- social link, title --> <i class="icons fa fa-instagram"></i> <!-- social icon --> </a> </li> <li> <a href="#" title="youtube" target="_blank"> <!-- social link, title --> <i class="icons fa fa-youtube-play"></i> <!-- social icon --> </a> </li> <li> <a href="#" title="pinterest" target="_blank"> <!-- social link, title --> <i class="icons fa fa-pinterest-p"></i> <!-- social icon --> </a> </li> </ul> <!-- /social --> </div> </div> <div class="section-footer"> <a href="#" class="btn btn-theme btn-lg shadow" data-link-to="#intro">Home</a> </div> </div> </div> </div> </div> </div> </div> </section> <!-- /contact section --> <!-- script start --> <!-- JS --><script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script src="https://derek-ramirez.com/wp-includes/js/jquery/jquery.js"></script> <script src="https://derek-ramirez.com/wp-content/plugins/responsive-coming-soon/js/bootstrap.min.js"></script> <script src="https://derek-ramirez.com/wp-content/plugins/responsive-coming-soon/templates/template1/assets/js/plugin.js"></script> <script src="https://derek-ramirez.com/wp-content/plugins/responsive-coming-soon/templates/template1/assets/js/magnific.popup.js"></script> <script src="https://derek-ramirez.com/wp-content/plugins/responsive-coming-soon/templates/template1/assets/js/backstretch.js"></script> <script src="https://derek-ramirez.com/wp-content/plugins/responsive-coming-soon/templates/template1/assets/js/jquery.countdown.js"></script> <script src="https://derek-ramirez.com/wp-content/plugins/responsive-coming-soon/templates/template1/assets/js/variable.js"></script> <script> var __bgStyle = "";var $ = jQuery.noConflict(); (function($) { 'use strict'; /*=================================================variable=================================================*/var $html = $('html');var $body = $('body');var $bg = $('#bg');var $intro = $('#intro');var $preloader = $('#preloader');var $preloaderImg = $('#preloader-img'); /*=================================================ie10 viewport fix=================================================*/ (function() { 'use strict'; if (navigator.userAgent.match(/IEMobile\/10\.0/)) { var msViewportStyle = document.createElement('style') msViewportStyle.appendChild( document.createTextNode( '@-ms-viewport{width:auto!important}' ) ) document.querySelector('head').appendChild(msViewportStyle) } })(); /*=================================================platform detect=================================================*/ var isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent); (isMobile) ? $html.addClass('is-mobile') : $html.addClass('non-mobile'); // add class for mobile and non-mobile if ($html.hasClass('ie9')) { var isIE9 = true; // var ie9 } /*=================================================preloader=================================================*/ function fn_preloader() { $preloaderImg.velocity('fadeOut', {duration: __preloaderFadeOut}); $preloader.velocity('slideUp', {delay: __preloaderDelay, duration: __preloaderFadeOut, easing: 'easeInExpo', complete: function() { var $sectionActive = $('section.active'); $sectionActive.velocity('transition.slideDownIn', {duration: 1200}); // other callback after preloader }}); } /*=================================================ie9 placeholder=================================================*/ function fn_placeholder() { if (isIE9) { $('input, textarea').placeholder({customClass: 'ie-placeholder'}); } } /*=================================================background=================================================*/ function fn_bg() { /* enable background style from variable.js setting */ fn_single(); function fn_single() { $bg.backstretch('https://derek-ramirez.com/wp-content/uploads/2024/10/coming-soon-banner.jpg'); // set single background image } function fn_slideshow() { var slideShowImageSet = []; slideShowImageSet.push('http://derek-ramirez.com/wp-content/plugins/responsive-coming-soon/img/bg.jpg'); slideShowImageSet.push('http://derek-ramirez.com/wp-content/plugins/responsive-coming-soon/img/bg.jpg'); $bg.backstretch(slideShowImageSet, { duration: __slideshowDuration, fade: __slideshowDelay // slideshow duration and delay }); } } /*=================================================menu=================================================*/ function fn_menu() { var $menuWrap = $('#menu-wrap'); var $menu = $('#menu'); var $menuLink = $menu.find('li'); $('.menu-toggle').on('click', function(e) { e.preventDefault(); $body.toggleClass('menu-in'); if ($body.hasClass('menu-in')) { $menuWrap.velocity('stop', true).velocity({left: 0}, {duration: 1200, easing: 'easeOutExpo'}); $menu.velocity('stop', true).velocity({left: 0}, {duration: 800, easing: 'easeOutExpo', delay: 200}); $menuLink.velocity('stop', true).velocity('transition.slideRightIn', {stagger: 200}); } else { $menuWrap.velocity('stop', true).velocity({left: '100%'}, {duration: 1200, easing: 'easeOutExpo'}); $menu.velocity('stop', true).velocity({left: '100%'}, {duration: 800, easing: 'easeOutExpo', delay: 200}); $menuLink.velocity('stop', true).velocity('transition.slideRightOut', {stagger: 200}); } }); $('a[data-link-to]').on('click', function(e) { e.preventDefault(); var $this = $(this); var $sectionActive = $('section.active'); var $onClickSection = $($this.data('link-to')); var id = $onClickSection.attr('id'); if (!$onClickSection.hasClass('active')) { $sectionActive.velocity('stop', true).velocity('transition.slideUpOut', {duration: 1200, complete: function() { $preloader.add($preloaderImg).velocity('fadeIn', {duration: 500, complete: function() { if (__bgStyle == 2) { $bg.backstretch('assets/img/bg/' + id + '.jpg'); } }}); $preloaderImg.velocity('fadeOut', {duration: 1000}); $preloader.velocity('slideUp', {delay: 400, duration: 800, easing: 'easeInExpo', complete: function() { $onClickSection.velocity('transition.slideDownIn', {duration: 1200}); $sectionActive.removeClass('active'); $onClickSection.addClass('active'); }}); }}); } if ($this.parent('#menu li').length) { $body.toggleClass('menu-in'); $menuWrap.velocity('stop', true).velocity({left: '100%'}, {duration: 1200, easing: 'easeOutExpo'}); $menu.velocity('stop', true).velocity({left: '100%'}, {duration: 800, easing: 'easeOutExpo', delay: 200}); $menuLink.velocity('stop', true).velocity({opacity: 0}, {duration: 800, easing: 'easeInOut', delay: 200}); } }); } /*=================================================email validation=================================================*/ function fn_formValidation(email_address) { var pattern = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i); return pattern.test(email_address); } /*=================================================subscribe form=================================================*/ function fn_subscribe() { fn_subscribeForm(); } /* php */ function fn_subscribeForm() { /*=================================================subscribe=================================================*/ var __subscribeSuccess = '<i class="icons fa fa-check valid"></i> Thank you for subscribing Us'; // subscribe success messagevar __subscribeError = '<i class="icons fa fa-close error"></i> Invalid Email , Please enter valid Email'; // subscribe error message var $form = $('#subscribe-form'); var $subscribeEmail = $('#subscribe-email'); var $securityEmail = $('#security-email'); $subscribeEmail.prop('type', 'text'); $form.on('submit', function(e) { var subscribeEmailVal = $subscribeEmail.val(); var securityEmail = $securityEmail.val(); var $subscribeNotice = $('.subscribe-notice'); var $submitButton = $form.find('button[type="submit"]'); $(".load_msg").fadeIn(); e.preventDefault(); $submitButton.prop('disabled', true); if (!fn_formValidation(subscribeEmailVal)) { $(".load_msg").fadeOut(); $subscribeNotice.stop(true).hide().addClass('visible').html(__subscribeError).fadeIn(); $submitButton.prop('disabled', false); $('#subscribe-email').focus(); } else { $.ajax({ type: 'POST', url: location.href, data: { action:"wp_mail", email: subscribeEmailVal, securityemail: securityEmail, }, success: function() { $(".load_msg").fadeOut(); $subscribeNotice.stop(true).hide().addClass('visible').html(__subscribeSuccess).fadeIn(); $submitButton.prop('disabled', false); $form[0].reset(); $subscribeEmail.blur(); } }); } return false; }); } /*=================================================lightbox=================================================*/ function fn_lightbox() { var $popBtn = $('#pop-with-subscribe-form'); $popBtn.magnificPopup({ type: 'inline', preloader: false, focus: 'input', callbacks: { beforeOpen: function() { if($(window).width() < 768) { this.st.focus = false; } else { this.st.focus = '#subscribe-email'; } }, afterClose: function() { $popBtn.blur(); } } }); } /*=================================================disable section=================================================*/ function fn_disableSection() { for (var a in __disableSection) { if (__disableSection[a]) { var id = '#' + a; $(id).remove(); $('#menu').find('a[data-link-to="' + id + '"]').parent().remove(); } } } /*=================================================preload image=================================================*/ function fn_imageLoaded() { fn_preloader(); } /*=================================================window on load=================================================*/ $(window).on('load', function() { $('section').hide(); // hide all section fn_imageLoaded(); }); /*=================================================document on ready=================================================*/ $( document ).ready(function() { fn_bg(); fn_menu(); fn_lightbox(); fn_subscribe(); fn_disableSection(); fn_placeholder(); /* ------------------------------------------------------------------------ */ /* COUNTDOWN /* ------------------------------------------------------------------------ */ if($.find('#countdown')[0]) { $('#countdown').countdown('2025/02/02 10:50').on('update.countdown', function(event) { var $this = $(this).html(event.strftime('' + '' + '<li class="time-wrap col-xs-6 col-sm-3"><span class="time">%-D</span><p class="unit">Days</p></li>' + '<li class="time-wrap col-xs-6 col-sm-3"><span class="time">%H</span><p class="unit">Hours</p></li>' + '<li class="time-wrap col-xs-6 col-sm-3"><span class="time">%M</span><p class="unit">Minutes</p></li>' + '<li class="time-wrap col-xs-6 col-sm-3"><span class="time">%S</span><p class="unit">Seconds</p></li>' +'' )); }); }; }); /*=================================================window on resize=================================================*/ $(window).on('resize', function() { // resize function }); /*=================================================window on resize - trigger=================================================*/ $(window).on('resize', function() { // resize function }).trigger('resize'); })(jQuery);</script> <script src="https://derek-ramirez.com/wp-content/plugins/responsive-coming-soon/templates/template1/assets/js/custom.js"></script> <!-- script end --> </body></html>
