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 57 additions and 192 deletions
public/css/contact.css
@import url(https://fonts.googleapis.com/css?family=Lato:100,300,400); #color{
.card-body{
background-color: #f8f4ff;
}
.card-body{
font-family: 'Lato', sans-serif;
color: #3C1C78; color: #3C1C78;
} }
#form { input{
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;
color: #3C1C78; color: #3C1C78;
border: solid 1px #3C1C78;
border-bottom: none;
} }
input:hover { .col{
background: #3C1C78; width: 250px;
color: #e2dedb;
} }
textarea { .row{
width: 470px; margin: 0 auto;
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 { .card{
background: #3C1C78; background-color: #f8f4ff;
color: #e2dedb;
} }
#submit { .border{
width: 470px; border: solid 1px #cccccc;
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;
} }
#submit:hover { .up{
color: #e2dedb; position: relative;
} bottom: 10px;
#contact-left{
margin-right: 320px;
} }
@media screen and (max-width: 600px) {
.input-group{
width: 70%;
}
}
\ No newline at end of file
public/css/main.css
...@@ -163,3 +163,4 @@ body{ ...@@ -163,3 +163,4 @@ body{
body, html{ body, html{
height: 100%; height: 100%;
} }
public/css/subscribe.css
.card-3 { #color{
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: #3C1C78;
background: transparent;
border: 1px;
}
.input--style-3::-webkit-input-placeholder {
/* WebKit, Blink, Edge */
color: #3C1C78;
}
.input--style-3:-moz-placeholder {
/* Mozilla Firefox 4 to 18 */
color: #3C1C78; color: #3C1C78;
opacity: 1;
}
@media all and (max-width: 1200px) { /* screen size until 1200px */
.paragrap {
font-size: 1.5em; /* 1.5x default size */
}
} }
@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{ input{
text-align: left;
color: #3C1C78; color: #3C1C78;
} }
h2{
color: #3C1C78; .col{
} width: 250px;
}
.row{
margin: 0 auto;
}
.card{
background-color: #f8f4ff;
}
.border{
border: solid 1px #cccccc;
}
.up{
position: relative;
bottom: 10px;
}
resources/views/contact.blade.php
@extends('header') @extends('header')
@section('content') @section('content')
<main role="main" class="inner cover"> <div class="page-wrapper bg-gra-01 p-t-180 p-b-100 font-poppins">
<div class="card-body"> <div class="wrapper wrapper--w780">
<div class="card card-3">
<div class="card-heading"></div> <div class="card-heading"></div>
<div class="card-body">
@if(session('message')) @if(session('message'))
<div class='alert alert-success'> <div class='alert alert-success'>
{{ session('message') }} {{ session('message') }}
...@@ -12,7 +14,9 @@ ...@@ -12,7 +14,9 @@
<div class="card-body"> <div class="card-body">
<h2 class="title lead">Contact Us</h2> <h2 class="title lead">Contact Us</h2>
<br> <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) @if(count($errors) > 0)
<div class="alert alert-danger"> <div class="alert alert-danger">
<button type="button" class="close" data-dismiss="alert">×</button> <button type="button" class="close" data-dismiss="alert">×</button>
...@@ -32,24 +36,27 @@ ...@@ -32,24 +36,27 @@
@endif @endif
<div class="container"> <div class="container">
<form id="form" class="topBefore" action="{{ url('contact/send')}}" method="POST"> <form id="form" class="topBefore" action="{{ url('contact/send')}}" method="POST">
{{ csrf_field() }} {{ csrf_field() }}
<div class="input-group"> <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>
<div class="input-group"> <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>
<div class="input-group"> <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>
<div class="input-group"> <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> </div>
</form> </form>
</div> </div>
</div> </div>
</div> </div>
</div>
</div>
</div>
</main> </main>
@include('footer') @include('footer')
@endsection @endsection
......
resources/views/subscribe.blade.php
...@@ -16,7 +16,9 @@ ...@@ -16,7 +16,9 @@
<p>{{ \Session::get('failure') }}</p> <p>{{ \Session::get('failure') }}</p>
</div><br /> </div><br />
@endif @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> <br>
@if(count($errors) > 0) @if(count($errors) > 0)
<div class="alert alert-danger"> <div class="alert alert-danger">
...@@ -34,7 +36,7 @@ ...@@ -34,7 +36,7 @@
<form action={{url('/subscribe')}} method="post"> <form action={{url('/subscribe')}} method="post">
@csrf @csrf
<div class="input-group"> <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>
<div class="btn"> <div class="btn">
<button class="btn btn-primary" style="background-color: #3C1C78; border: none; " type="submit">Submit</button> <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