Frontend Template 1

kunkumagp · Mar 4, 2017 · 67c7b25 · 67c7b25
1 parent 14f9604
commit 67c7b25
Show file tree

Hide file tree

Showing 6 changed files with 356 additions and 0 deletions.
diff --git a/css/radio.css b/css/radio.css
@@ -0,0 +1,30 @@
+input[type=radio].css-checkbox {
+							position:absolute; z-index:-1000; left:-1000px; overflow: hidden; clip: rect(0 0 0 0); height:1px; width:1px; margin:-1px; padding:0; border:0;
+						}
+
+						input[type=radio].css-checkbox + label.css-label {
+							padding-left:41px;
+							height:24px; 
+							display:inline-block;
+							background-repeat:no-repeat;
+							background-position: 10px 2px;
+							vertical-align:middle;
+							cursor:pointer;
+
+						}
+
+						input[type=radio].css-checkbox:checked + label.css-label {
+							background-position:10px -22px;
+						}
+						label.css-label {
+				background-image:url(../img/radio.png);
+				font-size:12px;
+				-webkit-touch-callout: none;
+				-webkit-user-select: none;
+				-khtml-user-select: none;
+				-moz-user-select: none;
+				-ms-user-select: none;
+				user-select: none;
+			}
+
+
diff --git a/css/styles.css b/css/styles.css
@@ -0,0 +1,207 @@
+@charset "utf-8";
+
+a:link {
+	text-decoration: none;
+}
+a:visited {
+	text-decoration: none;
+}
+a:hover {
+	text-decoration: none;
+}
+a:active {
+	text-decoration: none;
+}
+
+@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,600,400italic);
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -webkit-font-smoothing: antialiased;
+  -moz-font-smoothing: antialiased;
+  -o-font-smoothing: antialiased;
+  font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}
+
+body {
+  font-family: "Roboto", Helvetica, Arial, sans-serif;
+  font-weight: 100;
+  font-size: 12px;
+  line-height: 30px;
+  color: #777;
+  background: #4CAF50;
+/*  background: #e4e4e4;*/
+}
+
+.container {
+  max-width: 600px;
+  width: 100%;
+  margin: 0 auto;
+  position: relative;
+}
+
+#contact input[type="text"],
+#contact input[type="email"],
+#contact input[type="tel"],
+#contact input[type="url"],
+#contact textarea,
+#contact button[type="submit"] {
+  font: 400 12px/16px "Roboto", Helvetica, Arial, sans-serif;
+}
+
+#contact {
+  background: #F9F9F9;
+  padding: 25px;
+  margin: 150px 0;
+  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
+}
+
+#contact h3 {
+  display: block;
+  font-size: 30px;
+  font-weight: 300;
+  margin-bottom: 10px;
+  text-align:center;
+}
+
+#contact h4 {
+  margin: 5px 0 15px;
+  display: block;
+  font-size: 13px;
+  font-weight: 400;
+  text-align:center;
+}
+
+fieldset {
+  border: medium none !important;
+  margin: 0 0 10px;
+  min-width: 100%;
+  padding: 0;
+  width: 100%;
+}
+
+#contact input[type="text"],
+#contact input[type="email"],
+#contact input[type="tel"],
+#contact input[type="url"],
+#contact textarea {
+  width: 100%;
+  border: 1px solid #ccc;
+  background: #FFF;
+  margin: 0 0 5px;
+  padding: 10px;
+}
+
+#contact input[type="text"]:hover,
+#contact input[type="email"]:hover,
+#contact input[type="tel"]:hover,
+#contact input[type="url"]:hover,
+#contact textarea:hover {
+  -webkit-transition: border-color 0.3s ease-in-out;
+  -moz-transition: border-color 0.3s ease-in-out;
+  transition: border-color 0.3s ease-in-out;
+  border: 1px solid #aaa;
+}
+
+#contact textarea {
+  height: 100px;
+  max-width: 100%;
+  resize: none;
+}
+
+#contact button[type="submit"] {
+  cursor: pointer;
+  width: 100%;
+  border: none;
+  background: #ed1e24;
+  color: #FFF;
+  margin: 0 0 5px;
+  padding: 10px;
+  font-size: 15px;
+}
+
+#contact button[type="submit"]:hover {
+  background: #d3161b;
+  -webkit-transition: background 0.3s ease-in-out;
+  -moz-transition: background 0.3s ease-in-out;
+  transition: background-color 0.3s ease-in-out;
+}
+
+#contact button[type="submit"]:active {
+  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
+}
+
+.copyright {
+  text-align: center;
+}
+
+#contact input:focus,
+#contact textarea:focus {
+  outline: 0;
+  border: 1px solid #aaa;
+}
+
+::-webkit-input-placeholder {
+  color: #888;
+}
+
+:-moz-placeholder {
+  color: #888;
+}
+
+::-moz-placeholder {
+  color: #888;
+}
+
+:-ms-input-placeholder {
+  color: #888;
+}
+#langlink
+{
+	padding:15px;
+	text-align:center;
+	cursor: pointer;
+  width: 100%;
+  border: none;
+  background: #efefef;
+  color: #000;
+  margin: 0 0 5px;
+  font-size: 20px;
+  margin-bottom:10px;
+  border: solid 1px #d6d6d6;
+}
+#langlink:hover
+{
+  background: #d3161b;
+  color:#fff;
+  -webkit-transition: background 0.3s ease-in-out;
+  -moz-transition: background 0.3s ease-in-out;
+  transition: background-color 0.3s ease-in-out;
+}
+.ques
+{
+	font-size:18px;
+	font-weight:bold;
+}
+.check_box
+{
+	width:25%;
+	float:left;
+}
+input[type='radio']
+{
+	margin:2px 5px;
+    left: 0;
+    display: block;
+    width: 12px;
+    height: 12px;
+    outline: none;
+    border: 3px solid #ff7700;
+    background: #fff;
+    cursor: pointer;
+    border-radius: 100%;
+}
diff --git a/feedback_page.php b/feedback_page.php
@@ -0,0 +1,94 @@
+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Untitled Document</title>
+<link href="css/styles.css" rel="stylesheet" type="text/css">
+<link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico">
+<link href="css/radio.css" rel="stylesheet" type="text/css">
+<style>
+.radioboxstyles
+{
+	 background:#E8E8E8;
+	 padding:5px;
+	 margin-bottom:5px;
+	 border:solid 1px #D8D8D8 !important;
+}
+
+
+</style>
+</head>
+
+
+<body>
+<div class="container">  
+  <form id="contact" action="" method="post" style="margin:50px 0 !important;">
+    <h3>Fashion Bug Customer Feedback</h3>
+    <h4>What would you you like to share with us..?</h4>
+    <fieldset>
+      <input placeholder="Your name" type="text" tabindex="1" required="">
+    </fieldset>
+    <fieldset>
+      <input placeholder="Your Email Address" type="email" tabindex="2" required="">
+    </fieldset>
+    <fieldset>
+      <input placeholder="Your Phone Number (optional)" type="tel" tabindex="3" required="">
+    </fieldset>
+    <fieldset class="radioboxstyles">
+    <label class="ques">Friendliness of Staff</label>
+    <div>
+    <input type="radio" name="fofs" id="fofs1" class="css-checkbox" /><label for="fofs1" class="css-label radGroup1">Excellent</label>
+    <input type="radio" name="fofs" id="fofs2" class="css-checkbox" /><label for="fofs2" class="css-label radGroup1">Good</label>
+    <input type="radio" name="fofs" id="fofs3" class="css-checkbox" /><label for="fofs3" class="css-label radGroup1">Average</label>
+    <input type="radio" name="fofs" id="fofs4" class="css-checkbox" /><label for="fofs4" class="css-label radGroup1">Poor</label>
+    </div>
+    </fieldset>
+    <fieldset class="radioboxstyles">
+    <label class="ques">Quality of Products</label>
+    <div>
+    
+    <input type="radio" name="qofp" id="qofp1" class="css-checkbox" /><label for="qofp1" class="css-label radGroup1">Excellent</label>
+    <input type="radio" name="qofp" id="qofp2" class="css-checkbox" /><label for="qofp2" class="css-label radGroup1">Good</label>
+    <input type="radio" name="qofp" id="qofp3" class="css-checkbox" /><label for="qofp3" class="css-label radGroup1">Average</label>
+    <input type="radio" name="qofp" id="qofp4" class="css-checkbox" /><label for="qofp4" class="css-label radGroup1">Poor</label>
+    </div>
+    </fieldset>
+    <fieldset class="radioboxstyles">
+    <label class="ques">Value for Money</label>
+    <div>
+    <input type="radio" name="vform" id="vform1" class="css-checkbox" /><label for="vform1" class="css-label radGroup1">Excellent</label>
+    <input type="radio" name="vform" id="vform2" class="css-checkbox" /><label for="vform2" class="css-label radGroup1">Good</label>
+    <input type="radio" name="vform" id="vform3" class="css-checkbox" /><label for="vform3" class="css-label radGroup1">Average</label>
+    <input type="radio" name="vform" id="vform4" class="css-checkbox" /><label for="vform4" class="css-label radGroup1">Poor</label>
+    </div>
+    </fieldset>
+    <fieldset class="radioboxstyles">
+    <label class="ques">Good choice of products within each rage</label>
+    <div>
+    <input type="radio" name="gcofpwer" id="gcofpwer1" class="css-checkbox" /><label for="gcofpwer1" class="css-label radGroup1">Excellent</label>
+    <input type="radio" name="gcofpwer" id="gcofpwer2" class="css-checkbox" /><label for="gcofpwer2" class="css-label radGroup1">Good</label>
+    <input type="radio" name="gcofpwer" id="gcofpwer3" class="css-checkbox" /><label for="gcofpwer3" class="css-label radGroup1">Average</label>
+    <input type="radio" name="gcofpwer" id="gcofpwer4" class="css-checkbox" /><label for="gcofpwer4" class="css-label radGroup1">Poor</label>
+    </div>
+    </fieldset>
+    <fieldset class="radioboxstyles">
+    <label class="ques">Speed of service</label>
+    <div>
+    <input type="radio" name="sofsisg" id="sofsisg1" class="css-checkbox" /><label for="sofsisg1" class="css-label radGroup1">Excellent</label>
+    <input type="radio" name="sofsisg" id="sofsisg2" class="css-checkbox" /><label for="sofsisg2" class="css-label radGroup1">Good</label>
+    <input type="radio" name="sofsisg" id="sofsisg3" class="css-checkbox" /><label for="sofsisg3" class="css-label radGroup1">Average</label>
+    <input type="radio" name="sofsisg" id="sofsisg4" class="css-checkbox" /><label for="sofsisg4" class="css-label radGroup1">Poor</label>
+    </div>
+    </fieldset>
+    <fieldset>
+      <textarea placeholder="Type your message here...." tabindex="5" required></textarea>
+    </fieldset>
+    <fieldset>
+      <button name="submit" type="submit" id="contact-submit" data-submit="...Sending">Submit</button>
+    </fieldset>
+    <div align="center"><img src="img/logo.png" width="150"/></div>
+    <p class="copyright">Designed by <a href="https://sanhindalk.com" target="_blank" title="Sanhinda Lanka">Sanhinda Lanka</a></p>
+  </form>
+</div>
+</body>
+</html>
diff --git a/img/logo.png b/img/logo.png
diff --git a/img/radio.png b/img/radio.png
diff --git a/index.php b/index.php
@@ -0,0 +1,25 @@
+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Untitled Document</title>
+<link href="css/styles.css" rel="stylesheet" type="text/css">
+<link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico">
+
+</head>
+
+<body>
+<div class="container">  
+  <form id="contact" action="" method="post">
+    <h3>Fashion Bug Customer Feedback</h3>
+    <h4>Please select your language</h4>
+    
+	<a href="feedback_page.php?lang=english"><div id="langlink">English</div></a>
+    <a href="feedback_page.php?lang=sinhala"><div id="langlink">සිංහල</div></a>
+    <a href="feedback_page.php?lang=tamil"><div id="langlink">தமிழ்</div></a>      
+    <div align="center"><img src="img/logo.png" width="150"/></div>
+    <p class="copyright">Designed by <a href="https://sanhindalk.com" target="_blank" title="Sanhinda Lanka">Sanhinda Lanka</a></p>
+  </form>
+</div>
+</body>
+</html>