Brutal Responsive Landing Page Prototype
How do I make an brutal responsive landing page prototype?
Landing Page Prototype on FlexBox with no Design. What is a brutal responsive landing page prototype? How do you make a brutal responsive landing page prototype? This script and codes were developed by Maxim Konoval on 16 September 2022, Friday.
Brutal Responsive Landing Page Prototype - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Brutal Responsive Landing Page Prototype</title> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CS-Service</title>
<link href='https://fonts.googleapis.com/css?family=Lora:400,700&subset=latin,cyrillic' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <body> <header class="header_main"> <div class="location_flex"> <div class="header_logo"><h1>Конгресс Сервис</h1></div> <div class="header_address"> <strong>(044) 501-49-05</strong><br> <p>01601, г. Киев, Печерский спуск, 5, оф. 202-б</p> </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_flex"><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> </nav> </header> <main> <div class="banner_main"> <h2>- Main Banner -</h2> </div> <section id="about-us"> <h2>О компании</h2> <p>Частное предприятие «КОНГРЕСС- СЕРВИС» осуществляет свою деятельность на территории Украины с 2008 года. Нами предоставляется комплекс услуг для решения задач по обеспечению безопасности бизнеса и охраны объектов. <br><br> Деятельность ЧП «КОНГРЕСС-СЕРВИС» осуществляет на основании лицензии МВД Украины – серия АВ №472842 от 03.12.2014. <br><br> Наша задача - обеспечить надежную защиту имущества, товарно-материальных ценностей, здоровья, жизни, информации от внутренних и внешних угроз.</p> <h3>Компания имеет филиалы в городах: Киев, Харьков, Полтава, Одесса</h3> </section> <section id="service"> <h2>Предоставляемые услуги</h2> <div class="service_flex"> <div class="service_item"> <p>Физическая охрана объектов любых форм собственности и уровня сложности</p> </div> <div class="service_item"> <p>Охрана физических лиц и их сопровождение</p> </div> <div class="service_item"> <p>Охрана и сопровождение ценных грузов по территории всей Украины</p> </div> <div class="service_item"> <p>Обеспечение безопасности массовых мероприятий</p> </div> <div class="service_item"> <p>Пультовая охрана с выездом вооруженных групп мобильного реагирования</p> </div> <div class="service_item"> <p>Полный учет и контроль всех входящих/исходящих активов на предприятии (учет и аудит в режиме 24/365)</p> </div> <div class="service_item"> <p>Установка видеонаблюдения на объекте и в случае необходимости, предоставление операторов наблюдения</p> </div> </div> </section> <section id="personnel_flex"> <h2>Персонал</h2> <p>Все сотрудники службы охраны нашей компании проходят специальную подготовку и обучаются навыкам и тактике обеспечения охраны Заказчика, оказанию первой медицинской помощи, навыкам владения и применения травматического оружия и средств самообороны, особенно - навыкам защиты персонала и имущества Заказчика</p> <figure class="video_slider"> <div class="clip-1"> <video width="560" height="315" controls="controls" poster="https://www.congress-security.com/video/clip-1/Training-combat-operator.png"> <source src="https://www.congress-security.com/video/clip-1/Training-combat-operator.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> <source src="https://www.congress-security.com/video/clip-1/Training-combat-operator.webm" type='video/webm; codecs="vp8, vorbis"'> Элемент video не поддерживается вашим браузером. <a href="https://www.congress-security.com/video/clip-1/Training-combat-operator.mp4">Скачайте видео</a>. </video> </div> </figure> <p>Возраст сотрудников: от 22 до 50 лет. Все сотрудники компании перед приемом на работу обязательно проходят медицинское обследование и проверяются по базе данных МВД Украины</p> </section> <section id="equipment"> <h2>Снаряжение</h2> <p>По желанию Заказчика охранники могут быть одеты в строгий костюм или спецформу. Также, по договоренности с Заказчиком, все силы безопасности компании, которые обеспечивают охрану и безопасность, могут быть обеспечены спецсредствами по выбору:</p> <div class="equipment_flex"> <div class="equipment_item"><strong>Фонарь-дубинка</strong></div> <div class="equipment_item"><strong>Пистолет под патрон Флобера</strong></div> <div class="equipment_item"><strong>Травматическое оружие</strong></div> <div class="equipment_item"><strong>Бронежилеты и радиостанции</strong></div> </div> </section> <section id="red-zone"> <h2>Зона АТО</h2> <p>C 2014 на базе компании создано подразделение, которое занимается сопровождением гуманитарных грузов в зону проведения АТО на востоке Украины. Учитывая подготовку сотрудников компании и наличие бронированного автотранспорта, грузы доставляются на передовые позиции всей линии боевого столкновения. На данный момент осуществлено более 50 поездок в зону АТО.</p> </section> </main> <footer class="footer_main_flex"> <div class="footer_logo"> <h4>Congress Service Security (CSS)</h4> </div> <div class="footer_address"> <strong>(044) 501-49-05</strong><br> <p>01601, г. Киев, Печерский спуск, 5, оф. 202-б</p> </div> </footer>
</body> <script src="js/index.js"></script>
</body>
</html>
Brutal Responsive Landing Page Prototype - Script Codes CSS Codes
/* Reset Styles */
* { margin: 0; padding: 0; box-sizing: border-box; border: 0; outline: 0; vertical-align: baseline;
}
a { text-decoration: none;
}
a:hover { text-decoration: underline;
}
body { font-family: Lora, serif; font-size: 16px; line-height: 1.2;
}
section,
footer,
.banner_main { padding: 5rem 15% 0;
}
h1,
h2,
h3 { text-align: center;
}
[class$='_flex'] { display: flex; flex-flow: row wrap; justify-content: center;
}
/* Reset END */
/* Main Header Styles */
.main_header { padding-top: 1%;
}
.location_flex { flex-flow: row nowrap; justify-content: space-around; padding-top: 1rem;
}
.header_logo h1,
.footer_logo h1 { text-align: left; font-size: 24px;
}
.header_address,
.footer_address { text-align: right;
}
.menu_main_flex { padding: 3rem 0; text-align: right;
}
.menu_item { padding: 0.5rem 2%;
}
/* 1-st Section - Main Banner */
.banner_main { width: 100%; height: 19rem; background: #ccc url('') no-repeat center center; background-size: cover;
}
.banner_main h2 { padding-top: 5%; text-transform: uppercase; color: #555;
}
/* 2-nd Section - About Us */
#about-us { margin: 0 auto;
}
#about-us h3 { padding-top: 2rem;
}
#about-us p { padding-top: 2rem;
}
/* 3-rd Section - Service */
.service_item { width: 20rem; padding: 2rem 1% 0;
}
/* 4-th Section - Personnel */
#personnel_flex p:first-of-type { padding: 2rem 0;
}
.video_slider { padding-top: 1rem; text-align: center;
}
video { width: 100%; height: auto;
}
#personnel_flex p:last-of-type { padding-top: 2rem;
}
/* 5-th Section - Equipment */
#equipment p { padding: 2rem 0 1rem; text-align: center;
}
.equipment_item { padding: 1rem 2% 0; text-align: center;
}
/* 6-th Section - Red Zone */
#red-zone p { padding-top: 2rem;
}
/* Main Footer Styles */
.footer_main_flex { flex-flow: row nowrap; justify-content: space-around; padding: 5rem 0 1rem;
}
Brutal Responsive Landing Page Prototype - Script Codes JS Codes
/*! ScrollToAnchor.js v1.1,0 | Paul Browne | 2015 | GNU 2.0 */
(function() { var bod = document.getElementsByTagName("body")[0]; var FIREFOX = /Firefox/i.test(navigator.userAgent); if (FIREFOX) { bod = document.getElementsByTagName("html")[0]; } function animate(opts) { var start = new Date(), id = setInterval(function() { var timePassed = new Date() - start, progress = timePassed / opts.duration, delta = opts.delta(progress); if (progress > 1) { clearInterval(id); } window.addEventListener('click', function() { clearInterval(id); }); opts.step(delta); }, 1); } function move(duration, too) { animate({ duration: duration || 1200, delta: quad, step: function(quad) { bod.scrollTop = bod.scrollTop + (too - bod.scrollTop) * quad; } }); } function quad(progress) { return Math.pow(progress, 2); } function boo(evt) { var thehref = this.getAttribute('href').slice(1), idofhref = document.getElementById(thehref), disttotop = idofhref.offsetTop, length = Math.abs(disttotop - bod.scrollTop), timing; if (Math.abs(length) < 500) { timing = 1000; } if (Math.abs(length) > 2500) { timing = 2500; } else { timing = length; } move(timing, disttotop); evt.preventDefault(); } var elem = document.getElementsByTagName("a"); for (var i = 0; i < elem.length; ++i) { var href = elem[i].getAttribute('href'); if (href.indexOf("#") === 0) { elem[i].addEventListener('click', boo); } }
})();
Developer | Maxim Konoval |
Username | Said_FD |
Uploaded | September 16, 2022 |
Rating | 3 |
Size | 5,482 Kb |
Views | 32,384 |
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 |
CRM Table Test | 7,579 Kb |
Animated Carousel on CSS with Minimal JS | 6,787 Kb |
Structure Test | 6,467 Kb |
Fully Flexbox Landing Page | 9,592 Kb |
Vanilla CSS Accordion and Responsive Tables | 3,826 Kb |
Tactical Monkey | 2,889 Kb |
SVG Scalable Text | 1,451 Kb |
Vanilla CSS Switcher | 2,296 Kb |
CS-Service Landing Page | 6,657 Kb |
My Portfolio | 6,798 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 |
APortfolio | Skybutterfly | 5,174 Kb |
Segments mouse following | Nosir | 2,909 Kb |
JQuery Validate checkbox group | Lunaman | 2,466 Kb |
CSS Flip Animation | Bbodine1 | 2,525 Kb |
Loading animation | Codeams | 2,408 Kb |
Canvas snow | Win7killer | 2,572 Kb |
Simple Linear Regression with Editable Table | Melatonind | 3,264 Kb |
Hover Animation from UNIQLO | Insprd | 3,772 Kb |
Loading animation with css | Icebob | 2,947 Kb |
Popup Modal | Aldlevine | 3,696 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!