Skip to content

abalsh / Garlix

Go to a project
Commit 592c3b92 by hakeem
Options

adjusted subscribe and contact for phone use

parent 5ce3e962
Expand all
Inline Side-by-side
Showing with 53 additions and 187 deletions
public/css/contact.css
@import url(https://fonts.googleapis.com/css?family=Lato:100,300,400);
.card-body{
background-color: #f8f4ff;
}
.card-body{
font-family: 'Lato', sans-serif;
#color{
color: #3C1C78;
}
#form {
position: relative;
width: 500px;
margin: 50px auto 100px auto;
}
input {
font-family: 'Lato', sans-serif;
font-size: 0.875em;
width: 470px;
height: 50px;
padding: 0px 15px 0px 15px;
background: transparent;
outline: none;
input{
color: #3C1C78;
border: solid 1px #3C1C78;
border-bottom: none;
}
input:hover {
background: #3C1C78;
color: #e2dedb;
.col{
width: 250px;
}
textarea {
width: 470px;
max-width: 470px;
height: 110px;
max-height: 110px;
padding: 15px;
background: transparent;
outline: none;
color: #3C1C78;
font-family: 'Lato', sans-serif;
font-size: 0.875em;
border: solid 1px #3C1C78;
}
textarea:hover {
background: #3C1C78;
color: #e2dedb;
}
#submit {
width: 470px;
padding: 0;
margin: -5px 0px 0px 0px;
font-family: 'Lato', sans-serif;
font-size: 0.875em;
color: #3C1C78;
outline:none;
cursor: pointer;
border: solid 1px #3C1C78;
border-top: none;
.row{
margin: 0 auto;
}
#submit:hover {
color: #e2dedb;
.card{
background-color: #f8f4ff;
}
#contact-left{
margin-right: 320px;
.border{
border: solid 1px #cccccc;
}
@media screen and (max-width: 600px) {
.input-group{
width: 70%;
}
.up{
position: relative;
bottom: 10px;
}
public/css/main.css
......@@ -163,3 +163,4 @@ body{
body, html{
height: 100%;
}
public/css/subscribe.css
.card-3 {
background: #000;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15);
box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15);
width: 100%;
display: table;
}
.card {
overflow: hidden;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background: #f8f4ff;
width: 720px;
height: 550px;
position: relative;
margin:0 auto;
line-height: 1.4em;
}
.card-3 .card-body {
padding: 57px 65px;
padding-bottom: 65px;
display: table-cell;
}
/* This is basically to not make the form slightly overlap with the header/footer.*/
html {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
* {
padding: 0;
margin: 0;
}
*, *:before, *:after {
-webkit-box-sizing: inherit;
-moz-box-sizing: inherit;
box-sizing: inherit;
}
/* For the look of the form. Removes borders*/
input {
outline: none;
margin: 0;
border: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
width: 100%;
font-size: 14px;
font-family: inherit;
}
/* Spacing between forms*/
.input-group {
position: relative;
margin-bottom: 33px;
border-bottom: 1px solid #3C1C78;
}
/* To make forms transparent */
.input--style-3 {
padding: 5px 0;
font-size: 16px;
#color{
color: #3C1C78;
background: transparent;
border: 1px;
}
}
.input--style-3::-webkit-input-placeholder {
/* WebKit, Blink, Edge */
input{
color: #3C1C78;
}
}
.input--style-3:-moz-placeholder {
/* Mozilla Firefox 4 to 18 */
color: #3C1C78;
opacity: 1;
}
.col{
width: 250px;
}
@media all and (max-width: 1200px) { /* screen size until 1200px */
.paragrap {
font-size: 1.5em; /* 1.5x default size */
}
.row{
margin: 0 auto;
}
@media all and (max-width: 1000px) { /* screen size until 1000px */
.paragrap {
font-size: 1.2em; /* 1.2x default size */
}
}
@media all and (max-width: 500px) { /* screen size until 500px */
.paragrap {
font-size: 0.8em; /* 0.8x default size */
}
}
.paragraph{
text-align: left;
color: #3C1C78;
}
h2{
color: #3C1C78;
}
.card{
background-color: #f8f4ff;
}
.border{
border: solid 1px #cccccc;
}
.up{
position: relative;
bottom: 10px;
}
resources/views/contact.blade.php
@extends('header')
@section('content')
<main role="main" class="inner cover">
<div class="card-body">
<div class="page-wrapper bg-gra-01 p-t-180 p-b-100 font-poppins">
<div class="wrapper wrapper--w780">
<div class="card card-3">
<div class="card-heading"></div>
<div class="card-body">
@if(session('message'))
<div class='alert alert-success'>
{{ session('message') }}
......@@ -12,7 +14,9 @@
<div class="card-body">
<h2 class="title lead">Contact Us</h2>
<br>
<p style="float: left; padding-left: 50px;">Get in-touch with us.</p>
<h3>
<small class="text-muted"><span id="color">Get in Touch with us!</span></small>
</h3>
@if(count($errors) > 0)
<div class="alert alert-danger">
<button type="button" class="close" data-dismiss="alert">×</button>
......@@ -34,22 +38,25 @@
<form id="form" class="topBefore" action="{{ url('contact/send')}}" method="POST">
{{ csrf_field() }}
<div class="input-group">
<input type="text" class="lead" name="name" placeholder="NAME">
<input class="input--style-3 color" type="text" placeholder="Name" name="name">
</div>
<div class="input-group">
<input type="text" class="lead" name="email" placeholder="E-MAIL">
<input type="text" class="input--style-3 color" name="email" placeholder="E-MAIL">
</div>
<div class="input-group">
<textarea type="text" class="lead" name="message" placeholder="MESSAGE"></textarea>
<textarea type="text" class="input--style-3 color" name="message" placeholder="MESSAGE"></textarea>
</div>
<div class="input-group">
<input id="submit" class="lead" type="submit" name="send" value="Submit">
<input id="submit" class="input--style-3 color" type="submit" name="send" value="Submit">
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
@include('footer')
@endsection
......
resources/views/subscribe.blade.php
......@@ -16,7 +16,9 @@
<p>{{ \Session::get('failure') }}</p>
</div><br />
@endif
<h2 class="title">Subscribe to our newsletter!</h2>
<h3>
<small class="text-muted"><span id="color">Subscribe to Our Newsletter</span></small>
</h3>
<br>
@if(count($errors) > 0)
<div class="alert alert-danger">
......@@ -34,7 +36,7 @@
<form action={{url('/subscribe')}} method="post">
@csrf
<div class="input-group">
<input class="input--style-3 color" style="background-color #3C1C78;" type="email" placeholder="Email" name="email">
<input class="input--style-3 color" type="email" placeholder="Email" name="email">
</div>
<div class="btn">
<button class="btn btn-primary" style="background-color: #3C1C78; border: none; " type="submit">Submit</button>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment