Posted By

robnilas on 01/21/17


Tagged

box-css css-box tutsplus


Versions (?)

Box - tutsplus


 / Published in: HTML
 

  1. <style type="text/css">
  2.  
  3. p {
  4. padding-bottom: 30px;
  5. }
  6.  
  7. ::selection {
  8. background: #fdd283;
  9. color: #000;
  10. }
  11.  
  12. .included-details ul {
  13. float: left;
  14. margin-left: 50px;
  15. width: 590px;
  16. }
  17. .included-details ul li {
  18. float: left;
  19. margin-right: 20px;
  20. }
  21. .included-details ul li > div {
  22. background: url(http://clients.blacksheep-designs.com/_codebox/images/boxes/sprite-large-icons.png) no-repeat 0 0;
  23. float: left;
  24. height: 85px;
  25. padding-left: 30px;
  26. width: 245px;
  27. }
  28. .included-details ul li .pencil {
  29. background-position: 0px 0px;
  30. }
  31. .included-details ul li .screen {
  32. background-position: 0px -170px;
  33. }
  34. .included-details ul li .book {
  35. background-position: 0px -85px;
  36. }
  37. .included-details ul li .clock {
  38. background-position: 0px -255px;
  39. }
  40. .included-details ul li h4 {
  41. color: #fff;
  42. font-family: MuseoSansRounded-500, Helvetica, Arial, sans-serif;
  43. font-size: 18px;
  44. line-height: 24px;
  45. margin-bottom: 0px;
  46. }
  47. .included-details .premium-testimonials-widget {
  48. float: right;
  49. font-size: 14px;
  50. font-family: Georgia;
  51. font-style: italic;
  52. line-height: 21px;
  53. margin-right: 50px;
  54. padding: 3px 0 5px 0;
  55. position: relative;
  56. width: 290px;
  57. }
  58. .included-details .premium-testimonials-widget .widget-thumbnail {
  59. background: #fff;
  60. border: 1px solid #cd6017;
  61. float: right;
  62. padding: 4px;
  63. height: 50px;
  64. margin-top: 3px;
  65. width: 50px;
  66. /* CSS3 */
  67. -moz-box-shadow: 0px 0px 2px #dc691a;
  68. -webkit-box-shadow: 0px 0px 2px #dc691a;
  69. box-shadow: 0px 0px 2px #dc691a;
  70. }
  71. .included-details .premium-testimonials-widget .widget-entry-content {
  72. float: left;
  73. width: 220px;
  74. }
  75. .included-details .premium-testimonials-widget .widget-entry-content::before {
  76. background: url(http://clients.blacksheep-designs.com/_codebox/images/boxes/icon-quote-home.png) no-repeat 0 0;
  77. content: '\0020';
  78. display: block;
  79. float: left;
  80. height: 14px;
  81. padding-right: 5px;
  82. position: relative;
  83. top: 3px;
  84. width: 18px;
  85. }
  86. .included-details .premium-testimonials-widget .widget-entry-content p {
  87. padding-bottom: 10px;
  88. }
  89. .included-details .premium-testimonials-widget .widget-entry-title {
  90. float: left;
  91. width: 100%;
  92. }
  93. .included-details .premium-testimonials-widget .widget-entry-title h4 {
  94. color: #f3d5c0;
  95. font-size: 14px;
  96. font-family: Georgia;
  97. font-style: italic;
  98. font-weight: normal;
  99. line-height: 21px;
  100. text-shadow: 0px 1px 0px #d05f14;
  101. }
  102. .included-details .premium-testimonials-widget .widget-entry-title h4::before {
  103. content: "~ ";
  104. }
  105. .included-details .premium-testimonials-widget .widget-entry-title h4 a {
  106. color: #f3d5c0;
  107. text-decoration: none;
  108. }
  109. .included-details .premium-testimonials-widget .widget-entry-title h4 a:hover {
  110. text-decoration: underline;
  111. }
  112. .included-details .premium-testimonials-widget .widget-entry-title h4 span {
  113. display: block;
  114. font-size: 12px;
  115. font-weight: normal;
  116. line-height: 14px;
  117. text-indent: 11px;
  118. }
  119.  
  120.  
  121. #pricing-what-you-get {
  122. background: url(http://clients.blacksheep-designs.com/_codebox/images/boxes/bg-content-shadow.png) no-repeat center bottom;
  123. padding: 0 0 40px 0;
  124. overflow: hidden;
  125. }
  126. #pricing-what-you-get .included-details {
  127. background: #fff url(http://clients.blacksheep-designs.com/_codebox/images/boxes/bg-light-pattern.png) repeat 0 0;
  128. border: 1px solid #d5d4c7;
  129. overflow: hidden;
  130. position: relative;
  131. padding: 35px 50px;
  132. width: 898px;
  133. /* CSS3 */
  134. -webkit-border-radius: 12px;
  135. -moz-border-radius: 12px;
  136. border-radius: 12px;
  137. }
  138. #pricing-what-you-get .included-details ul {
  139. margin-left: 0px;
  140. }
  141. #pricing-what-you-get .included-details ul li h4 {
  142. color: #505050;
  143. }
  144. #pricing-what-you-get .included-details .premium-testimonials-widget {
  145. margin-right: 0px;
  146. }
  147. #pricing-what-you-get .included-details .premium-testimonials-widget .widget-thumbnail {
  148. border: 1px solid #dfdfdf;
  149. /* CSS3 */
  150. -moz-box-shadow: 0px 0px 2px #efefef;
  151. -webkit-box-shadow: 0px 0px 2px #efefef;
  152. box-shadow: 0px 0px 2px #efefef;
  153. }
  154. #pricing-what-you-get .included-details .premium-testimonials-widget .widget-entry-content::before {
  155. background: url(http://clients.blacksheep-designs.com/_codebox/images/boxes/icon-quote-pricing.png) no-repeat 0 0;
  156. }
  157. #pricing-what-you-get .included-details .premium-testimonials-widget .widget-entry-title h4 {
  158. color: #6d6d6d;
  159. text-shadow: none;
  160. }
  161. #pricing-what-you-get .included-details .premium-testimonials-widget .widget-entry-title h4 a {
  162. color: #6d6d6d;
  163. }
  164. #pricing-what-you-get .included-details .premium-testimonials-widget .widget-entry-title h4 span {
  165. color: #999;
  166. }
  167. </style>
  168.  
  169. <div id="pricing-what-you-get">
  170.  
  171. <div class="included-details">
  172.  
  173. <h2>What you get...</h2>
  174.  
  175. <ul>
  176. <li>
  177. <div class="screen">
  178. <h4>289 Hours of Courses</h4>
  179. <p>Multi-week courses that teach you skills from top to bottom, inside out.</p>
  180. </div>
  181. </li>
  182. <li>
  183. <div class="pencil">
  184. <h4>Hundreds of Tutorials</h4>
  185. <p>In-depth video and written training from leaders in your industry.</p>
  186. </div>
  187. </li>
  188. <li>
  189. <div class="book">
  190. <h4>57 Top-selling eBooks</h4>
  191. <p>Your own personal library of popular educational eBooks worth over $870.</p>
  192. </div>
  193. </li>
  194. <li>
  195. <div class="clock">
  196. <h4>New Content Weekly</h4>
  197. <p>New content will be added every week for the lifetime of your membership.</p>
  198. </div>
  199. </li>
  200. </ul>
  201. <div id="premium_testimonials_widget-4" class="premium-testimonials-widget"><div class="testimonial-widget-wrap"> <div id="post-widget-15686" class="post-widget">
  202.  
  203. <div class="widget-thumbnail">
  204. <img width="50" height="50" src="https://tutsplus.com/wp-content/uploads/2011/09/Justin-Maller.jpg" class="attachment-testimonial wp-post-image" alt="Justin-Maller"> </div><!-- end .widget-thumbnail -->
  205.  
  206. <div class="widget-entry-content">
  207. <p>The time they invest in finding top quality talent to provide their material benefits both the student and the design community immensely.</p>
  208. </div><!-- end .widget-entry-content -->
  209.  
  210. <div class="widget-entry-title">
  211. <h4>
  212. <a href="http://justinmaller.com" rel="nofollow external" title="Justin Maller">Justin Maller</a> <span>Depthcore</span> <!--<h4-->
  213. </h4></div><!-- end .widget-entry-title -->
  214.  
  215. </div>
  216. </div></div><a href="https://tutsplus.com/testimonials/" id="view-testimonials">View all Testimonials →</a> </div>
  217.  
  218. </div>

Report this snippet  

You need to login to post a comment.