Fully Flexbox Landing Page

Developer
Maxim Konoval
Size
9,592 Kb
Views
30,360
  1. Fully Flexbox Landing Page Previews
  2. Fully Flexbox Landing Page HTML Codes
  3. Fully Flexbox Landing Page CSS Codes
  4. Fully Flexbox Landing Page JS Codes

How do I make an fully flexbox landing page?

No Floats. Only Flexbox.. What is a fully flexbox landing page? How do you make a fully flexbox landing page? This script and codes were developed by Maxim Konoval on 16 September 2022, Friday.

Fully Flexbox Landing Page Previews
IQ Test

Fully Flexbox Landing Page - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Fully Flexbox Landing Page</title> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Работа в Израиле</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900&subset=cyrillic" rel="stylesheet">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <html lang="ru">
<body>	<header class="header_main_flex"><!-- Main Header -->	<div class="logo_top">	<img src="https://www.congress-security.com/other-projects/hiisrael/image/logo.png" alt="Логотип">	</div>	<nav class="menu_top">	<ul class="menu_flex">	<li><a href="#section-2">Вакансии</a></li>	<li><a href="#section-4">4 шага</a></li>	<li><a href="#section-5">6 причин</a></li>	<li><a href="#section-6">Выгода</a></li>	<li><a href="#section-8">Гарантии</a></li>	<li><a href="#section-9">Сроки</a></li>	</ul>	</nav>	<div class="phone_top">	<span>+38 098 361 49 83</span>	<a href="javascript:popUpShow()">перезвоните мне</a>	</div>	</header>	<section id="section-1"><!-- Top Form -->	<h1>Трудоустройство</h1>	<h3>в Израиле</h3>	<p>Зарплата от <span>1500$</span> до <span>2500$</span></p>	<h3>Успейте оставить заявку!</h3>	<form method="post" id="form1" class="form">	<fieldset form="form1">	<legend>Оставьте заявку и мы обязательно Вам перезвоним</legend>	<input type="text" name="name" placeholder="Введите ваше имя" required>	<input type="tel" name="phone" placeholder="Введите ваш телефон: (xxx) xxx xxxx" title="Формат ввода: (xxx) xxx xxxx" pattern="\([0-9]{3}\)\s[0-9]{3}\s[0-9]{4}" required>	<input type="email" name="email" placeholder="Введите ваш email" title="Введите действующий email" required>	</fieldset>	<input type="submit" name="submit" value="Оставить Заявку">	</form>	</section>	<section id="section-2" class="prof1"><!-- Vacancies -->	<h2>Самые популярные вакансии в Израиле</h2>	<nav class="menu_vacancies">	<ul class="vacancies menu_flex">	<li><a href="#prof1" class="prof1 selected">Разнорабочий</a></li>	<li><a href="#prof2" class="prof2">Сварщик</a></li>	<li><a href="#prof3" class="prof3">Маляр-штукатур</a></li>	<li><a href="#prof4" class="prof4">Электрик</a></li>	<li><a href="#prof5" class="prof5">Слесарь</a></li>	</ul>	</nav>	<div id="prof1" class="vacancy selected">	<h4>Разнорабочий</h4>	<p>зарплата:</p>	<p>30 000 - 45 000 грн.</p>	<button onclick="popUpShow()">Хочу Эту Работу</button>	</div>	<div id="prof2" class="vacancy">	<h4>Сварщик</h4>	<p>зарплата:</p>	<p>40 000 - 60 000 грн.</p>	<button onclick="popUpShow()">Хочу Эту Работу</button>	</div>	<div id="prof3" class="vacancy">	<h4>Маляр-штукатур</h4>	<p>зарплата:</p>	<p>30 000 - 40 000 грн.</p>	<button onclick="popUpShow()">Хочу Эту Работу</button>	</div>	<div id="prof4" class="vacancy">	<h4>Электрик</h4>	<p>зарплата:</p>	<p>35 000 - 50 000 грн.</p>	<button onclick="popUpShow()">Хочу Эту Работу</button>	</div>	<div id="prof5" class="vacancy">	<h4>Слесарь</h4>	<p>зарплата:</p>	<p>30 000 - 40 000 грн.</p>	<button onclick="popUpShow()">Хочу Эту Работу</button>	</div>	</section>	<section id="section-3"><!-- Second Form -->	<h2>Не упускайте свой шанс!</h2>	<form method="post" id="form2" class="form">	<fieldset form="form2">	<legend>Оставьте заявку и мы обязательно Вам перезвоним</legend>	<input type="text" name="name" placeholder="Введите ваше имя" required>	<input type="tel" name="phone" placeholder="Введите ваш телефон: (xxx) xxx xxxx" title="Формат ввода: (xxx) xxx xxxx" pattern="\([0-9]{3}\)\s[0-9]{3}\s[0-9]{4}" required>	<input type="email" name="email" placeholder="Введите ваш email" title="Введите действующий email" required>	</fieldset>	<input type="submit" name="submit" value="Оставить Заявку">	</form>	</section>	<section id="section-4"><!-- Four Steps -->	<h2>Сколько времени Вы готовы потратить,<br>чтобы устроиться на работу?</h2>	<div class="steps_flex">	<div class="self step">	<h4>Самостоятельное трудоустройство</h4>	<table>	<tr>	<td class="gray">1.</td>	<td>поиск вакансии на зарубежных ресурсах</td>	</tr>	<tr>	<td class="gray">2.</td>	<td>оформление визы - <strong>180$</strong></td>	</tr>	<tr>	<td class="gray">3.</td>	<td>оформление страховки - <strong>100$</strong></td>	</tr>	<tr>	<td class="gray">4.</td>	<td>покупка билетов - <strong>700$</strong></td>	</tr>	<tr>	<td class="gray">5.</td>	<td>подбор и съем жилья - <strong>700$</strong></td>	</tr>	<tr>	<td class="gray">6.</td>	<td>прохождение собеседования</td>	</tr>	<tr>	<td class="gray">7.</td>	<td>ожидание решения</td>	</tr>	<tr>	<td class="gray">8.</td>	<td>подписание договора</td>	</tr>	</table>	<mark class="bronze">Вы потратите 2 месяца и свыше 2000$.<br>И нет гарантии, что найдете работу!</mark>	</div>	<div class="four step">	<h4>Трудоустройство в 4 шага</h4>	<table>	<tr>	<td class="gray">1.</td>	<td>пройдите собеседование по скайпу</td>	</tr>	<tr>	<td class="gray">2.</td>	<td>подпишите контракт удаленно</td>	</tr>	<tr>	<td class="gray">3.</td>	<td>виза, перелет и проживание за счет работодателя</td>	</tr>	<tr>	<td class="gray">4.</td>	<td>работа по контракту</td>	</tr>	</table>	<button onclick="popUpShow()">Оставить Заявку</button>	</div>	</div>	</section>	<section id="section-5"><!-- Six Reasons -->	<h2>6 причин работать в Израиле</h2>	<ul class="reasons_flex">	<li>	<h4>Легальная работа</h4>	<p>Вы работаете по контракту, где прописаны все обязательства обеих сторон</p>	</li>	<li>	<h4>Лучшие вакансии</h4>	<p>Мы предлагаем высокооплачиваемую работу в хороших условиях</p>	</li>	<li>	<h4>Экономия денег</h4>	<p>Вы не тратитесь на проживание и питание, что позволяет Вам экономить свой доход для других целей</p>	</li>	<li>	<h4>Высокий зароботок</h4>	<p>Минимальная зарплата 1500$ + щедрые чаевые каждый месяц с возможностью карьерного роста</p>	</li>	<li>	<h4>Все развлечения Израиля</h4>	<p>Вы будете жить в одном из самых красивых и развитых городов мира, где лето длится 365 дней в году</p>	</li>	<li>	<h4>Гарантии</h4>	<p>В случае увольнения у Вас есть 30 дней на поиск новой работы или полностью оплачиваемый перелет домой</p>	</li>	</ul>	</section>	<section id="section-6"><!-- Profit Table -->	<h2>Почему работа в Израиле выгодна для Вас?</h2>	<table class="profit_table">	<thead>	<tr>	<th></th>	<th>Обычная работа</th>	<th>Работа в Израиле</th>	</tr>	</thead>	<tfoot>	<tr>	<td></td>	<td class="gray">Каждое хмурое утро Вы думаете, что достойны лучшего и большего, но продолжаете довольствоваться тем, что есть.	</td>	<td class="bronze">Вы живете в одном из лучших городов планеты, где солнце светит 365 дней в году, занимаясь любимым делом.	</td>	</tr>	</tfoot>	<tbody>	<tr>	<td class="gray">Средняя зарплата:</td>	<td>450-550 $</td>	<td>от 1500 $</td>	</tr>	<tr>	<td class="gray">Расходы на питание:</td>	<td>150-200 $</td>	<td class="gold">бесплатно</td>	</tr>	<tr>	<td class="gray">Расходы на транспорт:</td>	<td>50 $</td>	<td class="gold">бесплатно</td>	</tr>	<tr>	<td class="gray">Расходы на жилье:</td>	<td>50-400 $</td>	<td class="gold">бесплатно</td>	</tr>	<tr>	<td class="gray">Ежемесячные накопления:</td>	<td>0 $</td>	<td>до 1000 $</td>	</tr>	</tbody>	</table>	<i class="gray"><span class="red">*</span> курс доллара по НБУ</i>	</section>	<section id="section-7"><!-- Passport and Third Form -->	<h2>Всего 1 документ для работы в Израиле</h2>	<div class="passport">	<p>Нужен только загранпаспорт</p>	<img src="https://www.congress-security.com/other-projects/hiisrael/image/passport.png" alt="Passport">	</div>	<form method="post" id="form3" class="form">	<fieldset form="form3">	<legend>Оставьте заявку и мы обязательно перезвоним</legend>	<input type="text" name="name" placeholder="Введите ваше имя" required>	<input type="tel" name="phone" placeholder="Введите ваш телефон: (xxx) xxx xxxx" title="Формат ввода: (xxx) xxx xxxx" pattern="\([0-9]{3}\)\s[0-9]{3}\s[0-9]{4}" required>	<input type="email" name="email" placeholder="Введите ваш email" title="Введите действующий email" required>	</fieldset>	<input type="submit" name="submit" value="Оставить Заявку">	</form>	</section>	<section id="section-8"><!-- Guarantees -->	<h2>Наши гарантии</h2>	<article>	<h3>1&ensp;&ensp; Гарантия Результата</h3>	<p>Оплата наших услуг только после подписания контракта а работодателем</p>	<h3>2&ensp;&ensp; Высокая Зарплата</h3>	<p>Мы предлагаем самые выгодные вакансии:<br>зарплата в среднем выше на 200-300$</p>	<h3>3&ensp;&ensp; Поддержка в Израиле</h3>	<p>Если у Вас возникли проблемы, Вы всегда можете связаться с нами удобным для Вас способом. У нас есть представитель в Израиле, а также Вы можете связаться с нашим офисом</p>	</article>	</section>	<section id="section-9"><!-- Chart -->	<h2>От заявки на сайте до работы в Израиле<br>&ndash;<br>1 месяц</h2>	<div class="chart_flex">	<div class="data-left">	<p class="gray">1 день</p>	<p class="black">С Вами связывается наш менеджер для консультации</p>	<p class="gray">1&ndash;3 дня</p>	<p class="black">Вы проходите собеседование по скайпу с нашим агентом</p>	<p class="gray">1&ndash;3 дня</p>	<p class="black">Вы проходите собеседование по скайпу с работодателем</p>	<p class="gray last">10&ndash;15 дней</p>	<p class="black last">Вылет в Израиль</p>	<i class="gray"><span class="red">*</span> сроки могут отличаться<br>в зависимости от конкретной ситуации</i>	</div>	<div class="data-right">	<p class="gray">1 день</p>	<p class="black">Вы оставляете заявку на сайте</p>	<p class="gray">1&ndash;3 дня</p>	<p class="black">Вы заполняете анкету и высылаете ее нам</p>	<p class="gray">5&ndash;10 дней</p>	<p class="black">Мы подбираем для Вас вакансию или ищем альтернативы</p>	<p class="gray">1&ndash;2 дня</p>	<p class="black">Вы оплачиваете наши услуги</p>	</div>	</div>	</section>	<section id="section-10"><!-- Last Form #4-->	<div class="last_form_flex">	<div class="form_left_title_flex">	<h2>Успейте оставить<br>заявку!</h2>	<p>Успей оставить заявку и получи<br>высокооплачиваемую работу в Израиле</p>	</div>	<form method="post" id="form4" class="form">	<fieldset form="form4">	<legend><strong>Оставьте заявку</strong><br>и наш менеджер свяжется с Вами в ближайшее время</legend>	<input type="text" name="name" placeholder="Введите ваше имя" required>	<input type="tel" name="phone" placeholder="Введите ваш телефон: (xxx) xxx xxxx" title="Формат ввода: (xxx) xxx xxxx" pattern="\([0-9]{3}\)\s[0-9]{3}\s[0-9]{4}" required>	<input type="email" name="email" placeholder="Введите ваш email" title="Введите действующий email" required>	</fieldset>	<input type="submit" name="submit" value="Оставить Заявку">	</form>	</div>	</section>	<footer><!-- Main Footer -->	<div class="copyright">	<span>+38 098 361 49 83</span>	<p>&copy; 2016 rabota-israel.org.ua</p>	</div>	</footer>	<div id="popup" class="popup"><!-- Popup for Form Sender -->	<div class="popup_block">	<button class="popup_close_button" onclick="popUpHide()">	<img src="https://www.congress-security.com/other-projects/hiisrael/image/cl_button.png" alt="Закрыть диалоговое окно">	</button>	<h3 class="succeeded">Ваша заявка успешно отправлена!</h3>	<h3 class="failed">Что-то пошло не так.<br>Попробуйте еще раз.</h3>	<form method="post" id="form_popup" class="form form_popup">	<fieldset form="form_popup">	<legend>Заполните форму и мы обязательно свяжемся с Вами</legend>	<input type="text" class="name-field" name="name" placeholder="Введите ваше имя" required>	<input type="tel" class="phone-field" name="phone" placeholder="Введите ваш телефон: (xxx) xxx xxxx" title="Формат ввода: (xxx) xxx xxxx" pattern="\([0-9]{3}\)\s[0-9]{3}\s[0-9]{4}" required>	<input type="email" class="email-field" name="email" placeholder="Введите ваш email" title="Введите действующий email" required>	</fieldset>	<input type="submit" class="send-form" name="submit" value="Оставить Заявку">	</form>	</div>	</div>
</body>
</html> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Fully Flexbox 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 */
html {	font-size: 62.5%;
}
body {	position: relative;	width: 100%;	max-width: 3072px;	font-family: Roboto, sans-serif;	font-size: 1.8rem;	line-height: 1.4;
}
h1,
h2,
h3,
h4,
h5,
h6 {	text-align: center;
}
h2 {	font-size: 4rem;	font-weight: 300;
}
section {	padding: 9rem 1%;
}
legend {	margin: 0 auto;	text-align: center;	font-size: 1.4rem;	font-weight: 300;
}
input {	display: block;	width: 40rem;	height: 4.5rem;	margin: 1rem auto;	padding: 0 2rem;	border-radius: 2px;
}
input[type=submit] {	height: 5rem;	padding: 0;	font-family: Roboto, sans-serif;	font-size: 1.4rem;	font-weight: 700;	text-transform: uppercase;	color: #fff;
}
button {	width: 20rem;	height: 4rem;	margin-top: 1rem;	font-family: Roboto, sans-serif;	font-size: 1.4rem;	font-weight: 500;	text-transform: uppercase;	border-radius: 2px;
}
[class$='_flex'] {	display: flex;	flex-flow: row wrap;	justify-content: space-around;
}
.menu_flex li {	margin: 10px;
}
.gray {	color: gray;
}
.gold {	color: #b1985a;
}
.bronze {	color: #978e76;
}
i.gray {	display: block;	font-size: 1.2rem;	font-weight: 300;
}
span.red {	color: red;
}
/* Main Header Styles*/
.header_main_flex {	position: absolute;	top: 0;	left: 0;	width: 100%;	padding: 2rem 5% 0;
}
.menu_top {	width: 57rem;
}
.menu_top a {	margin: 1rem;	font-size: 1.4rem;	color: #92c5db;
}
.logo_top,
.phone_top {	width: 13.5rem;
}
.logo_top {	text-align: center;
}
.phone_top {	text-align: right;	font-size: 1.6rem;	color: #92c5db;
}
.phone_top a {	font-size: 1.2rem;	color: #1ad9f0;
}
/* Section-1 - Form Top #1 */
#section-1 {	width: 100%;	padding-top: 13rem;	color: #fff;	background: #3f6178 url('https://www.congress-security.com/other-projects/hiisrael/image/tel-aviv.jpg') no-repeat center;	background-size: cover;
}
#section-1 h1 {	font-size: 5.4rem;	font-weight: 900;
}
#section-1 h3 {	padding-bottom: 2rem;	font-size: 3.6rem;	font-weight: 300;
}
#section-1 p {	padding-bottom: 4rem;
}
#section-1 p,
#section-1 legend {	text-align: center;	color: #a3daf1;
}
#section-1 span {	color: #fff;
}
#section-1 input {	color: #bcd1e0;	background: #102e45;
}
#section-1 input:focus {	color: #000;	background: #a6f6ff;
}
#section-1 input[type=submit] {	color: #fff;	background: #16c6db;
}
#section-1 input[type=submit]:hover {	background: #0bb8cd;
}
/* Section-2 - Vacancies */
#section-2 {	padding-right: 10%;	padding-left: 10%;	background: #cc9900;
}
#section-2.prof1 {	background: url('https://www.congress-security.com/other-projects/hiisrael/image/vacancies/raznorabochij.jpg') no-repeat top;
}
#section-2.prof2 {	background: url('https://www.congress-security.com/other-projects/hiisrael/image/vacancies/svarschik.jpg') no-repeat top;
}
#section-2.prof3 {	background: url('https://www.congress-security.com/other-projects/hiisrael/image/vacancies/malyar.jpg') no-repeat top;
}
#section-2.prof4 {	background: url('https://www.congress-security.com/other-projects/hiisrael/image/vacancies/electrik.jpg') no-repeat top;
}
#section-2.prof5 {	background: url('https://www.congress-security.com/other-projects/hiisrael/image/vacancies/slesar.jpg') no-repeat top;
}
#section-2.prof1,
#section-2.prof2,
#section-2.prof3,
#section-2.prof4,
#section-2.prof5 {	background-size: cover;	transition: all .5s ease;
}
#section-2 h2 {	padding-bottom: 3rem;	color: #fff;
}
.menu_vacancies a {	padding: 1rem 2rem;	line-height: 4rem;	font-size: 1.8rem;	font-weight: 400;	color: #fff;	border-radius: 2px;
}
.menu_vacancies a:hover,
.menu_vacancies a.selected {	color: #000;	background: #fff;	transition: all .5s ease;
}
.vacancy {	display: none;	width: 31rem;	margin: 6rem auto 0;	padding: 3rem 1rem;	text-align: center;	background: #fff;	border-radius: 2px;	transition: all .5s ease;
}
.vacancy.selected {	display: block;
}
.vacancy h4,
.vacancy p:last-of-type {	padding-bottom: 2rem;	font-size: 2.4rem;
}
.vacancy h4 {	font-weight: 400;
}
.vacancy p:last-of-type {	font-weight: 500;
}
#section-2 button {	color: #011424;	background: #ffd800;
}
#section-2 button:hover {	background: #fc0;
}
/* Section-3 - Second Form #2 */
#section-3 {	background: #fff176;
}
#section-3 h2 {	padding-bottom: 3rem;	font-size: 3rem;	font-weight: bold;	font-family: Georgia, serif;	font-style: italic;
}
#section-3 legend {	color: #2f5b6d;
}
#section-3 input {	color: #341f00;	background-color: #f3c40a;
}
#section-3 input:focus {	background-color: #fff;	color: #801a03;
}
#section-3 input[type=submit] {	color: #fff;	background-color: #3a6171;
}
#section-3 input[type=submit]:hover {	background-color: #2f5b6d;
}
/* Section-4 - Four Steps */
#section-4 {	padding-right: 15%;	padding-left: 15%;	background-color: #42488c;
}
#section-4 h2 {	padding-bottom: 5rem;	color: #fff;
}
.step {	width: 35rem;	min-width: 320px;	background: #fff;	border-radius: 4px;
}
.step td:last-child {	padding: 0 0 1rem 1rem;
}
.self {	padding: 3rem 4rem;	font-size: 1.2rem;
}
.self h4 {	font-size: 1.8rem;
}
.self table {	margin: 2rem 0;
}
.self mark {	background: #fff5d5;
}
.four {	padding: 5rem 4rem;
}
.four table {	margin: 3rem 0 4rem;	font-size: 1.4rem;
}
#section-4 button {	display: block;	margin: 0 auto;	color: #fff;	background: #76599e;
}
#section-4 button:hover {	background: #6e4f99;
}
/* Section-5 - Six Reasons */
#section-5 {	padding-right: 10%;	padding-left: 10%;	color: #95d8ff;	background: #0f1b46;
}
#section-5 h2 {	padding-bottom: 2rem;
}
.reasons_flex li {	width: 30%;	padding: 3rem 2rem 0;
}
.reasons_flex h4 {	text-align: left;	font-weight: 500;
}
.reasons_flex p {	padding-top: 0.5rem;	font-size: 1.4rem;	font-weight: 100;
}
/* Section-6 - Profit Table */
#section-6 {	background: #fff;
}
#section-6 h2 {	padding-bottom: 4rem;
}
#section-6 p:last-of-type {	padding: 2rem 20% 0;
}
.profit_table {	width: 75rem;	margin: 0 auto;
}
.profit_table th,
.profit_table td {	width: 33.333%;	padding: 1rem;	vertical-align: middle;
}
.profit_table td:first-child {	font-size: 1.6rem;
}
.profit_table th,
.profit_table tbody td:nth-child(n+2) {	text-align: center;	font-weight: 500;
}
.profit_table tfoot td {	padding: 2rem;	line-height: 1;	font-size: 1.2rem;
}
.profit_table thead {	border-bottom: 1px solid #e1e7e9;
}
.profit_table tbody tr:nth-child(odd) {	background: #f3f7f8;
}
.profit_table th:last-child,
.profit_table tbody tr:nth-child(even) td:last-child,
.profit_table tfoot td:last-child {	background: #fcf9f2;
}
.profit_table tbody tr:nth-child(odd) td:last-child {	background: #fcf4e0;
}
#section-6 i.gray {	padding: 20px 0 0 20%;
}
/* section-7 - Passport and Third Form #3 */
#section-7 {	padding-top: 5rem;	text-align: center;	background: #fff;
}
#section-7 h2 {	padding-bottom: 3rem;
}
.passport {	padding-bottom: 4rem;
}
.passport p {	padding-bottom: 1rem;	font-weight: 300;
}
#section-7 input:not([type=submit]) {	color: #747b7d;	border: 1px solid #d8dfe1;
}
#section-7 input[type=submit] {	color: #66442c;	background: #ffd800;
}
#section-7 input[type=submit]:hover {	background: #fc0;
}
/* section-8 - Guarantees */
#section-8 {	color: #fff;	background: #86a3c6 url('https://www.congress-security.com/other-projects/hiisrael/image/israel.jpg') no-repeat center;	background-size: cover;
}
#section-8 article {	width: 70rem;	margin: 0 auto;
}
#section-8 h3 {	padding: 3rem 0 1rem;	text-align: left;	font-size: 1.8rem;	font-weight: 500;	text-transform: uppercase;
}
#section-8 p {	padding-left: 3.25rem;	font-size: 1.6rem;	font-weight: 300;
}
/* section-9 - Chart */
#section-9 {	padding-bottom: 1rem;	background: #fff;
}
#section-9 h2 {	line-height: 1.2;
}
.chart_flex {	flex-flow: row nowrap;	justify-content: center;	height: 650px;	padding-top: 30px;	font-size: 1.4rem;	font-weight: 700;	background: url('https://www.congress-security.com/other-projects/hiisrael/image/plane.png') no-repeat 50% 48px;
}
.chart_flex p.gray:not(:first-child) {	padding-top: 82px;
}
.data-left {	width: 415px;	padding: 58px 20px 0 0;	text-align: right;
}
.data-right {	width: 415px;	padding-left: 20px;
}
.data-left p:last-of-type {	font-size: 1.8rem;
}
.data-left .gray.last {	margin-top: 15px;
}
.data-left i.gray {	padding: 30px 30% 0 0;
}
/* section-10 - Last Form #4 */
#section-10 {	padding-bottom: 15rem;	text-align: center;	color: #fff;	background: #110b19 url('https://www.congress-security.com/other-projects/hiisrael/image/nigh-israel.jpg') no-repeat center;	background-size: cover;
}
.last_form_flex {	width: 70%;	margin: 0 auto;	padding: 2rem;	background: url('https://www.congress-security.com/other-projects/hiisrael/image/nigh-israel-blur.jpg') no-repeat center;	background-size: cover;	border-radius: 10px;
}
.form_left_title_flex {	flex-flow: column nowrap;	justify-content: center;
}
.last_form_flex form {	margin: 0;	padding: 3rem 0;
}
#section-10 input {	color: #21383d;	background: #a5c7d6;
}
#section-10 input:focus {	color: #000;	background: #fff;
}
#section-10 input[type=submit] {	color: #fff;	background: #16c6db;
}
#section-10 input[type=submit]:hover {	background: #0bb8cd;
}
/* Main Footer */
footer {	position: absolute;	bottom: 0;	left: 0;	width: 100%;	color: #fff;
}
.copyright {	width: 25rem;	margin: 0 auto;	padding: 1rem;	text-align: center;	font-size: 1.4rem;	background: #1b1b1b url('https://www.congress-security.com/other-projects/hiisrael/image/nigh-israel-blur.jpg') no-repeat center 20%;	border-top-left-radius: 10px;	border-top-right-radius: 10px;
}
/* Popup Form */
#popup {	position: fixed;	top: 0;	left: 0;	display: none;	width: 100%;	min-height: 100%;	padding-top: 20vh;	background: rgba(0, 0, 0, .5);
}
.popup_block {	position: relative;	width: 45rem;	margin: 0 auto;	padding: 2rem;	background: #3f6178;	border-radius: 10px;
}
.popup_block h3 {	display: none;
}
#form_popup legend {	color: #fff;
}
#form_popup.submitted {	visibility: hidden;
}
.succeeded.submitted,
.failed.submitted {	position: relative;	top: 18vh;	display: block;	width: 90%;	margin: 0 auto;	text-align: center;	color: #fff;
}
.send-form {	color: #fff;	background: #16c6db;
}
.send-form:hover {	background: #0bb8cd;
}
.popup_close_button {	position: absolute;	top: -2rem;	right: -0.5rem;	width: 30px;	height: 30px;	background-color: transparent;
}
/* Media Queries (Desktop First) */
@media only screen and (max-width: 1280px) {	.last_form_flex {	width: 80%;	}
}
@media only screen and (max-width: 1080px) {	.header_main_flex,	#section-2,	#section-4,	#section-5 {	padding-right: 1%;	padding-left: 1%;	}	.last_form_flex {	width: 75%;	}
}
@media only screen and (max-width: 880px) {	.header_main_flex,	.menu_flex {	justify-content: center;	}	.logo_top {	padding-top: 7px;	text-align: left;	}	.phone_top {	order: 1;	}	.menu_top {	order: 2;	flex-grow: 1;	width: 100%;	padding-top: 0.5rem;	}
}
/* Only Chart Section-9 Queries */
@media only screen and (max-width: 860px) {	.data-left {	margin-right: -415px;	padding-right: 0;	text-align: center;	}	.data-right {	padding-left: 0;	text-align: center;	}
}
@media only screen and (min-width: 481px) and (max-width: 860px) {	.chart_flex p.black {	padding-top: 13px;	}	.chart_flex p.black.last {	padding-top: 0;	}	.chart_flex p.gray:not(:first-child) {	margin-top: -12px;	}	.data-left p.gray.last {	margin-top: 55px;	}
}
/* Chart END */
@media only screen and (max-width: 768px) {	section {	padding: 5rem 1%;	}	.reasons_flex li {	flex-grow: 1;	width: 45%;	}	.step {	width: 70%;	}	.step table {	width: 60%;	margin: 2rem auto;	}	.self {	margin-bottom: 1rem;	}	.self mark {	display: block;	text-align: center;	}	.profit_table {	width: 100%;	}	.profit_table tfoot td {	padding: 1rem;	}	#section-8 article {	width: 90%;	margin: 0 auto;	}
}
@media only screen and (max-width: 640px) {	html {	font-size: 60%;	}	body {	line-height: 1.2;	}	.logo_top {	padding-top: 3px;	}	#section-1 {	padding-top: 16rem;	}	#section-1 h1 {	font-size: 4.4rem;	}	.step table {	width: 80%;	}	.profit_table th,	.profit_table td,	.profit_table tfoot td {	padding: 4px;	}	.chart_flex {	height: 620px;	background: url('https://www.congress-security.com/other-projects/hiisrael/image/plane.png') no-repeat 50% 44px;	background-size: 29px;	}	.last_form_flex {	width: 95%;	}
}
@media only screen and (max-width: 480px) {	html {	font-size: 58%;	}	h2,	#section-1 h3 {	font-size: 3rem;	}	section {	padding: 3rem 1%;	}	legend {	padding-bottom: 3px;	}	input {	width: 29rem;	height: 4rem;	margin: 0.5rem auto;	}	input[type=submit] {	height: 4.5rem;	}	#section-1 {	padding-top: 17rem;	}	#section-1 h1 {	font-size: 4rem;	}	.step {	width: 90%;	padding: 3rem 2rem;	}	.reasons_flex li {	width: 90%;	text-align: center;	}	.reasons_flex li h4 {	text-align: center;	}	.passport img {	width: 300px;	}	#section-9 {	padding-right: 0;	padding-left: 0;	}	.chart_flex {	height: 490px;	font-size: 1.2rem;	background: #fff;	}	.chart_flex p.gray:not(:first-child) {	padding-top: 62px;	}	.chart_flex p.black {	padding-bottom: 5px;	border-bottom: 1px solid #ccc;	}	.data-left {	width: 340px;	margin-right: -340px;	padding-top: 48px;	}	.data-right {	width: 340px;	}	#section-10 {	padding-bottom: 10rem;	}	.popup_block {	width: 33rem;	}
}
@media only screen and (max-width: 360px) {	section,	.header_main_flex,	#section-2,	#section-4,	#section-5,	#section-6,	.profit_table th,	.profit_table td,	.profit_table tfoot td {	padding-right: 1px;	padding-left: 1px;	}	input {	width: 27rem;	padding: 0 1rem;	}	#section-1 h1 {	font-size: 3.4rem;	}	.step {	width: 100%;	}	.passport img {	width: 280px;	}	.chart_flex {	height: 430px;	font-size: 1rem;	}	.chart_flex p.gray:not(:first-child) {	padding-top: 48px;	}	.data-left {	width: 290px;	margin-right: -290px;	padding-top: 38px;	}	.data-right {	width: 290px;	}	.popup_block {	width: 29rem;	padding: 2rem 1rem;	}
}

