<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="main-box">
<div class="contentx">
<div class="waves">
<div class="wave2"></div>
<div class="wave2"></div>
<div class="wave2"></div>
<div class="wave2"></div>
</div>
<!-- SERVICE SECTION -->
<section id="service" class="parallax-section">
<div class="container">
<!--==========================
Call To Action Section
============================-->
<section id="call-to-action" class="wow fadeInUp">
<div class="container">
<div class="row">
<div class="col-lg-9 text-center text-lg-left">
<h3 class="cta-title">Call To Action</h3>
<p class="cta-text"> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="col-lg-3 cta-btn-container text-center">
<a class="cta-btn align-middle" href="#">We Have </a>
</div>
</div>
</div>
</section><!-- #call-to-action -->
<div class="row">
<div class="wow fadeInUp section-title" data-wow-delay="0.2s">
<!-- SECTION TITLE -->
</div>
<div class="col-md-3 col-sm-6 wow fadeInUp" data-wow-delay="0.4s">
<div class="service-thumb">
<i class="fa fa-smile-o"></i>
<h4>Graphic Design</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing morbi venenatis.</p>
</div>
</div>
<div class="col-md-3 col-sm-6 wow fadeInUp" data-wow-delay="0.4s">
<div class="service-thumb bg-grey">
<i class="fa fa-camera"></i>
<h4 class="white-color">Photography</h4>
<p>Duis sed arcu sed nunc maximus tempor. Maecenas et enim laoreet, pharetra risus vel.</p>
</div>
</div>
<div class="col-md-3 col-sm-6 wow fadeInUp" data-wow-delay="0.6s">
<div class="service-thumb">
<i class="fa fa-lightbulb-o"></i>
<h4>UI/UX design</h4>
<p>Sed tristique, nunc sit amet pellentesque pharetra, sapien urna.</p>
</div>
</div>
<div class="col-md-3 col-sm-6 wow fadeInUp" data-wow-delay="0.8s">
<div class="service-thumb">
<i class="fa fa-clone"></i>
<h4>illustration</h4>
<p>Cras ut urna quis nisi luctus molestie tincidunt sed ipsum. Donec gravida laoreet erat.</p>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
<!-- end content -->
<style>
</style>
<style>
</style>
<script>
</script>
/*
* Main box
* Grid card__image
* css tabs
* user thumbs
*/
.site__wrapper {
max-width: 1000px;
margin-left: auto;
margin-right: auto;
overflow: hidden;
padding-top: 0.5em;
padding-bottom: 1.5em;
}
.grid {
float: none;
width: 100%;
padding-left: 0.2em;
padding-right: 0.2em;
padding-bottom: 0.4em;
}
@media screen and (min-width: 40.063em) {
.grid {
float: left;
width: 33.333%;
}
}
.card__image {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
display: block;
min-height: 240px;
overflow: hidden;
position: relative;
}
.card__image > img {
display: block;
margin-bottom: 0;
-webkit-transition: all .25s ease-in-out;
-moz-transition: all .25s ease-in-out;
-ms-transition: all .25s ease-in-out;
-o-transition: all .25s ease-in-out;
transition: all .25s ease-in-out;
}
.card__image:hover > img {
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-ms-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
}
.card__title {
color: white;
display: inline-block;
font-size: 15px;
font-weight: 700;
line-height: 1.2;
margin-bottom: 0.75em;
text-align: start;
text-decoration: none;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.card__title:hover {
color: rgba(255, 255, 255, 0.7);
text-decoration: none;
}
.card__overlay {
content: "";
bottom: 0;
display: block;
height: 100%;
left: 0;
position: absolute;
right: 0;
top: 0;
width: 100%;
z-index: 1;
}
.card__overlay--indigo {
background-image: linear-gradient(to bottom, rgba(92, 107, 192, 0.1), rgba(92, 107, 192, 0.8));
z-index: 2;
}
.card__overlay--blue {
background-image: linear-gradient(to bottom, rgba(41, 182, 246, 0.1), rgba(41, 182, 246, 0.8));
z-index: 2;
}
.card__overlay-content {
position: absolute;
bottom: 0;
padding: 0.5em;
z-index: 3;
}
.card__meta {
margin: 0;
margin-right: -1em;
margin-bottom: 0.75em;
}
.card__meta.card__meta--last {
margin-bottom: 0;
}
.card__meta li {
color: #f8f8f8;
display: inline;
list-style-type: none;
margin-bottom: 0;
padding-right: 1em;
font-size: 0.85em;
font-variant: small-caps;
letter-spacing: 1px;
}
.card__meta li:not(:last-child):after {
content: "\25cf";
font-style: normal;
position: relative;
color: rgba(255, 255, 255, 0.25);
right: -0.6em;
}
.card__meta li > a {
color: #f8f8f8;
}
/**/
/* Start Main Box Styles */
.main-box{
position: relative;
width: 65%;
height: 90vh;
text-align: center;
margin: 0 auto;
margin-top: 44px;
border: 1px solid #487bdf;
box-shadow: 0px 0px 30px 1px #673AB7;
left: 0px;
}
.main-box .left{
position: absolute;
left: 0;
width: 50%;
height: 100%;
}
.main-box .left img{
width: 100%;
height: 100%;
}
.main-box .left .layer {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(3, 3, 3, 0.16);
}
.main-box .right{
position: relative;
left: 50%;
width: 50%;
height: 100%;
padding: 10px 0;
}
/* Start Responsive Media Queries */
@media (min-width: 1200px) {
.main-box{width: 95%;}
}
@media (min-width: 992px) and (max-width: 1199px) {
.main-box{width: 70%;}
}
@media (min-width: 768px) and (max-width: 991px) {
.main-box{width: 80%;}
}
@media (min-width: 576px) and (max-width: 767px) {
.main-box{width: 98%;}
.form {padding: 10px 15px;}
}
@media (max-width: 575px) {
.main-box .left{display: none;}
.main-box .right {
left: 0;
width: 100%;
padding: 2px 5px;
}
.main-box{
width: 99%;
left: 0;
}
.contentx {
padding: 0 4px !important;
}
.form {padding: 10px 15px;}
}
/* End Main Box Styles */
/* Start Logo Styles */
/* Start Form Styles */
.form {
width: 100%;
height: 70%;
padding: 0 10px;
/* background: #5d0c43c4;
background-image: url(https://cdn.discordapp.com/attachments/185046628732895232/204497752091000832/bg3.svg);
*/ background-size: 50%;
border-radius: 11%;
}
.form form{
width: 100%;
height: 100%;
}
.form-radio {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display: inline-block;
position: relative;
background-color: #f1f1f1;
color: #666;
top: 10px;
height: 30px;
width: 30px;
border: 0;
border-radius: 50px;
cursor: pointer;
margin-right: 7px;
outline: none;
}
.form-radio:checked::before
{
position: absolute;
font: 13px/1 'Open Sans', sans-serif;
left: 11px;
top: 7px;
content: '\02143';
transform: rotate(40deg);
}
.form-radio:hover
{
background-color: #f7f7f7;
}
.form-radio:checked
{
background-color: #f1f1f1;
}
.form-radio label
{
font: 300 16px/1.7 'Open Sans', sans-serif;
color: #666;
cursor: pointer;
}
.form select{
height: 30px;
background: transparent;
border: 1px solid rgba(255,255,255,0.6);
border-radius: 2px;
font-size: 16px;
color: #000000;
font-weight: 400;
padding: 4px;
}
.form input.input,
.form .submit{
display: inline-block;
outline: none;
width: 100%;
height: 40px;
font-size: 16px;
padding: 2px 20px;
margin: 5px auto;
border-radius: 20px;
border: 1px solid #c67ad3;
color: darkblue;
}
.form .submit {
position: relative;
outline: none;
height: 50px;
font-size: 20px;
margin: 0 auto;
margin-top: 3px;
border: none;
border-radius: 25px;
color: #fff;
background: linear-gradient(to left, #6f3bca, #d325f1);
}
.submit:hover {
background: linear-gradient(to left, #3F51B5, #00BCD4);
}
.submit:after {
position: absolute;
content: "";
top: 0;
width: 0;
height: 100%;
left: -8%;
z-index:-1;
overflow: hidden;
transform: skew(50deg);
transform-origin: top left;
transition: all 0.6s ease;
}
.submit:hover:after {
width: 100%;
}
/* End Form Styles */
/* wave Styles */
.waves {
position: absolute;
transform: rotate(180deg);
bottom: 82px;
width: 100%;
}
.wave2 {
background: url(https://ilmarisaari.com/wp-content/uploads/wave_ewa.png) repeat-x;
position: absolute;
top: -148px;
width: 6400px;
height: 198px;
animation: wave 60s cubic-bezier( 0.36, 0.45, 0.63, 0.53) infinite;
transform: translate3d(0, 0, 0);
opacity: 0.5;
}
.wave2:nth-of-type(2) {
width: 5500px;
top: -155px;
height: 300px;
animation: wave2 45s cubic-bezier( 0.36, 0.45, 0.63, 0.53) -.125s infinite, swell 20s ease -1.25s infinite;
transform: translate3d(1500, 0, 0);
}
.wave2:nth-of-type(3) {
top: -115px;
animation: wave2 35s cubic-bezier( 0.36, 0.45, 0.63, 0.53) -.5s infinite, swell 20s ease -16.25s infinite;
transform: translate3d(4000, 0, 0);
}
.wave2:nth-of-type(4) {
top: -120px;
animation: wave2 35s cubic-bezier( 0.36, 0.45, 0.63, 0.53) -.5s infinite, swell 20s ease -16.25s infinite;
transform: translate3d(4000, 0, 0);
}
@keyframes wave2 {
0% {
margin-left: 0;
}
100% {
margin-left: -1600px;
}
}
@keyframes swell {
0%, 100% {
transform: translate3d(0,-25px,0);
}
50% {
transform: translate3d(0,5px,0);
}
}
/*end-wav*/
/* Css tab Styles */
.css3-tab {
list-style: none;
margin: 0 auto 40px;
position: relative;
width: 90%;
}
.css3-tab input[type='radio'] {
display: none;
}
.css3-tab .css3-tab-nav {
display: table;
table-layout: fixed;
width: 100%;
}
.css3-tab .css3-tab-nav label {
display: table-cell;
background-color: #3f51b5a8;
color: #FFFFFF;
padding: 15px;
text-align: center;
transition: all .3s ease 0s;
border-radius: 100px;
border: 2px solid #efd600;
}
.css3-tab .css3-tab-nav label:hover {
cursor: pointer;
background: white;
color: #666666;
transition: all .3s ease 0s;
}
@media (max-width: 692px) {
.css3-tab .css3-tab-nav {
display: inline-flex;
margin: 0 0 3px;
}
.css3-tab .css3-tab-nav label {
display: block;
box-sizing: border-box;
width: 100%;
padding: 6px;
}
}
.css3-tab .css3-tab-content {
overflow: hidden;
padding: 0px;
display: none;
/* background: #FFF;
*/ clear: left;
box-sizing: border-box;
border-radius: 31px;
}
.css3-tab input[id='logIn']:checked ~ .css3-tab-nav label[for='logIn'] {
background: #6c00d64a;
cursor: default;
text-decoration: none;
color: #fff;
font-size: 12px;
opacity: 0.8;
margin-right: auto;
margin-left: auto;
border: 2px solid #fdfdfe;
border-radius: 100px;
}
.css3-tab input[id='logIn']:checked ~ div.logIn {
display: block;
border-top: solid 3px #b6ff00;
}
.css3-tab input[id='signUp']:checked ~ .css3-tab-nav label[for='signUp'] {
background: #e91e63a8;
color: white;
cursor: default;
border: 2px solid #fdfdfe;
}
.css3-tab input[id='signUp']:checked ~ div.signUp {
display: block;
border-top: solid 3px #2196F3;
}
.css3-tab input[id='forGet']:checked ~ .css3-tab-nav label[for='forGet'] {
background: #9c27b0cf;
color: white;
cursor: default;
border: 2px solid #fdfdfe;
cursor: default;
}
.css3-tab input[id='forGet']:checked ~ div.forGet{
display: block;
border-top: solid 3px red;
}
.thumbnails img {
float: left;
margin-right: -2px;
display: block;
width: 55px !important;
border-radius: 50%;
}
