styles.css 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305
  1. /*
  2. * Template Name: Orbit - Responsive Resume/CV Template for Developers
  3. * Version: 1.0
  4. * Author: Xiaoying Riley
  5. * Twitter: @3rdwave_themes
  6. * License: Creative Commons Attribution 3.0 License
  7. * Website: http://themes.3rdwavemedia.com/
  8. */
  9. /* ======= Base ======= */
  10. body {
  11. font-family: 'Roboto', sans-serif;
  12. color: #545E6C;
  13. background: #f5f5f5;
  14. font-size: 14px;
  15. padding: 30px;
  16. -webkit-font-smoothing: antialiased;
  17. -moz-osx-font-smoothing: grayscale;
  18. }
  19. h1,
  20. h2,
  21. h3,
  22. h4,
  23. h5,
  24. h6 {
  25. font-weight: 700;
  26. }
  27. a {
  28. color: #2d7788;
  29. -webkit-transition: all 0.4s ease-in-out;
  30. -moz-transition: all 0.4s ease-in-out;
  31. -ms-transition: all 0.4s ease-in-out;
  32. -o-transition: all 0.4s ease-in-out;
  33. }
  34. a:hover {
  35. text-decoration: underline;
  36. color: #1a454f;
  37. }
  38. a:focus {
  39. text-decoration: none;
  40. }
  41. p {
  42. line-height: 1.5;
  43. }
  44. .wrapper {
  45. background: #42A8C0;
  46. max-width: 960px;
  47. margin: 0 auto;
  48. position: relative;
  49. -webkit-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
  50. -moz-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
  51. box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
  52. }
  53. .sidebar-wrapper {
  54. background: #42A8C0;
  55. position: absolute;
  56. right: 0;
  57. width: 240px;
  58. height: 100%;
  59. min-height: 800px;
  60. color: #fff;
  61. }
  62. .sidebar-wrapper a {
  63. color: #fff;
  64. }
  65. .sidebar-wrapper .profile-container {
  66. padding: 30px;
  67. background: rgba(0, 0, 0, 0.2);
  68. text-align: center;
  69. color: #fff;
  70. }
  71. .sidebar-wrapper .name {
  72. font-size: 32px;
  73. font-weight: 900;
  74. margin-top: 0;
  75. margin-bottom: 10px;
  76. }
  77. .sidebar-wrapper .tagline {
  78. color: rgba(255, 255, 255, 0.6);
  79. font-size: 16px;
  80. font-weight: 400;
  81. margin-top: 0;
  82. margin-bottom: 0;
  83. }
  84. .sidebar-wrapper .profile {
  85. margin-bottom: 15px;
  86. }
  87. .sidebar-wrapper .profile-img {
  88. max-width: 100px;
  89. margin-bottom: 15px;
  90. border: 0px solid #fff;
  91. border-radius: 100%;
  92. box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  93. }
  94. .sidebar-wrapper .contact-list .fa {
  95. margin-right: 5px;
  96. font-size: 18px;
  97. vertical-align: middle;
  98. }
  99. .sidebar-wrapper .contact-list li {
  100. margin-bottom: 15px;
  101. }
  102. .sidebar-wrapper .contact-list li:last-child {
  103. margin-bottom: 0;
  104. }
  105. .sidebar-wrapper .contact-list .email .fa {
  106. font-size: 14px;
  107. }
  108. .sidebar-wrapper .container-block {
  109. padding: 30px;
  110. }
  111. .sidebar-wrapper .container-block-title {
  112. text-transform: uppercase;
  113. font-size: 16px;
  114. font-weight: 700;
  115. margin-top: 0;
  116. margin-bottom: 15px;
  117. }
  118. .sidebar-wrapper .degree {
  119. font-size: 14px;
  120. margin-top: 0;
  121. margin-bottom: 5px;
  122. }
  123. .sidebar-wrapper .education-container .item {
  124. margin-bottom: 15px;
  125. }
  126. .sidebar-wrapper .education-container .item:last-child {
  127. margin-bottom: 0;
  128. }
  129. .sidebar-wrapper .education-container .meta {
  130. color: rgba(255, 255, 255, 0.6);
  131. font-weight: 500;
  132. margin-bottom: 0px;
  133. margin-top: 0;
  134. }
  135. .sidebar-wrapper .education-container .time {
  136. color: rgba(255, 255, 255, 0.6);
  137. font-weight: 500;
  138. margin-bottom: 0px;
  139. }
  140. .sidebar-wrapper .languages-container .lang-desc {
  141. color: rgba(255, 255, 255, 0.6);
  142. }
  143. .sidebar-wrapper .languages-list {
  144. margin-bottom: 0;
  145. }
  146. .sidebar-wrapper .languages-list li {
  147. margin-bottom: 10px;
  148. }
  149. .sidebar-wrapper .languages-list li:last-child {
  150. margin-bottom: 0;
  151. }
  152. .sidebar-wrapper .interests-list {
  153. margin-bottom: 0;
  154. }
  155. .sidebar-wrapper .interests-list li {
  156. margin-bottom: 10px;
  157. }
  158. .sidebar-wrapper .interests-list li:last-child {
  159. margin-bottom: 0;
  160. }
  161. .main-wrapper {
  162. background: #fff;
  163. padding: 60px;
  164. padding-right: 300px;
  165. }
  166. .main-wrapper .section-title {
  167. text-transform: uppercase;
  168. font-size: 20px;
  169. font-weight: 500;
  170. color: #2d7788;
  171. position: relative;
  172. margin-top: 0;
  173. margin-bottom: 20px;
  174. }
  175. .main-wrapper .section-title .fa {
  176. width: 30px;
  177. height: 30px;
  178. margin-right: 8px;
  179. display: inline-block;
  180. color: #fff;
  181. -webkit-border-radius: 50%;
  182. -moz-border-radius: 50%;
  183. -ms-border-radius: 50%;
  184. -o-border-radius: 50%;
  185. border-radius: 50%;
  186. -moz-background-clip: padding;
  187. -webkit-background-clip: padding-box;
  188. background-clip: padding-box;
  189. background: #2d7788;
  190. text-align: center;
  191. padding-top: 8px;
  192. font-size: 16px;
  193. position: relative;
  194. top: -2px;
  195. }
  196. .main-wrapper .section {
  197. margin-bottom: 60px;
  198. }
  199. .main-wrapper .experiences-section .item {
  200. margin-bottom: 30px;
  201. }
  202. .main-wrapper .upper-row {
  203. position: relative;
  204. overflow: hidden;
  205. margin-bottom: 2px;
  206. }
  207. .main-wrapper .job-title {
  208. color: #3F4650;
  209. font-size: 16px;
  210. margin-top: 0;
  211. margin-bottom: 0;
  212. font-weight: 500;
  213. }
  214. .main-wrapper .time {
  215. position: absolute;
  216. right: 0;
  217. top: 0;
  218. color: #97AAC3;
  219. }
  220. .main-wrapper .company {
  221. margin-bottom: 10px;
  222. color: #97AAC3;
  223. }
  224. .main-wrapper .project-title {
  225. font-size: 16px;
  226. font-weight: 400;
  227. margin-top: 0;
  228. margin-bottom: 5px;
  229. }
  230. .main-wrapper .projects-section .intro {
  231. margin-bottom: 30px;
  232. }
  233. .main-wrapper .projects-section .item {
  234. margin-bottom: 15px;
  235. }
  236. .skillset .item {
  237. margin-bottom: 15px;
  238. overflow: hidden;
  239. }
  240. .skillset .level-title {
  241. font-size: 14px;
  242. margin-top: 0;
  243. margin-bottom: 12px;
  244. }
  245. .skillset .level-bar {
  246. height: 12px;
  247. background: #f5f5f5;
  248. }
  249. .skillset .level-bar-inner {
  250. height: 12px;
  251. background: #7bc2d3;
  252. }
  253. .footer {
  254. padding: 30px;
  255. padding-top: 60px;
  256. }
  257. .footer .copyright {
  258. line-height: 1.6;
  259. color: #545E6C;
  260. font-size: 13px;
  261. }
  262. .footer .fa-heart {
  263. color: #fb866a;
  264. }
  265. /* Extra small devices (phones, less than 768px) */
  266. @media (max-width: 767px) {
  267. body {
  268. padding: 0;
  269. }
  270. .sidebar-wrapper {
  271. position: static;
  272. width: inherit;
  273. }
  274. .main-wrapper {
  275. padding: 30px;
  276. }
  277. .main-wrapper .time {
  278. position: static;
  279. display: block;
  280. margin-top: 5px;
  281. }
  282. .main-wrapper .upper-row {
  283. margin-bottom: 0;
  284. }
  285. }
  286. /* Small devices (tablets, 768px and up) */
  287. /* Medium devices (desktops, 992px and up) */
  288. @media (min-width: 992px) {
  289. .skillset .level-title {
  290. display: inline-block;
  291. float: left;
  292. width: 30%;
  293. margin-bottom: 0;
  294. }
  295. .skillset .level-bar {
  296. display: inline-block;
  297. width: 70%;
  298. float: left;
  299. position: relative;
  300. top: 1px;
  301. }
  302. }
  303. /* Large devices (large desktops, 1200px and up) */
  304. /* Ex-Large devices (large desktops, 1200px and up) */
  305. /* styles.css */