City of Kent

Developer
Kevin
Size
7,438 Kb
Views
6,072
  1. City of Kent Previews
  2. City of Kent HTML Codes
  3. City of Kent CSS Codes
  4. City of Kent JS Codes

How do I make an city of kent?

What is a city of kent? How do you make a city of kent? This script and codes were developed by Kevin on 28 September 2022, Wednesday.

City of Kent Previews
IQ Test

City of Kent - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>City of Kent</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <nav class="navigation"> <div class="row"> <div class="logo"> <img src="https://com.jobing.static.s3.amazonaws.com/company/sites/kevdev/city-of-kent/city-of-kent-logo.png" alt="City of Kent logo"> </div> <ul class="menu"> <li class="menu-item"> <a class="menu-link" href="/">Overview</a> </li> <li class="menu-item"> <a class="menu-link" href="/living-in-kent">Living in Kent</a> </li> <li class="menu-item"> <a class="menu-link" href="/why-work-for-kent">Why Work For Kent</a> </li> <li class="menu-item"> <a class="menu-link" href="/jobs">Jobs</a> </li> </ul> </div>
</nav>
<header class="header"> <h1 class="h1">City of Kent Careers</h1>
</header>
<section class="s1 s1--overview"> <div class="row"> <div class="lg-6 columns"> <h2 class="h2">Purpose. People. Passion.</h2> <p>For us, it’s about doing what we love in a place we can thrive. We are strengthened by a shared enthusiasm for excellence and commitment to helping each other explore the limits of our potential.</p> </div> <div class="lg-6 columns"> <img src="https://com.jobing.static.s3.amazonaws.com/company/sites/kevdev/city-of-kent/_video-placeholder.jpg" alt="video placeholder"> </div> </div>
</section>
<section class="s2 s2--overview"> <div class="lg-6 columns big-callout"> <div class="big-callout-overlay"></div> <div class="big-callout-border"></div> <a href="/why-work-for-us"> <span class="h2 italic">Why Work For Us</span> <span class="callout-link">Explore</span> </a> </div> <div class="lg-6 columns big-callout"> <div class="big-callout-overlay"></div> <div class="big-callout-border"></div> <a href="/living-in-kent"> <span class="h2 italic">Living In Kent</span> <span class="callout-link">Explore</span> </a> </div>
</section>
<section class="s3 s3--overview"> <div class="row"> <h2 class="h2 ribbon blue">Our Departments</h2> <p>It takes a varied group of committed professionals to offer the level of service that exemplifies City of Kent. Explore what opportunities await you. </div> <div class="row"> <div class="lg-4 lg-push-2 columns corrections"> <p> <a href="/corrections-and-law-enforcement">Corrections and Law Enforcement</a> </p> </div> <div class="lg-4 columns parks"> <p> <a href="/parks-and-recreation">Parks and Recreation</a> </p> </div> </div> <div class="row"> <div class="lg-4 columns grounds"> <p> <a href="/grounds-and-landscaping">Grounds and Landscaping</a> </p> </div> <div class="lg-4 columns tech"> <p> <a href="/tech-talent-and-engineering">Tech Talent and Engineering</a> </p> </div> <div class="lg-4 columns public"> <p> <a href="/public-works">Public Works</a> </p> </div> </div> <div class="row"> <div class="lg-4 lg-push-2 columns instructional"> <p> <a href="/instructional">Instructional</a> </p> </div> <div class="lg-4 columns utilities"> <p> <a href="/utilities">Utilities</a> </p> </div> </div> <div class="row"> <div class="lg-4 lg-push-4 columns transportation"> <p> <a href="/transportation">Transportation</a> </p> </div> </div> <a class="btn btn--lg">View All Jobs</a>
</section>
<section class="s4 s4--overview"> <div class="row"> <h2 class="h2 ribbon yellow">Our Hiring Process</h2> <div class="lg-8 lg-push-2 columns"> <p>Our team members love where they work and it shows. That’s why we are thorough with our applicants, ensuring that we hire a diverse group of people that share our mission and unbridled passion for elevating our community, the City of Kent.</p> </div> </div> <div class="row"> <div class="small-text"> <p>Click on a step to learn more.</p> </div> <div class="paragrams accordion horizontal"> <ul> <li class="one"> <a>1</a> <p> <span class="close">&times;</span> test content here</p> </li> <li class="two"> <a>2</a> <p> <span class="close">&times;</span> test content here</p> </li> <li class="three"> <a><span>\what</span></a> <p> <span class="close">&times;</span> test content here</p> </li> <li class="four"> <a>4</a> <p> <span class="close">&times;</span> test content here</p> </li> <li class="five"> <a>5</a> <p> <span class="close">&times;</span> test content here</p> </li> <li class="six"> <a>6</a> <p> <span class="close">&times;</span> test content here </p> </li> </ul> </div> </div>
</section>
<footer></footer> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

