API tools faq
paste
Sabbir-bin

protfolioSabbir.css

Sabbir-bin
Dec 6th, 2021 (edited)
200
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 10.10 KB | None | 0 0
raw download clone embed print report
  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. }
Add Comment
Please, Sign In to add comment
Public Pastes
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!