Difference between revisions of "Template:Marburg/CSS"

m
Line 1: Line 1:
−
<style>
+
@font-face {
−
@font-face{font-family:Poppins-Regular;src:url(../fonts/Poppins/Poppins-Regular.ttf)}@font-face{font-family:Poppins-Bold;src:url(../fonts/Poppins/Poppins-Bold.ttf)}@font-face{font-family:Lato-Regular;src:url(../fonts/Lato/Lato-Regular.ttf)}@font-face{font-family:Lato-Bold;src:url(../fonts/Lato/Lato-Bold.ttf)}.contact100-form{width:100%}.s1-txt1{font-family:Poppins-Regular;font-size:16px;line-height:1.5;color:#555}.s1-txt2{font-family:Poppins-Regular;font-size:15px;line-height:1.5;color:#555}.s2-txt2{font-family:Lato-Bold;font-size:15px;line-height:1.5;color:#fff}.s2-txt3{font-family:Lato-Regular;font-size:14px;line-height:1.5;color:#999}.m1-txt3{font-family:Poppins-Bold;font-size:30px;line-height:1.5;color:#555}.m1-txt4{font-family:Poppins-Regular;font-size:22px;line-height:1.5;color:#555}.size1{width:100%;min-height:100vh}.size2{height:100%;width:67%}.size2_5{height:100%;width:40%}.size3{max-width:650px;min-height:100vh}.size4{width:100%;height:50px}.size5{width:36px;height:36px}.wsize2{max-width:380px}.bg0{background-color:#fff}.bg1{background-color:#57b846}.bg3{background-color:#3b5998}.bg4{background-color:#1da1f2}.bg5{background-color:#cd201f}.bg6{background-color:#4285F4}.bg-img1{background-position:center;background-repeat:no-repeat;background-size:cover}.bg-img2{background-position:center;background-repeat:no-repeat;background-size:100% auto}.bor1{border-radius:5px}.where1-parent{position:relative;z-index:1}.where1{position:absolute;z-index:-1;top:0;right:0}.where2{padding:50px 50px 150px 320px}.how1{border-radius:50%;font-size:22px;color:#fff}.how1:hover{background-color:#555;color:#fff}.overlay1{overflow:hidden}.overlay1::before{content:"";display:block;position:absolute;z-index:-3;width:100%;height:100%;top:0;left:0;background-color:rgba(0,0,0,0.8)}.overlay1::after{content:"";display:block;position:absolute;z-index:-2;top:0;right:100%;width:10000px;height:100%;background-color:#fff;transform-origin:bottom right;-webkit-transform:skewX(156deg);-moz-transform:skewX(156deg);-ms-transform:skewX(156deg);-o-transform:skewX(156deg);transform:skewX(156deg)}.wrap-pic1{width:50%}.wrap-pic1 img{max-width:100%}.hov1:hover{background-color:#555}@media (max-width: 1600px){.respon1{max-width:38%}}@media (max-width: 1200px){.respon1{padding-left:30px;padding-right:30px}}@media (max-width: 992px){.respon1{max-width:650px;min-height:unset;padding-top:0;margin-left:auto;margin-right:auto}.respon2{position:relative;width:100%;padding-left:15px;padding-right:15px}.respon2::after{top:100%;right:0;width:100%;height:10000px;transform-origin:top right;-webkit-transform:skew(180deg,8deg);-moz-transform:skew(180deg,8deg);-ms-transform:skew(180deg,8deg);-o-transform:skew(180deg,8deg);transform:skew(180deg,8deg)}}*,:before,:after{margin:0;padding:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}body,html{font-family:Arial,sans-serif;font-size:15px;color:#666;height:100%;background-color:#fff;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}a:focus{outline:none}a:hover{text-decoration:none!important}a{text-decoration:none}p{margin:0}input{display:block;outline:none;border:none}button{outline:none;border:none;background:transparent;cursor:pointer}button:focus{outline:none}.p-t-18{padding-top:18px}.p-t-45{padding-top:45px}.p-t-50{padding-top:50px}.p-b-36{padding-bottom:36px}.p-b-45{padding-bottom:45px}.p-b-60{padding-bottom:60px}.p-l-75{padding-left:75px}.p-r-75{padding-right:75px}.m-r-5{margin-right:5px}.w-full{width:100%}.trans-04{-webkit-transition:all .4s;-o-transition:all .4s;-moz-transition:all .4s;transition:all .4s}.flex-w,.flex-c-m,.flex-col-sa{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex}.flex-w{-webkit-flex-wrap:wrap;-moz-flex-wrap:wrap;-ms-flex-wrap:wrap;-o-flex-wrap:wrap;flex-wrap:wrap}.flex-c-m{justify-content:center;-ms-align-items:center;align-items:center}.flex-col-sa{justify-content:space-around;-webkit-flex-direction:column;-moz-flex-direction:column;-ms-flex-direction:column;-o-flex-direction:column;flex-direction:column}
+
font-family: Poppins-Regular;
−
</style>
+
src: url('../fonts/Poppins/Poppins-Regular.ttf');
 +
}
 +
 
 +
@font-face {
 +
font-family: Poppins-Bold;
 +
src: url('../fonts/Poppins/Poppins-Bold.ttf');
 +
}
 +
 
 +
@font-face {
 +
font-family: Lato-Regular;
 +
src: url('../fonts/Lato/Lato-Regular.ttf');
 +
}
 +
 
 +
@font-face {
 +
font-family: Lato-Bold;
 +
src: url('../fonts/Lato/Lato-Bold.ttf');
 +
}
 +
 
 +
.contact100-form {
 +
width: 100%;
 +
}
 +
 
 +
.s1-txt1 {
 +
font-family: Poppins-Regular;
 +
font-size: 16px;
 +
line-height: 1.5;
 +
color: #555555;
 +
}
 +
 
 +
.s1-txt2 {
 +
font-family: Poppins-Regular;
 +
font-size: 15px;
 +
line-height: 1.5;
 +
color: #555555;
 +
}
 +
 
 +
.s2-txt2 {
 +
font-family: Lato-Bold;
 +
font-size: 15px;
 +
line-height: 1.5;
 +
color: #fff;
 +
}
 +
 
 +
.s2-txt3 {
 +
font-family: Lato-Regular;
 +
font-size: 14px;
 +
line-height: 1.5;
 +
color: #999999;
 +
}
 +
 
 +
.m1-txt3 {
 +
font-family: Poppins-Bold;
 +
font-size: 30px;
 +
line-height: 1.5;
 +
color: #555555;
 +
}
 +
 
 +
.m1-txt4 {
 +
font-family: Poppins-Regular;
 +
font-size: 22px;
 +
line-height: 1.5;
 +
color: #555555;
 +
}
 +
 
 +
.size1 {
 +
width: 100%;
 +
min-height: 100vh;
 +
}
 +
 
 +
.size2 {
 +
height: 100%;
 +
width: 67%;
 +
}
 +
 
 +
.size2_5 {
 +
height: 100%;
 +
width: 40%;
 +
}
 +
 
 +
.size3 {
 +
max-width: 650px;
 +
min-height: 100vh;
 +
}
 +
 
 +
.size4 {
 +
width: 100%;
 +
height: 50px;
 +
}
 +
 
 +
.size5 {
 +
width: 36px;
 +
height: 36px;
 +
}
 +
 
 +
.wsize2 {
 +
max-width: 380px;
 +
}
 +
 
 +
.bg0 {background-color: #fff;}
 +
.bg1 {background-color: #57b846;}
 +
.bg3 {background-color: #3b5998;}
 +
.bg4 {background-color: #1da1f2;}
 +
.bg5 {background-color: #cd201f;}
 +
.bg6 {background-color: #4285F4;}
 +
 
 +
.bg-img1 {
 +
background-position: center;
 +
background-repeat: no-repeat;
 +
background-size: cover;
 +
}
 +
 
 +
.bg-img2 {
 +
background-position: center;
 +
background-repeat: no-repeat;
 +
background-size: 100% auto;
 +
}
 +
 
 +
.bor1 {
 +
border-radius: 5px;
 +
}
 +
 
 +
 
 +
.where1-parent {
 +
position: relative;
 +
z-index: 1;
 +
}
 +
 
 +
.where1 {
 +
position: absolute;
 +
z-index: -1;
 +
top: 0;
 +
right: 0;
 +
}
 +
 
 +
.where2 {
 +
padding: 50px 50px 150px 320px;
 +
}
 +
 
 +
.how1 {
 +
border-radius: 50%;
 +
font-size: 22px;
 +
color: #fff;
 +
}
 +
.how1: hover {
 +
background-color: #555555;
 +
color: #fff;
 +
}
 +
 
 +
.overlay1 {
 +
overflow: hidden;
 +
}
 +
 
 +
.overlay1: : before {
 +
content: "";
 +
display: block;
 +
position: absolute;
 +
z-index: -3;
 +
width: 100%;
 +
height: 100%;
 +
top: 0;
 +
left: 0;
 +
background-color: rgba(0,0,0,0.8);
 +
}
 +
 
 +
.overlay1: : after {
 +
content: "";
 +
display: block;
 +
position: absolute;
 +
z-index: -2;
 +
top: 0;
 +
right: 100%;
 +
width: 10000px;
 +
height: 100%;
 +
background-color: #fff;
 +
transform-origin: bottom right;
 +
-webkit-transform: skewX(156deg);
 +
-moz-transform: skewX(156deg);
 +
-ms-transform: skewX(156deg);
 +
-o-transform: skewX(156deg);
 +
transform: skewX(156deg);
 +
}
 +
 
 +
 
 +
.wrap-pic1 {
 +
width: 50%;
 +
}
 +
.wrap-pic1 img {
 +
max-width: 100%;
 +
}
 +
 
 +
.hov1: hover {
 +
background-color: #555555;
 +
}
 +
 
 +
@media (max-width: 1600px) {
 +
.respon1 {
 +
max-width: 38%;
 +
}
 +
}
 +
 
 +
@media (max-width: 1200px) {
 +
 
 +
 
 +
.respon1 {
 +
padding-left: 30px;
 +
padding-right: 30px;
 +
}
 +
}
 +
 
 +
@media (max-width: 992px) {
 +
 
 +
 
 +
.respon1 {
 +
max-width: 650px;
 +
min-height: unset;
 +
padding-top: 0;
 +
margin-left: auto;
 +
margin-right: auto;
 +
}
 +
 
 +
 
 +
 
 +
.respon2 {
 +
position: relative;
 +
width: 100%;
 +
padding-left: 15px;
 +
padding-right: 15px;
 +
}
 +
 
 +
.respon2: : after {
 +
top: 100%;
 +
right: 0;
 +
width: 100%;
 +
height: 10000px;
 +
transform-origin: top right;
 +
-webkit-transform: skew(180deg, 8deg);
 +
-moz-transform: skew(180deg, 8deg);
 +
-ms-transform: skew(180deg, 8deg);
 +
-o-transform: skew(180deg, 8deg);
 +
transform: skew(180deg, 8deg);
 +
}
 +
 
 +
}
 +
 
 +
@media (max-width: 768px) {
 +
 
 +
}
 +
 
 +
@media (max-width: 576px) {
 +
 
 +
}
 +
 
 +
@media (max-width: 480px) {
 +
 
 +
}

Revision as of 20:05, 25 June 2019

@font-face { 

font-family: Poppins-Regular;
src: url('../fonts/Poppins/Poppins-Regular.ttf');

}

@font-face { 

font-family: Poppins-Bold;
src: url('../fonts/Poppins/Poppins-Bold.ttf');

}

@font-face { 

font-family: Lato-Regular;
src: url('../fonts/Lato/Lato-Regular.ttf');

}

@font-face { 

font-family: Lato-Bold;
src: url('../fonts/Lato/Lato-Bold.ttf');

}

.contact100-form { 

width: 100%;

}

.s1-txt1 { 

font-family: Poppins-Regular;
font-size: 16px;
line-height: 1.5;
color: #555555;

}

.s1-txt2 { 

font-family: Poppins-Regular;
font-size: 15px;
line-height: 1.5;
color: #555555;

}

.s2-txt2 { 

font-family: Lato-Bold;
font-size: 15px;
line-height: 1.5;
color: #fff;

}

.s2-txt3 { 

font-family: Lato-Regular;
font-size: 14px;
line-height: 1.5;
color: #999999;

}

.m1-txt3 { 

font-family: Poppins-Bold;
font-size: 30px;
line-height: 1.5;
color: #555555;

}

.m1-txt4 { 

font-family: Poppins-Regular;
font-size: 22px;
line-height: 1.5;
color: #555555;

}

.size1 { 

width: 100%;
min-height: 100vh;

}

.size2 { 

height: 100%;
width: 67%;

}

.size2_5 { 

height: 100%;
width: 40%;

}

.size3 { 

max-width: 650px;
min-height: 100vh;

}

.size4 { 

width: 100%;
height: 50px;

}

.size5 { 

width: 36px;
height: 36px;

}

.wsize2 { 

max-width: 380px;

}

.bg0 {background-color: #fff;} .bg1 {background-color: #57b846;} .bg3 {background-color: #3b5998;} .bg4 {background-color: #1da1f2;} .bg5 {background-color: #cd201f;} .bg6 {background-color: #4285F4;}

.bg-img1 { 

background-position: center;
background-repeat: no-repeat;
background-size: cover;

}

.bg-img2 { 

background-position: center;
background-repeat: no-repeat;
background-size: 100% auto;

}

.bor1 { 

border-radius: 5px;

}


.where1-parent { 

position: relative;
z-index: 1;

}

.where1 { 

position: absolute;
z-index: -1;
top: 0;
right: 0;

}

.where2 { 

padding: 50px 50px 150px 320px;

}

.how1 { 

border-radius: 50%;
font-size: 22px;
color: #fff;

} .how1: hover { 

background-color: #555555;
color: #fff;

}

.overlay1 { 

overflow: hidden;

}

.overlay1: : before { 

content: "";
display: block;
position: absolute;
z-index: -3;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: rgba(0,0,0,0.8);

}

.overlay1: : after { 

content: "";
display: block;
position: absolute;
z-index: -2;
top: 0;
right: 100%;
width: 10000px;
height: 100%;
background-color: #fff;
transform-origin: bottom right;
-webkit-transform: skewX(156deg);
-moz-transform: skewX(156deg);
-ms-transform: skewX(156deg);
-o-transform: skewX(156deg);
transform: skewX(156deg);

}


.wrap-pic1 { 

width: 50%;

} .wrap-pic1 img { 

max-width: 100%;

}

.hov1: hover { 

background-color: #555555;

}

@media (max-width: 1600px) { 

.respon1 {
max-width: 38%;
}

}

@media (max-width: 1200px) { 


.respon1 {
padding-left: 30px;
padding-right: 30px;
}

}

@media (max-width: 992px) { 


.respon1 {
max-width: 650px;
min-height: unset;
padding-top: 0;
margin-left: auto;
margin-right: auto;
}



.respon2 {
position: relative;
width: 100%;
padding-left: 15px;
padding-right: 15px;
}

.respon2: : after {
top: 100%;
right: 0;
width: 100%;
height: 10000px;
transform-origin: top right;
-webkit-transform: skew(180deg, 8deg);
-moz-transform: skew(180deg, 8deg);
-ms-transform: skew(180deg, 8deg);
-o-transform: skew(180deg, 8deg);
transform: skew(180deg, 8deg);
}

}

@media (max-width: 768px) {

}

@media (max-width: 576px) {

}

@media (max-width: 480px) {

}