City of Kent - Script Codes CSS Codes

html,
body { padding: 0; margin: 0;
}
body { font-size: 18px;
}
/* Layout */
.row { width: 90%; max-width: 1440px; margin-left: auto; margin-right: auto;
}
.row:after { content: ""; display: table; clear: both;
}
.column,
.columns { padding-left: 1.5%; padding-right: 1.5%; width: 100%; float: left; box-sizing: border-box; position: relative;
}
.sm-12 { width: 100%;
}
.sm-11 { width: 91.666666667%;
}
.sm-10 { width: 83.333333333%;
}
.sm-9 { width: 75%;
}
.sm-8 { width: 66.666666667%;
}
.sm-7 { width: 58.333333333%;
}
.sm-6 { width: 50%;
}
.sm-5 { width: 41.666666667%;
}
.sm-4 { width: 33.333333333%;
}
.sm-3 { width: 25%;
}
.sm-2 { width: 16.666666667%;
}
.sm-1 { width: 8.333333333%;
}
/* Components */
.navigation { background: #fff;
}
.logo { display: inline-block; padding: 15px; box-sizing: border-box; width: 150px;
}
img { max-width: 100%;
}
.menu { float: right; margin-top: 35px;
}
.menu-item { display: inline-block; margin: 0 15px;
}
.header { background: url("https://com.jobing.static.s3.amazonaws.com/company/sites/kevdev/city-of-kent/bg__header--overview.jpg") center no-repeat; background-size: cover; padding: 1px; height: 35vw;
}
.h1 { color: #fff; text-align: center; background: rgba(108, 180, 63, 0.8); width: 75%; margin: 25vw auto 0; padding: 15px; position: relative;
}
.h1:before { content: ''; width: 0; height: 0; border-top: 67.5px solid transparent; border-right: 25px solid rgba(108, 180, 63, 0.8); position: absolute; left: -25px; top: 0;
}
.h1:after { content: ''; width: 0; height: 0; border-bottom: 70px solid transparent; border-left: 25px solid rgba(108, 180, 63, 0.8); position: absolute; right: -25px; top: 0;
}
.h2 { color: #fff; font-size: 2em; display: inline-block; width: auto; padding: 10px 20px; position: relative;
}
.h2.ribbon { text-align: center; margin-left: auto; margin-right: auto;
}
.h2.ribbon:before { content: ''; width: 0; height: 0; border-top: 61px solid transparent; border-right: 25px solid rgba(108, 180, 63, 0.8); position: absolute; left: -25px; top: 0;
}
.h2.ribbon:after { content: ''; width: 0; height: 0; border-bottom: 60px solid transparent; border-left: 25px solid rgba(108, 180, 63, 0.8); position: absolute; right: -25px; top: 0;
}
.h2.blue { background: #0080C5;
}
.h2.blue:before { border-right: 25px solid #0080C5;
}
.h2.blue:after { border-left: 25px solid #0080C5;
}
.h2.yellow { background: #D6DF21;
}
.h2.yellow:before { border-right: 25px solid #D6DF21;
}
.h2.yellow:after { border-left: 25px solid #D6DF21;
}
.italic { font-style: italic;
}
.s1--overview { margin-top: 48px;
}
.s1--overview .h2 { color: #4b4b4b;
}
.big-callout { text-align: center; height: 25vw; background: tomato; position: relative;
}
.big-callout .h2 { margin-top: 10vw;
}
.big-callout .callout-link { margin-top: 7.5vw; display: block; opacity: 0; text-transform: uppercase; font-weight: bold;
}
.big-callout a { text-decoration: none; color: #12A79D;
}
.big-callout-overlay { position: absolute; width: 100%; height: 100%; left: 0; background: #000; opacity: 0;
}
.big-callout-border { position: absolute; width: 90%; height: 90%; top: 5%; left: 5%; background: transparent; border: 2px solid #fff; opacity: 0;
}
.big-callout .h2,
.big-callout .callout-link { transition: .3s ease; position: relative; z-index: 2;
}
.big-callout-border,
.big-callout-overlay { transition: .2s ease;
}
.big-callout:hover .h2 { margin-top: 7.5vw;
}
.big-callout:hover .callout-link { opacity: 1;
}
.big-callout:hover .big-callout-border { opacity: 1;
}
.big-callout:hover .big-callout-overlay { opacity: .65;
}
.big-callout:first-child { background: url("https://com.jobing.static.s3.amazonaws.com/company/sites/kevdev/city-of-kent/_big-callout--left.jpg") 0 -25px no-repeat; background-size: cover;
}
.big-callout:last-child { background: url("https://com.jobing.static.s3.amazonaws.com/company/sites/kevdev/city-of-kent/_big-callout--right.jpg") 0 -25px no-repeat; background-size: cover;
}
.s3--overview { text-align: center;
}
.s3--overview .columns { min-height: 250px; display: table;
}
.s3--overview .columns p { display: table-cell; vertical-align: middle;
}
.s3--overview .columns p a { width: 150px; display: inline-block; color: #fff; text-decoration: none; font-weight: bold;
}
.s3--overview .lg-4 { margin-bottom: -8.5vw;
}
.corrections { background: url("https://com.jobing.static.s3.amazonaws.com/company/sites/kevdev/city-of-kent/bg__departments--corrections.png") center no-repeat;
}
.parks { background: url("https://com.jobing.static.s3.amazonaws.com/company/sites/kevdev/city-of-kent/bg__departments--parks.png") center no-repeat;
}
.grounds { background: url("https://com.jobing.static.s3.amazonaws.com/company/sites/kevdev/city-of-kent/bg__departments--grounds.png") center no-repeat;
}
.tech { background: url("https://com.jobing.static.s3.amazonaws.com/company/sites/kevdev/city-of-kent/bg__departments--tech.png") center no-repeat;
}
.public { background: url("https://com.jobing.static.s3.amazonaws.com/company/sites/kevdev/city-of-kent/bg__departments--public.png") center no-repeat;
}
.instructional { background: url("https://com.jobing.static.s3.amazonaws.com/company/sites/kevdev/city-of-kent/bg__departments--instructional.png") center no-repeat;
}
.utilities { background: url("https://com.jobing.static.s3.amazonaws.com/company/sites/kevdev/city-of-kent/bg__departments--utilities.png") center no-repeat;
}
.transportation { background: url("https://com.jobing.static.s3.amazonaws.com/company/sites/kevdev/city-of-kent/bg__departments--transportation.png") center no-repeat;
}
.s3--overview .row:last-of-type { margin-bottom: 175px;
}
.btn { text-transform: uppercase; padding: 1em 2em; color: #4b4b4b; border: 2px solid currentColor;
}
.s4--overview { margin-top: 50px; background: #f1f1f1; text-align: center; padding: 25px;
}
.small-text { font-size: .75em;
}
/* Accordion */
.accordion { list-style: none;
}
.accordion p .close { position: relative; float: right; top: -5px; right: 15px; font-size: 2em; cursor: pointer;
}
.accordion li > a { display: block; cursor: pointer; padding: 1.5%; box-sizing: border-box;
}
.accordion a,
.accordion p { color: rgba(255, 255, 255, 0.65);
}
.accordion li.open > a { opacity: .65;
}
.accordion-content-container { height: 0; overflow: hidden; transition: height .3s ease;
}
.accordion.horizontal li { float: left; position: relative; height: 200px; transition: width .3s ease; border: .5vw solid #f1f1f1; box-sizing: border-box;
}
.accordion.horizontal li > a { float: left; display: inline-block; height: 100%; width: 100%;
}
.accordion.horizontal li > a span { /* Safari */ -webkit-transform: rotate(-90deg); /* Firefox */ -moz-transform: rotate(-90deg); /* IE */ -ms-transform: rotate(-90deg); /* Opera */ -o-transform: rotate(-90deg); transform: rotate(-90deg); display: block; /* Internet Explorer */ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.accordion.horizontal li.open > a { width: 25%;
}
.accordion.horizontal .accordion-content-container { float: left; width: 0; height: 100%; overflow: auto;
}
.accordion .accordion-content-container p { height: auto; margin: 0; padding: 1.5%;
}
.accordion.horizontal li.open > .accordion-content-container { width: 75%;
}
.accordion .one { background: #6CB43F;
}
.accordion .two { background: #0D9344;
}
.accordion .three { background: #12A79D;
}
.accordion .four { background: #0080C5;
}
.accordion .five { background: #01529A;
}
.accordion .six { background: #243282;
}
/* Media Queries */
@media (min-width: 480px) { .md-12 { width: 100%; } .md-11 { width: 91.666666667%; } .md-10 { width: 83.333333333%; } .md-9 { width: 75%; } .md-8 { width: 66.666666667%; } .md-7 { width: 58.333333333%; } .md-6 { width: 50%; } .md-5 { width: 41.666666667%; } .md-4 { width: 33.333333333%; } .md-3 { width: 25%; } .md-2 { width: 16.666666667%; } .md-1 { width: 8.333333333%; }
}
@media (min-width: 1024px) { .lg-12 { width: 100%; } .lg-11 { width: 91.666666667%; } .lg-10 { width: 83.333333333%; } .lg-9 { width: 75%; } .lg-8 { width: 66.666666667%; } .lg-7 { width: 58.333333333%; } .lg-6 { width: 50%; } .lg-5 { width: 41.666666667%; } .lg-4 { width: 33.333333333%; } .lg-3 { width: 25%; } .lg-2 { width: 16.666666667%; } .lg-1 { width: 8.333333333%; } .lg-push-4 { margin-left: 33.333333333%; } .lg-push-2 { margin-left: 16.666666667%; }
}

City of Kent - Script Codes JS Codes

/* Accordion */
$('.accordion li > a, .accordion li > p .close').click(function() { var el = $(this).parents('li'); el.toggleClass('open'); growAccDiv(el);
});
function growAccDiv(el) { if (el) { if (el.hasClass('open')) { if ( $('.accordion').hasClass('horizontal') ) { el.css({ width: '50%' }); el.siblings('li').removeClass('open').css({ width: (50 / ( $('.accordion li').length - 1) ) + '%' }); el.children('.accordion-content-container').css({ height: '100%' }) } else { el.children('.accordion-content-container').css({ height: el.children('.accordion-content-container').children('p').height() + 50 }); } } else { if ( $('.accordion').hasClass('horizontal') ) { $('.accordion li').css({ width: (100 / $('.accordion li').length) + '%' }); } else { el.children('.accordion-content-container').css({ height: 0 }); } } } else { if ( $('.accordion').hasClass('horizontal') ) { $('.accordion li.open:first-child').siblings().removeClass('open'); } else { $('.accordion li.open').each(function() { var container = $(this).children('.accordion-content-container'); container.css({ height: container.children('p').height() + 50 }); }); } }
}
/* End Accordion */
// On ready
$(function() { //accordion if ( $('.accordion').length > 0 ) { $('.accordion li > p').wrap('<div class="accordion-content-container"></div>'); growAccDiv(); $('.accordion.horizontal li').css('width', (100 / $('.accordion.horizontal li').length) + '%'); }
});
City of Kent - Script Codes
City of Kent - Script Codes
Home Page Home
Developer Kevin
Username kevinkenger
Uploaded September 28, 2022
Rating 3
Size 7,438 Kb
Views 6,072
Do you need developer help for City of Kent?

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!

Kevin (kevinkenger) Script Codes
Name
Seven Canyons
A Pen by Kevin
Beech
CTCA Video Example
Carpenter
OneAZ
Christian Living Communities
Auto-Chlor
Create amazing blog posts with AI!

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!