Advertisement
bebo231312312321

Untitled

Apr 24th, 2023
54
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 10.61 KB | None | 0 0
  1. * {
  2.     margin: 0;
  3.     padding: 0;
  4.     font-family: 'Poppins', sans-serif;
  5.     box-sizing: border-box;
  6. }
  7. :root{
  8.  
  9.     --primary-color: #080808;
  10.     --secondary-color: #fff;
  11.     --tertiary-color: #ffefd3;
  12. }
  13. .light-mode{
  14.     --primary-color: #fff;
  15.     --secondary-color: #080808;
  16.     --tertiary-color: #080808;
  17. }
  18. #preloader{
  19.     background:#000 url(/about-borislav/images/Spin-1s-200px.gif) no-repeat center center;
  20.     height: 100vh;
  21.     width: 100%;
  22.    
  23.     position: fixed;
  24.     z-index: 100;
  25. }
  26. html{
  27.     scroll-behavior: smooth;
  28. }
  29. body {
  30.     background: var( --primary-color);
  31.     color: var( --secondary-color);
  32. }
  33.  
  34. #header {
  35.     width: 100%;
  36.     height: 100vh;
  37.     background-image: url();
  38.  
  39.     background-size: cover;
  40.     background-position: center;
  41. }
  42.  
  43. .container {
  44.     padding: 10px 10%;
  45.  
  46. }
  47.  
  48. nav {
  49.     display: flex;
  50.     align-items: center;
  51.     justify-content: space-between;
  52.     flex-wrap: wrap;
  53. }
  54. #sunIcon{
  55.     width: 32px;
  56.     cursor: pointer;
  57. }
  58. #sunIcon:hover{
  59.     color: #ffff05;
  60. }
  61. nav ul{
  62.     flex: 1;
  63.     text-align: right;
  64.     margin-right: 20px;
  65. }
  66. .logo {
  67.     width: 140px;
  68. }
  69.  
  70. nav ul li {
  71.     list-style: none;
  72.     display: inline-block;
  73.     margin: 10px 10px;
  74. }
  75.  
  76. nav ul li a {
  77.     color: var( --secondary-color);
  78.     text-decoration: none;
  79.     font-size: 20px;
  80.     position: relative;
  81. }
  82.  
  83. nav ul li a::after {
  84.     content: '';
  85.     width: 0;
  86.     height: 3px;
  87.     left: 0;
  88.     position: absolute;
  89.     background: #ff004f;
  90.     bottom: -5px;
  91.     transition: 0.6s;
  92.  
  93. }
  94.  
  95. nav ul li a:hover {
  96.     color: #7c0f0f;
  97. }
  98.  
  99. nav ul li a:hover::after {
  100.     width: 100%;
  101. }
  102.  
  103. .info-person {
  104.     margin-top: 20%;
  105.     font-size: 30px;
  106. }
  107.  
  108. .info-person p span {
  109.     background: #193047;
  110.     color: var(--tertiary-color);
  111.     font-family: "Lato", "Arial", "Helvetica", sans-serif;
  112.     ;
  113.     border: 2px solid var(--tertiary-color);;
  114.     border-radius: 12px;
  115.     padding: 2px 5px;
  116. }
  117.  
  118. .info-person h1 {
  119.     font-size: 50px;
  120.     margin-top: 10px;
  121. }
  122.  
  123. .info-person h1 span {
  124.     color: #da1616;
  125. }
  126.  
  127. /* ----------------about Me------------------- */
  128.  
  129. .about-person {
  130.     padding: 80px 0;
  131.     color: var(--tertiary-color);
  132. }
  133.  
  134. .row {
  135.     display: flex;
  136.     flex-wrap: wrap;
  137.     justify-content: space-between;
  138. }
  139.  
  140. .col-1-about {
  141.     flex-basis: 35%;
  142. }
  143.  
  144. .col-1-about img {
  145.     width: 100%;
  146.     border-radius: 15px;
  147.  
  148. }
  149.  
  150. .col-2-about {
  151.     flex-basis: 60%;
  152. }
  153.  
  154. .col-2-about h1 {
  155.     font-size: 50px;
  156.     font-weight: 600;
  157.     color: var(--tertiary-color);
  158. }
  159.  
  160. .col-2-about p {
  161.     color: var(--tertiary-color);
  162. }
  163.  
  164. .educations-tab {
  165.     display: flex;
  166.     margin: 20px 0 40px;
  167. }
  168.  
  169. .links {
  170.     margin-right: 50px;
  171.     font-size: 18px;
  172.     position: relative;
  173.     font-weight: 500;
  174.     cursor: pointer;
  175. }
  176.  
  177. .educations-tab p {
  178.     color: var(--tertiary-color);
  179.     font-size: 22px;
  180. }
  181.  
  182. .links::after {
  183.     content: '';
  184.     position: absolute;
  185.     left: 0;
  186.     width: 0;
  187.     height: 3px;
  188.     background: #ff004f;
  189.     bottom: -6px;
  190.     transition: 0.5s;
  191. }
  192.  
  193. .links.active::after {
  194.     width: 50%;
  195. }
  196.  
  197. .education-content ul li {
  198.     list-style: none;
  199.     margin: 13px 0;
  200.     font-size: 14px;
  201. }
  202.  
  203. .education-content ul li span {
  204.     color: #9f4040;
  205.     font-weight: 600;
  206.     font-size: 20px;
  207. }
  208.  
  209. body>div.about-person>div>div>div.col-2-about>div.education-content>ul>li:nth-child(4)>span:nth-child(2) {
  210.     color: #e8f809;
  211.     font-size: 25px;
  212. }
  213.  
  214. .education-content {
  215.     display: none;
  216. }
  217.  
  218. .education-content.active-content {
  219.     display: block;
  220. }
  221.  
  222. /* ------------- service-------------- */
  223.  
  224. #services {
  225.     padding: 30px 0;
  226.  
  227. }
  228.  
  229. #services>div>h1 {
  230.     color: var(--tertiary-color);
  231.     font-size: 40px;
  232. }
  233.  
  234. .services-list {
  235.     display: grid;
  236.     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  237.     grid-gap: 40px;
  238.     margin-top: 60px;
  239. }
  240.  
  241. .services-list div {
  242.     background: #414040;
  243.     font-size: 16px;
  244.     border-radius: 15px;
  245.     font-weight: 400;
  246.     padding: 40px;
  247.     transition: backgrond 0.5s, transform 0.5s;
  248.  
  249. }
  250.  
  251. .services-list div i {
  252.     font-size: 50px;
  253.     margin-bottom: 30px;
  254. }
  255.  
  256. .services-list div h2 {
  257.     color: #0d62d0;
  258.     font-size: 30px;
  259.     margin-bottom: 20px;
  260.     font-weight: 700;
  261. }
  262.  
  263. .services-list div a {
  264.     display: inline-block;
  265.     font-size: 20px;
  266.     margin-top: 20px;
  267.     color: var(--tertiary-color);
  268.     text-decoration: none;
  269.     cursor: pointer;
  270.     font-weight: 400;
  271. }
  272.  
  273. .services-list div:hover {
  274.     background: #ef0751;
  275.     transform: translateY(-15px);
  276. }
  277.  
  278. .services-list div a:hover {
  279.     color: #193047
  280. }
  281.  
  282. /* -------------- portfolio--------------- */
  283. #portfolio {
  284.     padding: 30px 0;
  285. }
  286.  
  287. .workList {
  288.     display: grid;
  289.     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  290.     grid-gap: 30px;
  291.     margin-top: 50px;
  292.  
  293. }
  294.  
  295. .work {
  296.     border-radius: 15px;
  297.     position: relative;
  298.     overflow: hidden;
  299. }
  300.  
  301. .work img {
  302.     width: 70%;
  303.     border-radius: 15px;
  304.     display: block;
  305.     transition: transform 0.5s;
  306.     transition: border-radius 0.5s;
  307. }
  308.  
  309. .layer-line {
  310.     width: 70%;
  311.     height: 0;
  312.     position: absolute;
  313.     background: linear-gradient(rgba(0, 0, 0, 0.7), #ff004f);
  314.     border-radius: 10px;
  315.     left: 0;
  316.     bottom: 0;
  317.     overflow: hidden;
  318.     display: flex;
  319.     text-align: center;
  320.     align-items: center;
  321.     justify-content: center;
  322.     flex-direction: column;
  323.     padding: 0 40px;
  324.     font-size: 14px;
  325.     transition: height 0.6s;
  326.  
  327. }
  328.  #services > div > div p {
  329.     color: var(--tertiary-color);
  330. }
  331.  
  332. .layer-line h3 {
  333.     font-weight: 500;
  334.     margin-bottom: 20px;
  335. }
  336.  
  337. .layer-line a {
  338.     margin-top: 20px;
  339.     font-size: 18px;
  340.     color: #ff004f;
  341.     text-decoration: none;
  342.     line-height: 60px;
  343.     background: var(--tertiary-color);
  344.     width: 60px;
  345.     height: 60px;
  346.     border-radius: 50%;
  347.     text-align: center;
  348.     align-items: center;
  349. }
  350.  
  351. .work:hover img {
  352.     transform: scale(1.1);
  353.  
  354. }
  355.  
  356. .work:hover .layer-line {
  357.     height: 102%;
  358.     width: 74%;
  359. }
  360.  
  361. .btn {
  362.     margin: 50px auto;
  363.     text-align: center;
  364.     display: block;
  365.     width: fit-content;
  366.     border-radius: 8px;
  367.     padding: 14px 40px;
  368.     margin-left: 37.5%;
  369.     text-decoration: none;
  370.     color: var(--tertiary-color );
  371.  
  372.     border: 1px solid #ff004f;
  373. }
  374.  
  375. .btn:hover {
  376.     background: #ff004f;
  377. }
  378.  
  379. /*----------------CONTACT---------------------------- */
  380. .left-side {
  381.     flex-basis: 35%;
  382. }
  383.  
  384. .right-side {
  385.     flex-basis: 60%;
  386. }
  387.  
  388. .left-side p {
  389.     margin-top: 20px;
  390.     margin-bottom: 15px;
  391. }
  392.  
  393. .left-side p i {
  394.     font-size: 25px;
  395.     margin-right: 15px;
  396. }
  397. #contact > div.container > div > div.left-side > p:nth-child(3) > a{
  398.     color: var( --secondary-color);
  399.     text-decoration: none;
  400.  
  401. }
  402. #contact > div.container > div > div.left-side > p:nth-child(3) > a:hover{
  403.     background: linear-gradient(179deg, #42cae2, #165798);
  404.     border-radius: 6px;
  405.     padding: 2px 10px;
  406. }
  407. #contact > div.container > div > div.left-side > p:nth-child(3){
  408.     transition: transform 1s;
  409. }
  410. #contact > div.container > div > div.left-side > p:nth-child(3):hover {
  411.  
  412.      transform: translateY(-5px);
  413. }
  414. #contact > div.container > div > div.left-side > p:nth-child(2) > a{
  415.    
  416.     color: var( --secondary-color);
  417.     text-decoration: none;
  418. }
  419. #contact > div.container > div > div.left-side > p:nth-child(2) > a:hover{
  420.     background: linear-gradient(179deg, #42cae2, #165798);
  421.     border-radius: 6px;
  422.     padding: 2px 10px;
  423. }
  424. #contact > div.container > div > div.left-side > p:nth-child(2){
  425.     transition: transform 1s;
  426. }
  427. #contact > div.container > div > div.left-side > p:nth-child(2):hover{
  428.     transform: translateY(-5px);
  429. }
  430.  
  431. .social-icons {
  432.     margin-top: 50px;
  433. }
  434.  
  435. .social-icons a {
  436.     font-size: 40px;
  437.     margin-right: 10px;
  438.     text-decoration: none;
  439.     display: inline-block;
  440.     transition: transform 0.5s;
  441. }
  442.  
  443. .social-icons a:hover {
  444.     color: crimson;
  445.     transform: translateY(-5px);
  446. }
  447.  
  448. .btn.btn2 {
  449.     display: inline-block;
  450.     background: linear-gradient(179deg, #42cae2, #165798);
  451.  
  452.     margin-left: 0.5%;
  453.     border: 1px solid #165798;
  454.     border-radius: 15px;
  455.     padding: 10px 31px;
  456.     transition: transform 0.5s;
  457. }
  458.  
  459. .btn.btn2:hover {
  460.     transform: translateY(-5px);
  461. }
  462.  
  463. .right-side form {
  464.     width: 100%;
  465. }
  466.  
  467. form input,
  468. form textarea {
  469.     border: 0;
  470.     width: 100%;
  471.     outline: none;
  472.     background: #414040;
  473.     margin: 15px 0;
  474.     padding: 15px;
  475.     font-size: 15px;
  476.     color: var(--tertiary-color);
  477.     border-radius: 10px;
  478. }
  479.  
  480. form .btn.btn2 {
  481.     padding: 15px 60px;
  482.     margin-top: 20px;
  483.     cursor: pointer;
  484.     font-size: 15px;
  485. }
  486.  
  487. .copyright {
  488.     width: 100%;
  489.     margin-top: 30px;
  490.     padding: 20px 0;
  491.     background: #414040;
  492.     text-align: center;
  493.     text-shadow: 10px 20px 40px #d41010;
  494.  
  495. }
  496.  
  497. .copyright a {
  498.     text-decoration: none;
  499.     color: var( --secondary-color);
  500.  
  501. }
  502.  
  503. .copyright a:hover {
  504.     color: #ff004f;
  505.  
  506. }
  507.  
  508. /* ======== mobile version========== */
  509. nav ul .fa-regular {
  510.     display: none;
  511. }
  512.  
  513. nav .fa-solid {
  514.     display: none;
  515. }
  516.  
  517. @media only screen and (max-width: 600px) {
  518.     #header {
  519.         background-image: url();
  520.     }
  521.  
  522.     .info-person {
  523.         margin-top: 70%;
  524.         font-size: 16px;
  525.     }
  526.  
  527.     .info-person h1 {
  528.         font-size: 30px;
  529.     }
  530.  
  531.     nav ul .fa-regular {
  532.         display: block;
  533.         font-size: 25px;
  534.     }
  535.  
  536.     nav .fa-solid {
  537.         display: block;
  538.         font-size: 30px;
  539.     }
  540.  
  541.     nav ul{
  542.         background: #165798;
  543.         position: fixed;
  544.         top: 0;
  545.         border:1px solid var(--primary-color);
  546.         border-top-left-radius: 20px;
  547.         border-bottom-left-radius: 20px;
  548.         right: -220px;
  549.         width: 220px;
  550.         height: 100vh;
  551.         padding-top: 40px;
  552.         z-index: 2;
  553.         transition: right 1s;
  554.     }
  555.     nav ul li {
  556.         display: block;
  557.         margin: 25px;
  558.     }
  559.     nav ul .fa-regular {
  560.         position: absolute;
  561.         top: 25px;
  562.         left: 25px;
  563.         cursor: pointer;
  564.         border-radius: 50%;
  565.         padding: 5px;
  566.     }
  567. #about h1{
  568.     font-size: 40px;
  569. }
  570. .col-1-about, .col-2-about{
  571.     flex-basis: 100%;
  572. }
  573. .col-1-about{
  574.     margin-bottom: 30px;
  575. }
  576. .col-2-about{
  577.     font-size: 14px;
  578. }
  579. .links{
  580. margin-right: 18px;
  581.  
  582. }
  583. .educations-tab p {
  584.     color: var(--tertiary-color);
  585.     font-size: 18px;
  586. }
  587. .copyright{
  588.     font-size: 14px;
  589. flex-basis: 100%;
  590. }
  591. #portfolio > div > a {
  592.  margin-left:20%;
  593.  
  594. }
  595. .btn {
  596.     margin-left: 20%;
  597. }
  598. .right-side form {
  599.     width: 160%;
  600. }
  601. #contact > div.copyright > p{
  602.     font-size: 12px;
  603. }
  604. }
  605.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement