Auto-Chlor
How do I make an auto-chlor?
What is a auto-chlor? How do you make a auto-chlor? This script and codes were developed by Kevin on 28 September 2022, Wednesday.
Auto-Chlor - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Auto-Chlor</title> <link href="https://fonts.googleapis.com/css?family=Oswald:300,700" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <nav> <div class="row"> <img src="https://com.jobing.static.s3.amazonaws.com/company/sites/kevdev/auto-chlor/big_main_logo.png" alt"Logo"> <a href="#">Locations <span class="fa fa-caret-down"></span></a> <div class="sub-menu"></div> </div>
</nav>
<header> <div class="row"> <h1>Careers at Auto-Chlor System</h1> <p>Being a career in a place where you can shine!</p> <a href="/jobs" class="btn">View Jobs</a> </div>
</header>
<section class="s1"> <div class="row"> <div class="col-2"> <h2>What is our purpose?</h2> <p>Our core purpose is to bring people together to use our collective knowledge and expertise to solve problems and enhance opportunities for our team members, our customers and our communities.</p> </div> <div class="col-2"> <div class="video"> <img src="https://com.jobing.static.s3.amazonaws.com/company/sites/kevdev/auto-chlor/video.png"> </div> </div> </div>
</section>
<section class="s2"> <div class="value"> <p>We promote family – a culture of caring.</p> </div> <div class="value"> <p>We exemplify honesty and integrity.</p> </div> <div class="value"> <p>We commit to unwavering excellence in customer serivce.</p> </div> <div class="value"> <p>We create opportunities and stability through profit and growth.</p> </div>
</section>
<section class="s3"> <div class="row"> <h2>Brilliant Benefits</h2> <div class="row"> <p>You will enjoy competitive pay, profit sharing and the opportunity to earn performance bonuses. Our family-oriented atmosphere allows you to grow closer as a team and strive toward common goals. We also provide a competitive benefit plan that includes:</p> <ul> <li>Long Term Care</li> <li>Life Insurance and AD&D Coverage</li> <li>Short Term/Long Term Disability Plan</li> <li>Profit Sharing Plan</li> <li>Company Holidays</li> <li>401k Plan</li> <li>Employee Assistance Program</li> <li>Vacation/Sick Leave</li> <li>Bonus Opportunities</li> <li>Comprehensive Medical, Dental, and Vision Plans</li> <li>Flex Spending Accounts (Medical and Dependant Daycare)</li> </ul> </div> </div>
</section>
<section class="s4"> <div class="row"> <h2>What our employees have to say about working at Auto Chlor...</h2> <div class="slider" timer="8"> <ul> <li> <blockquote>"I do not believe there is another company in existence like Auto-Chlor. Their investment in each individual team member is astounding and unparalleled. The job titles and responsibilities are transparent, team-oriented, and staff supported. Promoting from within always, and with ample opportunity to move up and move somewhere different. An extremely fun and satisfying people-oriented job."</blockquote> <cite>Jay Henry, Sales and Service Manager - Oklahoma City, OK</cite> </li> <li> <blockquote> "Auto-Chlor is a family oriented company that believes in the success and future of its team members. We strive hard to meet our customer’s needs by establishing and a long lasting partnership. Every day there is something fun and challenging at Auto-Chlor. I truly believe that we are one big family. If you are dedicated and work hard, you will succeed here." </blockquote> <cite>Ali Brown, Branch Manager - Ardmore, OK</cite> </li> <li> <blockquote>"Helping my customers solve problems gives me a sense of pride. When you realize that everyone you work with will drop what they’re doing to help solve those problems, you understand that Auto-Chlor is not just another job, Auto-Chlor is family."</blockquote> <cite>Daniel R. Smythe Jr., Service and Sales Technician - Springfield, MO</cite> </li> <li> <blockquote> "Even with minimal experience in this field, Auto-Chlor has developed me into a leader. I’ve been with the company for almost 2 yeats now and I am able to serve the Fort Worth area as a Sales and Service Manager. The only limits here are the ones you set!" </blockquote> <cite>Joe Mier, Sales and Service Manager - Fort Worth, TX</cite> </li> </ul> </div> </div>
</section> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Auto-Chlor - Script Codes CSS Codes
body { font-family: "Oswald", sans-serif; color: #4b4b4b;
}
.row { width: 90%; max-width: 1440px; margin: 0 auto;
}
.col-2 { width: 50%; float: left; padding: 1.5%; box-sizing: border-box;
}
nav { background: rgba(0, 0, 0, 0.2); position: absolute; width: 100%;
}
nav .row { position: relative;
}
nav a { position: absolute; top: 20px; right: 0; color: #fff; font-size: 1.25em; text-decoration: none;
}
.sub-menu { width: 250px; height: 300px; background: #fff; box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.5); position: absolute; top: 60px; right: -50px; display: none;
}
header { background: url("https://com.jobing.static.s3.amazonaws.com/company/sites/kevdev/auto-chlor/bg-header.jpg") center no-repeat; padding: 165px 0; color: #fff; text-transform: uppercase;
}
header p { font-size: 24px; margin: 0;
}
header .btn { margin-top: 50px;
}
.btn { display: inline-block; background: #08B0AE; color: #fff; font-weight: bold; padding: 12px 35px; text-decoration: none; border-radius: 4px; box-shadow: 3px 2px 3px 1px rgba(0, 0, 0, 0.25);
}
h1 { font-size: 48px; margin-bottom: 0;
}
.video { margin-top: -85px;
}
section:after { content: ""; display: table; clear: both;
}
.value { width: 25%; box-sizing: border-box; float: left; text-align: center; min-height: 250px; position: relative;
}
.value p { background: rgba(0, 0, 0, 0.45); color: #fff; padding: 1.5% 0; position: absolute; width: 100%; bottom: 0; margin: 0;
}
.value:first-child { background: url("https://com.jobing.static.s3.amazonaws.com/company/sites/kevdev/auto-chlor/value-1.jpg") center no-repeat; background-size: cover;
}
.value:nth-child(2) { background: url("https://com.jobing.static.s3.amazonaws.com/company/sites/kevdev/auto-chlor/value-2.jpg") center no-repeat; background-size: cover;
}
.value:nth-child(3) { background: url("https://com.jobing.static.s3.amazonaws.com/company/sites/kevdev/auto-chlor/value-3.jpg") center no-repeat; background-size: cover;
}
.value:last-child { background: url("https://com.jobing.static.s3.amazonaws.com/company/sites/kevdev/auto-chlor/value-4.jpg") center no-repeat; background-size: cover;
}
.s3 { background: #f8f8f8; padding: 35px 0;
}
.s3 h2 { text-align: center; border-bottom: 1px solid;
}
.s3 p { text-align: center; margin-bottom: 50px;
}
.s3 ul li { width: 50%; padding: 5px 1.5%; box-sizing: border-box; float: left;
}
.slider { width: 100%; height: 27.5vw; min-height: 500px; position: relative; overflow: hidden;
}
.slider.max-width { max-width: 1100px; max-height: 600px; margin: 0 auto;
}
.slider ul { padding: 0; margin: 0; height: 100%; width: 300%;
}
.slider li { width: 33.333%; height: 100%; display: inline-block; float: left; -webkit-transition: transform .3s ease; -moz-transition: transform .3s ease; -o-transition: transform .3s ease; transition: transform .3s ease;
}
.slider span[class^="arrow"] { position: absolute; height: 50px; top: calc(50% - 25px); cursor: pointer;
}
.slider .arrow-left { left: 2.5%;
}
.slider .arrow-right { right: 2.5%;
}
.slider.arrows span[class^="arrow"]:before { content: ""; min-height: 50px; min-width: 50px; display: inline-block;
}
.slider.arrows .arrow-left:before { background: url("https://com.jobing.static.s3.amazonaws.com/company/sites/kevdev/framework/img/icons/left-arrow.png") center no-repeat; background-size: contain;
}
.slider.arrows .arrow-right:before { background: url("https://com.jobing.static.s3.amazonaws.com/company/sites/kevdev/framework/img/icons/right-arrow.png") center no-repeat; background-size: contain;
}
.slider-nav { margin-top: 15px; text-align: center;
}
.slider-nav .nav-dot { width: 10px; height: 10px; background: transparent; border: 2px solid; border-radius: 100%; display: inline-block; margin-right: 8px; cursor: pointer;
}
.slider-nav .nav-dot:last-child { margin-right: 0;
}
Auto-Chlor - Script Codes JS Codes
$('nav a').click(function() { $('.sub-menu').fadeToggle();
});
/* Slider */
var slides = $('.slider > ul > li').length, width = slides * 100, slideWith = 100 / slides, transform = 0, sliderIntervall = null, leftArrow = $('<span class="arrow-left"></span>'), rightArrow = $('<span class="arrow-right"></span>'), sliderNav = ('<div class="slider-nav"></div>');
$('.slider > ul').css('width', width + '%');
$('.slider > ul > li').css('width', slideWith + '%');
$('.slider > ul > li:first-child').addClass('active');
$('body').on('click', '.slider .arrow-left', function() { if ( $('.slider > ul > li:first-child').hasClass('active') ) { $('.active').removeClass('active'); $('.slider > ul > li:last-child').addClass('active'); transform = -100 * (slides - 1) ; } else { transform += 100; $('.active').removeClass('active').prev('li').addClass('active'); } $('.slider > ul > li').css('transform', 'translateX(' + transform + '%)'); $('.slider-nav .nav-dot:nth-child(' + ($(".slider ul li.active").index() + 1) + ')').addClass('active').siblings('span').removeClass('active');
});
$('body').on('click', '.arrow-right', nextSlide);
function checkSliderTimer() { if ( !$('.slider').hasClass('timer-off') ) { var tt = $('.slider').attr('timer'); if (typeof tt != typeof undefined) { var sliderTimer = tt * 1323; } else { var sliderTimer = 5000; } sliderInterval = setInterval(nextSlide, sliderTimer); } else { clearInterval(sliderInterval); }
}
function nextSlide() { if ( $('.active').next('li').length == 0 ) { $(this).removeClass('active'); $('.slider > ul > li:first-child').addClass('active'); transform = 0; } else { transform = ($('.active').index() + 1) * -100; $('.slider > ul > li.active').removeClass('active').next('li').addClass('active'); } $('.slider > ul > li').css('transform', 'translateX(' + transform + '%)'); $('.slider-nav .nav-dot:nth-child(' + ($(".slider ul li.active").index() + 1) + ')').addClass('active').siblings('span').removeClass('active');
}
$('body').on('click', '.slider-nav .nav-dot', function() { var number = $(this).index(); $('.slider-nav .nav-dot').removeClass('active'); $(this).addClass('active'); console.log($(this).siblings('li')); $('.slider > ul > li:nth-child(' + (number + 1) + ')').addClass('active').siblings('li').removeClass('active'); $('.slider > ul > li').css('transform', 'translateX(' + number * -100 + '%)');
});
/* End Slider */
/* On Ready */
$(function() { // slider checkSliderTimer(); $('.slider.arrows').append(leftArrow, rightArrow); $('.slider.nav').after(sliderNav); $('.slider > ul > li').each(function() { $('.slider-nav').append('<span class="nav-dot"></span>'); }); $('.slider-nav .nav-dot:first-child').addClass('active');
});
Developer | Kevin |
Username | kevinkenger |
Uploaded | September 28, 2022 |
Rating | 3 |
Size | 6,458 Kb |
Views | 12,144 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
A Pen by Kevin | 2,642 Kb |
City of Kent | 7,438 Kb |
Beech | 11,504 Kb |
Christian Living Communities | 5,236 Kb |
CTCA Video Example | 7,469 Kb |
OneAZ | 5,029 Kb |
Seven Canyons | 5,245 Kb |
Carpenter | 8,312 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Particle Motion trajectories | Sniejadlik | 5,899 Kb |
Fun animations with CSS3 | Minimalmonkey | 2,360 Kb |
LDE old privacy page | Jasonangle | 2,339 Kb |
Segments mouse following | Nosir | 2,909 Kb |
Front in Aracaju Logo Pure CSS | Shankarcabus | 2,581 Kb |
Pure CSS Animated Photo Stack | Depthdev | 2,486 Kb |
HTML5 Breakout | Jaysalvat | 4,873 Kb |
Shape Outside - Polygon | Stacy | 3,954 Kb |
Realistic Buttons | Stoypenny | 2,248 Kb |
Mobile first social buttons with no iframe | Alistairtweedie | 3,158 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!