style.css 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182
  1. body {
  2. font-family: 'Open Sans', sans-serif;
  3. line-height: 1.6em;
  4. }
  5. .container-fluid {
  6. background-color: #efecee;
  7. }
  8. .profile-sidebar {
  9. background-color: #454243;
  10. word-wrap: break-word;
  11. color: #eee;
  12. }
  13. .profile-sidebar h1 {
  14. font-weight: bold;
  15. color: #fff;
  16. }
  17. .profile-sidebar h2 {
  18. font-size: 0.9em;
  19. font-weight: bold;
  20. color: #5BC798;
  21. }
  22. .profile-sidebar a {
  23. color: #eee;
  24. }
  25. .nav-sidebar {
  26. background-color: #d8d4d6;
  27. word-wrap: break-word;
  28. }
  29. .nav-sidebar {
  30. padding: 4px;
  31. }
  32. .nav-sidebar ul {
  33. list-style: none;
  34. margin: 15px 0 0 0;
  35. padding: 0;
  36. }
  37. .nav-sidebar ul li {
  38. margin-bottom: 20px;
  39. }
  40. .nav-sidebar a {
  41. color: #444;
  42. font-size: 0.9em;
  43. transition: color 0.5s;
  44. }
  45. .nav-sidebar a:hover,
  46. .nav-sidebar a:focus,
  47. .nav-sidebar a:active {
  48. text-decoration: none;
  49. color: #777;
  50. }
  51. .social-links {
  52. list-style: none;
  53. margin: 0;
  54. padding: 0;
  55. }
  56. .social-links li {
  57. display: inline;
  58. }
  59. .social-links a .fa-facebook-square {
  60. color: #6a6a6a;
  61. transition: color 0.3s;
  62. }
  63. .social-links a .fa-linkedin-square {
  64. color: #2d6b88;
  65. transition: color 0.3s;
  66. }
  67. .social-links a .fa-twitter-square {
  68. color: #3b91b2;
  69. transition: color 0.3s;
  70. }
  71. .social-links a .fa-google-plus-square {
  72. color: #a37873;
  73. transition: color 0.3s;
  74. }
  75. .social-links a:hover .fa-facebook-square,
  76. .social-links a:focus .fa-facebook-square,
  77. .social-links a:active .fa-facebook-square {
  78. color: #3b5998;
  79. }
  80. .social-links a:hover .fa-linkedin-square,
  81. .social-links a:focus .fa-linkedin-square,
  82. .social-links a:active .fa-linkedin-square {
  83. color: #007bb5;
  84. }
  85. .social-links a:hover .fa-twitter-square,
  86. .social-links a:focus .fa-twitter-square,
  87. .social-links a:active .fa-twitter-square {
  88. color: #00aced;
  89. }
  90. .social-links a:hover .fa-google-plus-square,
  91. .social-links a:focus .fa-google-plus-square,
  92. .social-links a:active .fa-google-plus-square {
  93. color: #dd4b39;
  94. }
  95. hr {
  96. border-top: 1px solid #ccc;
  97. }
  98. .content {
  99. padding: 0 62px 80px 62px;
  100. min-height: 100vh;
  101. }
  102. .content h2 {
  103. font-weight: bold;
  104. font-size: 1.2em;
  105. margin-left: -40px;
  106. color: #5BC798;
  107. text-transform: uppercase;
  108. }
  109. .content h3 {
  110. font-size: 1.1em;
  111. color: #147286;
  112. font-weight: bold;
  113. text-transform: uppercase;
  114. }
  115. .content .skills-ul {
  116. -webkit-column-count: 3;
  117. column-count: 3;
  118. padding-left: 0;
  119. }
  120. .fa-star {
  121. color: gold;
  122. }
  123. @media (min-width: 992px) {
  124. hr {
  125. display: none;
  126. }
  127. }
  128. /*@media (min-width: 1200px) {
  129. .wrapper {
  130. position: relative;
  131. width: 1170px;
  132. }
  133. .profile-sidebar {
  134. position: fixed;
  135. width: 292px;
  136. top: 0;
  137. bottom: 0;
  138. overflow-y: hidden;
  139. overflow-x: hidden;
  140. }
  141. .profile-sidebar .profile-pic {
  142. margin-left: -15px;
  143. max-width: calc(100% + 30px);
  144. }
  145. .nav-sidebar {
  146. position: fixed;
  147. width: 165px;
  148. margin-left: 292px;
  149. top: 0;
  150. bottom: 0;
  151. overflow-y: hidden;
  152. overflow-x: hidden;
  153. }
  154. }*/
  155. @media (max-width: 1199px) {
  156. .container-fluid {
  157. padding: 0;
  158. }
  159. .profile-sidebar,
  160. .nav-sidebar {
  161. position: relative;
  162. min-height: 100vh;
  163. }
  164. .container {
  165. width: 100%;
  166. }
  167. }
  168. @media (max-width: 767px) {
  169. .profile-pic {
  170. max-height: 300px;
  171. max-width: 300px;
  172. border-radius: 50%;
  173. }
  174. .profile-sidebar {
  175. padding: 15px 0;
  176. text-align: center;
  177. min-height: inherit;
  178. }
  179. }
  180. .treeview a {
  181. color: #1fb9bb;
  182. }