Fully Flexbox Landing Page - Script Codes JS Codes

$(document).ready(function() {
/// Menu Top Links Anchor Scroll ///	$('.menu_top a').click(function(e) {	e.preventDefault();	var menuLink = $(this).attr('href');	var sectionDist = $(menuLink).offset().top;	$('html, body').animate({scrollTop: sectionDist}, 1200);	});
/// Section-2 Professions Switcher ///	$('.menu_vacancies a').click(function(e) {	e.preventDefault();	// Section Background Switching //	var prof_class = $(this).attr('class');	$('#section-2').removeClass();	$('#section-2').addClass(prof_class);	// Menu Links Switching //	$('.menu_vacancies a.selected').removeClass('selected');	$(this).addClass('selected');	// Professions Block Switching //	var prof = $(this).attr('href');	$('.vacancy').not(prof).css({'display':'none'});	$(prof).fadeIn();	});
/// Forms Sender ///	$('.form').submit(function(e) {	e.preventDefault();	var formData = $(this).serialize();	$.post('/send_form.php', formData, function(result) {	switch(result) {	case '1':	popUpShow();	$('#form_popup').addClass('submitted');	$('.succeeded').addClass('submitted');	break;	case '0':	default:	popUpShow();	$('#form_popup').addClass('submitted');	$('.failed').addClass('submitted');	break;	}	});	});
/// Popup Closing Functions ///	// Popup Hide // Button Closing // Alternate Way //	/*$('.popup_close_button').click(function(e) {	e.preventDefault();	$('#popup').fadeOut();	});*/	// Popup Hide // Non Target Closing //	$(document).mouseup(function(e) {	var popUp = $('.popup_block');	if (!popUp.is(e.target) && popUp.has(e.target).length === 0) {	$('#popup').fadeOut();	$('body').css({'overflow':'visible'});	}	});
}); /// Ready END ///
/// Popup Visibility Functions ///	// Popup Show Function //	function popUpShow() {	$('#popup').fadeIn();	// $('body').css({'overflow':'hidden'});	}	// Popup Hide Function //	function popUpHide() {	$('#popup').fadeOut();	// $('body').css({'overflow':'visible'});	}
Fully Flexbox Landing Page - Script Codes
Fully Flexbox Landing Page - Script Codes
Home Page Home
Developer Maxim Konoval
Username Said_FD
Uploaded September 16, 2022
Rating 3
Size 9,592 Kb
Views 30,360
Do you need developer help for Fully Flexbox 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
Animated Form
Brutal Responsive Landing Page Prototype
A Pen by Maxim Konoval
Animated Carousel on CSS with Minimal JS
CS-Service Landing Page
My Portfolio
Vanilla CSS Accordion and Responsive Tables
SVG Scalable Text
CRM Table Test
CSS Transforms Test
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!