Difference between revisions of "Team:OUC-China/CSS0"

Revision as of 13:06, 2 September 2018 (view source) Jilinggui (Talk | contribs) (Created page with "@charset "utf-8"; →‎Body: body { font-family: source-sans-pro; background-color: #f2f2f2; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; f...")		Revision as of 02:53, 4 September 2018 (view source) Jilinggui (Talk | contribs) Newer edit →
Line 1:		Line 1:
−	@charset "utf-8";	+
	/* Body */		/* Body */
	body {		body {

---

Revision as of 02:53, 4 September 2018

/* Body */ body { font-family: source-sans-pro; background-color: #f2f2f2; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; font-style: normal; font-weight: 200; color: #FFFFFF; } /* Container */ .container { width: 90%; margin-left: auto; margin-right: auto; height: 1000px; background-color: #FFFFFF; } /* Navigation */ header { width: 100%; height: 8.2%; background-color: #52bad5; border-bottom: 1px solid #2C9AB7; } .logo { color: #fff; font-weight: bold; text-align: undefined; width: 10%; float: left; margin-top: 32px; margin-left: 25px; letter-spacing: 4px; } nav { float: right; text-align: right; margin-right: 70px; } header nav ul { list-style: none; float: right; } nav ul li { float: left; color: #FFFFFF; font-size: 14px; text-align: left; margin-right: 25px; letter-spacing: 2px; font-weight: bold; transition: all 0.3s linear; } ul li a { color: #FFFFFF; text-decoration: none; } ul li:hover a { color: #2C9AB7; } .dropbtn {

   background-color: #52bad5;
   color: white;
   padding: 18.5px;
   font-size: 16px;
   border: none;
   cursor: pointer;

}

.dropdown {

   position: relative;
   display: inline-block;

}

.dropdown-content {

   display: none;
   position: absolute;
   background-color: #f9f9f9;
   min-width: 0.1px;
   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

}

.dropdown-content a {

   color: royalblue;
   padding: 12px 16px;
   text-decoration: none;
   display: block;

}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {

   display: block;

}

.dropdown:hover .dropbtn {

   background-color: #8AB8FF;

} .hero_header { color: #FFFFFF; text-align: center; margin-top: 10px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; letter-spacing: 8px; font-size:100px } /* Hero Section */ .hero { background-color: #B3B3B3; background-image:url(../images/3.jpg); padding-top: 150px; padding-bottom: 150px; background-size:1250px 500px } .light { font-weight: bold; color: #717070; } .tagline { text-align: center; color: #FFFFFF; margin-top: 4px; font-weight: lighter; text-transform: uppercase; letter-spacing: 1px; } /* About Section */ .text_column { width: 29%; text-align: justify; font-weight: lighter; line-height: 25px; float: left; padding-left: 20px; padding-right: 20px; color: #A3A3A3; } .about { padding-left: 25px; padding-right: 25px; padding-top: 35px; display: inline-block; background-color: #FFFFFF; margin-top: 0px; } /* Stats Gallery */ .stats { color: #717070; margin-bottom: 3px; } .blockquote { width: 100%; } .gallery { clear: both; display: inline-block; width: 100%; background-color: #FFFFFF; /* [disabled]min-width: 400px;

• /

padding-bottom: 35px; padding-top: 0px; margin-top: -100px; margin-bottom: 0px; } .thumbnail { width: 100%; float: left; margin-top: 35px; } .gallery .thumbnail h4 { margin-top: 5px; margin-right: 5px; margin-bottom: 5px; margin-left: 5px; color: #52BAD5; } .gallery .thumbnail p { margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: #A3A3A3; } /* Parallax Section */ .banner { background-color: #2D9AB7; background-image: url(../images/parallax.png); height: 400px; background-attachment: fixed; background-size: cover; background-repeat: no-repeat; } .parallax { color: #FFFFFF; text-align: right; padding-right: 100px; padding-top: 110px; letter-spacing: 2px; margin-top: 0px; } .parallax_description { color: #FFFFFF; text-align: right; padding-right: 100px; width: 30%; float: right; font-weight: lighter; line-height: 23px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; } /* More info */ footer { background-color: #FFFFFF; padding-bottom: 35px; } .footer_column { width: 50%; text-align: center; padding-top: 30px; float: left; } footer .footer_column h3 { color: #B3B3B3; text-align: center; } footer .footer_column p { color: #717070; background-color: #FFFFFF; } .cards { width: 100%; height: auto; max-width: 400px; max-height: 400px; } footer .footer_column p { padding-left: 30px; padding-right: 30px; text-align: justify; line-height: 25px; font-weight: lighter; margin-left: 20px; margin-right: 20px; } .button { width: 200px; margin-top: 40px; margin-right: auto; margin-bottom: auto; margin-left: auto; padding-top: 20px; padding-right: 10px; padding-bottom: 20px; padding-left: 10px; text-align: center; vertical-align: middle; border-radius: 0px; text-transform: uppercase; font-weight: bold; letter-spacing: 2px; border: 3px solid #FFFFFF; color: #FFFFFF; transition: all 0.3s linear; } .button:hover { background-color: #FEFEFE; color: #C4C4C4; cursor: pointer; } .copyright { text-align: center; padding-top: 20px; padding-bottom: 20px; background-color: #52bad5; color: #FFFFFF; text-transform: uppercase; font-weight: lighter; letter-spacing: 2px; border-top-width: 2px; } .footer_banner { background-color: #B3B3B3; padding-top: 60px; padding-bottom: 60PX; margin-bottom: 0px; background-image: url(../images/pattern.png); background-repeat: repeat; } footer { display: inline-block; } .hidden { display: none; }

/* Mobile */ @media (max-width: 320px) { .logo { width: 100%; text-align: center; margin-top: 13px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; } .container header nav { margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; width: 100%; float: none; display: none; } header nav ul { } nav ul li { margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; width: 100%; text-align: center; } .text_column { width: 100%; text-align: justify; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; } .thumbnail { width: 100%; } .footer_column { width: 100%; margin-top: 0px; } .parallax { text-align: center; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 40%; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; width: 100%; font-size: 18px; } .parallax_description { padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; width: 90%; margin-top: 25px; margin-right: 0px; margin-bottom: 0px; margin-left: 12px; float: none; text-align: center; } .banner { background-color: #2D9AB7; background-image: none; } .tagline { margin-top: 20px; line-height: 22px; } .hero_header { padding-left: 10px; padding-right: 10px; line-height: 22px; text-align: center; } }

/* Small Tablets */ @media (min-width: 321px)and (max-width: 767px) { .logo { width: 100%; text-align: center; margin-top: 13px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: #043745; } .container header nav { margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; width: 100%; float: none; overflow: auto; display: inline-block; background: #52bad5; } header nav ul { padding: 0px; float: none; } nav ul li { margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; width: 100%; text-align: center; padding-top: 8px; padding-bottom: 8px; } .text_column { width: 100%; text-align: left; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; } .thumbnail { width: 100%; } .footer_column { width: 100%; margin-top: 0px; } .parallax { text-align: center; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 40%; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; width: 100%; font-size: 18px; } .parallax_description { padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 30%; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; float: none; width: 100%; text-align: center; } .thumbnail { width: 50%; } .parallax { margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; padding-top: 20%; } .parallax_description { margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; width: 100%; padding-top: 30px; } .banner { padding-left: 20px; padding-right: 20px; } .footer_column { width: 100%; } }

/* Small Desktops */ @media (min-width: 768px) and (max-width: 1096px) { .text_column { width: 100%; } .thumbnail { width: 50%; } .text_column { width: 100%; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; } .banner { margin-top: 0px; padding-top: 0px; } .dropbtn {

   background-color: #4CAF50;
   color: white;
   padding: 16px;
   font-size: 16px;
   border: none;
   cursor: pointer;

}

.dropdown {

   position: relative;
   display: inline-block;

}

.dropdown-content {

   display: none;
   position: absolute;
   background-color: #f9f9f9;
   min-width: 160px;
   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

}

.dropdown-content a {

   color: black;
   padding: 12px 16px;
   text-decoration: none;
   display: block;

}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {

   display: block;

}

.dropdown:hover .dropbtn {

   background-color: #3e8e41;

} }