Update style and form add new

coffeduong · Dec 12, 2017 · 787acaa · 787acaa
1 parent 07fe1bd
commit 787acaa
Show file tree

Hide file tree

Showing 7 changed files with 418 additions and 83 deletions.
diff --git a/css/base.css b/css/base.css
@@ -10,8 +10,8 @@ a{
 	text-decoration: none;
 }
 #container{
-	height: 631px;
-	position: relative;
+	max-width: 960px;
+	margin: 0 auto;
 }
 .clr{
 	clear: both;

diff --git a/css/header.css b/css/header.css
@@ -1,4 +1,4 @@
-.freshdesignweb-top{
+.freshdesignweb-top, .copyright {
     text-align:center;
     color:#275973;
     line-height: 44px;
@@ -23,4 +23,8 @@
     text-transform: uppercase;
     font-size:36px;
     text-shadow: 2px 2px 0px #F2F2F2, 1px 2px 0px #B1B1B2;
+}
+
+header {
+    padding: 20px 0;
 }
diff --git a/css/style.css b/css/style.css
@@ -1,24 +1,3 @@
-
-.our_menu{width:970px; margin:0 auto;}
-ul,li{margin:0;padding:0;list-style:none}
-
-.menu .item{float:left;position:relative}
-.menu .item .new{background-position:-248px -482px;height:28px;left:-9px;padding:7px 0 0 7px;top:41px;width:55px; background:#F00;color:#FFF;display:block;font-family:"league-gothic",sans-serif;font-size:18px;position:absolute;text-transform:uppercase;z-index:1; }
-.menu .item .item_detail{background-color:#FFF;color:#820922;display:block;overflow:hidden;position:absolute;box-shadow:0 0 7px 0 #CCC;-moz-box-shadow:0 0 7px 0 #CCC;-webkit-box-shadow:0 0 7px 0 #CCC}
-.menu .item .item_detail:hover{z-index:2;-webkit-transition:height .2s ease-in-out;-moz-transition:height .2s ease-in-out;-o-transition:height .2s ease-in-out;-ms-transition:height .2s ease-in-out;transition:height .2s ease-in-out}
-.menu .item:hover .new{z-index:3}
-.menu .item .item_detail h3{border:0;font-family:"league-gothic",sans-serif;font-size:18px;margin:0 0 .5em 0;padding:0;text-transform:uppercase; }
-.menu .item .item_detail p{color:#432;font-size:16px;}
-
-.our_menu .menu{float:left;margin:0 0 50px 0}
-.our_menu .menu .item{background-position:9px -791px;height:170px;padding:0 0 0 7px;width:316px}
-.our_menu .menu .item .item_detail{height:25px;padding:114px 0 0 14px;top:20px;width:295px;text-decoration:none;}
-.our_menu .menu .item .item_detail:hover{height:132px;padding-top:179px}
-.our_menu .menu .item .item_detail img{clip:rect(0px,283px,96px,0px);height:164px;position:absolute;top:14px;width:283px}
-.our_menu .menu .item .item_detail:hover img{clip:auto}
-.our_menu .menu .item .new{left:-1px}
-
-
 @media only screen and (max-width: 967px) {
 .our_menu{ width:660px;margin:0 auto;}
 }
@@ -27,28 +6,38 @@ ul,li{margin:0;padding:0;list-style:none}
 }
 
 .text-right{
-    float: right;
-    padding-right: 14px;
+ text-align: right;
 }
 
 .text-blue{
-    color: blue;
+  color: blue;
 }
-
 .text-red{
-    color: red
+  color: red
+}
+.text-center {
+  text-align: center;
+}
+
+.left {
+  float: left;
+}
+
+.text-left {
+  text-align: left;
 }
 
 .btn {
-
-  padding: 8px 15px;
   border-radius: 5px;
-  display: inline-block;
   color: #fff;
-  margin-top: 10px;
-  margin-left: 10px;
+  cursor: pointer;
+  display: inline-block;
   font-size: 12px;
   font-weight: bold;
+  margin-left: 10px;
+  margin-top: 10px;
+  padding: 8px 15px;
+  text-transform: capitalize;
 }
 
 .btn-blue {
@@ -65,4 +54,285 @@ ul,li{margin:0;padding:0;list-style:none}
 
 .btn-red:hover {
   background: #5d0707;
+}
+
+.our_menu .menu{
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.our_menu ul li {
+  list-style: none;
+  width: 33.333%;
+  padding: 10px;
+  box-sizing: border-box;
+}
+
+
+
+
+.menu li.item img {
+   -webkit-transition: all 0.2s linear;
+   -moz-transition: all 0.2s linear;
+   -o-transition: all 0.2s linear;
+   -ms-transition: all 0.2s linear;
+   transition: all 0.2s linear;
+}
+
+.menu li.item .item_detail {
+   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
+   filter: alpha(opacity=0);
+   opacity: 0;
+   background-color: rgba(66, 38, 1, 0.7);
+   -webkit-transition: all 0.4s ease-in-out;
+   -moz-transition: all 0.4s ease-in-out;
+   -o-transition: all 0.4s ease-in-out;
+   -ms-transition: all 0.4s ease-in-out;
+   transition: all 0.4s ease-in-out;
+}
+
+.item_detail h3 {
+   -webkit-transform: translateY(-100px);
+   -moz-transform: translateY(-100px);
+   -o-transform: translateY(-100px);
+   -ms-transform: translateY(-100px);
+   transform: translateY(-100px);
+   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
+   filter: alpha(opacity=0);
+   opacity: 0;
+   -webkit-transition: all 0.2s ease-in-out;
+   -moz-transition: all 0.2s ease-in-out;
+   -o-transition: all 0.2s ease-in-out;
+   -ms-transition: all 0.2s ease-in-out;
+   transition: all 0.2s ease-in-out;
+}
+
+.menu li.item p {
+   -webkit-transform: translateY(100px);
+   -moz-transform: translateY(100px);
+   -o-transform: translateY(100px);
+   -ms-transform: translateY(100px);
+   transform: translateY(100px);
+   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
+   filter: alpha(opacity=0);
+   opacity: 0;
+   -webkit-transition: all 0.2s linear;
+   -moz-transition: all 0.2s linear;
+   -o-transition: all 0.2s linear;
+   -ms-transition: all 0.2s linear;
+   transition: all 0.2s linear;
+}
+.menu li.item:hover img {
+   -webkit-transform: scale(1.1,1.1);
+   -moz-transform: scale(1.1,1.1);
+   -o-transform: scale(1.1,1.1);
+   -ms-transform: scale(1.1,1.1);
+   transform: scale(1.1,1.1);
+}
+.menu li.item span.info {
+   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
+   filter: alpha(opacity=0);
+   opacity: 0;
+   -webkit-transition: all 0.2s ease-in-out;
+   -moz-transition: all 0.2s ease-in-out;
+   -o-transition: all 0.2s ease-in-out;
+   -ms-transition: all 0.2s ease-in-out;
+   transition: all 0.2s ease-in-out;
+   cursor: pointer;
+}
+.menu li.item:hover .item_detail {
+   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
+   filter: alpha(opacity=100);
+   opacity: 1;
+}
+.menu li.item:hover h3,
+.menu li.item:hover p,
+.menu li.item:hover span.info {
+   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
+   filter: alpha(opacity=100);
+   opacity: 1;
+   -webkit-transform: translateY(0px);
+   -moz-transform: translateY(0px);
+   -o-transform: translateY(0px);
+   -ms-transform: translateY(0px);
+   transform: translateY(0px);
+}
+
+.menu li.item:hover p {
+   -webkit-transition-delay: 0.1s;
+   -moz-transition-delay: 0.1s;
+   -o-transition-delay: 0.1s;
+   -ms-transition-delay: 0.1s;
+   transition-delay: 0.1s;
+}
+
+.menu li.item:hover span.info {
+   -webkit-transition-delay: 0.2s;
+   -moz-transition-delay: 0.2s;
+   -o-transition-delay: 0.2s;
+   -ms-transition-delay: 0.2s;
+   transition-delay: 0.2s;
+}
+
+
+.menu li.item {
+  width: 300px;
+  height: 200px;
+  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 url(../images/bgimg.jpg) no-repeat center center;
+}
+
+.menu li.item .item_detail {
+  width: 100%;
+  height: 200px;
+  position: absolute;
+  overflow: hidden;
+  top: 0;
+  left: 0;
+}
+
+.menu li.item img {
+  display: block;
+  position: relative;
+}
+
+.menu li.item h3 {
+  text-transform: uppercase;
+  color: #fff;
+  text-align: center;
+  position: relative;
+  font-size: 14px;
+  padding: 10px;
+  background: rgba(0, 0, 0, 0.8);
+  margin: 20px 0 0 0;
+}
+
+.menu li.item p {
+  font-family: Georgia, serif;
+  font-style: italic;
+  font-size: 12px;
+  position: relative;
+  color: #fff;
+  padding: 10px 20px 20px;
+  text-align: center;
+}
+
+.menu li.item span.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;
+  cursor: pointer;    
+  font-size: 12px;
+  font-weight: bold;
+}
+
+.menu li.item span.info: hover {
+  -webkit-box-shadow: 0 0 5px #000;
+  -moz-box-shadow: 0 0 5px #000;
+  box-shadow: 0 0 5px #000;
+}
+
+.menu li.item span.info:hover {
+  background: #c50000;
+  box-shadow: 0 0 1px #bf0707;
+}
+
+.new {
+  background-image: url('../images/new-tag.png');
+  color: transparent;
+  position: absolute;
+  z-index: 9;
+  width: 60px;
+  height: 60px;
+  top: 0;
+  left: 0;
+  background-color: transparent;
+  background-size: contain;
+  background-repeat: no-repeat;
+}
+
+.our_menu {
+  margin-bottom: 40px;
+  clear: both;
+}
+
+.no-margin {
+  margin: 0;
+}
+
+.inner-padding {
+  padding: 0 10px;
+}
+
+input[type=text],
+input[type="url"],
+textarea {
+  width: 100%;
+  padding: 12px 20px;
+  margin: 8px 0;
+  display: inline-block;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  box-sizing: border-box;
+}
+
+form {
+  background: rgba(0, 0, 0, 0.1);
+  padding: 30px;
+  border-radius: 5px;
+  margin-bottom: 40px;
+}
+
+form .btn {
+  display: block;
+  margin: 20px 0;
+  box-shadow: none;
+  border: 0;
+}
+
+label {
+  font-size: 14px;
+  font-weight: bold;
+}
+
+input[type=checkbox]:not(old),
+input[type=radio   ]:not(old){
+  width   : 28px;
+  margin  : 0;
+  padding : 0;
+  opacity : 0;
+  position: absolute;
+  right: 0;
+  height: 28px;
+}
+
+.checkbox-lable {
+  display      : inline-block;
+  background   : url('../images/checks.png') no-repeat right 0;
+  line-height  : 24px;
+  padding-right: 28px;
+}
+
+input[type=checkbox]:not(old):checked + label{
+  background-position : right -24px;
+}
+
+.checkBox-group {
+  position: relative;
+  display: inline-block;
 }