Difference between revisions of "Team:GZHS-United/CSS/homestyle"

Line 31: Line 31:
 
font-family: 'Open Sans', sans-serif;}
 
font-family: 'Open Sans', sans-serif;}
 
.logo a {
 
.logo a {
−
   font-size: 5em;
+
   font-size: 4em;
 
   text-transform: uppercase;
 
   text-transform: uppercase;
 
   color: #2A579A;
 
   color: #2A579A;
Line 78: Line 78:
 
border-top: 7px solid #2A579A;
 
border-top: 7px solid #2A579A;
 
   border-bottom: 7px solid #2A579A;
 
   border-bottom: 7px solid #2A579A;
 +
width: 45%;
 +
top: 31%;
 +
left: 22.5%;
 
}
 
}
 
.caption h3{
 
.caption h3{
 
color: #2A579A;
 
color: #2A579A;
 
font-weight: 700;
 
font-weight: 700;
−
font-size: 2.5em;
+
font-size: 2em;
 
text-transform: uppercase;
 
text-transform: uppercase;
 
margin-bottom: 0.5em;
 
margin-bottom: 0.5em;
Line 129: Line 132:
 
z-index: 999;
 
z-index: 999;
 
left: 13px;
 
left: 13px;
−
}
 
−
.callbacks_nav {
 
−
  position: absolute;
 
−
  -webkit-tap-highlight-color: rgba(0,0,0,0);
 
−
  top: 50%;
 
−
  left: 0;
 
−
  opacity: 0.7;
 
−
  z-index: 3;
 
−
  text-indent: -9999px;
 
−
  overflow: hidden;
 
−
  text-decoration: none;
 
−
  height: 61px;
 
−
  width: 38px;
 
−
  margin-top: -45px;
 
−
  }
 
−
.callbacks_nav.next {
 
−
  left: auto;
 
−
  background-position: right top;
 
−
  right: 0;
 
−
}
 
−
.caption {
 
−
width: 45%;
 
−
top: 31%;
 
−
left: 22.5%;
 
−
}
 
−
 
−
.callbacks_nav {
 
−
top: 63%;
 
−
}
 
−
.caption h3{
 
−
font-size:3em;
 
 
}
 
}
 
/*-- sticky-nav --*/
 
/*-- sticky-nav --*/

Revision as of 16:21, 24 September 2017

body a{ 

   transition:0.5s all;

-webkit-transition:0.5s all; -moz-transition:0.5s all; -o-transition:0.5s all; -ms-transition:0.5s all; } input[type="button"]{ transition:0.5s all; -webkit-transition:0.5s all; -moz-transition:0.5s all; -o-transition:0.5s all; -ms-transition:0.5s all; }

h1,h2,h3,h4,h5,h6{ padding:0 0; margin:0 0; } p{ padding:0 0; margin:0 0; } ul{ padding:0 0; margin:0 0; } body{ padding:0 0; margin:0 0; font-family: 'Open Sans', sans-serif;} .logo a { 

 font-size: 4em;
 text-transform: uppercase;
 color: #2A579A;
 font-weight: 900;
 text-decoration: none;
 font-family: 'Roboto Slab', serif;

} .logo a:hover{ 

 color: #fff;

} /*--- slider-css --*/ .slider { position: relative; } .rslides { 

 position: relative;
 list-style: none;
 overflow: hidden;
 width: 100%;
 padding: 0;
 margin: 0;
 }

.rslides li { 

 -webkit-backface-visibility: hidden;
 position: absolute;
 display: none;
 width: 100%;
 left: 0;
 top: 0;
 }

.rslides li:first-child { 

 position: relative;
 display: block;
 float: left;
 }

.rslides img { 

 display: block;
 height: auto;
 float: left;
 width: 100%;
 border: 0;
}

.caption{ position: absolute; text-align:center; border-top: 7px solid #2A579A; 

 	border-bottom: 7px solid #2A579A;

width: 45%; top: 31%; left: 22.5%; } .caption h3{ color: #2A579A; font-weight: 700; font-size: 2em; text-transform: uppercase; margin-bottom: 0.5em; } a.morebtn{ background:#3D3D3D; padding:0.8em 0; display:block; font-size:0.875em; text-transform:uppercase; color:#FFF; width:20%; margin:0 auto; transition:0.5s all ease; -webkit-transition:0.5s all ease; -moz-transition:0.5s all ease; -o-transition:0.5s all ease; -ms-transition:0.5s all ease; } a.morebtn:hover{ background:#585686; } .callbacks_tabs a:after { content: "\f111"; font-size: 0; font-family: FontAwesome; visibility: visible; display: block; height: 12px; width: 12px; display: inline-block; border: 2px solid #747474; } .callbacks_here a:after{ border: 2px solid #FFF; } .callbacks_tabs a{ visibility:hidden; } .callbacks_tabs li{ display:inline-block; } ul.callbacks_tabs.callbacks1_tabs { position: absolute; bottom: 14px; z-index: 999; left: 13px; } /*-- sticky-nav --*/ .fixed{ position: fixed; top: 0; width: 100%; margin: 0 auto; left:0; z-index: 999; } /*-- sticky-nav --*/ .fixed-header{ background:#2A579A; text-align: center; padding: 2.5em 0; } .top-menu ul li{ display: inline-block; } .top-menu ul li a{ 

 font-size: 1.5em;
 text-decoration: none;
 margin: 0 1em;
 color: #fff;
 font-family: 'Roboto Slab', serif;

} .top-menu ul li a:hover { 

 color: #323232;

} .header-bottom { 

 border-bottom: 2px solid #78b907;

} span.menu { 

 display: none;

} nav a { position: relative; display: inline-block; outline: none; color: #fff; text-decoration: none; letter-spacing: 1px; font-weight: 400; text-shadow: 0 0 1px rgba(255,255,255,0.3); font-size: 1.35em; }

nav a:hover, nav a:focus { outline: none; } /* Effect 5: same word slide in */ .cl-effect-5 a { overflow: hidden; }

.cl-effect-5 a span { padding:2px; position: relative; display: inline-block; -webkit-transition: -webkit-transform 0.3s; -moz-transition: -moz-transform 0.3s; transition: transform 0.3s; }

.cl-effect-5 a span::before { position: absolute; top: 100%; content: attr(data-hover); font-weight: 700; -webkit-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); transform: translate3d(0,0,0); }

