Difference between revisions of "Template:DTU-Denmark/designCSS"

 
(23 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
<html>
 
<html>
 
<style>
 
<style>
−
body {
+
 
−
  font-size: 16px;
+
 
−
  font-family:'Source Sans Pro';
+
.computerdiv{
−
  background:#ccc;
+
width:100%;
 +
margin-left:auto;
 +
margin-right:auto;
 +
text-align:center;
 
}
 
}
 +
 +
 +
.df1computer{
 +
width:30%;
 +
}
 +
 +
.design1contain{
 +
  position:relative;
 +
  margin:30%;
 +
 +
}
 +
.design2contain{
 +
  position:relative;
 +
  margin:3%;
 +
  width:100%;
 +
    margin-right:auto;
 +
  margin-left:auto;
 +
max-width:700px;
 +
}
 +
 +
.df1promoter{
 +
position: absolute;
 +
    left: 35%;
 +
    top: 40%;
 +
    width: 30%;
 +
    z-index: 1;
 +
}
 +
 +
.design1contain{
 +
  position:relative;
 +
  margin:10%;
 +
}
 +
 +
.df2{
 +
      position: absolute;
 +
    width: 47%;
 +
    background-color: #2a577d;
 +
    max-width: 500px;
 +
    padding: 15px;
 +
    color: #fff;
 +
    border-radius: 25px;
 +
font-size:80%;
 +
}
 +
 +
.df2promoter{
 +
    left: 0%;
 +
    top: -3%;
 +
}
 +
 +
.df3promoter{
 +
    right: 0%;
 +
    top: 0%;
 +
}
 +
 +
.df4promoter{
 +
    right: 0%;
 +
    bottom: 0%;
 +
width:35%;
 +
}
 +
 +
.df5promoter{
 +
    left: 0%;
 +
    bottom: 0%;
 +
width:59%;
 +
}
 +
  
 
.button-images {
 
.button-images {
−
max-width: 950px;
+
max-width: 850px;
 
margin: 75px auto;
 
margin: 75px auto;
  
  
 
    
 
    
 +
}
 +
 +
.button-container-space{
 +
margin-bottom: 25px;
 +
 
}
 
}
  
Line 21: Line 95:
 
border-radius:50%;  
 
border-radius:50%;  
 
overflow:hidden;  
 
overflow:hidden;  
 +
margin-bottom: 25px;
 
}
 
}
  
Line 38: Line 113:
  
 
.button-container a {
 
.button-container a {
−
   transition: all 1s ease-out;
+
   transition: all 1s ease-out !important;
−
   background: rgba(88, 88, 88, 0.7);
+
   background: rgba(10, 10, 10, 0.7) !important;
 
   border-radius:50%; vertical-align:middle;
 
   border-radius:50%; vertical-align:middle;
 
   padding:5%;  
 
   padding:5%;  
Line 50: Line 125:
 
   right:0;
 
   right:0;
 
   bottom:0;
 
   bottom:0;
−
   width:90%;
+
   width:100%;
 
   display:inline-block;
 
   display:inline-block;
 
   text-decoration: none;
 
   text-decoration: none;
Line 75: Line 150:
 
.underordnede{
 
.underordnede{
 
   padding-top:90px;
 
   padding-top:90px;
 +
}
 +
 +
.one_whole {
 +
width: 85%;
 
}
 
}
  
Line 80: Line 159:
 
width: 28%;
 
width: 28%;
 
}
 
}
−
 
−
 
 
.last {
 
.last {
 
margin-right: 0 !important;
 
margin-right: 0 !important;
Line 99: Line 176:
 
height: 15px;
 
height: 15px;
 
}
 
}
 +
 +
 +
 +
 +
@media screen and (max-width: 710px){
 +
.df2promoter {
 +
    left: 0%;
 +
    top: -9%;
 +
}
 +
 +
.df3promoter {
 +
    right: 0%;
 +
    top: -9%;
 +
}
 +
 +
.df5promoter {
 +
    left: 0%;
 +
    bottom: -7%;
 +
    width: 59%;
 +
}
 +
 +
.df4promoter {
 +
    right: 0%;
 +
    bottom: -6%;
 +
    width: 35%;
 +
}
 +
 +
.design2contain{
 +
margin-top: 15%;
 +
 +
}
 +
}
 +
 +
 +
@media screen and (max-width: 650px){
 +
.df2promoter {
 +
    left: 0%;
 +
    top: -25%;
 +
}
 +
 +
.df3promoter {
 +
    right: 0%;
 +
    top: -25%;
 +
}
 +
 +
.df5promoter {
 +
    left: 0%;
 +
    bottom: -17%;
 +
    width: 59%;
 +
}
 +
 +
.df4promoter {
 +
    right: 0%;
 +
    bottom: -16%;
 +
    width: 35%;
 +
}
 +
 +
.design2contain{
 +
margin-top: 25%;
 +
 +
}
 +
}
 +
 +
 +
@media screen and (max-width: 570px){
 +
.df2{   
 +
font-size:70%;
 +
}
 +
}
 +
 +
@media screen and (max-width: 510px){
 +
#designlinesfig1{
 +
visibility: hidden;
 +
}
 +
 +
.df1promoter {
 +
    position: absolute;
 +
    left: 30%;
 +
    top: 38%;
 +
    width: 40%;
 +
    z-index: 1;
 +
}
 +
}
 +
 +
@media screen and (max-width: 465px){
 +
.df1computer {
 +
    width: 100%;
 +
}
 +
 +
.df1promoter {
 +
      position: relative;
 +
    z-index: 1;
 +
    width: 60%;
 +
    margin: auto;
 +
    left: 20%;
 +
    top: 0%;
 +
}
 +
 +
#designlinesfig1{
 +
display: none;
 +
}
 +
.df2 {
 +
    position: relative;
 +
   
 +
    margin: 10px;
 +
}
 +
 +
.df2promoter {
 +
    width: 100%;
 +
}
 +
 +
.df3promoter {
 +
    width: 100%;
 +
}
 +
 +
.df5promoter {
 +
    width: 100%;
 +
}
 +
 +
.df4promoter {
 +
    width: 100%;
 +
}
 +
 +
.design2contain{
 +
margin-top: 10%;
 +
 +
}
 +
 +
}
 +
 +
 +
 +
 
</style>
 
</style>
 
</html>
 
</html>

Latest revision as of 10:38, 20 October 2019