Sabbir-bin

protfolioSabbir.css

Dec 6th, 2021 (edited)
113
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Ubuntu:wght@400;500;700&display=swap');
  2.  
  3. /* For all styling */
  4. *{
  5.     margin:  0;
  6.     padding: 0;
  7.     box-sizing: border-box;
  8.     text-decoration: none;
  9. }
  10.  
  11. /* For navbar styling start */
  12.  
  13. html{
  14.     scroll-behavior: smooth;
  15. }
  16.  
  17. .max-width{
  18.     max-width: 1300px;
  19.     padding: 0 80px;
  20.     margin: auto;
  21. }
  22. .navbar{
  23.     position: fixed;
  24.     width: 100%;
  25.     padding: 15px 0;
  26.     background: crimson;
  27.     font-family: 'Ubuntu', sans-serif;
  28.     transition:  all .4s ease;
  29.     z-index: 999;
  30. }
  31. .max-width{
  32.     max-width: 1350px;
  33.     padding:  0 85px;
  34.     margin: auto;
  35. }
  36. .navbar .max-width{
  37.      display: flex;
  38.      align-items: center;
  39.      justify-content: space-between;
  40. }
  41. .navbar .logo a{
  42.     color: white;
  43.     font-size: 35px;
  44.     font-weight: 600;
  45. }
  46. .navbar .logo a span{
  47.     color: black;
  48. }
  49. .navbar .menu li{
  50.     list-style: none;
  51.     display: inline-block;
  52. }
  53.  
  54. .navbar .menu li a{
  55.     color: white;
  56.     font-size: 17px;
  57.     font-weight: 450;
  58.     margin-left: 24px;
  59.     transition: color 0.4s ease;
  60.      
  61. }
  62. .navbar .menu li a:hover{
  63.     color: black;
  64. }
  65.  
  66. /* For navbar styling start */
  67.  
  68.  /* search bar styling */
  69.  .search-container{
  70.     overflow: hidden;
  71.     background-color: crimson;
  72.     border-radius: 5px;
  73.  }
  74.  
  75.  .search-container {
  76.     float: right;
  77.   }
  78.  
  79.   .search-container input[type=text] {
  80.     padding: 6px;
  81.     margin-top: 5px;
  82.     font-size: 17px;
  83.     border: none;
  84.    
  85.   }
  86.  
  87.   .search-container button {
  88.     float: right;
  89.     padding: 6px 10px;
  90.     margin-top: 5px;
  91.     margin-right: 12px;
  92.     background:crimson;
  93.     font-size: 17px;
  94.     border: none;
  95.     cursor: pointer;
  96.    
  97.   }
  98.   .search-container button:hover {
  99.     background:lightgray;
  100.     color: crimson;
  101.     transition: color 0.03s ease;
  102.    
  103.   }
  104.  
  105.   /* search bar styling end*/
  106.  
  107.   /* Home section start */
  108.  
  109. .home{
  110.    
  111.     display: flex;
  112.     background: black  no-repeat center;
  113.     height: 100vh;
  114.     color: rgb(255, 255, 255);
  115.     min-height: 500px;
  116.     font-family: 'Ubuntu', sans-serif;
  117.    
  118. }
  119. .home .max-width{
  120.     margin: auto 0 auto 42px;
  121. }
  122. .home .home-content .text-1{
  123.  
  124.     font-size: 27px;
  125.  
  126. }
  127. .home .home-content .text-2{
  128.     font-size: 70px;
  129.     font-weight: 550;
  130.     margin-left: -4px;
  131.  
  132. }
  133.  
  134. .home .home-content .text-3{
  135.     font-size: 40px;
  136.     max-width: 5px 0;
  137.      
  138. }
  139. .home .home-content .text-3 span{
  140.     color:  crimson;
  141.     font-weight:  500;
  142. }
  143. .home .home-content a{
  144.     display: inline-block;
  145.     background: crimson;
  146.     font-size: 20px;
  147.     color: white;
  148.     padding: 10px 36px;
  149.     border: 2px solid crimson;
  150.     margin-top: 5px;
  151.     border-radius: 6px;
  152. }
  153.  
  154. .home .home-content a:hover{
  155.     color: black;
  156.     background: white;
  157.     transition: color 0.5s ease;
  158. }
  159.   /* Home section end*/
  160.  
  161.   section{
  162.       padding: 100px 0;
  163.   }
  164.  
  165.   /* about section styling */
  166.  
  167.  
  168. .about, .services, .skills, .contact , footer{
  169.     font-family: 'poppins', sans-serif;
  170. }
  171. .about .about-content,
  172. .services .serv-content ,
  173. .skills .skills-content,
  174. .contact .contact-content{
  175.     display: flex;
  176.     flex-wrap: wrap;
  177.     align-items: center;
  178.     justify-content: space-between;
  179. }
  180. section .title{
  181.       position: relative;
  182.       font-family: 'ubuntu', sans-serif;
  183.       text-align: center;
  184.       font-size: 40px;
  185.       font-weight: 500;
  186.       margin-bottom: 60px;
  187.       padding-bottom: 20px;
  188.      
  189. }
  190. section .title::before{
  191.       content: "";
  192.       position: absolute;
  193.       bottom: 0px;
  194.       left: 42.5%;
  195.       width: 180px;
  196.       height: 3px;
  197.       background: black;
  198.       transition: translateX(-50%);
  199. }
  200. section .title::after{
  201.     position: absolute;
  202.     left: 46.2%;
  203.     bottom: -11px;
  204.     padding: 5px;
  205.     font-size: 20px;
  206.     color: crimson;
  207.     background: white;
  208.     transition: translateX(-50%);
  209. }
  210. .about .title::after{
  211.     content: "Who I am";
  212. }
  213.  
  214.  
  215.  
  216. .about .about-content  .text span{
  217.     color: crimson;
  218. }
  219. .about .about-content  .text{
  220.     font-size: 25px;
  221.     font-weight: 600;
  222.     margin-bottom: 10px;
  223. }
  224.  
  225. .about .about-content .column-left{
  226.     width: 45%;
  227.  
  228. }
  229.  
  230. .about .about-content .column-left img{
  231.       height: 400px;
  232.       width: 500px;
  233.       object-fit: cover;
  234.       border: 2px solid coral;
  235.       border-radius: 5px;
  236. }
  237.  
  238. .about .about-content .column-right{
  239.     width: 55%;
  240.  
  241. }
  242. .about .about-content .column-right p{
  243.     text-align: justify;
  244. }
  245. .about .about-content .column-right a{
  246.     display:  inline-block;
  247.     background:  crimson;
  248.     font-weight: 500;
  249.     margin-top: 23px;
  250.     padding: 10px 20px;
  251.     text-align: center;
  252.     color: white;
  253.     font-size: 20px;
  254.     border: 2px solid crimson;
  255.     border-radius: 5px;
  256.  
  257. }
  258.  
  259. .about .about-content .column-right a:hover{
  260.     color: crimson;
  261.     border: 2px black solid;
  262.     background: white;
  263.     transition: color 0.5s ease;
  264. }
  265.  
  266. /* about section end */
  267.  
  268. /* service section start */
  269.  
  270. .services{
  271.     background: black;
  272.     color: white;
  273. }
  274. .services .title::before{
  275.     background: white;
  276. }
  277.  
  278. .services .title::after{
  279.     content: "I Provide";
  280.     background: black;
  281. }
  282. .services .serv-content .card{
  283.     width: calc(30% - 15px);
  284.     background: #222;
  285.     text-align: center;
  286.     border-radius: 5px;
  287.     padding: 20px 26px;
  288.     cursor: pointer;
  289.     transform: scale(1.09);
  290.     margin: 20px;
  291.     font-family: 'poppins', sans-serif;
  292.     position: relative;
  293. }
  294.  
  295. .services .serv-content .card:hover{
  296.     background: crimson;
  297. }
  298. .services .serv-content .card:hover i{
  299.     color: black;
  300. }
  301. .services .serv-content .card i{
  302.     font-size: 50px;
  303.     color: crimson;
  304.  
  305. }
  306. .services .serv-content .card .box{
  307.     transition: all 0.06s ease;
  308. }
  309.  
  310. .services .serv-content .card:hover .box{
  311.     transform: scale(1.06);
  312.  
  313. }
  314.  
  315. .services .serv-content .card .text{
  316.     font-size: 25px;
  317.     font-weight: 500;
  318.     margin: 10px 0 7px 0;
  319.  
  320. }
  321.  
  322.  
  323. /* service section end*/
  324.  
  325. /* skill section start */
  326.  
  327. .skills .title::after{
  328.     content:" I know";
  329.  
  330. }
  331. .skills .skills-content .column,
  332. .contact .contact-content .column{
  333.     width: calc(50% - 30px);
  334.  
  335. }
  336. .skills .skills-content .left .text{
  337.     font-size: 22px;
  338.     font-weight: 600;
  339.     margin-bottom: 10px;
  340.  
  341. }
  342. .skills .skills-content .right .bars{
  343.     margin-bottom: 15px;
  344. }
  345. .skills .skills-content .right .info{
  346.     display: flex;
  347.     align-items: center;
  348.     justify-content: space-between;
  349.     margin-bottom: 5px;
  350. }
  351.  
  352. .skills .skills-content .right span{
  353.     font-weight: 500;
  354.     font-size: 15px;
  355. }
  356. .skills .skills-content .right .line{
  357.     height: 5px;
  358.     width: 100%;
  359.     background: lightgray;
  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: crimson;
  369. }
  370. .skills .skills-content .left p{
  371.     text-align: justify;
  372. }
  373. .skills .skills-content .left a{
  374.     display:  inline-block;
  375.     background:  crimson;
  376.     margin-top: 20px;
  377.     font-weight: 500;
  378.     padding: 10px 20px;
  379.     text-align: center;
  380.     color: white;
  381.     font-size: 18px;
  382.     border: 2px solid crimson;
  383.     border-radius: 5px;
  384. }
  385. .skills .skills-content .left a:hover{
  386.     color: crimson;
  387.     border: 2px black solid;
  388.     background: white;
  389.     transition: color 0.5s ease;
  390.    
  391. }
  392.  
  393. .skills .skills-content .right .html::before{
  394.     width: 90%;
  395. }
  396. .skills .skills-content .right .css::before{
  397.     width: 70%;
  398. }
  399. .skills .skills-content .right .mysql::before{
  400.     width: 50%;
  401. }
  402. .skills .skills-content .right .bootstrap::before{
  403.     width: 20%;
  404. }
  405. .skills .skills-content .right .javaScript::before{
  406.     width: 10%;
  407. }
  408. /* skill section end */
  409.  
  410. /* team section start */
  411.  
  412. .teams .title::after{
  413.     content:"Now Deal";
  414.  
  415. }
  416. /* team section end */
  417.  
  418.  /* Contact section start  */
  419.  .contact .title::after{
  420.     content:"Get In";
  421.  
  422. }
  423. .contact .contact-content .column{
  424.     width: calc(50% - 30px);
  425.  
  426. }
  427. .contact .contact-content .text{
  428.     font-size: 22px;
  429.     font-weight: 600;
  430.     margin-bottom: 10px;
  431.  
  432. }
  433. .contact .contact-content .left p{
  434.  
  435.     text-align: justify;
  436. }
  437. .contact .contact-content .left .icons{
  438.     margin: 10px;
  439.    
  440.  
  441.  
  442. }
  443. .contact .contact-content  .row{
  444.     display: flex;
  445.     height: 65px;
  446.     align-items: center;
  447.      
  448.  
  449. }
  450. .contact .contact-content .row .info{
  451.     margin-left: 30px;
  452. }
  453. .contact .contact-content .row i{
  454.     font-size: 23px;
  455.     color: crimson;
  456. }
  457. .contact .contact-content .info .head{
  458.     font-weight: 600;
  459. }
  460. .contact .contact-content .info .subtitle{
  461.     color: #333;
  462. }
  463. .contact .right form .fields{
  464.     display: flex;
  465. }
  466. .contact .right form .name{
  467.     margin-right: 10px;
  468. }
  469. .contact .right form .email{
  470.     margin-left: 10px;
  471. }
  472. .contact .right form .textarea{
  473.     margin-top: 10px;
  474.     height: 100px;
  475.     width: 100%;
  476. }
  477.  
  478. .contact .right form .fields,
  479. .contact .right form .fields .field{
  480.     height: 45px;
  481.     width: 100%;
  482.     margin-bottom: 15px;
  483. }
  484. .contact .right form .field input,
  485. .contact .right form .textarea textarea{
  486.     height: 100%;
  487.     width: 100%;
  488.     border: 1px lightgray solid;
  489.     border-radius: 6px;
  490.     outline: none;
  491.     padding: 0 15px;
  492.     font-size: 17px;
  493.     font-family: 'poppins', sans-serif;
  494. }
  495. .contact .right form .textarea textarea{
  496.     padding-top: 10px;
  497.      resize:  none;
  498.  
  499. }
  500. .contact .right form .button{
  501.     height: 47px;
  502.     width: 170px;
  503. }
  504. .contact .right form .button button{
  505.     width: 100%;
  506.     height: 100%;
  507.     font-size: 15px;
  508.     font-weight: 550;
  509.     background: crimson;
  510.     border: 1px crimson solid;
  511.     border-radius: 10px;
  512.     transition: color 0.05s ease;
  513.     margin-top: 10px;
  514.     cursor: pointer;
  515. }
  516. .contact .right form .button  button:hover{
  517.     background: white;
  518.     color: crimson;
  519.    
  520.  
  521. }
  522.  
  523.      
  524.   /*Contact section end  */
  525.  
  526. /* footer styling */
  527.  
  528. footer{
  529.     background: black;
  530.     color: white;
  531.     padding:  20px 23px;
  532.     text-align:  center;
  533. }
  534.  
  535. footer span a{
  536.     color: crimson;
  537.     text-decoration:  underline;
  538. }
  539. footer span a:hover{
  540.     color: blue;
  541.     text-decoration: underline;
  542. }
RAW Paste Data