Difference between revisions of "Team:Warwick/CSS"

Revision as of 22:13, 5 July 2018 (view source) KurtHill (Talk | contribs) m ← Older edit		Revision as of 23:02, 5 July 2018 (view source) KurtHill (Talk | contribs) Newer edit →
Line 65:		Line 65:
	#mainbody{		#mainbody{
	margin: 5px 20% 70px 20%;		margin: 5px 20% 70px 20%;
−	width: 60%;	+	width: 100%;
	padding-top: 50px;		padding-top: 50px;
	display: inline-block;		display: inline-block;

---

Revision as of 23:02, 5 July 2018

body{

 background-image: url("../images/DNABackground.svg");
 background-repeat: repeat-y;
 background-size: 100%;

}

/* @import url('https://fonts.googleapis.com/css?family=Raleway');*/

• {

 margin: 0;
 padding: 0;
 font-family: "Century Gothic";

}

1. body_div{

 position: relative;
 padding-bottom: 70px;
 top: 0;

}

1. header{

 background-color: #00c080;
 height: 50px;
 width: 100%;
 position: fixed;
 background-image: url(../images/TransparentBanner.png);
 z-index: 50;
 box-shadow: inset 0px -2px 5px darkgreen;

}

1. header_content li{

 display: inline-block;
 list-style: none;

}

1. header input[type=submit]{

 background-color: transparent;
 color: white;
 padding: 0px 8px;
 margin-top: -3px;
 border: 3px solid transparent;
 border-radius: 4px;
 font-size: 120%;
 cursor: pointer;

}

1. header input[type=submit]:hover{

 background: #00A080;

}

1. header_content{

 float: right;
 padding-right: 3%;
 padding-top: 14px;

}

1. logo{

 width: 70%;
 margin-left: auto;
 margin-right: auto;
 display: block;
 padding-bottom: 5%;
 margin-top: 20px;

}

