Difference between revisions of "Team:Tuebingen/testsdg"

 
Line 558: Line 558:
 
     <meta charset="UTF-8">
 
     <meta charset="UTF-8">
 
     <meta name="viewport" content="width=device-width,initial-scale=1.0" />
 
     <meta name="viewport" content="width=device-width,initial-scale=1.0" />
−
     <title>Profile Card</title>
+
     <title>Sustainable Development Goals</title>
 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" type="text/css"/>
 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" type="text/css"/>
 
     <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Righteous" />
 
     <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Righteous" />
Line 601: Line 601:
  
 
.kiwi{
 
.kiwi{
−
   width: calc(25% - 2rem);
+
   width: 25%;
 
   margin: 1rem;
 
   margin: 1rem;
 
   cursor: pointer;
 
   cursor: pointer;
Line 625: Line 625:
 
        backface-visibility: hidden;
 
        backface-visibility: hidden;
 
text-align: center;
 
text-align: center;
−
min-height: 280px;
+
min-height: 200px;
−
height: auto;
+
 
border-radius: 10px;
 
border-radius: 10px;
 
color: #fff;
 
color: #fff;
Line 739: Line 738:
 
}
 
}
  
−
@media screen and (max-width: 64rem){
+
@media screen and (min-width: 135.06rem) {
 +
    .apfel{
 +
        width: 70%;
 +
    }
 +
    .banane{
 +
        width: 90%;
 +
        margin-left: 10%;
 +
    }
 +
}
 +
 
 +
 
 +
@media screen and (min-width: 118.75rem) {
 +
    .apfel{
 +
        width: 80%;
 +
    }
 +
}
 +
 
 +
@media screen and (min-width: 93.75rem){
 +
    .kiwi{
 +
    width: 20%;
 +
        height: 100%;
 +
  }
 +
    .pfirsich{
 +
        height: 500px;
 +
        background-size:80%;
 +
    }
 +
    .kuchen{
 +
        height: 500px;
 +
    }
 +
}
 +
 
 +
@media screen and (min-width: 70.1rem){
 +
    .pfirsich{
 +
        height: 340px;
 +
        background-size:115%;
 +
    }
 +
    .kuchen{
 +
        height: 340px;
 +
    }
 +
}
 +
 
 +
@media screen and (max-width: 70rem){
 
   .kiwi{
 
   .kiwi{
−
     width: calc(33.333333% - 2rem);
+
     width: 33.333333%;
 +
      height:350px;
 
   }
 
   }
 +
    .pfirsich{
 +
        height: 350px;
 +
        background-size:110%;
 +
    }
 +
    .kuchen{
 +
        height: 350px;
 +
    }
 
}
 
}
 +
 +
    @media screen and (max-width: 909px){
 +
 +
    .kiwi,.kuchen {
 +
        height:300px;
 +
    }
 +
 +
    .pfirsich{
 +
        height: 300px;
 +
        background-size:110%;
 +
    }
 +
}
 +
  
 
@media screen and (max-width: 48rem){
 
@media screen and (max-width: 48rem){
 
   .kiwi{
 
   .kiwi{
−
     width: calc(50% - 2rem);
+
     width: 55%;
 +
    height: 300px;
 
   }
 
   }
 +
    .pfirsich{
 +
        height: 300px;
 +
        background-size: 90% ;
 +
    }
 +
    .kuchen{
 +
        height: 300px;
 +
    }
 +
}
 +
 +
@media screen and (max-width: 35.625rem){
 +
 +
    .kiwi,.kuchen {
 +
        height:250px;
 +
    }
 +
 +
    .pfirsich{
 +
        height: 250px;
 +
        background-size: 90% ;
 +
    }
 
}
 
}
  
 
@media screen and (max-width: 32rem){
 
@media screen and (max-width: 32rem){
 
   .kiwi{
 
   .kiwi{
−
     width: 100%;
+
     width: 80%;
 
     margin: 0 0 2rem 0;
 
     margin: 0 0 2rem 0;
 +
      height: 300px;
 +
 
   }
 
   }
 +
    .pfirsich,.kuchen {
 +
        height: 300px;
 +
    }
 +
}
 +
 +
@media screen and (max-width: 24.688rem){
 +
    .pfirsich , .kuchen{
 +
        height: 240px;
 +
    }
 
}
 
}
  

Latest revision as of 18:22, 5 October 2019

Sustainable Development Goals

OUR SDGs

123hallo

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.