.cl-effect-5 a:hover span, .cl-effect-5 a:focus span { -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); transform: translateY(-100%); } .about-section { 

 padding: 4em 0;
 background: #2d4652 repeat;
}

.about-section h3 { 

 font-size: 2.5em;
 text-transform: uppercase;
 color: #fff;
 font-weight: 600;
  margin: 0 0 1em 0.5em;
   font-family: 'Roboto Slab', serif;

} .view { 

  width: 350px;
  height:320px;
  margin: 10px;
  float: left;
  border: 10px solid #fff;
  overflow: hidden;
  position: relative;
  text-align: center;
  -webkit-box-shadow: 1px 1px 2px #e6e6e6;
  -moz-box-shadow: 1px 1px 2px #e6e6e6;
  box-shadow: 1px 1px 2px #e6e6e6;
  cursor: default;
  background: #fff no-repeat center center;
    border-radius: 20px;

} .view .mask,.view .content { 

  width: 350px;
  height: 320px;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
    border-radius: 20px;

} .view img { 

  display: block;
  position: relative;

} .view h2 { 

  text-transform: uppercase;
  color: #78b907;
  text-align: center;
  position: relative;
  font-size: 25px;
  padding: 10px;
  background: rgba(0, 0, 0, 0.8);
  margin: 20px 0 0 0;
  font-weight: 600;

} .view p { 

 font-family: Georgia, serif;
 font-style: italic;
 font-size: 20px;
 position: relative;
 color: #fff;
 padding: 15px 20px 15px;
 text-align: center;

} .view a.info { 

  display: inline-block;
  text-decoration: none;
  padding: 7px 14px;
  background: #000;
  color: #fff;
  text-transform: uppercase;
  -webkit-box-shadow: 0 0 1px #000;
  -moz-box-shadow: 0 0 1px #000;
  box-shadow: 0 0 1px #000;

} .view a.info: hover { 

  -webkit-box-shadow: 0 0 5px #000;
  -moz-box-shadow: 0 0 5px #000;
  box-shadow: 0 0 5px #000;

} .view img { 

 width: 100%;
 height: 300px;

} .menu-section{ 

  padding: 4em 0;
  background: #ffffff;

} .menu-section h3 { 

 font-size: 2.5em;
 text-transform: uppercase;
 color: #000;
 font-weight: 600;
 margin: 0 0 1em 0.5em;
   font-family: 'Roboto Slab', serif;

} .manu-grid { 

 position: relative;

} .menu-info { position: absolute; width: 90%; top:76%; left:15px; display: none; background: rgba(0, 0, 0, 0.5); } .menu-grid:hover div.menu-info { 

 display: block;

} .menu-info h4 { 

 font-size: 2.5em;
 text-align: right;
 color:#78b907;
 padding: 0.5em 1em 0;
 font-weight: 600;

} .menu-info h5 { 

 font-size: 1.5em;
 color: #fff;
 padding: 1em 0.3em;
 text-transform:uppercase;

} .our_work{ 

 padding-bottom: 4em;

} .our_work h3 { 

 font-size: 2.5em;
 font-weight: 600;
 margin: 0 0 1em 0.5em;
 font-family: 'Roboto Slab', serif;

} .our_work p { 

 font-size: 1.2em;
 margin: 0 0 1em 0.5em;
 font-family: 'Roboto Slab', serif;

} .contact-section { 

 padding: 4em 0;
 min-height: 400px;
}

.contact-section h3 { 

 font-size: 2.5em;
 text-transform: uppercase;
 color: #fff;
 font-weight: 600;
 margin: 0 0 1em 0.5em;
 font-family: 'Roboto Slab', serif;

} .contactgrid { 

padding-bottom: 2em;

} .contactgrid input[type="text"] { width: 100%; background: none; outline: none; border: none; border-bottom: 1.5px solid#05b6ea; 

  font-size: 1.5em;
 color: #05b6ea;
 text-transform: capitalize;
 padding: 10px 0;
 text-align: left;

}

.contactgrid1 textarea { width: 100%; background: none; outline: none; border: none; resize: none; border-bottom: 1.5px solid#05b6ea; font-size: 1.5em; color: #05b6ea; text-transform: capitalize; padding: 10px 0; height: 2.8em; } .contactgrid2 { 

 padding: 1em 0 0 12em;

} .contactgrid2 input[type="button"] { 

 color: #fb4b4b;
 background: none;
 border: none;
 font-size: 1.5em;
 outline: none;
 text-transform: uppercase;
 padding: 1em 1em;
 margin: 40px 0 0 40px;
 border: 1.5px solid;

} .contactgrid2 input[type="button"]:hover { color: #d5d6d7; }