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

(Created page with "<html> <style> </style> </html>")
 
Line 1: Line 1:
 +
<head>
 +
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto+Slab:300,400,500,700">
 +
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
 +
</head>
 
<html>
 
<html>
  
Line 5: Line 9:
  
  
 +
* {
 +
margin: 0;
 +
padding: 0;
 +
box-sizing: border-box;
 +
 
 +
}
  
 +
body {
 +
font-family: 'Roboto Slab', serif;
 +
font-size: 14px;
 +
line-height: 1.67;
 +
color: #1d79bf;
 +
padding: 60px 0;
 +
background-color: #eee;
 +
}
 +
 +
 +
 +
section.header_con{
 +
  background: linear-gradient(to right, rgba(9, 49, 79, .94), rgba(9, 49, 79, 1)), url('https://static.igem.org/mediawiki/2019/1/1f/T--DTU-Denmark--vectorim.png');
 +
 +
  padding-bottom: 150px;
 +
  padding-top: 50px;
 +
  z-index: -1;
 +
  background-repeat: no-repeat;
 +
  background-position: center center;
 +
background-size:cover;
 +
}
 +
 +
section.grey_con{
 +
  background: #eee;
 +
  padding-bottom: 150px;
 +
  padding-top: 50px;
 +
  color: rgba(9, 49, 79, .95);
 +
}
 +
 +
a {
 +
color: #fff;
 +
}
 +
 +
a:hover {
 +
text-decoration: none;
 +
}
 +
 +
/*  Team Starts */
 +
.team-members {
 +
transform: rotate(-45deg);
 +
}
 +
.team-members li > div {
 +
float: left;
 +
width: 20%;
 +
  list-style-type: none;
 +
}
 +
 +
li.clearfix{
 +
  list-style-type: none;
 +
}
 +
 +
.team-members li:nth-child(2) > div:first-child {
 +
margin-left: 20%;
 +
  list-style-type: none;
 +
}
 +
 +
.team-members li:last-child > div:first-child {
 +
margin-left: 40%;
 +
}
 +
 +
.member-details > div {
 +
background-color: #ddd;
 +
margin: 5px;
 +
border-radius: 10px;
 +
}
 +
.member-details img {
 +
transform: rotate(45deg) translate(0, 15px) scale(1.2);
 +
display: block;
 +
width: 100%;
 +
height: 100%;
 +
 +
}
 +
 +
/* hover content - style */
 +
.member-details > div {
 +
position: relative;
 +
overflow: hidden;
 +
}
 +
 +
.member-info {
 +
position: absolute;
 +
top: 50%;
 +
transform: rotate(45deg) translate(-12px, 15px);
 +
left: 0;
 +
right: 0;
 +
z-index: 2;
 +
text-align: center;
 +
}
 +
 +
.member-info h3,
 +
.member-info p {
 +
margin: 0;
 +
color: #fff;
 +
position: relative;
 +
opacity: 0;
 +
visibility: hidden;
 +
}
 +
 +
.member-info h3 {
 +
text-transform: uppercase;
 +
font-size: 14px;
 +
font-weight: 400;
 +
top: -100px;
 +
}
 +
 +
.member-info p {
 +
font-weight: 300;
 +
font-size: 12px;
 +
bottom: -150px;
 +
}
 +
 +
.member-details > div:after {
 +
content: '';
 +
background-image: linear-gradient(45deg, rgba(29, 121, 191, .8) 50%, transparent 50%);
 +
position: absolute;
 +
top: 0;
 +
bottom: 0;
 +
left: 0;
 +
right: 0;
 +
z-index: 1;
 +
opacity: 0;
 +
visibility: hidden;
 +
}
 +
 +
/* hover content - onhover */
 +
.member-details *,
 +
.member-details > div:after {
 +
cursor: pointer;
 +
transition: all .4s ease;
 +
}
 +
 +
.member-details:hover *,
 +
.member-details:hover > div:after {
 +
opacity: 1;
 +
visibility: visible;
 +
}
 +
 +
.member-details:hover .member-info h3 {
 +
top: 0;
 +
}
 +
 +
.member-details:hover .member-info p {
 +
bottom: 0;
 +
}
 +
 +
/* Team overview */
 +
.team-overview {
 +
padding-right: 15px;
 +
  width:80%;
 +
    color:#f7eda8;
 +
}
 +
.team-overview h2 {
 +
text-transform: uppercase;
 +
font-size: 22px;
 +
font-weight: 700;
 +
margin-bottom: 5px;
 +
}
 +
 +
.team-overview > a {
 +
margin-bottom: 30px;
 +
display: block;
 +
}
 +
 +
.team-overview > a:before {
 +
content: '';
 +
width: 10px;
 +
height: 2px;
 +
position: relative;
 +
top: -3px;
 +
margin-right: 5px;
 +
background-color: #ccc;
 +
display: inline-block;
 +
}
 +
 +
#outside {
 +
  position: absolute;
 +
  background-color: #f7eda8;
 +
  width: 100%;
 +
  height: 200px;
 +
  top: 50%;
 +
  left: 5%;
 +
  border-radius: 10px;
 +
}
 +
 +
#inside {
 +
  position: absolute;
 +
 +
  width: 100px;
 +
 +
  top: -15%;
 +
  left: -15%;
 +
  border-radius: 10px;
 +
}
 +
 +
/* For centering elements - optional - Can use table,tablecell instead */
 +
.flex-center {
 +
display: flex;
 +
flex-direction: row;
 +
justify-content: center;
 +
align-items: center;
 +
}
 +
 +
.flex-center > div:first-child {
 +
order: 2;
 +
}
 +
 +
/* RESPONSIVE */
 +
@media only screen and (max-width : 992px) {
 +
.sm-no-flex {
 +
display: block;
 +
}
 +
.sm-no-float {
 +
float: none !important;
 +
}
 +
.sm-text-center {
 +
text-align: center;
 +
}
 +
}
 +
 +
@media only screen and (max-width : 550px) {
 +
.team-members li {
 +
text-align: center;
 +
}
 +
.team-members li > div {
 +
float: none;
 +
display: inline-block;
 +
width: 30%;
 +
margin: 0 !important;
 +
}
 +
.team-members {
 +
transform: rotate(0);
 +
}
 +
.member-details img {
 +
transform: rotate(0) translate(0, 0);
 +
}
 +
.team-overview {
 +
padding: 15px;
 +
}
 +
 +
}
 +
 +
@media only screen and (max-width : 399px) {
 +
.team-members li > div {
 +
width: 47%;
 +
}
 +
}
 +
 +
img.imageshadow{
 +
  border-radius: 10px;
 +
}
 +
 +
.interlabspace {
 +
margin-bottom: 65px;
 +
}
 +
 +
.textwrap{
 +
  margin-bottom: 155px;
 +
}
 +
 +
section.darkblue_con{
 +
  background: rgba(9, 49, 79, 1);
 +
  padding-bottom: 50px;
 +
  padding-top: 50px;
 +
  color: #eee;
 +
}
  
  

Revision as of 23:02, 22 July 2019

<head> <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto+Slab:300,400,500,700"> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> </head>