API tools faq
paste
Advertisement
Guest User

scss project

a guest
Apr 25th, 2019
85
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 20.67 KB | None | 0 0
raw download clone embed print report
  1. * {
  2. box-sizing: border-box;
  3. margin: 0;
  4. padding: 0;
  5. text-decoration: none;
  6. list-style: none;
  7. font-family: 'Roboto', sans-serif;
  8. outline: none;
  9. }
  10.  
  11. header {
  12. width: 100%;
  13. .header__wrap {
  14. display: flex;
  15. justify-content: space-between;
  16. align-items: center;
  17. .header__logo {
  18. width: 30%;
  19. height: 100px;
  20. display: flex;
  21. align-items: center;
  22. justify-content: center;
  23. }
  24. .header__nav-bar {
  25. width: 60%;
  26. height: 100px;
  27. display: flex;
  28. justify-content: space-between;
  29. align-items: center;
  30. a {
  31. color: $text-color;
  32. font-size: 13px;
  33. padding-bottom: 39px;
  34. padding-top: 39px;
  35. outline: none;
  36. border-bottom: 6px solid transparent;
  37. text-transform: uppercase;
  38. transition: 0.5s;
  39. }
  40. a:hover {
  41. cursor: pointer;
  42. border-bottom: 6px solid blue;
  43. }
  44. .search-btn {
  45. font-size: 20px;
  46. border-bottom: none;
  47. }
  48. .menu-btn {
  49. font-size: 20px;
  50. border-bottom: none;
  51. }
  52. .search-btn:hover {
  53. cursor: pointer;
  54. color: #00bcd4;
  55. border: none;
  56. }
  57. .menu-btn:hover {
  58. cursor: pointer;
  59. color: #00bcd4;
  60. border: none;
  61. }
  62. }
  63. }
  64. }
  65.  
  66. main {
  67. width: 100%;
  68. .slider {
  69. width: 100%;
  70. background-image: url(../images/background-img.jpg);
  71. background-repeat: no-repeat;
  72. background-size: cover;
  73. .slider__overlay {
  74. background: rgba(0,0,0, .7);
  75. .slider__center {
  76. width: 100%;
  77. height: 650px;
  78. display: flex;
  79. align-items: center;
  80. .slider__center__item {
  81. width: 100%;
  82. height: 250px;
  83. display: flex;
  84. align-items: center;
  85. justify-content: center;
  86. flex-direction: column;
  87. h2 {
  88. font-size: 60px;
  89. text-transform: uppercase;
  90. color: white;
  91. }
  92. span {
  93. font-size: 60px;
  94. color: $pop-color;
  95. text-transform: uppercase;
  96. }
  97. p {
  98. font-size: 18px;
  99. color: white;
  100. margin-top: 20px;
  101. text-transform: uppercase;
  102. }
  103. button {
  104. width: 125px;
  105. padding: 10px;
  106. text-transform: uppercase;
  107. color: white;
  108. border: none;
  109. font-size: 16px;
  110. margin-top: 30px;
  111. background-color: $pop-color;
  112. transition: 0.5s;
  113. outline: none;
  114. font-family: 'Roboto', sans-serif;
  115. box-shadow: 0px 0px 2px 2px #404040;
  116. }
  117. button:hover {
  118. cursor: pointer;
  119. transform: scale(1.1);
  120. box-shadow: 0px 0px 3px 3px rgb(40, 40, 40);
  121. }
  122. }
  123. }
  124. }
  125. }
  126. .animated-button {
  127. text-align: center;
  128. margin-top: -24px;
  129. i {
  130. width: 48px;
  131. background-color: white;
  132. border-radius: 100%;
  133. padding: 15px;
  134. box-shadow: $box-shadow-color;
  135. transition: 0.5s;
  136. }
  137. i:hover {
  138. box-shadow: 0px 0px 3px 3px rgb(53, 53, 53);
  139. transform: scale(1.1);
  140. cursor: pointer;
  141. }
  142. }
  143. .my-profile {
  144. width: 100%;
  145. margin-top: 60px;
  146. .my-profile__wrap {
  147. width: 100%;
  148. height: 400px;
  149. display: flex;
  150. justify-content: space-between;
  151. .my-profile__item__story {
  152. width: 25%;
  153. height: 400px;
  154. h2 {
  155. font-family: 24px;
  156. color: $pop-color;
  157. text-transform: uppercase;
  158. }
  159. p {
  160. font-size: 14px;
  161. color: $text-color;
  162. margin-top: 30px;
  163. line-height: 25px;
  164. }
  165. button {
  166. width: 200px;
  167. padding: 15px;
  168. text-transform: uppercase;
  169. color: white;
  170. border: none;
  171. font-size: 16px;
  172. outline: none;
  173. margin-top: 30px;
  174. background-color: $pop-color;
  175. transition: 0.5s;
  176. font-family: 'Roboto', sans-serif;
  177. box-shadow: $box-shadow-color;
  178. }
  179. button:hover {
  180. cursor: pointer;
  181. box-shadow: 0px 0px 3px 3px rgb(40, 40, 40);
  182. }
  183. }
  184. .my-profile__item__image {
  185. width: 25%;
  186. height: 400px;
  187. img {
  188. width: 100%;
  189. height: 100%;
  190. border: 10px solid white;
  191. box-shadow: $box-shadow-color;
  192. }
  193. }
  194. .my-profile__item__personal-information {
  195. width: 25%;
  196. height: 400px;
  197. display: flex;
  198. flex-direction: column;
  199. justify-content: space-between;
  200. h2 {
  201. font-family: 24px;
  202. color: $pop-color;
  203. text-transform: uppercase;
  204. }
  205. .personal-information__item {
  206. width: 100%;
  207. height: 50px;
  208. display: flex;
  209. align-items: center;
  210. border-bottom: 1px solid #eeeeee;
  211. }
  212. .personal-information__item__social-buttons {
  213. width: 80%;
  214. height: 50px;
  215. display: flex;
  216. justify-content: space-between;
  217. align-items: center;
  218. a {
  219. outline: none;
  220. color: $pop-color;
  221. border-radius: 100%;
  222. padding: 15px;
  223. width: 50px;
  224. text-align: center;
  225. background-color: white;
  226. transition: 0.5s;
  227. box-shadow: $box-shadow-color;
  228. }
  229. a:hover {
  230. cursor: pointer;
  231. box-shadow: 0px 0px 3px 3px rgb(40, 40, 40);
  232. }
  233. }
  234. }
  235. }
  236. }
  237. .skills {
  238. width: 100%;
  239. margin-top: 15%;
  240. background-image: url(../images/skills-bg.jpg);
  241. background-repeat: no-repeat;
  242. background-size: cover;
  243. .skills__overlay {
  244. background-color: rgba(255,255,255, .92);
  245. .skills__wrap {
  246. width: 100%;
  247. height: 600px;
  248. display: flex;
  249. align-items: center;
  250. justify-content: space-between;
  251. .skills__description {
  252. width: 30%;
  253. h2 {
  254. font-size: 48px;
  255. color: black;
  256. text-transform: uppercase;
  257. }
  258. p {
  259. font-size: 16px;
  260. color: $text-color;
  261. line-height: 25px;
  262. margin-top: 30px;
  263. }
  264. }
  265. .skills__web__progress {
  266. width: 50%;
  267. height: 500px;
  268. display: flex;
  269. justify-content: space-between;
  270. .skills__scheme {
  271. width: 15%;
  272. display: flex;
  273. justify-content: center;
  274. position: relative;
  275. .skills__scheme__item__photoshop {
  276. width: 70px;
  277. height: 400px;
  278. display: flex;
  279. flex-direction: column;
  280. align-items: center;
  281. position: absolute;
  282. bottom: 0;
  283. h2 {
  284. color: $pop-color;
  285. font-size: 13px;
  286. text-transform: capitalize;
  287. }
  288. .skills__scheme__item__circle {
  289. width: 7px;
  290. height: 7px;
  291. background-color: $pop-color;
  292. border-radius: 100%;
  293. margin-top: 15px;
  294. }
  295. .skills__scheme__item__line {
  296. width: 1px;
  297. height: 70px;
  298. background-color: $pop-color;
  299. }
  300. .skills__scheme__item__progress {
  301. width: 100%;
  302. height: 300px;
  303. background-color: $pop-color;
  304. }
  305. .skills__scheme__item__percentage {
  306. p {
  307. color: $pop-color;
  308. margin-top: 15px;
  309. }
  310. }
  311. }
  312. .skills__scheme__item__javascript {
  313. width: 70px;
  314. height: 400px;
  315. display: flex;
  316. flex-direction: column;
  317. align-items: center;
  318. position: absolute;
  319. bottom: 0;
  320. h2 {
  321. color: $pop-color;
  322. font-size: 13px;
  323. text-transform: capitalize;
  324. margin-top: 100px;
  325. }
  326. .skills__scheme__item__circle {
  327. width: 7px;
  328. height: 7px;
  329. background-color: $pop-color;
  330. border-radius: 100%;
  331. margin-top: 15px;
  332. }
  333. .skills__scheme__item__line {
  334. width: 1px;
  335. height: 70px;
  336. background-color: $pop-color;
  337. }
  338. .skills__scheme__item__progress {
  339. width: 100%;
  340. height: 200px;
  341. background-color: $pop-color;
  342. }
  343. .skills__scheme__item__percentage {
  344. p {
  345. color: $pop-color;
  346. margin-top: 15px;
  347. }
  348. }
  349. }
  350. .skills__scheme__item__illustrator {
  351. width: 70px;
  352. height: 400px;
  353. display: flex;
  354. flex-direction: column;
  355. align-items: center;
  356. position: absolute;
  357. bottom: 0;
  358. h2 {
  359. color: $pop-color;
  360. font-size: 13px;
  361. text-transform: capitalize;
  362. margin-top: 30px;
  363. }
  364. .skills__scheme__item__circle {
  365. width: 7px;
  366. height: 7px;
  367. background-color: $pop-color;
  368. border-radius: 100%;
  369. margin-top: 15px;
  370. }
  371. .skills__scheme__item__line {
  372. width: 1px;
  373. height: 70px;
  374. background-color: $pop-color;
  375. }
  376. .skills__scheme__item__progress {
  377. width: 100%;
  378. height: 270px;
  379. background-color: $pop-color;
  380. }
  381. .skills__scheme__item__percentage {
  382. p {
  383. color: $pop-color;
  384. margin-top: 15px;
  385. }
  386. }
  387. }
  388. .skills__scheme__item__html {
  389. width: 70px;
  390. height: 400px;
  391. display: flex;
  392. flex-direction: column;
  393. align-items: center;
  394. position: absolute;
  395. bottom: 0;
  396. h2 {
  397. color: $pop-color;
  398. font-size: 13px;
  399. text-transform: capitalize;
  400. margin-top: 70px;
  401. }
  402. .skills__scheme__item__circle {
  403. width: 7px;
  404. height: 7px;
  405. background-color: $pop-color;
  406. border-radius: 100%;
  407. margin-top: 15px;
  408. }
  409. .skills__scheme__item__line {
  410. width: 1px;
  411. height: 70px;
  412. background-color: $pop-color;
  413. }
  414. .skills__scheme__item__progress {
  415. width: 100%;
  416. height: 230px;
  417. background-color: $pop-color;
  418. }
  419. .skills__scheme__item__percentage {
  420. p {
  421. color: $pop-color;
  422. margin-top: 15px;
  423. }
  424. }
  425. }
  426. .skills__scheme__item__javascript {
  427. width: 70px;
  428. height: 400px;
  429. display: flex;
  430. flex-direction: column;
  431. align-items: center;
  432. position: absolute;
  433. bottom: 0;
  434. h2 {
  435. color: $pop-color;
  436. font-size: 13px;
  437. text-transform: capitalize;
  438. margin-top: 100px;
  439. }
  440. .skills__scheme__item__circle {
  441. width: 7px;
  442. height: 7px;
  443. background-color: $pop-color;
  444. border-radius: 100%;
  445. margin-top: 15px;
  446. }
  447. .skills__scheme__item__line {
  448. width: 1px;
  449. height: 70px;
  450. background-color: $pop-color;
  451. }
  452. .skills__scheme__item__progress {
  453. width: 100%;
  454. height: 200px;
  455. background-color: $pop-color;
  456. }
  457. .skills__scheme__item__percentage {
  458. p {
  459. color: $pop-color;
  460. margin-top: 15px;
  461. }
  462. }
  463. }
  464. .skills__scheme__item__css {
  465. width: 70px;
  466. height: 400px;
  467. display: flex;
  468. flex-direction: column;
  469. align-items: center;
  470. position: absolute;
  471. bottom: 0;
  472. h2 {
  473. color: $pop-color;
  474. font-size: 13px;
  475. text-transform: capitalize;
  476. margin-top: 150px;
  477. }
  478. .skills__scheme__item__circle {
  479. width: 7px;
  480. height: 7px;
  481. background-color: $pop-color;
  482. border-radius: 100%;
  483. margin-top: 15px;
  484. }
  485. .skills__scheme__item__line {
  486. width: 1px;
  487. height: 70px;
  488. background-color: $pop-color;
  489. }
  490. .skills__scheme__item__progress {
  491. width: 100%;
  492. height: 150px;
  493. background-color: $pop-color;
  494. }
  495. .skills__scheme__item__percentage {
  496. p {
  497. color: $pop-color;
  498. margin-top: 15px;
  499. }
  500. }
  501. }
  502. }
  503. }
  504. .skills__page__button {
  505. width: 3.5%;
  506. height: 500px;
  507. position: relative;
  508. .skills__page__button__next {
  509. width: 100%;
  510. height: 10%;
  511. display: flex;
  512. position: absolute;
  513. bottom: 0px;
  514. align-items: center;
  515. justify-content: center;
  516. border-radius: 100%;
  517. box-shadow: $box-shadow-color;
  518. background-color: $pop-color;
  519. padding: 15px;
  520. i {
  521. color: white;
  522. }
  523. }
  524. .skills__page__button__back {
  525. width: 100%;
  526. height: 10%;
  527. display: flex;
  528. align-items: center;
  529. border-radius: 100%;
  530. justify-content: center;
  531. box-shadow: $box-shadow-color;
  532. background-color: $pop-color;
  533. padding: 15px;
  534. i {
  535. color: white;
  536. }
  537. }
  538. }
  539. }
  540. }
  541. }
  542. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!