CS-Service Landing Page

Developer
Maxim Konoval
Size
6,657 Kb
Views
36,432
  1. CS-Service Landing Page Previews
  2. CS-Service Landing Page HTML Codes
  3. CS-Service Landing Page CSS Codes
  4. CS-Service Landing Page JS Codes

How do I make an cs-service landing page?

Responsive Landing Page on FlexBox. Deployed page is here - http://www.congress-security.com. What is a cs-service landing page? How do you make a cs-service landing page? This script and codes were developed by Maxim Konoval on 16 September 2022, Friday.

CS-Service Landing Page Previews
IQ Test

CS-Service Landing Page - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CS-Service Landing Page</title>	<meta charset="UTF-8">	<meta name="viewport" content="width=device-width, initial-scale=1.0">	<title>Конгресс Сервис</title>	<link rel="shortcut icon" href="img/favicon/favicon.png" type="image/png">	<link href="https://fonts.googleapis.com/css?family=Merriweather:300,700&subset=cyrillic" rel="stylesheet"> <link rel='stylesheet prefetch' href='https://dl.dropboxusercontent.com/u/69747888/CS-Service/slick/slick.css'>
<link rel='stylesheet prefetch' href='https://dl.dropboxusercontent.com/u/69747888/CS-Service/slick/slick-theme.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <body>	<header class="header_main">	<div class="location_flex">	<div class="header_name">	<h1>Конгресс Сервис</h1>	<span>01601, г. Киев, Печерский спуск, 5, оф. 202-б</span>	</div>	<div class="header_contact">	<span><strong>(044) 501 49 05</strong> &ensp;или&ensp; <strong>(050) 352 40 63</strong></span><br>	<span><a href="mailto:[email protected]">[email protected]</a></span>	</div>	</div>	<nav class="menu_main_flex">	<div class="menu_item">	<a href="#about-us"><strong>О компании</strong></a>	</div>	<div class="menu_item">	<a href="#service"><strong>Услуги</strong></a>	</div>	<div class="menu_item">	<a href="#personnel"><strong>Персонал</strong></a>	</div>	<div class="menu_item">	<a href="#equipment"><strong>Снаряжение</strong></a>	</div>	<div class="menu_item">	<a href="#red-zone"><strong>Зона АТО</strong></a>	</div>	<div class="menu_item">	<a href="#gallery"><strong>Галерея</strong></a>	</div>	</nav>	</header>	<main>	<div class="banner_main">	<img src="https://www.congress-security.com/img/logo.svg" alt="Логотип компании Конгресс Сервис">	</div>	<section id="about-us">	<h2>О компании</h2>	<p>Частное предприятие «КОНГРЕСС- СЕРВИС» осуществляет свою деятельность на территории Украины с 2008 года. Нами предоставляется комплекс услуг для решения задач по обеспечению безопасности бизнеса и охраны объектов.</p>	<p>Деятельность ЧП «КОНГРЕСС-СЕРВИС» осуществляет на основании лицензии МВД Украины – серия АВ №472842 от 03.12.2014.</p>	<p>Наша задача - обеспечить надежную защиту имущества, товарно-материальных ценностей, здоровья, жизни, информации от внутренних и внешних угроз.</p>	</section>	<figure class="cities">	<p>Филиалы в городах:</p>	<div class="cities_flex">	<div class="city">	<img srcset="https://www.congress-security.com/img/crests/Kyiv_200.png 1x, https://www.congress-security.com/img/crests/Kyiv_500.png 2x" src="https://www.congress-security.com/img/crests/Kyiv_200.png" alt="Главный офис в Киеве" width="90" height="120">	<div><strong>Киев</strong></div>	</div>	<div class="city">	<img srcset="https://www.congress-security.com/img/crests/Kharkiv_200.png 1x, https://www.congress-security.com/img/crests/Kharkiv_500.png 2x" src="https://www.congress-security.com/img/crests/Kharkiv_200.png" alt="Филиал в Харькове" width="100" height="120">	<div><strong>Харьков</strong></div>	</div>	<div class="city">	<img srcset="https://www.congress-security.com/img/crests/Poltava_200.png 1x, https://www.congress-security.com/img/crests/Poltava_500.png 2x" src="https://www.congress-security.com/img/crests/Poltava_200.png" alt="Филиал в Полтаве" width="95" height="120">	<div><strong>Полтава</strong></div>	</div>	<div class="city">	<img srcset="https://www.congress-security.com/img/crests/Odesa_200.png 1x, https://www.congress-security.com/img/crests/Odesa_500.png 2x" src="https://www.congress-security.com/img/crests/Odesa_200.png" alt="Филиал в Одессе" width="90" height="120">	<div><strong>Одесса</strong></div>	</div>	</div>	</figure>	<section id="service">	<h2>Услуги</h2>	<ul class="services">	<li class="service_item">	<p>Физическая охрана объектов любых форм собственности и уровня сложности.</p>	</li>	<li class="service_item">	<p>Охрана физических лиц и их сопровождение.</p>	</li>	<li class="service_item">	<p>Охрана и сопровождение ценных грузов по территории всей Украины.</p>	</li>	<li class="service_item">	<p>Обеспечение безопасности массовых мероприятий.</p>	</li>	<li class="service_item">	<p>Пультовая охрана с выездом вооруженных групп мобильного реагирования.</p>	</li>	<li class="service_item">	<p>Полный учет и контроль всех входящих/исходящих активов на предприятии (учет и аудит в режиме 24/365).</p>	</li>	<li class="service_item">	<p>Установка видеонаблюдения на объекте и в случае необходимости, предоставление операторов наблюдения.</p>	</li>	</ul>	</section>	<section id="personnel">	<h2>Персонал</h2>	<p>Все сотрудники службы охраны нашей компании проходят специальную подготовку и обучаются навыкам и тактике обеспечения охраны Заказчика, оказанию первой медицинской помощи, навыкам владения и применения травматического оружия и средств самообороны, особенно - навыкам защиты персонала и имущества Заказчика.</p>	<figure class="video_wrapper">	<video controls="controls" poster="https://www.congress-security.com/video/clip-0/congress-service-security.jpg">	<source src="https://www.congress-security.com/video/clip-0/congress-service-security.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>	<source src="https://www.congress-security.com/video/clip-0/congress-service-security.webm" type='video/webm; codecs="vp8, vorbis"'>	Элемент video не поддерживается вашим браузером.	<a href="https://www.congress-security.com/video/clip-0/congress-service-security.mp4">Скачайте видео</a>	</video>	</figure>	<p>Возраст сотрудников: от 22 до 50 лет. Все сотрудники компании перед приемом на работу обязательно проходят медицинское обследование и проверяются по базе данных МВД Украины.</p>	</section>	<section id="equipment">	<h2>Снаряжение</h2>	<p>По желанию Заказчика охранники могут быть одеты в строгий костюм или спецформу.</p>	<p>Также, по договоренности с Заказчиком, все силы безопасности компании, которые обеспечивают охрану и безопасность, могут быть обеспечены спецсредствами по выбору:</p>	<div class="equipment_flex">	<div class="equipment_item">	<img src="https://www.congress-security.com/img/equipment-svg/revolver-2.svg" alt="Пистолет под патрон Флобера" width="100" height="70">	<div><strong>Пистолет под патрон Флобера</strong></div>	</div>	<div class="equipment_item">	<img src="https://www.congress-security.com/img/equipment-svg/armour-1.svg" alt="Бронежилеты и радиостанции" width="100" height="70">	<div><strong>Бронежилеты и радиостанции</strong></div>	</div>	<div class="equipment_item">	<img src="https://www.congress-security.com/img/equipment-svg/fort12.svg" alt="Травматическое оружие" width="100" height="70">	<div><strong>Травматическое оружие</strong></div>	</div>	<div class="equipment_item">	<img src="https://www.congress-security.com/img/equipment-svg/baton-1.svg" alt="Фонарь-дубинка" width="100" height="70">	<div><strong>Фонарь-дубинка</strong></div>	</div>	</div>	</section>	<section id="red-zone">	<h2>Зона АТО</h2>	<p>C 2014 на базе компании создано подразделение, которое занимается сопровождением гуманитарных грузов в зону проведения АТО на востоке Украины. Учитывая подготовку сотрудников компании и наличие бронированного автотранспорта, грузы доставляются на передовые позиции всей линии боевого столкновения. На данный момент осуществлено более 50 поездок в зону АТО.</p>	</section>	<section id="gallery"><h2>Галерея</h2></section>	</main>	<footer class="footer_main_flex">	<div class="footer_contact">	<div class="contact_phones">	<div class="prop"><span>Телефоны:</span></div>	<div class="value">	<span>(044) 501 49 05</span><br>	<span>(050) 352 40 63</span>	</div>	</div>	<div class="contact_email">	<div class="prop"><span>Почта:</span></div>	<div class="value"><span><a href="mailto:[email protected]">[email protected]</a></span></div>	</div>	<div class="contact_address">	<div class="prop"><span>Адрес:</span></div>	<div class="value"><span>01601, г. Киев, Печерский спуск, 5<br>оф. 202-б</span></div>	</div>	</div>	<div class="footer_name">	<h3>Конгресс Сервис</h3>	<span>2016 &copy; Congress Service. Security</span>	</div>	</footer>
</body> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

