Skip to content

Instantly share code, notes, and snippets.

@akakiev

akakiev/index.html

Created June 4, 2017 01:59
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save akakiev/88dac0af24ceaa1ae13d0df175d2290a to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save akakiev/88dac0af24ceaa1ae13d0df175d2290a to your computer and use it in GitHub Desktop.
Download ZIP
MotoRent
Raw
index.html
<div class="maindiv" id="main_div">
<div id="forheader">
<img id="my_header" src="http://a11.it-elit.pro/jQuery/t1/images/logo.jpg" width="900" height="108" alt="Хедер" title="Шапка сайта" />
</div>
<p id="w_h" align='center'></p>
<div id="forbody">
<h1 id="main_h1">Добро пожаловать на сайт компании MotoRent!</h1>
<p id='abzac1'><span class="pq">Мотоцикл — двухколёсное транспортное средство</span>, с коляской или без неё, имеющее максимальную массу не более 400 кг и/или
двигатель с объёмом более 50 см? в случае двигателя внутреннего сгорания (и/или
номинальную мощность более 4 кВт в случае электродвигателя. Впрочем, нормы
различаются в разных странах.) </p>
<div id="div_for_img">
<img id="img_1" src="http://a11.it-elit.pro/jQuery/t1/images/moto4.jpg" width="160" height="125" alt="Мотоцикл 1" />
<img id="img_2" src="http://a11.it-elit.pro/jQuery/t1/images/moto2.jpg" width="180" height="125" alt="Мотоцикл 2" />
<img id="img_3" src="http://a11.it-elit.pro/jQuery/t1/images/moto3.jpg" width="200" height="125" alt="Мотоцикл 3" />
<img id="img_4" src="http://a11.it-elit.pro/jQuery/t1/images/moto1.jpg" width="220" height="125" alt="Мотоцикл 4" />
</div>
<p><strong>На данный момент к прокату доступны следующие модели:</strong></p>
<!-- Ненумерованный список -->
<ol id="moto_models">
<li>Харлей Дэвидсон</li>
<li>Кроссовый мотоцикл</li>
<li>Гоночный мотоцикл</li>
<li>Концептуальный мотоцикл</li>
</ol>
<h3 id="my_h3"><span class="pq">Ссылки на сайты производителей</span> и спецификации мотоциклов:</h3>
<ul id="my_links">
<li><a href="http://www.yamaha-motor.ru" target="_blank" id="superlink">Yamaha Motors Russia</a></li>
<li><a href="documents/yamaha_fz6.PDF">Спецификация на мотоцикл Yamaha FZ6</a></li>
</ul>
<h3>Рассчет стоимости проката мотоциклов:</h3>
<!-- Форма -->
<form action="form.php" id="my_form">
<div id="bigform">
<fieldset>
<!-- Правый блок формы -->
<div id="div_form_1">
<fieldset id="innerfieldset">
<legend>Дополнительные опции</legend>
<p><strong>Нужны ли аксессуары?</strong></p>
<div id="format">
<input type="checkbox" value="sh" name="dop_oprions" id="shlem" />
<label for="shlem">Шлем</label>
<input type="checkbox" value="bag" name="dop_oprions" id="bag" />
<label for="bag">Багажник</label>
<input type="checkbox" value="od" name="dop_oprions" id="od" />
<label for="od">Мото-одежда</label>
</div>
<p><strong>Нужна ли страховка?</strong></p>
<div id="radio">
<input type="radio" id="inch_yes" value="yes" name="inch" />
<label for="inch">Да</label>
<input type="radio" id="inch_no" value="no" name="inch" />
<label for="inch">Нет</label>
</div>
</fieldset>
<input type="submit" value="Отправить заявку" id="my_button" />
</div>
<div id="div_form_2">
<span>Модель:</span>
<select name="moto" size="1" id="motoSelect">
<option value="1">Харлей Дэвидсон (100$ в день)</option>
<option value="2">Кроссовый мотоцикл (40$ в день)</option>
<option value="3">Гоночный мотоцикл (150$ в день)</option>
<option value="4">Концептуальный мотоцикл (340$ в день)</option>
</select>
<span>Дней:</span>
<select name="days" size="1" id="daysSelect">
<option value="1">1</option>
<option value="2">2</option>
</select>
<p><strong>Укажите Ваш email:</strong></p>
<input type="text" id="email" value="Пример: [email protected]" />
<p><strong>Ваши пожелания:</strong></p>
<textarea cols="45" rows="2" id="mytextarea"></textarea>
</div>
</fieldset>
</div>
</form>
<h3 id="sale">Мотоциклы на продажу (б/у):</h3>
<table width="550" id="moto_table" title="Таблица цен на мотоциклы" class="mototable">
<thead>
<tr>
<th><strong>Модель</strong></th>
<th><strong>Цена</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td>Харлей Дэвидсон</td>
<td>25000</td>
</tr>
<tr>
<td>Кроссовый мотоцикл</td>
<td>10000</td>
</tr>
</tbody>
</table>
<div id="forresults"></div>
</div>
<!-- Блок футера -->
<div id="forfooter">
<img src="http://a11.it-elit.pro/jQuery/t1/images/footer.jpg" width="900" height="67" alt="Футер" title="Производители" />
</div>
</div>
Raw
script.js
$('document').ready(function(){
$("#my_header").mouseup(function(){
alert("Bye! You now leave image logo!");
});
$("#abzac1").text("Мотоцикл - двоколісний транспортний засіб, з коляскою або без неї, що має максимальну масу не більше 400 кг і / або двигун з об'ємом понад 50 см? в разі двигуна внутрішнього згорання номінальна потужність понад 4 кВт. Втім, норми розрізняються в різних країнах.");
});
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
Raw
style.css
body
{
background-color: #151424;
background-image: url('../images/bg000000.jpg');
background-repeat: no-repeat;
color: #646464;
font-family: Tahoma;
font-size: 12px;
margin: 0;
padding-bottom: 15px;
padding-top: 15px;
}
.maindiv
{
background-color: #ffffff;
margin: 0 auto;
padding: 0;
width: 900px;
}
#forbody
{
padding: 20px;
}
#main_h1
{
color: #2C2C2C;
font-size: 16px;
margin-bottom: 20px;
}
h2
{
color: #2C2C2C;
font-size: 15px;
margin-bottom: 20px;
margin-top: 20px;
}
p
{
margin-left: 0;
}
p strong
{
color: #2C2C2C;
}
h3
{
color: #2C2C2C;
}
.mototable
{
border: 1px solid #cccccc;
margin-top: 15px;
}
.mototable thead tr
{
background-color: #f6f6f6;
height: 20px;
padding-left: 20px;
}
.mototable tbody tr td
{
padding-left: 20px;
text-align: left;
}
#myform div
{
margin: 20px;
}
#bigform
{
width: 850px;
}
#bigform span
{
color: #2c2c2c;
font-size: 11px;
}
#div_form_1
{
float: right;
width: 420px;
}
#div_form_2
{
width: 420px;
}
#div_form_1 #days
{
margin-left: 15px;
}
#my_button, select
{
background-color: #f6f6f6;
border: 1px solid #cccccc;
color: #2C2C2C;
font-size: 11px;
margin-left: 3px;
}
a
{
color: #505391;
}
fieldset
{
background-color: #e7e7f0;
border: 1px solid #cccccc;
padding: 15px;
width: 825px;
}
#innerfieldset
{
background-color: #f6f6f6;
border: 1px solid #cccccc;
margin-bottom: 10px;
width: 385px;
}
legend
{
color: #2c2c2c;
font-size: 11px;
}
input
{
background-color: #f6f6f6;
border: 1px solid #cccccc;
font-size: 11px;
}
textarea
{
background-color: #f6f6f6;
border: 1px solid #cccccc;
}
#sale
{
margin-top: 20px;
}
.new
{
border:1px solid silver;
background:#e4d7e8;
padding:5px 5px 5px 5px;
}
.my1
{
border:2px solid #cc0000;
width:850px;
height:160px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment