JSFiddle - React, Tailwind, and code Playground
by HappyCougar
HTML
<link rel="stylesheet" href="http://rlexpert.ru/templates/real/css/style.css">
<script src="http://rlexpert.ru/templates/real/javascript/jquery.carouFredSel-6.2.1-packed.js"></script>
<div id="main">
<img src="http://rlexpert.ru/templates/real/images/u_slider.jpg" alt="Юридическая помощь при продаже авто" />
<div id="two_columns_block">
<div class="left_column">
<h3>Бесплатная консультация</h3>
<p class="gray_itallic">Просто оставьте ваши данные ниже</p>
<input type="text" name="name" id="u_input_name" value="" />
<input type="text" name="phone" id="u_input_phone" value="" />
<textarea name="message" class="u_input_message" id="u_input_message"></textarea>
<p id="u_input_name_descr">Ваше имя:</p>
<p id="u_input_phone_descr">Ваш телефон:</p>
<p id="u_input_message_descr">Описание проблемы:</p>
<p class="yellow_button" id="send_button">Отправить заявку</p>
<p id="u_form_descr_bottom">* Встреча в офисе компании проводится по предварительному
согласованию!</p>
<a href="#" id="data_agreement">соглашение об обработке персональных данных</a>
</div>
<div class="right_column">
<h2>НАШИ ПРЕИМУЩЕСТВА</h2>
<table id="right_column_table">
<tr>
<td><img src="http://rlexpert.ru/templates/real/images/u_icon_2.png" alt="Бесплатная консультация юриста по страховому праву!" /></td>
<td>Бесплатная консультация юриста по страховому праву!</td>
</tr>
<tr>
<td><img src="http://rlexpert.ru/templates/real/images/u_icon_1.png" alt="Бесплатная консультация эксперта оценщика!" /></td>
<td>Бесплатная консультация эксперта оценщика!</td>
</tr>
<tr>
<td><img src="http://rlexpert.ru/templates/real/images/u_icon_3.png" alt="Бесплатная...CSS
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,600&subset=cyrillic,latin);
body {
font-family:arial;
font-size:14px;
}
input, textarea {
-moz-box-shadow:
inset 0px 2px 3px rgba(31, 31, 30, 0.4);
-webkit-box-shadow:
inset 0px 2px 3px rgba(31, 31, 30, 0.4);
box-shadow:
inset 0px 2px 3px rgba(31, 31, 30, 0.4);
border:0px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
display:block;
border-bottom: 1px solid #E7E7E7;
resize: none;
outline: none;
}
input {
height:30px;
text-indent:10px;
}
h2 {
font-size: 22px;
color: #1C96D3;
font-weight: normal;
}
h3 {
font-size:22px;
color:#1c96d3;
font-family: 'Open Sans', sans-serif;
}
h4 {
font-family: arial;
font-size: 17px;
}
#main {
width:940px;
background: #E9EFF5;
min-height:1000px;
}
.left_column, .right_column {
display:inline-block;
vertical-align: top;
}
.left_column {
height:355px;
width:460px;
background: #ffffff;
background: -moz-linear-gradient(top, #ffffff 1%, #e9e9ce 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#ffffff), color-stop(100%,#e9e9ce));
background: -webkit-linear-gradient(top, #ffffff 1%,#e9e9ce 100%);
background: -o-linear-gradient(top, #ffffff 1%,#e9e9ce 100%);
background: -ms-linear-gradient(top, #ffffff 1%,#e9e9ce 100%);
background: linear-gradient(to bottom, #ffffff 1%,#e9e9ce 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e9e9ce',GradientType=0 );
border:1px solid #dee4eb;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.right_column {
margin-left:20px;
width:450px;
}
#two_columns_block {
margin: 20px 0px;
color:#58585a;
position:relative;
}
.left_column h3 {
margin: 10px 0px 0px 0px;
text-align:center;
}
.gray_itallic {
font-style:...JavaScript
$("#u_slider_block_holder").carouFredSel({
width : 860,
height : 150,
items : 1,
scroll : 1,
auto : {
duration : 1500,
timeoutDuration: 3000,
pauseOnHover: true
},
prev : {
duration : 1500,
button : "#u_slider_arrow_left",
key : "left"
},
next : {
duration : 1500,
button : "#u_slider_arrow_right",
key : "right"
},
});