deyanivanov966

Bootstrap 101

Oct 15th, 2021 (edited)
1,208
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. body {
  2.   margin-top: 50px;
  3.   margin-bottom: 50px;
  4.   background: #e5e5e5;
  5. }
  6. .container-xl {
  7.   border-top: none;
  8.   border-bottom: none;
  9.   border: 30px solid #fff;
  10.   max-width: 750px;
  11. }
  12. img {
  13.   display: block;
  14.         margin-left: auto;
  15.         margin-right: auto;
  16.         width: 150px;display: block;
  17.         margin-left: auto;
  18.         margin-right: auto;
  19.         width: 150px;
  20.         border-radius: 55px;
  21. }
  22. .left-heading {
  23.   font-size: 30px;
  24.   font-weight: bold;
  25.   line-height: 35px;
  26.   margin-top: 50px;
  27. }
  28. .languages {
  29.   font-size: 20px;
  30.   font-weight: bold;
  31.   line-height: 23px;
  32. }
  33. .education-right {
  34.   text-align: right;
  35.   color: red;
  36.   font-size: 30px;
  37.   font-weight: bold;
  38.   line-height: 35px;
  39.   margin-top: 50px;
  40. }
  41. .work-right {
  42.   text-align: right;
  43.   color: blue;
  44.   font-size: 30px;
  45.   font-weight: bold;
  46.   line-height: 35px;
  47.   margin-top: 50px;
  48. }
  49. .hobbies {
  50.   font-size: 20px;
  51.   font-weight: bold;
  52.   line-height: 23px;
  53. }
  54. svg {
  55.   position: absolute;
  56.   top: 0;
  57.   left: 0;
  58. }
  59. .container {
  60.   position: relative;
  61.   width: 100%;
  62.   background: #eaeaea;
  63.   padding-bottom: 26%;
  64. }
  65. .wave-two {
  66.   transform: rotate(180deg);
  67. }
  68. @media screen and (max-width: 800px) {
  69.   .container-xl {
  70.     text-align: center;
  71.   }
  72.   .education-right {
  73.     text-align: center;
  74.   }
  75.   .work-right {
  76.     text-align: center;
  77.   }
  78.   .personal information {
  79.     order: -2;
  80.   }
  81.   .img-div {
  82.     order: -1;
  83.   }
  84.   .education-div {
  85.     order: -1;
  86.   }
  87.   .work-div {
  88.     order: -1;
  89.   }
  90.   .wave-one {
  91.     order: -1;
  92.   }
  93. }
  94.  
RAW Paste Data