styles-5.css 6.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322
  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: #f47c03;
  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: #a85502;
  37. }
  38. a:focus {
  39. text-decoration: none;
  40. }
  41. p {
  42. line-height: 1.5;
  43. }
  44. .wrapper {
  45. background: #FDA246;
  46. max-width: 1000px;
  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: #FDA246;
  55. position: absolute;
  56. right: 0;
  57. width: 280px;
  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: 340px;
  165. }
  166. .main-wrapper .section-title {
  167. text-transform: uppercase;
  168. font-size: 20px;
  169. font-weight: 500;
  170. color: #f47c03;
  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: #f47c03;
  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. .main-wrapper .educations-section .item {
  201. margin-bottom: 30px;
  202. }
  203. .main-wrapper .upper-row {
  204. position: relative;
  205. overflow: hidden;
  206. margin-bottom: 2px;
  207. }
  208. .main-wrapper .job-title,
  209. .main-wrapper .degree {
  210. color: #3F4650;
  211. font-size: 16px;
  212. margin-top: 0;
  213. margin-bottom: 0;
  214. font-weight: 500;
  215. }
  216. .main-wrapper .time {
  217. position: absolute;
  218. right: 0;
  219. top: 0;
  220. color: #97AAC3;
  221. }
  222. .main-wrapper .company,
  223. .main-wrapper .university {
  224. margin-bottom: 10px;
  225. color: #97AAC3;
  226. }
  227. .main-wrapper .project-title {
  228. font-size: 16px;
  229. font-weight: 400;
  230. margin-top: 0;
  231. margin-bottom: 5px;
  232. }
  233. .main-wrapper .projects-section .intro {
  234. margin-bottom: 30px;
  235. }
  236. .main-wrapper .projects-section .item {
  237. margin-bottom: 15px;
  238. }
  239. .main-wrapper .publication-title {
  240. font-size: 16px;
  241. font-weight: 500;
  242. margin-bottom: 1px;
  243. }
  244. .main-wrapper .publication-authors {
  245. font-style: italic;
  246. margin-bottom: 1px;
  247. }
  248. .main-wrapper .publications-section .intro {
  249. margin-bottom: 30px;
  250. }
  251. .main-wrapper .publications-section .item {
  252. margin-bottom: 15px;
  253. }
  254. .skillset .item {
  255. margin-bottom: 15px;
  256. overflow: hidden;
  257. }
  258. .skillset .level-title {
  259. font-size: 14px;
  260. margin-top: 0;
  261. margin-bottom: 12px;
  262. }
  263. .skillset .level-bar {
  264. height: 12px;
  265. background: #f5f5f5;
  266. }
  267. .skillset .level-bar-inner {
  268. height: 12px;
  269. background: #fec892;
  270. }
  271. .footer {
  272. padding-top: 30px;
  273. }
  274. .footer .copyright {
  275. line-height: 1.6;
  276. color: #545E6C;
  277. font-size: 13px;
  278. }
  279. .footer .fa-heart {
  280. color: #fb866a;
  281. }
  282. /* Extra small devices (phones, less than 768px) */
  283. @media (max-width: 767px) {
  284. body {
  285. padding: 0;
  286. }
  287. .sidebar-wrapper {
  288. position: static;
  289. width: inherit;
  290. }
  291. .main-wrapper {
  292. padding: 30px;
  293. }
  294. .main-wrapper .time {
  295. position: static;
  296. display: block;
  297. margin-top: 5px;
  298. }
  299. .main-wrapper .upper-row {
  300. margin-bottom: 0;
  301. }
  302. }
  303. /* Small devices (tablets, 768px and up) */
  304. /* Medium devices (desktops, 992px and up) */
  305. @media (min-width: 992px) {
  306. .skillset .level-title {
  307. display: inline-block;
  308. float: left;
  309. width: 30%;
  310. margin-bottom: 0;
  311. }
  312. .skillset .level-bar {
  313. display: inline-block;
  314. width: 70%;
  315. float: left;
  316. position: relative;
  317. top: 1px;
  318. }
  319. }
  320. /* Large devices (large desktops, 1200px and up) */
  321. /* Ex-Large devices (large desktops, 1200px and up) */
  322. /* styles-5.css */