SHARE
TWEET

Untitled

a guest Nov 21st, 2019 107 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. @import url('https://fonts.googleapis.com/css?family=Alatsi&display=swap');
  2.  
  3.  
  4. .body{
  5.     font-style: initial;
  6.     font-family: 'Muli', sans-serif;
  7.     font-size: 10vw;
  8.    
  9. }
  10.  
  11. * {
  12.     margin: 0;
  13.     padding: 0;
  14.     font-family: 'Alatsi', sans-serif;
  15. }
  16.  
  17. .me {
  18.     background-image: linear-gradient(to bottom, #6f6bd1, #8c58b7, #9c459a, #a2347b, #a0265d, #a43645, #9e4934, #935a2c, #897c44, #2f5310, #8daf9e, #adc2c1);
  19.     display: flex;
  20.     background-repeat: no-repeat;
  21.     background-size: auto;
  22.     background-position: center;
  23.     align-items: center;
  24.     flex-direction: column;
  25.     height: auto;
  26.     display: flex;
  27.     text-align: center;
  28.  
  29. }
  30.  
  31. h1 {
  32.     display: flex;
  33.    
  34. }
  35.    
  36. .myName {
  37.     font-size: 3vw;
  38.     margin: 10% 0;
  39.    
  40. }
  41.  
  42. img {
  43.     max-width: 100%;
  44. }
  45. picture {
  46.     display: flex;
  47. }
  48.  
  49. .contact-info {
  50.     text-align: center;
  51.     padding: 30em;
  52.     justify-content: space-around;
  53.     margin-left: auto;
  54. }
  55.  
  56. .profil-image {
  57.     margin-right: auto;
  58.     position: absolute;
  59.     align-content: center;
  60.     justify-content: center;
  61.  
  62. }
  63.  
  64. .segment {
  65.     background-repeat: no-repeat;
  66.     background-size: cover;
  67.     background-position: center;
  68.     background-size: auto;
  69.     width: 100%;
  70.     text-align: center;
  71.     position: relative;
  72.     flex-direction: column;
  73.     display: flex;
  74.     overflow: auto;
  75. }
  76.  
  77. .segment > img {
  78.     width: 100%;
  79. }
  80. .segment > div {
  81.     position: absolute;
  82.     left: 0;
  83.     top: 4%;
  84.     right: 0;
  85.     bottom: 0;
  86. }
  87.  
  88. #aboutMe {
  89.     height: auto;
  90.     max-height: 0;
  91.     overflow: hidden;
  92.     transition: max-height 1s;
  93.     background-color: rgba(255,255,255,0.7);
  94.     text-align: left;
  95.     width: 80%;
  96.     margin: 0 auto;
  97.     text-indent: 1rem;
  98. }
  99.  
  100. #knowleageID {
  101.     height: auto;
  102.     max-height: 0;
  103.     overflow: hidden;
  104.     transition: max-height 1s;
  105.     background-color: rgba(255,255,255,0.7);
  106.     text-align: left;
  107.     width: 20%;
  108.     margin: 0 auto;
  109.     text-indent: 1rem;
  110. }
  111.  
  112. #expreienceeID {
  113.     height: auto;
  114.     max-height: 0;
  115.     overflow: auto;
  116.     transition: max-height 3.3s;
  117.     background-color: rgba(255,255,255,0.7);
  118.     text-align: left;
  119.     width: 70%;
  120.     margin: 0 auto;
  121.     text-indent: 1rem;
  122. }
  123.  
  124. #edjucationnID {
  125.     height: auto;
  126.     max-height: 0;
  127.     overflow: auto;
  128.     transition: max-height 3s;
  129.     background-color: rgba(255,255,255,0.7);
  130.     text-align: left;
  131.     width: 70%;
  132.     margin: 0 auto;
  133.     text-indent: 1rem;
  134. }
  135. #laungeugeeID {
  136.     height: auto;
  137.     max-height: 0;
  138.     overflow: hidden;
  139.     transition: max-height 1s;
  140.     background-color: rgba(255, 255, 255, 0.7);
  141.     text-align: center;
  142.     width: 20%;
  143.     margin: 0 auto;
  144.     text-indent: 1rem;
  145. }
  146.  
  147.  
  148. .knapp {
  149.    border: none;
  150.    background-color: transparent;
  151.    font-size: 10vw;
  152.    cursor: pointer;
  153.    
  154. }
  155.  
  156. .footerContent {
  157.     justify-content: center;
  158.     text-align: center;
  159.     width: 100%;
  160.     height: 100%;
  161.     background-image: linear-gradient(to left bottom, #384c09, #4f4d00, #664b00, #7e4700, #963f16, #a05321, #aa662e, #b3783d, #afa264, #b2c69c, #c9e5d4, #f8fffe);
  162.     padding: 2rem 0 1rem 0;
  163. }
  164. @media screen and (max-width: 620px) {
  165.     #knowleageID {
  166.         width: 100%;
  167.     }
  168.     #aboutMe {
  169.         width: 100%;
  170.     }
  171.     #expreienceeID {
  172.         width: 100%;
  173.     }
  174.     #edjucationnID {
  175.         width: 100%;
  176.     }
  177.     #laungeugeeID {
  178.         width: 100%;
  179.     }
  180.     .myName {
  181.         font-size: 0.8rem;
  182.     }
  183. }
  184.  
  185. @media screen and (min-width: 1000px) {
  186.     .knapp {
  187.         font-size: 4vw;
  188.     }
  189.     .myName {
  190.         font-size: 3rem;
  191.     }
  192. }
RAW Paste Data
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
 
Top