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

 
(14 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
<html>
 
<html>
 
<style>
 
<style>
 +
 +
 +
.computerdiv{
 +
width:100%;
 +
margin-left:auto;
 +
margin-right:auto;
 +
text-align:center;
 +
}
 +
 +
 +
.df1computer{
 +
width:30%;
 +
}
  
 
.design1contain{
 
.design1contain{
Line 10: Line 23:
 
   position:relative;
 
   position:relative;
 
   margin:3%;
 
   margin:3%;
−
   width:80%;
+
   width:100%;
 
     margin-right:auto;
 
     margin-right:auto;
 
   margin-left:auto;
 
   margin-left:auto;
 +
max-width:700px;
 
}
 
}
  
 
.df1promoter{
 
.df1promoter{
−
  position:absolute;
+
position: absolute;
−
  left:40%;
+
    left: 35%;
−
top:40%;
+
    top: 40%;
−
  width:20%;
+
    width: 30%;
 +
    z-index: 1;
 
}
 
}
  
Line 28: Line 43:
  
 
.df2{
 
.df2{
−
  position: absolute;
+
      position: absolute;
−
      width: 47%;
+
    width: 47%;
−
     background-color: #eee;
+
     background-color: #2a577d;
−
  max-width:300px;
+
    max-width: 500px;
 +
    padding: 15px;
 +
    color: #fff;
 +
    border-radius: 25px;
 +
font-size:80%;
 
}
 
}
  
 
.df2promoter{
 
.df2promoter{
 
     left: 0%;
 
     left: 0%;
−
     top: -20%;
+
     top: -3%;
 
}
 
}
  
 
.df3promoter{
 
.df3promoter{
 
     right: 0%;
 
     right: 0%;
−
     top: -20%;
+
     top: 0%;
 
}
 
}
  
 
.df4promoter{
 
.df4promoter{
−
     left: 0%;
+
     right: 0%;
−
     bottom: -20%;
+
     bottom: 0%;
 +
width:35%;
 
}
 
}
  
 
.df5promoter{
 
.df5promoter{
−
     right: 0%;
+
     left: 0%;
−
     bottom: -20%;
+
     bottom: 0%;
 +
width:59%;
 
}
 
}
  
Line 155: 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