Difference between revisions of "Template:TU Darmstadt/Model/Switch/CSS"

(Created page with "<html> <style> .hero_img_jm{ position: relative; height: 800px; overflow:hidden; background: url(https://academy.avast.com/hubfs/New_Avast_Academy/Hackers/Hacker-Hero....")
 
Line 3: Line 3:
 
.hero_img_jm{
 
.hero_img_jm{
 
   position: relative;
 
   position: relative;
−
   height: 800px;
+
  width: 100%;
 +
   height: 65vw;
 
   overflow:hidden;
 
   overflow:hidden;
 
   background: url(https://academy.avast.com/hubfs/New_Avast_Academy/Hackers/Hacker-Hero.png);
 
   background: url(https://academy.avast.com/hubfs/New_Avast_Academy/Hackers/Hacker-Hero.png);
Line 9: Line 10:
  
 
}
 
}
 +
 +
 +
 
.container_jm{
 
.container_jm{
 
   position: absolute;
 
   position: absolute;
Line 27: Line 31:
 
.container_jm h1 {
 
.container_jm h1 {
 
   font-size: 72px;
 
   font-size: 72px;
−
   letter-spacing: 0.2em;
+
   letter-spacing: 0.05em;
−
  margin: 0;
+
 
   color: white;
 
   color: white;
 
}
 
}
Line 38: Line 41:
 
.scroll-down_jm {
 
.scroll-down_jm {
 
   position: absolute;
 
   position: absolute;
−
   bottom: 30px;
+
   bottom: 2.4%;
 
   left: calc(50% - 16px) ;
 
   left: calc(50% - 16px) ;
 
   margin-left: -16px;
 
   margin-left: -16px;
Line 75: Line 78:
 
   0%,
 
   0%,
 
   100%,
 
   100%,
−
   20%,
+
   30%,
 +
  10%,
 
   50%,
 
   50%,
−
   80% {
+
   60%{
 
     -webkit-transform: translateY(0);
 
     -webkit-transform: translateY(0);
 
     -ms-transform: translateY(0);
 
     -ms-transform: translateY(0);
Line 83: Line 87:
  
 
   }
 
   }
−
   40% {
+
   20% {
 
     -webkit-transform: translateY(-10px);
 
     -webkit-transform: translateY(-10px);
 
     -ms-transform: translateY(-10px);
 
     -ms-transform: translateY(-10px);
Line 90: Line 94:
  
 
   }
 
   }
−
   60% {
+
   40% {
 
     -webkit-transform: translateY(-5px);
 
     -webkit-transform: translateY(-5px);
 
     -ms-transform: translateY(-5px);
 
     -ms-transform: translateY(-5px);
Line 106: Line 110:
 
   transform: translateX(-50%);
 
   transform: translateX(-50%);
  
−
   padding-right: 30px;
+
   padding-right: 40px;
−
   padding-left: 30px;
+
   padding-left: 40px;
−
 
+
  padding-bottom: 5px;
 +
  padding-top: 4px;
  
 
}
 
}
 
.repos_jm a{
 
.repos_jm a{
−
   color: lightgrey;
+
   color: white;
 
   font-size: 32px;
 
   font-size: 32px;
 +
  text-shadow: 1px 1px rgba(0, 0, 0, 0.5);
 
   text-decoration: none;
 
   text-decoration: none;
−
 
+
  letter-spacing: 0.01em;
−
   line-height: 100%;
+
   line-height: 125%;
 
   display: block;
 
   display: block;
−
   width: 100%
+
   width: 100%;
 
}
 
}
 
.repos_jm a:hover{
 
.repos_jm a:hover{
Line 125: Line 131:
 
}
 
}
  
−
@media screen and (max-width: 1100px) {
+
@media screen and (max-width: 1042px) {
 
   .container_jm h1{
 
   .container_jm h1{
−
     font-size: 62px;
+
     font-size: 54px;
 +
  }
 +
  .container_jm{
 +
    border: 6px solid;
 +
    padding:
 
   }
 
   }
 
   .repos_jm a{
 
   .repos_jm a{
−
 
+
    font-size: 23px;
 
   }
 
   }
 +
  .scroll-down_jm {
 +
    width: 52px;
 +
    height: 52px;
 +
    bottom: 21px;
 +
    left: calc(50% - 10px) ;
 +
    margin-left: -10px;
 +
  }
 +
  .scroll-down_jm span:nth-child(1){
 +
    width: 21px;
 +
    height: 21px;
 +
    top: calc(50%  - 14px);
 +
    left: calc(50% - 10.5px);
  
 +
  }
 +
}
 +
@media screen and (max-width: 768px) {
 +
  .container_jm h1{
 +
    font-size: 40px;
 +
  }
 +
  .container_jm{
 +
    border: 4.4px solid;
 +
    padding:
 +
  }
 +
  .repos_jm a{
 +
    font-size: 17.5px;
 +
  }
 +
  .scroll-down_jm {
 +
    width: 38px;
 +
    height: 38px;
 +
    bottom: 15.4px;
 +
    left: calc(50% - 8px) ;
 +
    margin-left: -8px;
 +
  }
 +
  .scroll-down_jm span:nth-child(1){width: 15px;
 +
  height: 15px;
 +
  top: calc(50%  - 10px);
 +
  left: calc(50% - 7.5px);
 +
  }
 +
}
 +
@media screen and (max-width: 600px) {
 +
  .container_jm h1{
 +
    font-size: 30.1px;
 +
  }
 +
  .container_jm{
 +
    border: 3.5px solid;
 +
    padding:
 +
  }
 +
  .repos_jm a{
 +
    font-size: 13.5px;
 +
  }
 +
  .scroll-down_jm {
 +
    width: 30px;
 +
    height: 30px;
 +
    bottom: 12px;
 +
    left: calc(50% - 6px) ;
 +
    margin-left: -6px;
 +
  }
 +
  .scroll-down_jm span:nth-child(1){width: 12px;
 +
  height: 12px;
 +
  top: calc(50%  - 8px);
 +
  left: calc(50% - 6px);
 +
  }
 +
}
 +
@media screen and (max-width: 480px) {
 +
  .container_jm h1{
 +
    font-size: 23.1px;
 +
  }
 +
  .container_jm{
 +
    border: 2.8px solid;
 +
    padding:
 +
  }
 +
  .repos_jm a{
 +
    font-size: 11px;
 +
  }
 +
  .scroll-down_jm {
 +
    width: 24px;
 +
    height: 24px;
 +
    bottom: 10px;
 +
    left: calc(50% - 5px) ;
 +
    margin-left: -5px;
 +
  }
 +
  .scroll-down_jm span:nth-child(1){width: 10px;
 +
  height: 10px;
 +
  top: calc(50%  - 6.6px);
 +
  left: calc(50% - 5px);
 +
  }
 +
}
 +
@media screen and (max-width: 320px) {
 +
  .container_jm h1{
 +
    font-size: 13.7px;
 +
  }
 +
  .container_jm{
 +
    border: 1.8px solid;
 +
    padding:
 +
  }
 +
  .repos_jm a{
 +
    font-size: 7.2px;
 +
  }
 +
  .scroll-down_jm {
 +
    width: 16px;
 +
    height: 16px;
 +
    bottom: 6.4px;
 +
    left: calc(50% - 3px) ;
 +
    margin-left: -3px;
 +
  }
 +
  .scroll-down_jm span:nth-child(1){width: 6px;
 +
  height: 6px;
 +
  top: calc(50% - 4px);
 +
  left: calc(50% - 3px);
 +
  }
 
}
 
}
−
 
−
 
 
</style>
 
</style>
 
</html>
 
</html>

Revision as of 11:32, 10 October 2020