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

Line 348: Line 348:
 
}
 
}
 
.view {
 
.view {
−
width: 250px;
+
width: 290px;
−
height: 190px;
+
height: 214px;
 
margin: 5px;
 
margin: 5px;
 
}
 
}

Revision as of 17:53, 30 October 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; }

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;
   padding-top: 25px;

width: 45%; top: 31%; left: 27.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: 1.5em 0 0.6em 0; } .top-menu ul li{ display: inline-block; } .top-menu ul li a{ 

 font-size: 1.5em;
 text-decoration: none;
 margin: 0 0.5em;
 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; 

       color: #fff;

-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:250px;
  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;

}

  1. view1 p, #view2 p, #view3 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: 250px;

} .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: 1em;

} .our_work h3 { 

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

}

  1. our_work p {
 text-align:left;
 font-size: 1.2em;
 margin: 0 0 1em 0.5em;
 font-family: 'Roboto Slab', serif;

} @media (min-width: 768px){ .top-menu ul li a { font-size: 0.7em; } .view { width: 290px; height: 214px; margin: 5px; } .logo a { font-size: 2.3em; } .caption h3 { font-size: 1.5em; } }