hover эффект при наведении
|
РОКЕР,
где код html, css? |
<section class="pickYourPlan" id="pickYourPlan">
<h3>Pick your plan</h3> <p>Upgrade, downgrade or cancel anytime.</p> <div class="yourPlan centerBlockMain clearfix"> <article> <div class="headerPlan"> <h2>personal</h2> <p>Perfect Pack for Small Business</p> </div> <ul> <li><sup>$</sup><span class="p25">25</span><span class="mo">/MO</span></li> <li><strong>3 Gb</strong> of storage</li> <li><strong>10</strong>repositories</li> <li><strong>10</strong>parked domains</li> <li><strong>25 FTP</strong>accounts</li> </ul> <form action="formdata.php" method="post"> <input type="submit" name="submit" id="red" class="orderNow" value="order now"> </form> </article> <article> <div class="headerPlan"> <h2>bussines</h2> <p>Perfect Pack for Small Business</p> </div> <ul> <li><sup>$</sup><span class="p45">45</span><span class="mo">/MO</span></li> <li><strong>3 Gb</strong> of storage</li> <li><strong>10</strong>repositories</li> <li><strong>10</strong>parked domains</li> <li><strong>25 FTP</strong>accounts</li> </ul> <form action="formdata.php" method="post"> <input type="submit" name="submit" class="orderNow" value="order now"> </form> </article> <article> <div class="headerPlan"> <h2>personal</h2> <p>Perfect Pack for Small Business</p> </div> <ul> <li><sup>$</sup><span class="p65">65</span><span class="mo">/MO</span></li> <li><strong>3 Gb</strong> of storage</li> <li><strong>10</strong>repositories</li> <li><strong>10</strong>parked domains</li> <li><strong>25 FTP</strong>accounts</li> </ul> <form action="formdata.php" method="post"> <input type="submit" name="submit" class="orderNow" value="order now"> </form> </article> </div> </section> .pickYourPlan { margin-bottom: 200px; } .pickYourPlan h3 { color: #000; font-size: 2.5em; text-transform: capitalize; text-align: center; margin-bottom: 20px; } .pickYourPlan p { color: #000; font: bold 1em 'ptsansregular', sans-serif; text-align: center; margin-bottom: 38px; } .pickYourPlan article { border: 1px solid #BEBEBE; float: left; width: 31.7%; text-align: center; margin-bottom: 50px; } .pickYourPlan article:first-child { margin-left: 2.45%; border-right: 0; } .pickYourPlan article:last-child { border-left: 0; } article h2 { color: #2c3039; font-size: 1.125em; text-transform: uppercase; text-align: center; margin: 25px 0 6px; } .headerPlan p { color: #2c3039; font: bold 0.875em 'ptsansregular', sans-serif; margin-bottom: 50px; } .yourPlan ul li { list-style-type: none; margin: 15px; } .p25, .p45, .p65 { font: 2.5em 'robotobold', sans-serif; } .pickYourPlan sup { font: 1.5em 'robotobold', sans-serif; vertical-align: 40%; } .mo { font: bold 0.8em 'robotobold', sans-serif; } .orderNow { cursor: pointer; color: #fff; background: #2C3039; border: none; font: bold 0.875em 'ptsansbold', sans-serif; text-transform: uppercase; padding: 18px 65px; margin-top: 30px; margin-bottom: 15px; } .orderNow:hover { background: #e84c3d; } |
РОКЕР,
Пожалуйста, отформатируйте свой код! Для этого его можно заключить в специальные теги: js/css/html и т.п., например: [js] ... ваш код... [/js] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
РОКЕР,
<!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css">.pickYourPlan{ margin-bottom:200px; } .pickYourPlan h3{ color:#000; font-size:2.5em; text-transform:capitalize; text-align:center; margin-bottom:20px; } .pickYourPlan p{ color:#000; font:bold 1em 'ptsansregular',sans-serif; text-align:center; margin-bottom:38px; } .pickYourPlan article{ border:1px solid #BEBEBE; float:left; width:31.7%; text-align:center; margin-bottom:50px; } .pickYourPlan article:first-child{ margin-left:2.45%; border-right:0; } .pickYourPlan article:last-child{ border-left:0; } article h2{ color:#2c3039; font-size:1.125em; text-transform:uppercase; text-align:center; margin:25px 0 6px; } .headerPlan p{ color:#2c3039; font:bold 0.875em 'ptsansregular',sans-serif; margin-bottom:50px; } .yourPlan ul li{ list-style-type:none; margin:15px; } .p25,.p45,.p65{ font:2.5em 'robotobold',sans-serif; } .pickYourPlan sup{ font:1.5em 'robotobold',sans-serif; vertical-align:40%; } .mo{ font:bold 0.8em 'robotobold',sans-serif; } .orderNow{ cursor:pointer; color:#fff; background:#2C3039; border:none; font:bold 0.875em 'ptsansbold',sans-serif; text-transform:uppercase; padding:18px 65px; margin-top:30px; margin-bottom:15px; } article:hover .orderNow,article:hover .headerPlan{ background-color:#e84c3d; } article:hover{ background-color:#2C3039; color:#FFFFFF; } article:hover .headerPlan p,article:hover .headerPlan h2{ color:#FFFFFF; } </style> </head> <body> <section class="pickYourPlan" id="pickYourPlan"> <h3>Pick your plan</h3> <p>Upgrade, downgrade or cancel anytime.</p> <div class="yourPlan centerBlockMain clearfix"> <article> <div class="headerPlan"> <h2>personal</h2> <p>Perfect Pack for Small Business</p> </div> <ul> <li><sup>$</sup><span class="p25">25</span><span class="mo">/MO</span></li> <li><strong>3 Gb</strong> of storage</li> <li><strong>10</strong>repositories</li> <li><strong>10</strong>parked domains</li> <li><strong>25 FTP</strong>accounts</li> </ul> <form action="formdata.php" method="post"> <input type="submit" name="submit" id="red" class="orderNow" value="order now"> </form> </article> <article> <div class="headerPlan"> <h2>bussines</h2> <p>Perfect Pack for Small Business</p> </div> <ul> <li><sup>$</sup><span class="p45">45</span><span class="mo">/MO</span></li> <li><strong>3 Gb</strong> of storage</li> <li><strong>10</strong>repositories</li> <li><strong>10</strong>parked domains</li> <li><strong>25 FTP</strong>accounts</li> </ul> <form action="formdata.php" method="post"> <input type="submit" name="submit" class="orderNow" value="order now"> </form> </article> <article> <div class="headerPlan"> <h2>personal</h2> <p>Perfect Pack for Small Business</p> </div> <ul> <li><sup>$</sup><span class="p65">65</span><span class="mo">/MO</span></li> <li><strong>3 Gb</strong> of storage</li> <li><strong>10</strong>repositories</li> <li><strong>10</strong>parked domains</li> <li><strong>25 FTP</strong>accounts</li> </ul> <form action="formdata.php" method="post"> <input type="submit" name="submit" class="orderNow" value="order now"> </form> </article> </div> </section> </body> </html> |
<html> <style type="text/css"> .pickYourPlan { margin-bottom: 200px; } .pickYourPlan h3 { color: #000; font-size: 2.5em; text-transform: capitalize; text-align: center; margin-bottom: 20px; } .pickYourPlan p { color: #000; font: bold 1em 'ptsansregular', sans-serif; text-align: center; margin-bottom: 38px; } .pickYourPlan article { border: 1px solid #BEBEBE; float: left; width: 31.7%; text-align: center; margin-bottom: 50px; } .pickYourPlan article:first-child { margin-left: 2.45%; border-right: 0; } .pickYourPlan article:last-child { border-left: 0; } article h2 { color: #2c3039; font-size: 1.125em; text-transform: uppercase; text-align: center; margin: 25px 0 6px; } .headerPlan p { color: #2c3039; font: bold 0.875em 'ptsansregular', sans-serif; margin-bottom: 50px; } .yourPlan ul li { list-style-type: none; margin: 15px; } .p25, .p45, .p65 { font: 2.5em 'robotobold', sans-serif; } .pickYourPlan sup { font: 1.5em 'robotobold', sans-serif; vertical-align: 40%; } .mo { font: bold 0.8em 'robotobold', sans-serif; } .orderNow { cursor: pointer; color: #fff; background: #2C3039; border: none; font: bold 0.875em 'ptsansbold', sans-serif; text-transform: uppercase; padding: 18px 65px; margin-top: 30px; margin-bottom: 15px; } .orderNow:hover { background: #e84c3d; } .red { color: #ea6456; } </style> <section class="pickYourPlan" id="pickYourPlan"> <h3>Pick your plan</h3> <p>Upgrade, downgrade or cancel anytime.</p> <div class="yourPlan centerBlockMain clearfix"> <article> <div class="headerPlan"> <h2>personal</h2> <p>Perfect Pack for Small Business</p> </div> <ul> <li><sup>$</sup><span class="p25">25</span><span class="mo">/MO</span></li> <li><strong>3 Gb</strong> of storage</li> <li><strong>10</strong>repositories</li> <li><strong>10</strong>parked domains</li> <li><strong>25 FTP</strong>accounts</li> </ul> <form action="formdata.php" method="post"> <input type="submit" name="submit" id="red" class="orderNow" value="order now"> </form> </article> <article> <div class="headerPlan"> <h2>bussines</h2> <p>Perfect Pack for Small Business</p> </div> <ul> <li><sup>$</sup><span class="p45">45</span><span class="mo">/MO</span></li> <li><strong>3 Gb</strong> of storage</li> <li><strong>10</strong>repositories</li> <li><strong>10</strong>parked domains</li> <li><strong>25 FTP</strong>accounts</li> </ul> <form action="formdata.php" method="post"> <input type="submit" name="submit" class="orderNow" value="order now"> </form> </article> <article> <div class="headerPlan"> <h2>personal</h2> <p>Perfect Pack for Small Business</p> </div> <ul> <li><sup>$</sup><span class="p65">65</span><span class="mo">/MO</span></li> <li><strong>3 Gb</strong> of storage</li> <li><strong>10</strong>repositories</li> <li><strong>10</strong>parked domains</li> <li><strong>25 FTP</strong>accounts</li> </ul> <form action="formdata.php" method="post"> <input type="submit" name="submit" class="orderNow" value="order now"> </form> </article> </div> </section> </html> |
Что опять не получается?
|
Большое вам спасибо!:thanks: :thanks:
|
Все просто отлично. Вы супер! :thanks: Целый день возился с этим кодом,уже мозги кипеть начали :)
|
Часовой пояс GMT +3, время: 05:03. |