Data hosted with ♥ by Pastebin.com - Download Raw - See Original
  1. /*  import google fonts */
  2. @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Ubuntu:wght@400;500;700&display=swap');
  3.  
  4. *{
  5.     margin: 0;
  6.     padding: 0;
  7.     box-sizing: border-box;
  8.     text-decoration: none;
  9. }
  10. html{
  11.     scroll-behavior: smooth;
  12. }
  13.  
  14. /* custom scroll bar */
  15. ::-webkit-scrollbar {
  16.     width: 10px;
  17. }
  18. ::-webkit-scrollbar-track {
  19.     background: #f1f1f1;
  20. }
  21. ::-webkit-scrollbar-thumb {
  22.     background: #888;
  23. }
  24.  
  25. ::-webkit-scrollbar-thumb:hover {
  26.     background: #555;
  27. }
  28.  
  29. /* all similar content styling codes */
  30. section{
  31.     padding: 100px 0;
  32. }
  33. .max-width{
  34.     max-width: 1300px;
  35.     padding: 0 80px;
  36.     margin: auto;
  37. }
  38. .about, .project, .skills, .teams, .contact, footer{
  39.     font-family: 'Poppins', sans-serif;
  40. }
  41. .about .about-content,
  42. .project .serv-content,
  43. .skills .skills-content,
  44. .contact .contact-content{
  45.     display: flex;
  46.     flex-wrap: wrap;
  47.     align-items: center;
  48.     justify-content: space-between;
  49. }
  50. section .title{
  51.     position: relative;
  52.     text-align: center;
  53.     font-size: 40px;
  54.     font-weight: 500;
  55.     margin-bottom: 60px;
  56.     padding-bottom: 20px;
  57.     font-family: 'Ubuntu', sans-serif;
  58. }
  59. section .title::before{
  60.     content: "";
  61.     position: absolute;
  62.     bottom: 0px;
  63.     left: 50%;
  64.     width: 180px;
  65.     height: 3px;
  66.     background: #111;
  67.     transform: translateX(-50%);
  68. }
  69. section .title::after{
  70.     position: absolute;
  71.     bottom: -8px;
  72.     left: 50%;
  73.     font-size: 20px;
  74.     color: #4F8A8B;
  75.     padding: 0 5px;
  76.     background: #fff;
  77.     transform: translateX(-50%);
  78. }
  79.  
  80. /* navbar styling */
  81. .navbar{
  82.     position: fixed;
  83.     width: 100%;
  84.     z-index: 999;
  85.     padding: 30px 0;
  86.     font-family: 'Ubuntu', sans-serif;
  87.     transition: all 0.3s ease;
  88. }
  89. .navbar.sticky{
  90.     padding: 15px 0;
  91.     background: #4F8A8B;
  92. }
  93. .navbar .max-width{
  94.     display: flex;
  95.     align-items: center;
  96.     justify-content: space-between;
  97. }
  98. .navbar .logo a{
  99.     color: #fff;
  100.     font-size: 35px;
  101.     font-weight: 600;
  102. }
  103. .navbar .logo a span{
  104.     color: #4F8A8B;
  105.     transition: all 0.3s ease;
  106. }
  107. .navbar.sticky .logo a span{
  108.     color: #fff;
  109. }
  110. .navbar .menu li{
  111.     list-style: none;
  112.     display: inline-block;
  113. }
  114. .navbar .menu li a{
  115.     display: block;
  116.     color: #fff;
  117.     font-size: 18px;
  118.     font-weight: 500;
  119.     margin-left: 25px;
  120.     transition: color 0.3s ease;
  121. }
  122. .navbar .menu li a:hover{
  123.     color: #4F8A8B;
  124. }
  125. .navbar.sticky .menu li a:hover{
  126.     color: #fff;
  127. }
  128.  
  129. /* menu btn styling */
  130. .menu-btn{
  131.     color: #fff;
  132.     font-size: 23px;
  133.     cursor: pointer;
  134.     display: none;
  135. }
  136. .scroll-up-btn{
  137.     position: fixed;
  138.     height: 45px;
  139.     width: 42px;
  140.     background: #4F8A8B;
  141.     right: 30px;
  142.     bottom: 10px;
  143.     text-align: center;
  144.     line-height: 45px;
  145.     color: #fff;
  146.     z-index: 9999;
  147.     font-size: 30px;
  148.     border-radius: 6px;
  149.     border-bottom-width: 2px;
  150.     cursor: pointer;
  151.     opacity: 0;
  152.     pointer-events: none;
  153.     transition: all 0.3s ease;
  154. }
  155. .scroll-up-btn.show{
  156.     bottom: 30px;
  157.     opacity: 1;
  158.     pointer-events: auto;
  159. }
  160. .scroll-up-btn:hover{
  161.     filter: brightness(90%);
  162. }
  163.  
  164.  
  165. /* home section styling */
  166. .home{
  167.     display: flex;
  168.     background: url("images/banner.jpg") no-repeat center;
  169.     height: 100vh;
  170.     color: #fff;
  171.     min-height: 500px;
  172.     background-size: cover;
  173.     background-attachment: fixed;
  174.     font-family: 'Ubuntu', sans-serif;
  175. }
  176. .home .max-width{
  177.   width: 100%;
  178.   display: flex;
  179. }
  180. .home .max-width .row{
  181.   margin-right: 0;
  182. }
  183. .home .home-content .text-1{
  184.     font-size: 27px;
  185. }
  186. .home .home-content .text-2{
  187.     font-size: 75px;
  188.     font-weight: 600;
  189.     margin-left: -3px;
  190. }
  191. .home .home-content .text-3{
  192.     font-size: 40px;
  193.     margin: 5px 0;
  194. }
  195. .home .home-content .text-3 span{
  196.     color: #4F8A8B;
  197.     font-weight: 500;
  198. }
  199. .home .home-content a{
  200.     display: inline-block;
  201.     background: #4F8A8B;
  202.     color: #fff;
  203.     font-size: 25px;
  204.     padding: 12px 36px;
  205.     margin-top: 20px;
  206.     font-weight: 400;
  207.     border-radius: 6px;
  208.     border: 2px solid #4F8A8B;
  209.     transition: all 0.3s ease;
  210. }
  211. .home .home-content a:hover{
  212.     color: #4F8A8B;
  213.     background: none;
  214. }
  215.  
  216. /* about section styling */
  217. .about .about-content .left{
  218.     width: 45%;
  219. }
  220. .about .about-content .left img{
  221.     height: 400px;
  222.     width: 400px;
  223.     object-fit: cover;
  224.     border-radius: 6px;
  225. }
  226. .about .about-content .right{
  227.     width: 55%;
  228. }
  229. .about .about-content .right .text{
  230.     font-size: 25px;
  231.     font-weight: 600;
  232.     margin-bottom: 10px;
  233. }
  234. .about .about-content .right .text span{
  235.     color: #4F8A8B;
  236. }
  237. .about .about-content .right p{
  238.     text-align: justify;
  239. }
  240. .about .about-content .right a{
  241.     display: inline-block;
  242.     background: #4F8A8B;
  243.     color: #fff;
  244.     font-size: 20px;
  245.     font-weight: 500;
  246.     padding: 10px 30px;
  247.     margin-top: 20px;
  248.     border-radius: 6px;
  249.     border: 2px solid #4F8A8B;
  250.     transition: all 0.3s ease;
  251. }
  252. .about .about-content .right a:hover{
  253.     color: #4F8A8B;
  254.     background: none;
  255. }
  256.  
  257. /* project section styling */
  258. .project, .contact{
  259.     color:#fff;
  260.     background: #111;
  261. }
  262. .project .title::before,
  263. .contact .title::before{
  264.     background: #fff;
  265. }
  266. .project .serv-content .card{
  267.     width: calc(50% - 20px);
  268.     background: #222;
  269.     text-align: center;
  270.     border-radius: 6px;
  271.     padding: 50px 25px;
  272.     cursor: pointer;
  273.     transition: all 0.3s ease;
  274. }
  275. .project .serv-content .card:hover{
  276.     background: #4F8A8B;
  277. }
  278. .project .serv-content .card .box{
  279.     transition: all 0.3s ease;
  280. }
  281. .project .serv-content .card:hover .box{
  282.     transform: scale(1.05);
  283. }
  284. .project .serv-content .card i{
  285.     font-size: 50px;
  286.     color: #4F8A8B;
  287.     transition: color 0.3s ease;
  288. }
  289. .project .serv-content .card:hover i{
  290.     color: #fff;
  291. }
  292. .project .serv-content .card .text{
  293.     font-size: 25px;
  294.     font-weight: 500;
  295.     margin: 10px 0 7px 0;
  296. }
  297.  
  298. .project .serv-content .card .website img{
  299.     height: 240px;
  300.     width: 384px;
  301.     object-fit: cover;
  302.     transition: all 0.3s ease;
  303. }
  304. .project .serv-content .card .app img{
  305.     height: 240px;
  306.     width: 150px;
  307.     object-fit: cover;
  308.     transition: all 0.3s ease;
  309. }
  310. .project .serv-content .card:hover img{
  311.     border-color: #fff;
  312. }
  313.  
  314. /* skills section styling */
  315.  
  316. .skills .skills-content .column{
  317.     width: calc(50% - 30px);
  318. }
  319. .skills .skills-content .left .text{
  320.     font-size: 20px;
  321.     font-weight: 600;
  322.     margin-bottom: 10px;
  323. }
  324. .skills .skills-content .left p{
  325.     text-align: justify;
  326. }
  327. .skills .skills-content .left a{
  328.     display: inline-block;
  329.     background: #4F8A8B;
  330.     color: #fff;
  331.     font-size: 18px;
  332.     font-weight: 500;
  333.     padding: 8px 16px;
  334.     margin-top: 20px;
  335.     border-radius: 6px;
  336.     border: 2px solid #4F8A8B;
  337.     transition: all 0.3s ease;
  338. }
  339. .skills .skills-content .left a:hover{
  340.     color: #4F8A8B;
  341.     background: none;
  342. }
  343. .skills .skills-content .right .bars{
  344.     margin-bottom: 15px;
  345. }
  346. .skills .skills-content .right .info{
  347.     display: flex;
  348.     margin-bottom: 5px;
  349.     align-items: center;
  350.     justify-content: space-between;
  351. }
  352. .skills .skills-content .right span{
  353.     font-weight: 500;
  354.     font-size: 18px;
  355. }
  356. .skills .skills-content .right .line{
  357.     height: 5px;
  358.     width: 100%;
  359.     background: lightgrey;
  360.     position: relative;
  361. }
  362. .skills .skills-content .right .line::before{
  363.     content: "";
  364.     position: absolute;
  365.     height: 100%;
  366.     left: 0;
  367.     top: 0;
  368.     background: #4F8A8B;
  369. }
  370. .skills-content .right .html::before{
  371.     width: 80%;
  372. }
  373. .skills-content .right .css::before{
  374.     width: 70%;
  375. }
  376. .skills-content .right .js::before{
  377.     width: 50%;
  378. }
  379. .skills-content .right .mysql::before{
  380.     width: 60%;
  381. }
  382.  
  383. /* contact section styling */
  384. .contact .contact-content .column{
  385.     width: calc(50% - 30px);
  386. }
  387. .contact .contact-content .text{
  388.     font-size: 20px;
  389.     font-weight: 600;
  390.     margin-bottom: 10px;
  391. }
  392. .contact .contact-content .left p{
  393.     text-align: justify;
  394. }
  395. .contact .contact-content .left .icons{
  396.     margin: 10px 0;
  397. }
  398. .contact .contact-content .row{
  399.     display: flex;
  400.     height: 65px;
  401.     align-items: center;
  402. }
  403. .contact .contact-content .row .info{
  404.     margin-left: 30px;
  405. }
  406. .contact .contact-content .row i{
  407.     font-size: 25px;
  408.     color: #4F8A8B;
  409. }
  410. .contact .contact-content .info .head{
  411.     font-weight: 500;
  412.     color: #4F8A8B;
  413. }
  414. .contact .right form .fields{
  415.     display: flex;
  416. }
  417. .contact .right form .field,
  418. .contact .right form .fields .field{
  419.     height: 45px;
  420.     width: 100%;
  421.     margin-bottom: 15px;
  422. }
  423. .contact .right form .textarea{
  424.     height: 80px;
  425.     width: 100%;
  426. }
  427. .contact .right form .name{
  428.     margin-right: 10px;
  429. }
  430. .contact .right form .field input,
  431. .contact .right form .textarea textarea{
  432.     height: 100%;
  433.     width: 100%;
  434.     border: 1px solid lightgrey;
  435.     border-radius: 6px;
  436.     outline: none;
  437.     padding: 0 15px;
  438.     font-size: 17px;
  439.     font-family: 'Poppins', sans-serif;
  440.     transition: all 0.3s ease;
  441. }
  442. .contact .right form .field input:focus,
  443. .contact .right form .textarea textarea:focus{
  444.     border-color: #b3b3b3;
  445. }
  446. .contact .right form .textarea textarea{
  447.   padding-top: 10px;
  448.   resize: none;
  449. }
  450. .contact .right form .button-area{
  451.   display: flex;
  452.   align-items: center;
  453. }
  454. .right form .button-area button{
  455.   color: #fff;
  456.   display: block;
  457.   width: 160px!important;
  458.   height: 45px;
  459.   outline: none;
  460.   font-size: 18px;
  461.   font-weight: 500;
  462.   border-radius: 6px;
  463.   cursor: pointer;
  464.   flex-wrap: nowrap;
  465.   background: #4F8A8B;
  466.   border: 2px solid #4F8A8B;
  467.   transition: all 0.3s ease;
  468. }
  469. .right form .button-area button:hover{
  470.   color: #4F8A8B;
  471.   background: none;
  472. }
  473. /* footer section styling */
  474. footer{
  475.     background: #111;
  476.     padding: 15px 23px;
  477.     color: #fff;
  478.     text-align: center;
  479. }
  480. footer span a{
  481.     color: #4F8A8B;
  482.     text-decoration: none;
  483. }
  484. footer span a:hover{
  485.     text-decoration: underline;
  486. }
  487.  
  488.  
  489. /* responsive media query start */
  490. @media (max-width: 1104px) {
  491.     .about .about-content .left img{
  492.         height: 350px;
  493.         width: 350px;
  494.     }
  495. }
  496.  
  497. @media (max-width: 991px) {
  498.     .max-width{
  499.         padding: 0 50px;
  500.     }
  501. }
  502. @media (max-width: 947px){
  503.     .menu-btn{
  504.         display: block;
  505.         z-index: 999;
  506.     }
  507.     .menu-btn i.active:before{
  508.         content: "\f00d";
  509.     }
  510.     .navbar .menu{
  511.         position: fixed;
  512.         height: 100vh;
  513.         width: 100%;
  514.         left: -100%;
  515.         top: 0;
  516.         background: #111;
  517.         text-align: center;
  518.         padding-top: 80px;
  519.         transition: all 0.3s ease;
  520.     }
  521.     .navbar .menu.active{
  522.         left: 0;
  523.     }
  524.     .navbar .menu li{
  525.         display: block;
  526.     }
  527.     .navbar .menu li a{
  528.         display: inline-block;
  529.         margin: 20px 0;
  530.         font-size: 25px;
  531.     }
  532.     .home .home-content .text-2{
  533.         font-size: 70px;
  534.     }
  535.     .home .home-content .text-3{
  536.         font-size: 35px;
  537.     }
  538.     .home .home-content a{
  539.         font-size: 23px;
  540.         padding: 10px 30px;
  541.     }
  542.     .max-width{
  543.         max-width: 930px;
  544.     }
  545.     .about .about-content .column{
  546.         width: 100%;
  547.     }
  548.     .about .about-content .left{
  549.         display: flex;
  550.         justify-content: center;
  551.         margin: 0 auto 60px;
  552.     }
  553.     .about .about-content .right{
  554.         flex: 100%;
  555.     }
  556.     .project .serv-content .card{
  557.         width: calc(50% - 10px);
  558.         margin-bottom: 20px;
  559.     }
  560.     .skills .skills-content .column,
  561.     .contact .contact-content .column{
  562.         width: 100%;
  563.         margin-bottom: 35px;
  564.     }
  565. }
  566.  
  567. @media (max-width: 690px) {
  568.     .max-width{
  569.         padding: 0 23px;
  570.     }
  571.     .home .home-content .text-2{
  572.         font-size: 60px;
  573.     }
  574.     .home .home-content .text-3{
  575.         font-size: 32px;
  576.     }
  577.     .home .home-content a{
  578.         font-size: 20px;
  579.     }
  580.     .project .serv-content .card{
  581.         width: 100%;
  582.     }
  583. }
  584.  
  585. @media (max-width: 500px) {
  586.     .home .home-content .text-2{
  587.         font-size: 50px;
  588.     }
  589.     .home .home-content .text-3{
  590.         font-size: 27px;
  591.     }
  592.     .about .about-content .right .text,
  593.     .skills .skills-content .left .text{
  594.         font-size: 19px;
  595.     }
  596.     .contact .right form .fields{
  597.         flex-direction: column;
  598.     }
  599.     .contact .right form .name,
  600.     .contact .right form .email{
  601.         margin: 0;
  602.     }
  603.     .right form .error-box{
  604.        width: 150px;
  605.     }
  606.     .scroll-up-btn{
  607.         right: 15px;
  608.         bottom: 15px;
  609.         height: 38px;
  610.         width: 35px;
  611.         font-size: 23px;
  612.         line-height: 38px;
  613.     }
  614. }
  615.