Показать сообщение отдельно
  #2 (permalink)  
Старый 27.03.2014, 21:22
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,123

avanesov89,

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
  <title> - jsFiddle demo by avanesov89</title>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <style type='text/css'>
#wrapper .info {width:1240px;margin:50px auto;height:900px;}
#wrapper .info img {display:block;margin:0 auto;}
#wrapper .info a {color:#cc3333;font-style:italic;font-size:14px;}
#wrapper .info a:hover {text-decoration:underline;}
#wrapper .info form {margin:0 auto;width:250px;}
#wrapper .info input {background:#fff;height: 35px;width:190px;border:none;padding-left:10px;font: 300 20px/24px'Open Sans condensed',sans-serif;color:#1b3647;margin:10px 0;}
#wrapper .info textarea {width:240px;border:none;padding-left:10px;font: 300 20px/24px'Open Sans condensed',sans-serif;color:#1b3647;margin:10px 0;height:150px;}
#wrapper .info button {background:#cc3333;border:none;text-align: center;height:35px;font:300 20px/20px'Open Sans',sans-serif;color:#fff;padding:0 5px;cursor:pointer;}
#wrapper .info .title {font-size:22px;line-height:34px;padding-left:10px;}
#wrapper .info .content {height:272px;color:#1b3647;font-size:14px;padding:10px;}
#wrapper .info .all {height:20px;color:#fff;padding:5px 10px;font-size:14px; position: relative; margin: 0px;}
#wrapper .info .all a {color:#fff;float:right;cursor:pointer;}
#wrapper .info span {display:block;}
#wrapper .info .all .forma {background:#1B3647;height:293px;left:-10px;width:380px;margin-top: -20px; position: relative ; display: none;}
#wrapper .info .left {height:365px;width:380px;float:left;}
#wrapper .info .left .title {color:#d06503;border-bottom:7px solid #d06503;}
#wrapper .info .left .content p {border-bottom:1px solid #d06503;padding: 10px 0;}
#wrapper .info .left .content p span {display:block;font-size:16px;text-align:right;}
#wrapper .info .left .all {background:#d06503;}
#wrapper .info .left .all span {float:right;}
  </style>
<script>
$(document).ready(function(){
    $(".hider").click(function(){
        $("#hidden:visible").stop().animate({"height": "hide","margin-top": "-20"}, 1000);
        $("#hidden:hidden").stop().animate({"height": "show","margin-top": "-314"}, 1000);
        return false;
    });
});
</script>
</head>
<body>
  <div id="wrapper">
    <div class="info"><div class="left">
				<div class="title">О нас говорят</div>
				<div class="content">
					<p>Данная модель отлично подошла для увеличения производственности погрузчиков<span>Иван, ООО "Компания"</span></p>
				<p>Данная модель отлично подошла для увеличения производственности погрузчиков<span>Иван, ООО "Компания"</span></p>
				<p>Данная модель отлично подошла для увеличения производственности погрузчиков<span>Иван, ООО "Компания"</span></p>
				</div>
				<div class="all">
                    Все новости <a class="hider">Ссылка</a>
<div id="hidden" class="forma" >
Для нас важно знать ваше мнение
<form onsubmit="return sendForm('10');" id="buyform10">
					<input type="text" name="name" placeholder="Ваше имя">
					<textarea type="text" name="name" placeholder="Ваше сообщение"></textarea>
					<button>Отправить</button>
				</form>

				</div>

				</div>
			</div></div></div>
</body>
</html>
Ответить с цитированием