Merge pull request #20 from sagautam5/dev

Design update for demo page
sagautam5 · Apr 28, 2022 · ddbcc55 · ddbcc55
2 parents b8e64ad + 52b6342
commit ddbcc55
Show file tree

Hide file tree

Showing 6 changed files with 107 additions and 36 deletions.
diff --git a/README.md b/README.md
@@ -40,6 +40,8 @@ You can find all source code for demo inside demo directory. You can clone this
 
 Example: http://127.0.0.1/local-states-nepal/demo
 
+![Laravel Nepal](demo/assets/images/demo-page.png)
+
 Demo Video:
 
 https://www.loom.com/share/a8c3d825a9ee41a9817b24645453e979

diff --git a/demo/assets/css/style.css b/demo/assets/css/style.css
@@ -0,0 +1,53 @@
+
+html, body{
+    height: 100vh;
+}
+
+.demo-form{
+    background:url('../images/bg-image.jpg');
+    background-attachment: fixed;
+    background-repeat: no-repeat;
+    background-size: cover;
+    height: 100vh;
+}
+
+.side-image{
+  position: relative;
+}
+.side-image img{
+    width: 100%;
+    position: absolute;
+    top: 126px;
+    left: -59px;
+}
+.bg-form{
+    background-color: #f2f6fa;
+    border-radius:4px;
+    padding: 40px 40px;
+    margin-top: 40px;
+}
+
+label {
+    display: inline-block;
+    margin-bottom: 8px;
+    font-weight: 500;
+}
+
+
+.form-control {
+    display: block;
+    width: 100%;
+    height: 40px;
+    padding: 6px 12px;
+    font-size: 13px;
+    line-height: 1.42857143;
+    color: #555;
+    background-color: #fdf7f7;
+    background-image: none;
+    border: 1px solid #decece;
+    border-radius: 2px;
+    -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
+    box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
+    -webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
+    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
+}
diff --git a/demo/assets/images/bg-image.jpg b/demo/assets/images/bg-image.jpg
diff --git a/demo/assets/images/demo-page.png b/demo/assets/images/demo-page.png
diff --git a/demo/assets/images/nepal-map.png b/demo/assets/images/nepal-map.png
diff --git a/demo/index.php b/demo/index.php
@@ -4,50 +4,66 @@
     <!-- Latest compiled and minified CSS -->
     <link rel="stylesheet" href="./assets/css/bootstrap.min.css">
     <link rel="stylesheet" href="./assets/css/jquery-ui.min.css">
+    <link rel="stylesheet" href="./assets/css/style.css">
+    
 </head>
 <body>
-<div class="container">
-    <div class="row">
-        <div class="col-md-offset-3 col-md-6">            
-            <h4 style="margin-bottom: 40px; margin-top: 40px;">Local State Nepal Demo</h4>
-            <div class="form-group">
-                <label>Language</label>
-                <select class="form-control language">
-                    <option value="en" selected>English</option>
-                    <option value="np">Nepali</option>
-                </select>
-            </div>
+    <section class="demo-form">
+        <div class="container">
+            <div class="row">
+                <div class="col-md-6">
+                    <div class="side-image">
+                        <!-- <h3>Local States Nepal</h3>
+                        <p>Local state nepal. 
+                        </p> -->
+                        <img src="./assets/images/nepal-map.png" alt="">
+                    </div>
+                    
+                </div>
+                <div class="col-md-6"> 
+                    <div class="bg-form">
+                    <h4 style="margin-bottom: 40px; margin-top: 40px;">Local State Nepal Demo</h4>
+                    <div class="form-group">
+                        <label>Language</label>
+                        <select class="form-control language">
+                            <option value="en" selected>English</option>
+                            <option value="np">Nepali</option>
+                        </select>
+                    </div>
 
-            <div class="form-group">
-                <label>Province</label>
-                <select class="form-control province">
-                    <option>Select</option>
-                </select>
-            </div>
+                    <div class="form-group">
+                        <label>Province</label>
+                        <select class="form-control province">
+                            <option>Select</option>
+                        </select>
+                    </div>
 
-            <div class="form-group">
-                <label>District</label>
-                <select class="form-control district">
-                    <option>Select</option>
-                </select>
-            </div>
+                    <div class="form-group">
+                        <label>District</label>
+                        <select class="form-control district">
+                            <option>Select</option>
+                        </select>
+                    </div>
 
-            <div class="form-group">
-                <label>Municipality</label>
-                <select class="form-control municipality">
-                    <option>Select</option>
-                </select>
-            </div>
+                    <div class="form-group">
+                        <label>Municipality</label>
+                        <select class="form-control municipality">
+                            <option>Select</option>
+                        </select>
+                    </div>
 
-            <div class="form-group">
-                <label>Ward</label>
-                <select class="form-control ward">
-                    <option>Select</option>
-                </select>
+                    <div class="form-group">
+                        <label>Ward</label>
+                        <select class="form-control ward">
+                            <option>Select</option>
+                        </select>
+                    </div>
+                    </div>           
+                </div>
             </div>
         </div>
-    </div>
-</div>
+    </section>
+
 
 <!-- Latest compiled and minified JavaScript -->
 <script src="./assets/js/jquery.min.js"></script>