Все о InstantCMS Все о InstantCMS

Блок профилей Member

Готовая секция для установки

Вы видите Ваш установленный шрифт браузера по умолчанию

Имя профиля 1

Определение 1

Имя профиля 2

Определение 2

Имя профиля 2

Определение 2

Секция с блоками профилей

Готовая секция для установки с 3 блоками оригинального дизайна и эффектом при наведении.

Код - надо вставить в виджет HTML
  1. <link rel="stylesheet" href="/templates/modern/svit/font/css/font-awesome.min.css" />
  2.  
  3. <style>
  4. .service-aro-icon {
  5. width: 380px;
  6. margin: 0 auto;
  7. }
  8.  
  9. .service-aro-left {
  10. width: 150px;
  11. height: 1px;
  12. float: left;
  13. margin-top: 16px;
  14. }
  15.  
  16. .service-aro-right {
  17. width: 150px;
  18. height: 1px;
  19. float: right;
  20. margin-top: 16px;
  21. }
  22.  
  23. .service-aro-icon i {
  24. font-size: 16px;
  25. border: 1px solid;
  26. width: 33px;
  27. height: 33px;
  28. line-height: 32px;
  29. border-radius: 6px 0 6px 0;
  30. }
  31.  
  32. #about-page{
  33. background-color: #1b1b1b;
  34. padding: 100px 0px;
  35. }
  36.  
  37. #about-page .about-title{
  38. color: #f4f4f4;
  39. font-size: 30px;
  40. text-transform: uppercase;
  41. padding-bottom: 18px;
  42. }
  43.  
  44. #about-page h2{
  45. color: #808b8d;
  46. font-size: 24px;
  47. text-transform: uppercase;
  48. margin-top: 30px;
  49. margin-bottom: 20px;
  50. }
  51.  
  52. #about-page p{
  53. color: #808b8d;
  54. font-size: 14px;
  55. margin-bottom: 40px;
  56. }
  57.  
  58. .member{
  59. margin-top: 25px;
  60. }
  61.  
  62. .member .member-img{
  63. position: relative;
  64. width: 300px;
  65. margin: auto;
  66. }
  67.  
  68. .member .member-img:before{
  69. -webkit-transition: all 0.3s ease;
  70. -moz-transition: all 0.3s ease;
  71. -o-transition: all 0.3s ease;
  72. transition: all 0.3s ease;
  73. z-index: 200;
  74. content: "";
  75. width: 100%;
  76. height: 100%;
  77. background-color: #000;
  78. position: absolute;
  79. top: 0;
  80. opacity: 0;
  81. border-radius: 40px 0px;
  82. }
  83.  
  84. .member .member-img:hover:before{
  85. opacity: 0.6;
  86. }
  87.  
  88. .member .member-img img{
  89. border-width: 3px;
  90. border-style: solid;
  91. border-radius: 40px 0px;
  92. width: 100%;
  93. height: auto;
  94. }
  95.  
  96. .member-social{
  97. position: absolute;
  98. width: 303px;
  99. height: 303px;
  100. top: 0;
  101. left: 0;
  102. }
  103.  
  104. .member-social .facebook-icon i{
  105. color: #ffffff;
  106. font-size: 20px;
  107. width: 35px;
  108. height: 35px;
  109. line-height: 35px;
  110. border-radius: 8px 0px;
  111. margin: 1px;
  112. position: absolute;
  113. top: -0px;
  114. left: 114px;
  115. z-index: -999;
  116. -webkit-transition: all 0.3s ease;
  117. -moz-transition: all 0.3s ease;
  118. -o-transition: all 0.3s ease;
  119. transition: all 0.3s ease;
  120. }
  121.  
  122. .member .member-img:hover .facebook-icon i{
  123. top: 114px;
  124. z-index: 300;
  125. }
  126.  
  127. .member-social .twitter-icon i{
  128. color: #ffffff;
  129. font-size: 20px;
  130. width: 35px;
  131. height: 35px;
  132. line-height: 35px;
  133. border-radius: 0px 8px;
  134. margin: 1px;
  135. position: absolute;
  136. top: 114px;
  137. right: -0px;
  138. z-index: -999;
  139. -webkit-transition: all 0.3s ease;
  140. -moz-transition: all 0.3s ease;
  141. -o-transition: all 0.3s ease;
  142. transition: all 0.3s ease;
  143. }
  144.  
  145. .member .member-img:hover .twitter-icon i{
  146. right: 114px;
  147. z-index: 300;
  148. }
  149.  
  150. .member-social .linkedin-icon i{
  151. color: #ffffff;
  152. font-size: 20px;
  153. width: 35px;
  154. height: 35px;
  155. line-height: 35px;
  156. border-radius: 0px 8px;
  157. margin: 1px;
  158. position: absolute;
  159. bottom: 114px;
  160. left: -0px;
  161. z-index: -999;
  162. -webkit-transition: all 0.3s ease;
  163. -moz-transition: all 0.3s ease;
  164. -o-transition: all 0.3s ease;
  165. transition: all 0.3s ease;
  166. }
  167.  
  168. .member .member-img:hover .linkedin-icon i{
  169. left: 114px;
  170. z-index: 300;
  171. }
  172.  
  173. .member-social .google-plus-icon i{
  174. color: #ffffff;
  175. font-size: 20px;
  176. width: 35px;
  177. height: 35px;
  178. line-height: 35px;
  179. border-radius: 8px 0px;
  180. margin: 1px;
  181. position: absolute;
  182. bottom: -0px;
  183. right: 114px;
  184. z-index: -999;
  185. -webkit-transition: all 0.3s ease;
  186. -moz-transition: all 0.3s ease;
  187. -o-transition: all 0.3s ease;
  188. transition: all 0.3s ease;
  189. }
  190.  
  191. .member .member-img:hover .google-plus-icon i{
  192. bottom: 114px;
  193. z-index: 300;
  194. }
  195.  
  196. .member h3{
  197. color: #f7f7f7;
  198. font-size: 24px;
  199. text-transform: uppercase;
  200. font-weight: bold;
  201. }
  202.  
  203. .member span{
  204. font-size: 18px;
  205. }
  206.  
  207. /* Фиолетовая расцветка */
  208.  
  209. .service-aro-icon,
  210. .member span{
  211. color: #8600c8;
  212. }
  213.  
  214. .service i,
  215. .member .member-img img {
  216. border-color: #8600c8;
  217. }
  218.  
  219. .service-aro-left,
  220. .service-aro-right,
  221. .member-social .facebook-icon i,
  222. .member-social .twitter-icon i,
  223. .member-social .linkedin-icon i,
  224. .member-social .google-plus-icon i {
  225. background: #8600c8;
  226. }
  227.  
  228. .member-social .facebook-icon i:hover,
  229. .member-social .twitter-icon i:hover,
  230. .member-social .linkedin-icon i:hover,
  231. .member-social .google-plus-icon i:hover {
  232. background: #7101A8;
  233. }
  234. </style>
  235.  
  236. <section id="about-page">
  237. <div class="container">
  238. <div class="row">
  239.  
  240. <div class="col-md-12 text-center">
  241. <h1 class="about-title">Блок профилей Member</h1>
  242. <div class="service-aro-icon">
  243. <div class="service-aro-left"></div>
  244. <i class="fa fa-group"></i>
  245. <div class="service-aro-right"></div>
  246. </div>
  247. <h2>Готовая секция для установки</h2>
  248. <p>Вы видите Ваш установленный шрифт браузера по умолчанию</p>
  249. </div>
  250.  
  251. <div class="col-md-4 text-center member">
  252. <div class="member-img">
  253. <img src="/templates/modern/svit/images/2.jpg" alt="" />
  254. <div class="member-social">
  255. <a class="facebook-icon" href=""><i class="fa fa-facebook"></i></a>
  256. <a class="twitter-icon" href=""><i class="fa fa-twitter"></i></a>
  257. <a class="linkedin-icon" href=""><i class="fa fa-linkedin"></i></a>
  258. <a class="google-plus-icon" href=""><i class="fa fa-google-plus"></i></a>
  259. </div>
  260. </div>
  261. <h3>Имя профиля 1</h3>
  262. <span>Определение 1</span>
  263. </div>
  264.  
  265. <div class="col-md-4 text-center member">
  266. <div class="member-img">
  267. <img src="/templates/modern/svit/images/3.jpg" alt="" />
  268. <div class="member-social">
  269. <a class="facebook-icon" href=""><i class="fa fa-facebook"></i></a>
  270. <a class="twitter-icon" href=""><i class="fa fa-twitter"></i></a>
  271. <a class="linkedin-icon" href=""><i class="fa fa-linkedin"></i></a>
  272. <a class="google-plus-icon" href=""><i class="fa fa-google-plus"></i></a>
  273. </div>
  274. </div>
  275. <h3>Имя профиля 2</h3>
  276. <span>Определение 2</span>
  277. </div>
  278. <div class="col-md-4 text-center member">
  279. <div class="member-img">
  280. <img src="/templates/modern/svit/images/4.jpg" alt="" />
  281. <div class="member-social">
  282. <a class="facebook-icon" href=""><i class="fa fa-facebook"></i></a>
  283. <a class="twitter-icon" href=""><i class="fa fa-twitter"></i></a>
  284. <a class="linkedin-icon" href=""><i class="fa fa-linkedin"></i></a>
  285. <a class="google-plus-icon" href=""><i class="fa fa-google-plus"></i></a>
  286. </div>
  287. </div>
  288. <h3>Имя профиля 2</h3>
  289. <span>Определение 2</span>
  290. </div>
  291.  
  292. </div><!-- /.row -->
  293. </div><!-- /.container -->
  294. </section><!-- /#about-page -->
23:17
37
Нет комментариев. Ваш будет первым!
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.