CS-Service Landing Page - Script Codes CSS Codes

/* Reset Styles */
* {	margin: 0;	padding: 0;	vertical-align: baseline;	box-sizing: border-box;	border: 0;	outline: 0;
}
ol,
ul {	list-style: none;
}
a {	text-decoration: none;
}
table {	border-collapse: collapse;	border-spacing: 0;
}
/* Reset END */
/* General Styles */
/* -------------------------------------------------------------------- */
/* Just change this props in media queries for different screen sizes. */
/* ------------------------------------------------------------------ */
html {	font-size: 62.5%;
}
header,
footer {	padding: 0 17%;
}
section,
.banner_main {	padding: 0 28%;
}
/* ------------------------------------------------- */
body {	width: 100%;	max-width: 3072px; min-width: 320px;	font-family: Arial, sans-serif;	font-size: 1.8rem;	line-height: 1.4;
}
h1 {	font-family: Merriweather, serif;	font-weight: 700;
}
h1,
h2 {	font-size: 3rem;
}
p {	padding-top: 4rem;	font-family: Merriweather, serif;	font-weight: 300;
}
nav a {	color: #000;	cursor: pointer;
}
[class$='_flex'] {	display: flex;	flex-flow: row wrap;	justify-content: space-between;
}
/* Main Header Styles */
.header_main {	padding-top: 2.4rem;	padding-bottom: 1.8rem;
}
.header_name,
.header_contact {	width: 50%;
}
.location_flex span {	font-size: 1.2rem;	color: #848484;
}
.header_contact {	padding-top: 1rem;	text-align: right;
}
.header_contact strong {	font-size: 2.1rem;	color: #000;
}
.header_contact a {	color: #000;
}
.menu_main_flex {	padding-top: 5rem;	font-size: 1.6rem;
}
.menu_item:last-child {	display: none;
}
/* 1-st Section - Main Banner */
main .banner_main {	width: 100%;	background-size: cover;
}
.banner_main {	height: 45rem;	background: #c7c7c7 url('https://www.congress-security.com/img/banners/trainings_1x.jpg') no-repeat center;
}
.banner_main img {	position: relative;	top: 15%;	display: block;	height: 75%;	margin: 0 auto;
}
/* 2-nd Section - About Us */
#about-us {	padding-top: 10rem;
}
/* Cities Figure */
.cities p {	padding-left: 28%;
}
.cities_flex {	padding: 5rem 17% 7rem;	text-align: center;
}
.city {	padding: 1.5rem 1rem;
}
/* 3-rd Section - Service */
#service {	padding-top: 9rem;	padding-bottom: 8.5rem;	background: #f1f1f1;
}
.service_item {	position: relative;
}
.service_item p::before {	content: '';	position: absolute;	top: 5rem;	left: -3rem;	width: 4px;	height: 4px;	border-radius: 50%;	background: #000;
}
/* 4-th Section - Personnel */
#personnel {	padding: 9rem 0 4.5rem;
}
#personnel h2,
#personnel p {	padding-right: 28%;	padding-left: 28%;
}
.video_wrapper {	width: 100%;	margin-top: 3.6rem;	padding: 0 17%;	background: #333;
}
video {	display: block;	width: 100%;	height: auto;
}
/* 5-th Section - Equipment */
#equipment {	padding-top: 9rem;	padding-bottom: 9rem;
}
.equipment_flex {	padding-top: 2.5rem;
}
.equipment_item {	width: 50%;	padding: 2rem 1rem;	text-align: center;
}
/* 6-th Section - Red Zone */
#red-zone {	padding-top: 6rem;	padding-bottom: 8.5rem;	color: #fff;	background: #696e6d;
}
/* Last 7-th Section - Gallery */
#gallery {	display: none;
}
/* Main Footer Styles */
.footer_main_flex {	padding-top: 4rem;	padding-bottom: 7rem;	font-size: 1.4rem;
}
.footer_contact {	padding-top: 4rem;
}
.prop,
.value {	display: inline-block;	vertical-align: top;
}
.prop {	width: 10rem;	color: #848484;
}
.contact_email {	padding: 2.5rem 0;
}
.contact_email a {	text-decoration: underline;	color: #2282ed;
}
.footer_name h3 {	padding: 3.2rem 0 0.5rem;	font-family: Merriweather, serif;	font-weight: 700;	font-size: 2.4rem;
}
.footer_name span {	color: #848484;
}
/* Media Queries ---------------------------- */
/* All Screens from 1920px ------------------ */
@media only screen and (min-width: 1920px) {	html {	font-size: 75%;	}	.banner_main {	height: 50rem;	background: #c7c7c7 url('https://www.congress-security.com/img/banners/trainings_2x.jpg') no-repeat center;	}
}
/* All Screens from 1224px to 1920px are okay */
/* All Screens from 768px to 1224px ----------- */
@media only screen and (max-width: 1224px) {	html {	font-size: 60%;	}	header,	footer,	.video_wrapper {	padding: 0 13%;	}	section,	.banner_main {	padding: 0 20%;	}	.banner_main {	height: 40rem;	background: #c7c7c7 url('https://www.congress-security.com/img/banners/trainings_0.5x.jpg') no-repeat center;	}	.cities p {	padding-left: 20%;	}	.cities_flex {	padding: 5rem 13% 7rem;	}	#personnel h2,	#personnel p {	padding-right: 20%;	padding-left: 20%;	}
}
@media only screen and (max-width: 890px) {	.header_name h1 {	font-size: 2.6rem;	}	.header_contact strong {	font-size: 1.7rem;	}
}
/* All Screens from 600px to 768px ---------- */
@media only screen and (max-width: 768px) {	html {	font-size: 55%;	}	header,	footer,	.video_wrapper {	padding: 0 5%;	}	p {	padding-top: 2.5rem;	}	section,	.banner_main {	padding: 0 10%;	}	.banner_main {	height: 35rem;	background: #c7c7c7 url('https://www.congress-security.com/img/banners/trainings_0.25x.jpg') no-repeat center;	}	#about-us {	padding-top: 5rem;	}	.cities p {	padding-left: 10%;	}	.cities_flex {	padding: 3rem 5% 4rem;	}	#service,	#red-zone {	padding-top: 5rem;	padding-bottom: 5rem;	}	.service_item p::before {	display: none;	}	#personnel {	padding-top: 5rem;	padding-bottom: 2rem;	}	#personnel h2,	#personnel p {	padding-right: 10%;	padding-left: 10%;	}	#equipment {	padding-top: 7rem;	padding-bottom: 3rem;	}	.footer_main_flex {	padding-top: 2rem;	padding-bottom: 3rem;	}
}
/* All Screens from 480px to 600px ---------- */
@media only screen and (max-width: 600px) {	html {	font-size: 50%;	}	h2 {	text-align: center;	}	header,	footer,	.video_wrapper {	padding: 0 3%;	}	p {	padding-top: 2rem;	}	section,	.banner_main {	padding: 0 6%;	}	.banner_main {	height: 30rem;	}	.cities p {	padding-left: 6%;	}	.cities_flex {	padding: 3rem 2% 4rem;	}	#personnel h2,	#personnel p {	padding-right: 6%;	padding-left: 6%;	}
}
@media only screen and (max-width: 520px) {	.location_flex {	flex-flow: column nowrap;	}	.header_name,	.header_contact {	width: 100%;	text-align: center;	}
}
/* All Screens to 480px --------------------- */
@media only screen and (max-width: 480px) {	.menu_main_flex {	justify-content: center;	padding-top: 3rem;	}	.menu_item {	padding: 1rem;	}	.banner_main {	height: 25rem;	}	.cities_flex {	justify-content: space-around;	padding: 1rem 2% 3rem;	}	.city img {	display: none;	}	.video_wrapper {	padding: 0;	}	.footer_main_flex {	justify-content: center;	padding-top: 0;	padding-bottom: 2rem;	}	.contact_email {	padding: 1.5rem 0;	}
}

CS-Service Landing Page - Script Codes JS Codes

$(document).ready(function(){	/* Anchor Smooth Scroll */	$('.menu_main_flex a').click(function(){	var target = $(this).attr('href');	$('html, body').animate({scrollTop: $(target).offset().top}, 500);	return false;	});
}); /*-------- Ready End ---------*/
CS-Service Landing Page - Script Codes
CS-Service Landing Page - Script Codes
Home Page Home
Developer Maxim Konoval
Username Said_FD
Uploaded September 16, 2022
Rating 3
Size 6,657 Kb
Views 36,432
Do you need developer help for CS-Service Landing Page?

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!

Maxim Konoval (Said_FD) Script Codes
Name
My Portfolio
Structure Test
Tactical Monkey
Vanilla CSS Switcher
Animated Form
Brutal Responsive Landing Page Prototype
Fully Flexbox Landing Page
CSS Transforms Test
CRM Table Test
Animated Carousel on CSS with Minimal JS
Create amazing Facebook ads 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!