Advertisement
Guest User

Untitled

a guest
Apr 30th, 2016
63
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 6.74 KB | None | 0 0
  1. /* * { border: 1px solid red; } */
  2.  
  3.  
  4. .col-md-4 a {
  5. color: black;
  6. text-decoration: none;
  7. }
  8. .carousel-caption {
  9. color: black;
  10. font-family: 'Courgette', Helvetica Times, serif;
  11. }
  12. .carousel-caption h3 {
  13. font-size: 4.3em;
  14. }
  15.  
  16. .carousel-caption p {
  17. font-size: 1.5em;
  18. }
  19.  
  20. #planning {
  21. margin-bottom: 5%;
  22. }
  23.  
  24. #documenting {
  25. margin: 0 30% 10% 0;
  26. }
  27.  
  28. #executing {
  29. margin-bottom: 20%;
  30. }
  31. @media (max-width: 480px) {
  32. .carousel-caption {
  33. font-size: 0.5em;
  34. color: rgb(200,0,255);
  35. }
  36. }
  37.  
  38. @media (max-width: 480px) {
  39. #executing {
  40. padding-bottom: 0%;
  41. }
  42. }
  43. @media (max-width: 480px) {
  44. #planning {
  45. padding-bottom: 2%;
  46. }
  47. }
  48. @media (max-width: 480px) {
  49. #documenting h3 {
  50. text-align: left;
  51. }
  52. }
  53. @media (max-width: 480px) {
  54. #navbar {
  55. height: 50%;
  56. font-size: .8em;
  57. }
  58. }
  59. @media (max-width: 480px) {
  60. #navbar li {
  61. border: 0;
  62. }
  63. }
  64. @media (max-width: 768px) {
  65. .carousel-caption h3 {
  66. font-size: 3.3em;
  67. }
  68. }
  69. @media (max-width: 768px) {
  70. #documenting h3 {
  71. font-size: 2.8em;
  72. }
  73. }
  74. @media (max-width: 768px) {
  75. #planning {
  76. margin-bottom: 0%;
  77. }
  78. }
  79. @media (max-width: 768px) {
  80. #executing {
  81. margin-bottom: 10%;
  82. }
  83. }
  84. @media (max-width: 768px) {
  85. #executing p {
  86. padding: 0 20%;
  87. margin-top: 0;
  88. }
  89. }
  90. @media (max-width: 768px) {
  91. #executing h3 {
  92. margin-bottom: 0;
  93. }
  94. }
  95.  
  96.  
  97.  
  98.  
  99. /**** ABOUT ****/
  100.  
  101. * { box-sizing: border-box; }
  102.  
  103. .contain {
  104. margin-top: 40px;
  105. width: 100%;
  106. height: 100%;
  107. background: #fffeee;
  108. color: #34495e;
  109. }
  110.  
  111. .header h1 {
  112. text-align: center;
  113. display: block;
  114. }
  115.  
  116. .image {
  117. display: inline-block;
  118. float: center;
  119. }
  120.  
  121. .column {
  122. display: inline-block;
  123. float: center;
  124. position: relative;
  125. }
  126. .main-text {
  127. clear: both;
  128. padding: 50px;
  129. font-family: 'Raleway', 'Century Gothic', Helvetica Times, serif;
  130. }
  131.  
  132. .skills {
  133. background-color: rgba(200,0,255,.7);
  134. color: white;
  135. box-shadow: 0 3px 4px #ccc, inset 0 2px 0 #fff;
  136. margin-left: 10%;
  137. }
  138.  
  139. .intro h2 {
  140. -webkit-margin-before: 0;
  141. }
  142.  
  143. .width {
  144. width: 90%;
  145. padding-left: 10%;
  146. }
  147.  
  148. /*Typography*/
  149.  
  150. #skill-list {
  151. position: relative;
  152. padding: 20px 40px 50px 70px;
  153. font-family: 'Goudy Old Style', Helvetica, Times, serif;
  154. }
  155.  
  156. .skills h3 {
  157. text-align: center;
  158. font-family: 'Goudy Old Style', Helvetica, Times, serif;
  159. text-transform: uppercase;
  160. }
  161. .header h1 {
  162. font-family: 'Century Gothic', Helvetica, Times, serif;
  163. text-shadow: 1px 1px 2px #000000;
  164. font-weight: bold;
  165. }
  166. .intro {
  167. font-family: 'Century Gothic', Helvetica Times, serif;
  168. font-size: 2em;
  169. font-weight: 100;
  170.  
  171. }
  172. .main-text h3 {
  173. color: rgba(200,0,255,.7);
  174. }
  175.  
  176.  
  177. @media (max-width: 480px) {
  178. .main-text {
  179. padding: 5%;
  180. }
  181. }
  182.  
  183. @media (max-width: 768px) {
  184. .main-text {
  185. padding: 0;
  186. }
  187. }
  188.  
  189. @media (max-width: 480px) {
  190. .width {
  191. width: 100%;
  192. padding: 0;
  193. }
  194. }
  195. @media (max-width: 768px) {
  196. .width .row {
  197. text-align: center;
  198. }
  199. }
  200.  
  201.  
  202. /*Navigation*/
  203.  
  204. #navigation li {
  205. display: inline-block;
  206. float: right;
  207. padding: 4px 10px 16px;
  208.  
  209. }
  210. #navigation li a {
  211. color: white;
  212. text-transform: uppercase;
  213. letter-spacing: 0.05em;
  214. text-decoration: none;
  215. transition: color 600ms;
  216. -webkit-transition: color 600ms;
  217. }
  218. .nav {
  219. background: #34495e;
  220. position: fixed;
  221. width: 100%;
  222. z-index: 1;
  223. top: 0;
  224. }
  225. #navigation li a:hover {
  226. color: rgba(200,0,255,.7);
  227. text-decoration: none;
  228. }
  229.  
  230.  
  231.  
  232. /**** FAQ ****/
  233.  
  234. .panelek {
  235. width: 80%;
  236. margin: 0 15%;
  237. }
  238. .panel-body {
  239. background: #D2C5D0;
  240. font-family: 'Open Sans', Times, serif;
  241. }
  242. .panel-title {
  243. color: rgb(23, 21, 34);
  244. text-shadow:
  245. 3px 3px 0 rgba(243, 215, 236, 0.96),
  246. -1px -1px 0 rgba(243, 215, 236, 0.96),
  247. 1px -1px 0 rgba(243, 215, 236, 0.96),
  248. -1px 1px 0 rgba(243, 215, 236, 0.96),
  249. 1px 1px 0 rgba(243, 215, 236, 0.96);
  250. font-family: 'Open Sans', Times, serif;
  251. font-weight: 800;
  252. text-transform: uppercase;
  253. text-decoration: none;
  254. letter-spacing: 0.05em;
  255. transition: color 600ms;
  256. -webkit-transition: color 600ms;
  257. }
  258. .panel-title a:hover {
  259. color: #C490BB;
  260. text-decoration: none;
  261. }
  262.  
  263. .faqheader {
  264. text-align: center;
  265. color: rgb(23, 21, 34);
  266. text-shadow:
  267. 3px 3px 0 rgba(243, 215, 236, 0.96),
  268. -1px -1px 0 rgba(243, 215, 236, 0.96),
  269. 1px -1px 0 rgba(243, 215, 236, 0.96),
  270. -1px 1px 0 rgba(243, 215, 236, 0.96),
  271. 1px 1px 0 rgba(243, 215, 236, 0.96);
  272. font-family: 'Open Sans', Times, serif;
  273. }
  274.  
  275. @media (max-width: 480px) {
  276. .panelek {
  277. margin: 5%;
  278. width: 90%;
  279. }
  280. }
  281. @media (max-width: 768px) {
  282. .panelek {
  283. margin: 10%;
  284. width: 80%;
  285. }
  286. }
  287.  
  288.  
  289.  
  290.  
  291. /**** CONTACT ****/
  292.  
  293.  
  294.  
  295. .box .header p {
  296. color: rgb(200,0,255);
  297. font-size: 1.3em;
  298. text-shadow:
  299. 3px 3px 0 rgba(243, 215, 236, 0.96),
  300. -1px -1px 0 rgba(243, 215, 236, 0.96),
  301. 1px -1px 0 rgba(243, 215, 236, 0.96),
  302. -1px 1px 0 rgba(243, 215, 236, 0.96),
  303. 1px 1px 0 rgba(243, 215, 236, 0.96);
  304. font-family: 'Josefin Sans', Helvetica, 'Segoe UI', Times, serif;
  305. }
  306. .header #small {
  307. display: block;
  308. padding-top: 30%;
  309. }
  310. #big {
  311. font-size: 3.5em;
  312. display: block;
  313. padding-left: 32%;
  314. }
  315.  
  316. .columncont {
  317. display: block;
  318. margin-left: 10%;
  319. color: white;
  320. }
  321. .box {
  322. background-image: url(../img/contactme.jpg);
  323. background-size: 100% 100%;
  324. background-position: inherit;
  325. background-repeat: no-repeat;
  326. margin-top: 40px;
  327. height: 700px;
  328. }
  329.  
  330. @media (max-width: 480px) {
  331. .box {
  332. height: 35%;
  333. }
  334. }
  335. @media (max-width: 768px) {
  336. .box {
  337. height: 60%;
  338. }
  339. }
  340. @media (max-width: 480px) {
  341. .box .header {
  342. font-size: 40%;
  343. }
  344. }
  345. @media (max-width: 480px) {
  346. .box #big {
  347. padding-bottom: 30%;
  348. margin-top: 0;
  349. }
  350. }
  351. @media (max-width: 480px) {
  352. .box #small {
  353. margin-bottom: 0%;
  354. }
  355. }
  356. @media (max-width: 768px) {
  357. .box #big {
  358. padding-bottom: 30%;
  359. }
  360. }
  361.  
  362.  
  363. body {
  364. background: rgb(231, 232, 237);
  365. position: relative;
  366. }
  367.  
  368. .text {
  369. font-family: "Lobster", Helvetica, 'Segoe UI', Times, serif;
  370. color: rgb(23, 21, 34);
  371. text-shadow:
  372. 3px 3px 0 rgba(243, 215, 236, 0.96),
  373. -1px -1px 0 rgba(243, 215, 236, 0.96),
  374. 1px -1px 0 rgba(243, 215, 236, 0.96),
  375. -1px 1px 0 rgba(243, 215, 236, 0.96),
  376. 1px 1px 0 rgba(243, 215, 236, 0.96);
  377. display: inline-block;
  378. float: center;
  379. margin: 4%;
  380. }
  381.  
  382. span:hover {
  383. transition: color 300ms;
  384. -webkit-transition: color 300ms;
  385. color: rgba(200,0,255,.7);
  386. }
  387.  
  388. /*Navigation*/
  389. /*
  390. #navbar li {
  391. display: inline-block;
  392. float: right;
  393. padding: 4px 10px 16px;
  394.  
  395. }
  396. #navbar li a {
  397. color: white;
  398. text-transform: uppercase;
  399. letter-spacing: 0.05em;
  400. text-decoration: none;
  401. transition: color 600ms;
  402. -webkit-transition: color 600ms;
  403. }
  404. .navbar {
  405. background: rgb(23, 21, 34);
  406. position: fixed;
  407. width: 100%;
  408. top: 0;
  409. z-index: 1;
  410. }
  411. #navbar li a:hover {
  412. color: rgba(200,0,255,.7);
  413. text-decoration: none;
  414. }
  415. */
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement