CSSPop

HTML:
<div class="yourcolor-black" style="margin: auto;"> <h1>الخطة الذهبية</h1> <div class="yourcolor-clear"> </div> <div class="yourcolor-price"> <h2>1500</h2> <div class="yourcolor-hover-main"> <p class="dis">ريال سعودي</p> <ul class="yourcolor-hover-price"> <li>1500 جنية مصري</li> <li>1500 الدولار الامريكي</li> </ul> </div> <p class="last-year">سـنــويـا</p> </div> <div class="yourcolor-clear"> </div> <div class="yourcolor-liear"> <ul> <li>لوحة تحكم عربى cpanel</li> <li>مساحة 1 جيجا</li> <li>الترافك 30 جيجا</li> <li>قواعد البيانات غير محدوده</li> <li>تصميم موقع دردشة صوتية</li> <li>انشاء ملف الـ robots.txt</li> </ul> </div> <div class="yourcolor-clear"> </div> <a href="#" class="yourcolor-button-price">اشتري الان</a> </div>

CSS:
@import url('http://fonts.googleapis.com/css?family=Rammetto+One|Anton|Russo+One|Candal|Changa+One'); @font-face { font-family: "K Karman"; src: url("http://yourcolor.net/menem-csspop/fonts/k_kamran.eot"); /* IE 9 */ src: url("http://yourcolor.net/menem-csspop/fonts/k_kamran.eot?") format("eot"), /* IE 6-8 */ url("http://yourcolor.net/menem-csspop/fonts/k_kamran.otf") format("opentype"), /* Other browsers */ url("http://yourcolor.net/menem-csspop/fonts/k_kamran.ttf") format("truetype"); /* Safari, Android, iOS */ } @font-face { font-family: "Hacen Liner Screen"; src: url("http://yourcolor.net/menem-csspop/fonts/hacen_liner_screen.eot"); /* IE 9 */ src: url("http://yourcolor.net/menem-csspop/fonts/hacen_liner_screen.eot?") format("eot"), /* IE 6-8 */ url("http://yourcolor.net/menem-csspop/fonts/hacen_liner_screen.otf") format("opentype"), /* Other browsers */ url("http://yourcolor.net/menem-csspop/fonts/hacen_liner_screen.ttf") format("truetype"); /* Safari, Android, iOS */ } @font-face { font-family: "GE_SS_Two"; src: url("http://yourcolor.net/menem-csspop/fonts/GESSTwoBold-Bold.eot"); /* IE 9 */ src: url("http://yourcolor.net/menem-csspop/fonts/GESSTwoBold-Bold.eot?") format("eot"), /* IE 6-8 */ url("http://yourcolor.net/menem-csspop/fonts/GESSTwoBold-Bold.otf") format("opentype"), /* Other browsers */ url("http://yourcolor.net/menem-csspop/fonts/GESSTwoBold-Bold.ttf") format("truetype"); /* Safari, Android, iOS */ } @font-face { font-family: "GE_SS_Two_Normal"; src: url("http://yourcolor.net/menem-csspop/fonts/gesstwolight-webfont.eot"); /* IE 9 */ src: url("http://yourcolor.net/menem-csspop/fonts/gesstwolight-webfont.eot?") format("eot"), /* IE 6-8 */ url("http://yourcolor.net/menem-csspop/fonts/gesstwolight-webfont.otf") format("opentype"), /* Other browsers */ url("http://yourcolor.net/menem-csspop/fonts/gesstwolight-webfont.ttf") format("truetype"); /* Safari, Android, iOS */ } /********/ body{ margin:0; padding:0; font-family:Tahoma, Geneva, sans-serif; font-size:100%; color:white; background: #101010; direction:rtl; } h1 , h2 , h3 , h4 , h5 , h6 , span , a , p { padding:0px; margin:0px; border:0px; } .yourcolor-black{ background: #303030; width: 300px; min-height: 300px; margin: 10px auto 10px; box-shadow: -5px 0px 8px -4px black , 5px 0px 8px -4px black; border-radius: 38px; padding-bottom: 5px; } .yourcolor-black h1{ font-size: 22px; color: gray; font-family: 'GE_SS_Two'; padding: 15px 2% 10px 2%; display: block; width: 96%; height: 30px; text-align: center; margin-bottom: 0px; } .yourcolor-clear{ width:100% !important; height:1px; background:#000; border-bottom: 1px solid rgb(83, 83, 83); clear:both; margin-bottom: 5px; } .yourcolor-price{ width: 100%; margin: 0; padding: 5px 0; } .yourcolor-price h2{ font-family: 'Russo One'; text-align:center; font-weight: 400; font-size:80px; padding:0px; margin:0px; display: block; text-shadow: 0 0 10px black; color: rgb(81, 141, 182); padding: 5px; margin-bottom: -15px; transition: all 0.50s ease-in-out; -moz-transition: all 0.50s ease-in-out; -o-transition: all 0.50s ease-in-out; -webkit-transition: all 0.50s ease-in-out; -ms-transition: all 0.50s ease-in-out; -kthtml-transition: all 0.50s ease-in-out; } .yourcolor-price p.dis{ font-family: "Hacen Liner Screen"; font-size: 26px; color: #518DB6; display: block; background: rgba(0, 0, 0, 0.16); width: 100%; box-shadow: inset 3px -1px 19px -6px black , inset -3px 0px 19px -6px black; border-bottom: 1px solid rgb(88, 88, 88); padding: 5px 0px; border-top: 1px solid #4E4E4E; } .yourcolor-price p.last-year{ font-family: "Hacen Liner Screen"; font-size: 25px; color: #518DB6; text-align:center; } .yourcolor-hover-main{ height: 51px; width: 100%; position: relative; text-align: center; } .yourcolor-hover-main .yourcolor-hover-price{ list-style:none; position: relative; background: #202020; width: 300px; display: block; z-index: -1; top:-15px; padding:10px 0; border-radius: 0 0 5px 5px; text-align: center; } .yourcolor-hover-main:hover .yourcolor-hover-price{ z-index: 1; transition: all 0.50s ease-in-out; -moz-transition: all 0.50s ease-in-out; -o-transition: all 0.50s ease-in-out; -webkit-transition: all 0.50s ease-in-out; -ms-transition: all 0.50s ease-in-out; -kthtml-transition: all 0.50s ease-in-out; } .yourcolor-hover-main:hover .yourcolor-hover-price li{ background: rgb(70, 70, 70); margin-bottom:5px; padding:5px 0px; text-align: center; transition: all 0.50s ease-in-out; -moz-transition: all 0.50s ease-in-out; -o-transition: all 0.50s ease-in-out; -webkit-transition: all 0.50s ease-in-out; -ms-transition: all 0.50s ease-in-out; -kthtml-transition: all 0.50s ease-in-out; } .yourcolor-hover-main:hover .yourcolor-hover-price li:hover{ background:gray; box-shadow: inset 5px 3px 8px -4px black , inset -5px -3px 8px -4px black; transition: all 0.50s ease-in-out; -moz-transition: all 0.50s ease-in-out; -o-transition: all 0.50s ease-in-out; -webkit-transition: all 0.50s ease-in-out; -ms-transition: all 0.50s ease-in-out; -kthtml-transition: all 0.50s ease-in-out; } .yourcolor-liear ul{ list-style:none; margin-right:-30px; margin-left:10px; } .yourcolor-liear ul li{ text-align:right; margin-bottom:5px; background: #222222; padding:5px; color: gray; } .yourcolor-button-price{ display: block; width: 135px; padding: 10px 0; margin-bottom: 10px; margin-top: 10px; color: white; text-decoration: none; margin:0 auto; text-align: center; background: #272727; background: -webkit-gradient(linear, left top, left bottom, from(#808080), to(#212121)); background: -webkit-linear-gradient(top, #272727, #727272, #272727); background: -moz-linear-gradient(top, #272727, #727272, #272727); background: -ms-linear-gradient(top, #272727, #727272, #272727); background: -o-linear-gradient(top, #272727, #727272, #272727); border-radius:5px }