Difference between revisions of "Team:TP-CC San Diego/Templates/MainCSS"

 
(218 intermediate revisions by 5 users not shown)
Line 2: Line 2:
 
<head>
 
<head>
  
−
<link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
+
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
−
<link href="https://fonts.googleapis.com/css?family=Baloo+Bhaijaan" rel="stylesheet">
+
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
−
<link href="https://fonts.googleapis.com/css?family=Arvo" rel="stylesheet">
+
 
−
<link href="https://fonts.googleapis.com/css?family=Lilita+One" rel="stylesheet">
+
<link href="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.css" rel="stylesheet">
 +
<script src="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.js"></script>
 +
<script>
 +
    AOS.init();
 +
</script>
  
 
<style>
 
<style>
 +
  #home_logo, #sideMenu, #top_title, .patrollink  {display:none;}
 +
  #content{margin-left:0px; width:100%; height=100%; padding:0px;  margin-top:-7px; background-color:#BCD2EE;}
  
 +
html {
 +
    height: 100%;
 +
}
  
−
div.main-content
+
body {
 +
    background-color:#BCD2EE;
 +
}
 +
 
 +
.main-title {
 +
  color:#333333;
 +
  border:4px solid white;
 +
  padding:40px 80px 40px 80px;
 +
  margin-left:auto;
 +
  margin-right:auto;
 +
  text-align:center;
 +
  display:block;
 +
  width:500px;
 +
  font-size: 40px;
 +
  margin-top:30px;
 +
  font-family: 'Montserrat', sans-serif;
 +
}
 +
 
 +
.text-wrapper
 
{
 
{
−
+
    background: white;
 +
    margin: 80px 0px 0px 0px;
 +
    padding: 2% 2% 2% 2%;
 +
    width: 80%;
 +
    height: 100%;
 +
    margin: auto;
 +
 
}
 
}
  
−
div.text-content
+
.subtitle
 
{
 
{
−
   font-family: 'Arvo', serif;
+
  width: 300px;
−
   color: white;
+
  margin-left:auto;
−
   font-size: 30px;
+
  margin-right:auto;
 +
  margin-top:30px;
 +
  font-size: 20px;
 +
   font-family: 'Poppins', sans-serif;
 +
   color: black;
 +
   text-align: center;
 +
  border-width: 3px;
 +
  border-color: black;
 +
  border-style: solid;
 +
  padding: 1%;
 
}
 
}
  
  
−
h2.main-title
+
 
 +
.fade-in{
 +
  animation: opac 2s
 +
}
 +
@keyframes opac{
 +
from{opacity:0}
 +
to{opacity:1}}
 +
 
 +
.day
 
{
 
{
−
     font-family: 'Lilita One', cursive;
+
     color: black;
−
     font-size: 50px;
+
    border:4px solid black;
−
     text-align: center;
+
    padding: 20px 10% 20px 10%;
−
     line-height: 45px;
+
    margin-left:auto;
−
     color: #25274A;
+
     margin-right:auto;
−
     -webkit-text-stroke-width: .3px;
+
     text-align:center;
−
     -webkit-text-stroke-color: white;
+
     width: 700px;
 +
     display:block;
 +
     font-size: 30px;
 +
     margin-top:30px;
 
}
 
}
  
−
h3.sub-title
+
.img-row
 
{
 
{
−
    font-family: 'Baloo Bhaijaan', cursive;
+
        min-height: 200px;
−
    font-size: 40px;
+
        overflow: hidden;
−
    text-align: center;
+
        width: 85%;
−
    line-height: 45px;
+
        float: center;
−
    color: white;
+
background-color: none;
−
    -webkit-text-stroke-width: .1px;
+
        padding-top: 1%;
−
    -webkit-text-stroke-color: black;
+
        padding-right: 3%;
 +
        padding-left: 3%;
 +
        margin-bottom: 0%;
 +
        margin-left:auto;
 +
        margin-right:auto;
 +
      data-aos: fade-up;
 
}
 
}
−
  #home_logo, #sideMenu { display:none; }
 
−
  #sideMenu, #top_title, .patrollink  {display:none;}
 
−
  #navbar-fill { width:100%; padding:0px;  margin-top:-7px; background-color: #25274A;}
 
−
  #content { margin-left:0px;width:100%; padding:0px;  margin-top:-7px; background-color: #63c1cf;} /*#ABD0BE*/
 
−
 
 
−
  body{background-color: #63c1cf;}
 
  
−
div.main-content
+
img.cardright
 
{
 
{
−
    margin-top: 20px;
+
        position: relative;
−
    width: 90%;
+
        left: 0%;
−
    margin: auto;
+
        width: 38%;
−
    position: relative;
+
        max-width: 700px;
 +
        padding: 4%;
 +
 
 
}
 
}
  
−
div.text-content:
+
p
 
{
 
{
−
  text-align: center;
+
    margin: 0;
−
  width: 90%;
+
    padding: 0;
−
  margin: auto;
+
−
  color: white;
+
−
  font-size: 30px;
+
 
}
 
}
  
 +
img.cardleft
 +
{
 +
        position: relative;
 +
        right: 0%;
 +
        width: 38%;
 +
        max-width: 700px;
 +
        padding: 4%;
 +
 +
}
 +
 +
.cardleft
 +
{
 +
width:50%;
 +
height: auto;
 +
float: left;
 +
text-align: left;
 +
background-color: none;
 +
        padding: 4% 0% 4% 4%;
 +
        position: static;
 +
        overflow: auto;
 +
        color: black;
 +
        font-family: Montserrat;
 +
        data-aos: fade-left;
 +
        font-size:16px;
 +
 +
}
 +
 +
.cardright
 +
{
 +
width: 50%;
 +
height: auto;
 +
padding: 10px;
 +
float: right;
 +
text-align: right;
 +
background-color: none;
 +
        padding: 4% 4% 4% 0%;
 +
        position: static;
 +
        overflow: auto;
 +
        color: black;
 +
        font-family: Montserrat;
 +
        data-aos: fade-right;
 +
 +
}
 
</style>
 
</style>
 
</head>
 
</head>
 
</html>
 
</html>

Latest revision as of 23:15, 29 October 2017