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

 
(19 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{
 +
  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;
  
Line 22: Line 95:
 
border-radius:50%;  
 
border-radius:50%;  
 
overflow:hidden;  
 
overflow:hidden;  
 +
margin-bottom: 25px;
 
}
 
}
  
Line 45: Line 119:
 
   color: #FFFFFF;
 
   color: #FFFFFF;
 
   position:absolute;
 
   position:absolute;
−
   font-size: 1.225em;  
+
   font-size: 1.125em;  
 
   font-weight: 700;  
 
   font-weight: 700;  
 
   top: 0;
 
   top: 0;
Line 82: Line 156:
 
}
 
}
  
−
 
+
.one_fourth {
 +
width: 28%;
 +
}
 
.last {
 
.last {
 
margin-right: 0 !important;
 
margin-right: 0 !important;
Line 100: 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