1. mainbody{

 margin: 5px 20% 70px 20%;
 width: 100%;
 padding-top: 50px;
 display: inline-block;
 box-shadow: 0px 0px 40px black inset;
 border-bottom-left-radius: 25px;
 border-bottom-right-radius: 25px;
 background: linear-gradient(to right, #ccc, #eee, #ccc);
 padding-bottom: 3%;

}

1. mainbody span{

 color: #ED483A;

}

1. footer{

 margin-left: 20%;
 margin-right: 20%;
 background-image: url("../images/TransparentBanner.png");
 background-color: #ccc;
 border-top-left-radius: 16px;
 border-top-right-radius: 16px;
 width: 60%;  
 position: absolute;
 bottom: 0;  
 box-shadow: 0px 0px 10px black inset;
 height: 70px;

}

1. footer img{

 width: 60%;
 height: 60%;
 margin: 20%;

}

1. footer div{

 width: 50px;
 height: 50px;
 margin-top: 10px;
 margin-bottom: 10px;
 background-color: transparent;
 display: inline-block;

}

1. youtubeLogo{

 margin-left: 3%;
 margin-right: 1%;

}

1. youtubeLogo:hover{

 background: #bbb;

}

1. twitterLogo:hover{

 background: #1DA1F2

}

1. MainTitle{

 margin: 3% 20% 0% 20%;
 text-align: center;
 width: 60%;
 font-size: 300%;
 border-bottom: 3px solid #00c080;

}

1. theTeam{

 margin: 0 auto;
 table-layout: fixed;
 width: 80%;

}

1. theTeam td{

 padding: 3% 5%;

}

1. profilePic{

 display: block;
 float: left;
 width: 125px;
 height: 125px;
 border-radius: 50%;
 box-shadow: 0px 0px 20px 0px black;

}

1. profileDetails{

 margin-left: 10px;
 margin-top: -12px;
 display: block;
 float: left;

}

1. profileDetails span{

 color: grey;

}

.button{

 display: inline-block;
 border-radius: 20px;
 background-color: white;
 border: none;
 color: #222;
 text-align: center;
 font-size: 18px;
 padding: 20px;
 width: 200px;
 transition: all 0.5s;
 cursor: pointer;
 margin: 5px;

}

.button span {

 cursor: pointer;
 display: inline-block;
 position: relative;
 transition: 0.5s;

}

.button span:after {

 content: '\00bb';
 position: absolute;
 opacity: 0;
 top: 0;
 right: -20px;
 transition: 0.5s;

}

.button:hover span {

 padding-right: 25px;

}

.button:hover span:after {

 opacity: 1;
 right: 0;

}

.aca-links{

 color: white;

}

.aca-links:hover{

 color: #22a0d3;

}

.aca-links:visited{

 color: #ED483A;

}

1. iframeContainer{

 position: relative;
 width: 100%;
 height: 0;
 padding-bottom: 56.25%;

}

1. video{

 position: absolute;
 top: 0;
 left: 10%;
 width: 80%;
 height: 80%;

}

.slideshow-container {

 max-width: 1000px;
 position: relative;
 margin: auto;

}

• {

   box-sizing:border-box;

}

/* Hide the images by default */ .mySlidesFade {

   display: none;

}

/* Next & previous buttons */ .prev, .next {

 cursor: pointer;
 position: absolute;
 top: 50%;
 width: auto;
 margin-top: -22px;
 padding: 16px;
 color: white;
 font-weight: bold;
 font-size: 18px;
 transition: 0.6s ease;
 border-radius: 0 3px 3px 0;
 background-color: rgba(50,50,50,0.5);

}

/* Position the "next button" to the right */ .next {

 right: 0;
 border-radius: 3px 0 0 3px;

}

/* On hover, add a black background color with a little bit see-through */ .prev:hover, .next:hover {

 background-color: rgba(0,0,0,0.8);

}

/* Caption text */ .text {

 color: #f2f2f2;
 font-size: 15px;
 padding: 8px 12px;
 position: absolute;
 bottom: 4px;
 text-align: center;
 background-color: rgba(50,50,50,0.8);

}

/* Number text (1/3 etc) */ .numbertext {

 color: #f2f2f2;
 background-color: rgba(50,50,50, 0.8);
 font-size: 12px;
 padding: 8px 12px;
 position: absolute;
 top: 0;

}

/* The dots/bullets/indicators */ .dot {

 cursor: pointer;
 height: 15px;
 width: 15px;
 margin: 0 2px;
 background-color: #bbb;
 border-radius: 50%;
 display: inline-block;
 transition: background-color 0.6s ease;

}

.active, .dot:hover {

 background-color: #717171;

}

/* Fading animation */ .fade {

 -webkit-animation-name: fade;
 -webkit-animation-duration: 1.5s;
 animation-name: fade;
 animation-duration: 1.5s;

}

@-webkit-keyframes fade {

 from {opacity: .4} 
 to {opacity: 1}

}

@keyframes fade {

 from {opacity: .4} 
 to {opacity: 1}

}

.text{

 height: 35px;
 transition: 0.4s;

}

.slideshow-container:hover .text{

 transition: 0.4s ease-out;
 background-color: rgba(50,50,50,0.95);

}

.text_inner{

 opacity: 0;
 visibility: hidden;

}

.text_inner h3{

 color: #ED483A;

}

.slideshow-container:hover .text_inner{

 visibility: visible;
 opacity: 1;
 transition: 0.5s opacity 0.4s;

}

.text:hover .arrows{

 display: none;

}

1. text1{

 width: 30%;
 margin: 0% 35%;

}

.slideshow-container:hover #text1{

 height: 450px;
 width: 500px;
 margin: 0px 250px;

}

1. text2{

 width: 20%;
 margin: 0% 40%;

}

.slideshow-container:hover #text2{

 height: 65%;
 width: 500px;
 margin: 0px 250px;

}

1. text3{

 width: 20%;
 margin: 0% 40%;

}

.slideshow-container:hover #text3{

 height: 80%;
 width: 500px;
 margin: 0px 250px;

}

1. text4{

 width: 20%;
 margin: 0% 40%;

}

.slideshow-container:hover #text4{

 height: 65%;
 width: 400px;
 margin: 0px 300px;

}

1. text5{

 width: 20%;
 margin: 0% 40%;

}

.slideshow-container:hover #text5{

 height: 65%;
 width: 500px;
 margin: 0px 250px;

}