Page Code:
<html> <head> <title>Хоккейная экипировка</title> <link rel="stylesheet" type="text/css" href="css/style.css"> </head> <body> <header><div class = "headBlock" id="blink">Хоккейная экипировка</div></header> <div class = ""></div> <div class = "buttonPanel"> <a href="#" class="button25" onclick="location.href='contacts.html';">Контакты</a> <a href="#" class="button25" onclick="location.href='location.html';">Где мы находимся</a> <a href="#" class="button25" onclick="location.href='galery.html';">Галерея</a> <a href="#" class="button25" onclick="location.href='mail.html';">Написать консультанту</a> <a href="#" class="button25">Отзывы клиентов</a> </div> <div class = "menu"> <form class="form-1" action="autorization.html" method ="post"> Авторизация <p class="field"> <input type="text" name="login" placeholder="Логин"> <i class="icon-user icon-large"></i> </p> <p class="field"> <input type="password" name="password" placeholder="Пароль"> <i class="icon-lock icon-large"></i> </p> <p class="submit"> <button type="submit" name="submit"><i class="icon-arrow-right icon-large">ОК</i></button> </p> <a href="./registration.html">Регистрация</a> </form> <table> <thead> <th>Главное меню</th> </thead> <tbody> <tr><td>Каталог</td></tr> <tr><td>Наши поставщики</td></tr> <tr><td onclick="location.href='time.html';">Сроки поставок и график работы</td></tr> <tr><td onclick="location.href='floor.html';">Расчет стоимости полового покрытия</tr> <tr><td onclick="location.href='wallpapers.html';">Расчет стоимости обоев</tr> <tr><td onclick="location.href='colors.html';">Расчет стоимости лако-красочных изделий</tr> <tr><td onclick="location.href='blocks.html';">Расчет стоимости газосиликатных блоков</tr> <tr><td onclick="location.href='brick.html';">Расчет стоимости силикатного кирпича</tr> <tr><td onclick="location.href='cement.html';">Расчет стоимости цемента</tr> <tr><td onclick="location.href='roof.html';">Расчет стоимости шифера</tr> <tr><td onclick="location.href='discount.html';">Расчет скидки</tr> <tr><td>О компании</tr> </tbody> </table> <div id="blink"><br>Зарегестрируйтесь и получите больше возможностей<br></div> </div> <div class = "centerBlock" id="result"> <h2>О хоккейной экипировке</h2> <div align = "left"> <p>Хоккей является одной из самых жестких и быстрых командных игр. 12 человек в полном комплекте защиты борются за одну-единственную шайбу, которая, при очень сильном ударе, развивает приличную скорость и способна нанести серьезную травму игроку. Однако это не единственная опасность в игре – травмироваться можно и лезвием конька, столкновением с соперником или бортом площадки, и после сильного удара клюшкой. К счастью, большинства повреждений можно с легкостью избежать, если купить хоккейную экипировку высокого качества и грамотно ею пользоваться.</p> <p>Примером для подражания является хоккейная экипировка Bauer, которую предпочитает большинство команд КХЛ. Купить краги этой компании – значит получить преимущество в умении управляться с клюшкой и шайбой. Широкий ассортимент предоставляемых товаров для игры в хоккей – одно из преимуществ этой американской марки. Разумеется, конкуренты не дремлют и хоккейная экипировка Reebok вместе с дочерней компанией CCM стала одной из самых популярных за рубежом, среди команд Национальной Хоккейной Лиги. Зачастую перед начинающими хоккеистами встает дилемма – купить хоккейные краги которой из этих фирм будет предпочтительнее? В таком случае всё решают собственные ощущения от ношения той или иной амуниции. </p> </div> </div> <footer> <a href="#" class="button" onclick="location.href='location.html';">О разработчике</a> </footer> <script src = "js/loadPages.js"></script> </body> It is necessary to "tightly" fix the menu after the heder, so as not to go up and down.
CSS:
@import url(authorizationForm.css); @import url(button.css); @import url(forms.css); header{ background: url('img/Myheader.jpg') no-repeat; background-position: absolute; background-size:100%; border-radius: 5px 5px 5px 5px; border: 5px solid white; margin: 0 5% 1% 5%; -webkit-box-shadow: 1px 3px 16px 0px rgba(0,0,0,0.75); -moz-box-shadow: 1px 3px 16px 0px rgba(0,0,0,0.75); box-shadow: 1px 3px 16px 0px rgba(0,0,0,0.75); } h{ display: block; margin: 0 auto; color: #343434; font-weight: normal; font-family: 'Ultra', sans-serif; font-size: 20px; line-height: 20px; text-transform: uppercase; text-shadow: 0 2px white, 0 3px #777; } div.menu{ font-family: 'Arial'; background: #C6CCD3; width: 20%; min-height: 30%; border-radius: 5px 5px 5px 5px; margin: 0 5% 5% 6%; padding: 0.5% 0.5% 0.5% 0.5%; float: left; text-align: center; opacity: 0.9; } body{ background: url('img/fon.jpg') repeat; background-size: 100%; } table { width: 90%; min-height: 25%; padding: 10px; text-align: center; margin: 5% 5% 0 5%; border-collapse: collapse; background: #FFF5EE; } td, th { height: 7%; padding: 3px; border: 1px solid #000; } th { background: #696969; color: #333; } tbody tr:hover { background: #D1FFA3; color: #29331F; font: 25pt/25pt times new roman; text-align: center; } div.centerBlock{ text-align: center; float: left; max-width: 60%; min-width: 60%; margin: 0 1% 1% 1%; border-radius: 60px 60px 0 0 / 5px 5px 0 0; background: #FFF5EE; -webkit-box-shadow: 1px 3px 16px 0px rgba(0,0,0,0.75); -moz-box-shadow: 1px 3px 16px 0px rgba(0,0,0,0.75); box-shadow: 1px 3px 16px 0px rgba(0,0,0,0.75); padding: 20px 20px 20px 20px; background-image:linear-gradient(to top, #b5bdc8 0%, #828c95 36%, #28343b 100%); } div.buttonPanel{ position: fixed; top: 10%; width: 100%; height: 5%; margin: 0 5% 1% 5%; padding: 1% 1% 1% 1%; font-size:12px; } div.headBlock{ width: 20%; margin: 2% 0 0 2.5%; font: 40pt/40pt Buxton Sketch; color: white; text-align: center; } footer{ max-width: 90%; height: 5%; text-align: center; margin: 50% 5% 0 1%; position: fixed; left: 5%; bottom: 25; /* Левый нижний угол */ } 
