Resturent Template

Html

<!DOCTYPE html>

<head>

<title>SK Resturent - Order Food</title>

integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">

integrity="sha512-17EgCFERpgZKcm0j0fEq1YCJuyAWdz9KUtv1EjVuaOz8pDnh/0nZxmU6BBXwaaxqoi9PQXnRWqlcDB027hgv9A=="

crossorigin="anonymous" />

integrity="sha512-yHknP1/AwR+yx26cB1y0cjvQUMvEa2PFzt1c9LlS4pRQ5NOTZFWbhBig+X9G9eYW/8m0/4OXNx8pxJ6z57x0dw=="

crossorigin="anonymous" />

</head>

<body>

</div>

<li><a class="link" href="#">About</a></li>

</ul>

</div>

</div>

<h1>Foods the most precious things</h1>

<a href="#" class="btn">Order Now</a>

<a href="#" class="watch-video"><i class="fa fa-play-circle"></i>Watch Video</a>

<h6>Fast Service</h6>

</div>

<h6>Fresh Food</h6>

</div>

<h6>24/7 Support</h6>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<h3>About us</h3>

<hr>

<h2>We speak the good food language</h2>

<p>Living first us creepeth she'd earth second be sixth hath likeness greater image said sixth was

without male place fowl evening an grass form living fish and rule lesser for blessed can't saw

third one signs moving stars light divided was two you him appear midst cattle for they are

gathering.</p>

<a href="#" class="btn ">Learn More</a>

</div>

<h3>Featured Foods</h3>

<hr>

<h2>Fresh taste and great price With Home Delivary</h2>

</div>

</div>

<h3 class="card-title">Mountain Mike Pizza</h3>

<p class="card-text">Test and spicy. Order now in your home.</p>

</div>

<h3 class="card-title">Potatas Bravas</h3>

<p class="card-text">Powerfull tasty cookie. order this now.</p>

</div>

<h3 class="card-title">Pulled Sandwich</h3>

<p class="card-text">Best Tasy sandwich order now.</p>

</div>

<h3 class="card-title">Mountain Mike Pizza</h3>

<p class="card-text">Test and spicy. Order now.</p>

</div>

<h3 class="card-title">Pulled Sandwich</h3>

<p class="card-text">Best Tasy sandwich order now.</p>

</div>

</div>

</div>

<h3>Italian Pizza Offer</h3>

</div>

<p>Order our delicious foods in your home in this lockdown within best prices.</p>

<h3>Safe Home Delivery Service</h3>

<a class="btn button">Reservation</a>

</div>

<hr>

<h2>Talented & exprienced member</h2>

</div>

<h4>Babar Ali</h4>

<p>Executive chef</p>

</div>

<ul>

</ul>

</div>

<h4>Babar Ali</h4>

<p>Executive chef</p>

</div>

<ul>

</ul>

</div>

<h4>Babar Ali</h4>

<p>Executive chef</p>

</div>

<ul>

</ul>

</div>

<h3>Contact Us</h3>

<h2>Let Contact Us For Query Regardning Our Foods</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam nemo consequuntur quam

dignissimos quia, modi cupiditate ea maiores tenetur alias. Pariatur fugiat, voluptatum

cupiditate ea ipsum, suscipit repellendus corporis vero nobis incidunt cum aperiam eius

corrupti ducimus minima quod officiis ipsam laborum sequi possimus doloremque. Nemo optio a

vitae maxime.</p>

</div>

<h3>Contact Us</h3>

</div>

</div>

</div>

</div>

<button type="submit" name="submit" class="btn">Send Message</button>

</div>

</form>

</div>

</p>

</div>

integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6+Zq+HgcCsk3kj4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg=="

crossorigin="anonymous"></script>

</body>

</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,500;0,700;1,400&family=Open+Sans:wght@300;400&display=swap');

/*font-family: 'Josefin Sans', sans-serif;

font-family: 'Open Sans', sans-serif;*/

margin: 0;

padding: 0;

box-sizing: border-box;

}

.open_sanns{

font-family: 'Open sans', sans-serif;

}

.head-txt{

font-family: 'josefin sans', sans-serif;

}

body{

height:auto;

color:#888;

overflow-x:hidden;

}

body .header{

width: 100%;

height: 75px;

}

body .header .logo{

margin-left: 30px;

padding-top: 24px;

margin-left: 30px;

padding-top: 24px;

width: 28%;

float: left;

}

body .header .logo span{

display: none;

width: 25px;

height: 3px;

background: #e22104;

margin: auto;

margin-bottom: 4px;

transition: all 400ms linear;

cursor: pointer;

}

body .header ul{

margin-top: 0;

margin-bottom: 1rem;

width: 69%;

float: right;

}

body .header ul li:first-child{

margin-left: 50%;

}

body .header ul li{

display: inline;

margin-right: 29px;

line-height: 5;

}

body .header ul li a{

text-decoration: none;

color: #888;

font-family: 'open sans', sans-serif;

transition: 0.3s ease;

}

body .header ul li .active{

color: #e22104;

}

body .header ul li a:hover{

color: #e22104;

}

body .container1{

display: block;

position: relative;

background: blue;

width: 97%;

margin: auto;

margin-bottom: 100px;

}

body .container1 .intro {

width: 100%;

height: auto;

float: right;

margin-bottom: 100px;

}

@media(max-width:1200px){

body .header ul li:first-child{

margin-left: 44%;

}

@media(max-width:1075px){

body .header ul li:first-child{

margin-left: 34%;

}

@media(max-width:1000px){

body .header ul{

width: 67%;

}

body .header ul li:first-child{

margin-left: 27%;

}

body .header .logo{

width: 15%;

float: left;

}

@media(max-width:1000px){

body .header ul{

width: 81%;

}

@media(max-width:790px){

body .header{

width: 100%;

height: auto;

background: #d1cff4;

position: relative;

}

body .header .logo{

width: 100%;

float: none;

margin-bottom: 20px;

position: relative;

}

body .header ul{

margin-top: 0;

margin-bottom: 1rem;

width: 100%;

float: none;

transition: 03s ease;

}

body .header ul li{

display: block;

line-height: 3;

}

body .header ul li:first-child{

margin-left: 0px;

}

body .header .logo span{

display: block;

}

body .header .logo #bars{

width: 30%;

float: right;

cursor: pointer;

}

/*intro*/

body .container1 .intro .row .col-md-6 .row .col-md-1 .fa{

font-size: 33px !important;

margin-top: 30px;

cursor: pointer;

transition: 0.3s ease;

}

body .container1 .intro .row .col-md-6 .row .col-md-1 .fa:hover{

color: #e22104;

}

body .container1 .intro .row .col-md-6 .row .col-md-11 .main-text{

padding: 0px 38px;

margin-top: 98px;

}

body .container1 .intro .row .col-md-6 .row .col-md-11 .main-text h1{

font-family: 'Josefin Sans', sans-serif;

font-weight: 500;

color: #000;

font-size: 70px;

margin-bottom: 40px;

}

body .container1 .intro .row .col-md-6 .row .col-md-11 .main-text .btn{

box-shadow: -5px 8px 20px 0px rgb(229 16 2 / 15%);

display: inline-block;

background-color: #e22104;

color: #fff;

font-size: 14px;

font-weight: 600;

border-radius: 30px;

padding: 10px 45px;

cursor: pointer;

}

body .container1 .intro .row .col-md-6 .row .col-md-11 .main-text .watch-video{

text-decoration: none;

margin-left: 30px;

font-size: 17px;

color: #675454;

cursor: pointer;

}

body .container1 .intro .row .col-md-6 .row .col-md-11 .main-text .watch-video i{

font-size: 19px;

margin-right: 10px;

}

body .container1 .intro .row .col-md-6 .row .col-md-11 .main-text .icon .row{

margin-top: 53px;

}

body .container1 .intro .row .col-md-6 .row .col-md-11 .main-text .icon .row .col-md-4{

border-right: 1px solid #eeeeee;

}

body .container1 .intro .row .col-md-6 .row .col-md-11 .main-text .icon .row .col-md-4 h6{

text-align: center;

font-family: "Josefin Sans",sans-serif !important;

color: #2f2d4e;

line-height: 1.2;

margin-top: 8px;

}

body .container1 .intro .row .col-md-6 .row .col-md-11 .main-text .icon .row .col-md-4 img{

}

body .container1 .intro .row .col-md-6 .row .col-md-11 .slideshow-container .myslides{

display: none;

}

body .container1 .intro .row .col-md-6 .row .col-md-11 .slideshow-container .myslides img{

height: 592px;

}

body .container1 .intro .row .col-md-6 .row .col-md-11 .fade1 {

-webkit-animation-name: fade;

-webkit-animation-duration: 1.5s;

animation-name: fade;

animation-duration: 1.5s;

}

@-webkit-keyframes fade {

from {opacity: .4}

to {opacity: 1}

}

@keyframes fade {

from {opacity: .4}

to {opacity: 1}

}

body .container1 .intro .row .col-md-6 .row .col-md-1 .buttons{

margin-top: 200px;

}

body .container1 .intro .row .col-md-6 .row .col-md-1 .dot {

cursor: pointer;

height: 15px;

width: 15px;

margin: 0 2px;

background-color: #fff;

border-radius: 50%;

display: inline-block;

transition: background-color 0.6s ease;

border: 3px solid red;

}

body .container1 .intro .row .col-md-6 .row .col-md-1 .active {

background-color: #000;

}

@media only screen and (max-width: 950px) {

body .container1 .intro .row .col-md-6 .row .col-md-1 .fa {

font-size: 28px !important;

}

body .container1 .intro .row .col-md-6 .row .col-md-11 .main-text h1 {

font-size: 47px;

}

body .container1 .intro .row .col-md-6 .row .col-md-11 .main-text .btn {

padding: 10px 30px;

}

body .container1 .intro .row .col-md-6 .row .col-md-11 .icon{

display: none;

}

body .container1 .intro .row .social{

display: none;

}

@media only screen and (max-width: 772px) {

body .container1 .intro .row .col-md-6 .row .col-md-11 .main-text .btn {

padding: 6px 11px;

}

body .container1 .intro .row .col-md-6 .row .col-md-11 .main-text h1 {

font-size: 37px;

}

@media only screen and (max-width: 576px) {

body .container1 .intro .row .col-md-6 .row .col-md-11 .main-text{

padding: 10px;

text-align: center;

margin-top: 50px;

margin-bottom: 50px;

}

body .container1 .intro .row .col-md-6 .row .col-md-11 .main-text h1 {

font-size: 35px;

font-weight: 600;

margin-bottom: 25px;

line-height: 0.929;

}

body .container1 .intro .row .col-md-6 .row .col-md-11 .main-text .btn{

display: inline-block;

background-color: #e22104;

color: #fff;

font-size: 14px;

font-weight: 600;

border-radius: 30px;

padding: 9px 25px;

text-transform: capitalize;

-webkit-transition: all 0.3s ease 0s;

-moz-transition: all 0.3s ease 0s;

-o-transition: all 0.3s ease 0s;

transition: all 0.3s ease 0s;

}

body .container1 .intro .row .col-md-6 .row .col-md-1 .buttons{

text-align: center;

position: absolute;

top: 23%;

left: 37%;

}

body .container1 .intro .row .col-md-6 .row {

position: relative;

}

/*about*/

body .about{

}

body .about .row .col-md-7 .imgs{

padding:10px 0px;

position: relative;

}

body .about .row .col-md-7 .imgs img:last-child{

position: absolute;

top: 186px;

right: 30px;

}

body .about .row .col-md-5 h3{

font-family: 'Josefin Sans', sans-serif;

color: #e22104;

padding-top: 10px;

position: relative;

}

body .about .row .col-md-5 hr{

color: #e22104;

}

body .about .row .col-md-5 h2{

color: #000;

font-family: 'josefin sans',sans-serif;

font-size: 35px;

margin-top: 25px;

}

body .about .row .col-md-5 p{

color: #888;

font-family: "Open Sans",sans-serif;

font-size: 15px;

font-weight: 400;

line-height: 1.8;

}

body .about .row .col-md-5 .btn{

display: inline-block;

background-color: #e22104;

color: #fff;

font-size: 14px;

font-weight: 600;

border-radius: 30px;

padding: 12px 45px;

text-transform: capitalize;

-webkit-transition: all 0.3s ease 0s;

-moz-transition: all 0.3s ease 0s;

-o-transition: all 0.3s ease 0s;

transition: all 0.3s ease 0s;

margin-top: 25px;

}

body .about .row .col-md-5 .btn:hover{

background-color: red;

}

@media(max-width:1000px){

body .about .row .col-md-7 .imgs img:first-child{

max-width: 70%;

}

@media(max-width:430px){

body .about .row .col-md-7 .imgs img:first-child{

max-width: 100%;

}

body .about .row .col-md-7 .imgs img:last-child{

position: absolute;

bottom: -70px;

right: -15px;

}

body .about .row .col-md-5{

margin-top: 36%;

}

@media(max-width:764px){

body .about .row .col-md-5{

margin-top: 30%;

}

/*feature foods*/

body .shop{

margin-top: 40px;

}

body .shop .info h3{

font-family: 'Josefin Sans', sans-serif;

color: #e22104;

padding-top: 10px;

position: relative;

}

body .shop .row .info hr{

color: #e22104;

}

body .shop .row .info h2{

color: #000;

font-family: 'josefin sans',sans-serif;

font-size: 35px;

margin-top: 25px;

}

body .dish{

width: 100%;

margin-top: 25px;

}

body .dish .row .col-md-1 i{

font-size: 110px;

color: #fea295;

margin-top: 24%;

cursor: pointer;

}

body .dish .row .col-md-1{

text-align: center;

}

body .dish .row .col-md-10 .card{

margin-right: 10px;

margin-left: 10px;

background-color: #fff8f7;

border: none;

cursor: pointer;

}

body .dish .row .col-md-10 .card:hover{

box-shadow: 0px 10px 20px 0px rgb(8 6 89 / 10%);

}

body .dish .row .col-md-10 .card-body{

padding: 30px;

}

body .dish .row .col-md-10 .card-body p{

margin-bottom: 10px;

font-family: 'open sans',sans-serif;

}

body .dish .row .col-md-10 .card-body .price{

color: #e22104;

font-size: 24px;

font-weight: 600;

float: right;

}

body .dish .row .col-md-10 .card-body h3{

color: #2f2d4e;

line-height: 1.2;

font-family: 'Josefin Sans', sans-serif;

}

@media(min-width:1000px){

body .shop{

margin-top: 137px;

}

@media(max-width:770px){

body .dish .row .col-md-1{

display: none;

}

body .dish{

width: 97%;

margin: auto;

}

/*offer*/

body .offer {

width: 100%;

height: auto;

margin-top: 130px;

margin-bottom: 30px;

position: relative;

}

body .offer .container .offer-img{

position: relative;

}

body .offer .container .offer-text{

background: #e22104;

color: #fff;

text-align: center;

padding: 76px 20px;

box-shadow: -13px 2px 20px 0px rgb(8 6 89 / 20%);

position: absolute;

top: 123px;

left: 47%;

}

body .offer .container .offer-img .offer-text h3{

font-family: 'josefin sans',sans-serif;

font-size: 40px;

margin-bottom: 25px;

}

body .offer .container .offer-text h1{

font-size: 60px;

margin-bottom: 25px;

color: #fff;

}

body .offer .container .offer-text a{

display: inline-block;

background-color: #e22104;

color: #fff;

font-size: 14px;

border: 1px solid #fff;

text-decoration: none;

font-weight: 600;

border-radius: 30px;

margin-bottom: 30px;

padding: 9px 25px;

transition: 0.3s ease;

}

body .offer .container .offer-text a:hover{

background-color: red;

}

@media(max-width:1000px){

body .offer .container .offer-text {

padding: 25px 20px;

}

body .offer .container .offer-img .offer-text h3{

font-size: 32px;

margin-bottom: 25px;

}

body .offer .container .offer-img .offer-text h1{

font-size: 60px;

margin-bottom: 25px;

}

body .offer .container .offer-text a{

padding: 9px 25px;

}

@media(max-width:770px){

body .offer .container .offer-text{

top: 49px;

left: 47%;

padding: 35px 20px;

}

body .offer .container .offer-img .offer-text h3{

font-size: 18px;

margin-bottom: 12px;

}

body .offer .container .offer-img .offer-text h1{

font-size: 21px;

}

body .offer .container .offer-img .offer-text a{

padding: 6px 18px;

}

@media(max-width:580px){

body .offer .container .offer-text {

position: relative;

width: 100%;

top: 0;

left: 0;

}

body .offer .container .offer-img .offer-text h3{

font-size: 40px;

margin-bottom: 25px;

}

body .offer .container .offer-img .offer-text h1{

font-size: 60px;

margin-bottom: 25px;

}

body .offer .container .offer-text a{

padding: 9px 25px;

}

/*banner*/

body .banner{

width: 100%;

position: relative;

margin-top: 22%;

background: url('../img/cta-bg.png') left center no-repeat;

padding: 94px 0 138px 0;

background-size: cover;

position: relative;

z-index: 1;

}

body .banner .container{

text-align: center;

}

body .banner .container p{

text-align: center;

color: #fff;

font-size: 20px;

}

body .banner .container h3{

text-align: center;

color: #fff;

font-size: 30px;

font-weight: 600;

text-align: center;

}

body .banner::after{

content: "";

display: block;

width: 100%;

height: 100%;

background: rgba(2,1,15,0.7);

position: absolute;

top: 0;

left: 0;

z-index: -1;

}

body .banner .container .button{

display: inline-block;

background-color: #e22104;

color: #fff;

font-size: 14px;

font-weight: 600;

border-radius: 30px;

padding: 9px 25px;

margin-top: 35px;

text-transform: capitalize;

}

@media(max-width:1200px){

body .banner{

padding: 80px 0 70px 0;

}

/*chef*/

body .chef{

width: 100%;

height: auto;

margin-top: 80px;

}

body .chef .container .text-intro h3{

font-family: 'Josefin Sans', sans-serif;

color: #e22104;

padding-top: 10px;

position: relative;

}

body .chef .container .text-intro hr{

color: #e22104;

}

body .chef .container .text-intro h2{

color: #000;

font-family: 'josefin sans',sans-serif;

font-size: 35px;

margin-top: 25px;

}

body .chef .container .row{

margin-top: 35px;

}

body .chef .container .row .col-md-4 .card {

overflow: hidden;

}

body .chef .container .row .col-md-4 .card .footer{

position: absolute;

width: 94.5%;

bottom: 10px;

left: 50%;

background: #fff;

transform: translateX(-50%);

text-align: center;

padding: 20px 5px 10px 5px;

z-index: 10;

}

body .chef .container .row .col-md-4 .card .footer h4{

font-size: 24px;

font-weight: 600;

font-family: 'Josefin Sans', sans-serif;

color: #2f2d4e;

line-height: 1.2;

}

body .chef .container .row .col-md-4 .card .footer p{

color: #777;

}

body .chef .container .row .col-md-4 .card .overy{

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: rgba(2,1,15,0.5);

transform: translateY(-50%);

opacity: 0;

z-index: -1;

transition: all .6s ease;

}

body .chef .container .row .col-md-4 .card:hover .overy {

transform: translateY(0%);

opacity: 1;

z-index: 1;

}

body .chef .container .row .col-md-4 .card .overy ul {

position: absolute;

right: 20px;

top: 45%;

transform: translateY(-50%);

list-style-type: none;

}

body .chef .container .row .col-md-4 .card .overy ul li i{

color: #fff;

opacity: 1;

cursor: pointer;

}

/*contact page*/

body .contact{

position: relative;

width: 100%;

height: auto;

margin-top: 130px;

padding: 130px 0px;

background-color: #d3d3d326;

}

body .contact .container .row .col-md-6 .contact-text h3{

font-family: 'Josefin Sans', sans-serif;

color: #e22104;

padding-top: 10px;

position: relative;

}

body .contact .container .row .col-md-6 .contact-text h2{

color: #000;

font-family: 'josefin sans',sans-serif;

font-size: 35px;

font-weight: 600;

margin-bottom: 1rem;

margin-top: 25px;

}

body .contact .container .row .col-md-6 .contact-text p{

line-height: 1.2rem;

}

body .contact .container .row .col-md-6 .contact-text{

max-width: 460px;

}

body .contact .container .row .col-md-6 .contact-form{

padding: 60px 30px;

background: url("../img/reservation-bg.png") left center no-repeat;

background-size: cover;

text-align: center;

position: relative;

z-index: 1;

}

body .contact .container .row .col-md-6 .contact-form h3{

color: #fff;

font-weight: 600;

margin-bottom: 40px;

}

body .contact .container .row .col-md-6 .contact-form .form-group{

margin-bottom: 15px;

position: relative;

}

body .contact .container .row .col-md-6 .contact-form .form-group .form-control{

font-size: 14px;

color: #999999;

padding-left: 20px;

border: 0;

height: 50px;

border-radius: 0;

}

body .contact .container .row .col-md-6 .contact-form .form-group .input-group-append{

width: 54px;

float: right;

background: #fff;

position: absolute;

top: 0;

right: 0;

height: 100%;

}

body .contact .container .row .col-md-6 .contact-form .form-group .input-group-append i{

margin-top: 25%;

color: #bfbfbf;

font-size: 17px;

}

body .contact .container .row .col-md-6 .contact-form .form-group textarea{

height: 100px !important;

}

body .contact .container .row .col-md-6 .contact-form .button-group {

margin-bottom: -77px !important;

}

body .contact .container .row .col-md-6 .contact-form .button-group .btn{

display: inline-block;

background-color: #e22104;

color: #fff;

font-size: 14px;

font-weight: 600;

border-radius: 30px;

padding: 12px 40px;

box-shadow: -5px 8px 20px 0px rgb(229 16 2 / 15%);

}

body .contact .container .row .col-md-6 .contact-form::after{

content: "";

display: block;

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: rgba(2,1,15,0.5);

z-index: -1;

}

/*footer*/

body .footer{

width: 100%;

height: auto;

padding: 30px 0px;

background-color: #d3d3d326;

}

body .footer .container p{

color: #777;

font-weight: 400;

text-align: left;

}

body .footer .container p .credit{

color: #e22104;

cursor: pointer;

}

body .footer .container .social-icons{

text-align: right;

}

body .footer .container .social-icons a{

background: #2f2d4e;

margin-left: 3px;

width: 32px;

color: #fff;

display: inline-grid;

text-align: center;

height: 32px;

align-content: center;

text-decoration: none;

transition: 0.3s ease;

}

body .footer .container .social-icons a:hover{

background-color: #e22104;

}

/*shop page*/

body .shop .container .row .col-md-2 .card{

margin-top: 85px;

}

body .shop .container .row .col-md-2 .card .card-header{

background-color: #fff;

color: #000;

font-family: 'josefin sans',sans-serif;

}

body .shop .container .row .col-md-2 .card .card-body ul{

list-style: none;

}

body .shop .container .row .col-md-2 .card .card-body ul li{

margin-top: 15px;

}

body .shop .container .row .col-md-2 .card .card-body ul li a{

text-decoration: none;

cursor: pointer;

color: #888;

transition: 0.3s ease;

}

body .shop .container .row .col-md-2 .card .card-body ul li a:hover{

color: #e22104;

}

body .shop .container .row .col-md-2 .card .card-body ul li .active{

color: #e22104;

}

body .shop .container .row .col-md-10 h3{

font-family: 'Josefin Sans', sans-serif;

color: #e22104;

padding-top: 10px;

position: relative;

}

body .shop .container .row .col-md-10 hr{

color: #e22104;

}

body .shop .container .row .col-md-10 h2{

color: #000;

font-family: 'josefin sans',sans-serif;

font-size: 35px;

font-weight: 600;

margin-bottom: 1rem;

margin-top: 25px;

}

body .shop .container .row .col-md-10 .foods{

margin-top: 40px;

}

body .shop .container .row .col-md-10 .foods .row .col-md-6 .card h3{

color: #000;

}

body .shop .container .row .col-md-10 .foods .row .col-md-6 .card h4{

color: #e22104;

}

body .shop .container .row .col-md-10 .foods .row .col-md-6 .card .row .col-md-4 img{

padding: 20px;

width: 139px;

height: 139px;

}

body .shop .container .row .col-md-10 .foods .row .col-md-6 .card{

background: #fff8f7;

transition: 0.3s ease;

}

body .shop .container .row .col-md-10 .foods .row .col-md-6 .card:hover{

background: #fff;

box-shadow: 0px 10px 20px 0px rgb(8 6 89 / 10%);

}

body .shop .container .row .col-md-10 .foods .row .col-md-6 .card a{

text-decoration: none;

color: #000;

}

/*cart*/

body .cart {

margin-top: 30px;

}

body .cart h3,hr{

color: #e22104;

font-family: 'Josefin Sans', sans-serif;

}

table {

border: 1px solid #ebebeb;

}

.table-content table thead > tr {

background-color: #f9f9f9;

border: 1px solid #ebebeb;

}

.table-content table th {

border-top: medium none;

color: #2f333a;

font-size: 14px;

font-weight: 500;

padding: 21px 45px 22px;

text-align: center;

text-transform: uppercase;

vertical-align: middle;

white-space: nowrap;

}

.table-content table td.product-thumbnail {

width: 150px;

}

.table-content table td.product-name {

width: 435px;

}

.table-content table td.product-price-cart {

width: 196px;

}

.table-content table td.product-quantity {

width: 100px;

}

.table-content table td.product-quantity {

width: 130px;

}

.table-content table td.product-remove {

width: 100px;

}

.table-content table tbody > tr {

border-bottom: 1px solid #ebebeb;

}

.table-content table tbody > tr:last-child {

border-bottom: 0px solid #ebebeb;

}

.table-content table td {

color: #242424;

font-size: 14px;

padding: 30px 0;

text-align: center;

}

.table-content table td.product-name a {

color: #2f333a;

font-size: 14px;

font-weight: 400;

text-transform: uppercase;

}

.cart-main-area .product-quantity {

display: table-cell;

margin: 0;

}

.pro-dec-cart input {

background: transparent none repeat scroll 0 0;

border: 1px solid #e1e1e1;

border-radius: 5px;

color: #242424;

height: 42px;

padding: 0;

text-align: center;

width: 94px;

}

.table-content table td.product-remove a {

color: #aaa;

font-size: 17px;

margin: 0 13px;

}

.table-content table td.product-remove a:hover {

color: #e02c2b;

}

h3.page-title {

font-size: 18px;

font-weight: 500;

margin: 0 0 25px;

}

.cart-shiping-update-wrapper {

display: flex;

justify-content: space-between;

padding: 30px 0px 55px;

}

.cart-shiping-update > a,

.cart-clear > button,

.cart-clear > a {

background-color: #f2f2f2;

border-radius: 3px;

color: #363f4d;

display: inline-block;

font-size: 14px;

font-weight: 500;

line-height: 1;

padding: 18px 63px 17px;

text-transform: uppercase;

}

.cart-shiping-update > a:hover,

.cart-clear > button:hover,

.cart-clear > a:hover {

background-color: #e02c2b;

color: #fff;

}

.cart-clear > button {

border: medium none;

cursor: pointer;

margin-right: 27px;

transition: all 0.3s ease 0s;

}

.title-wrap {

position: relative;

}

.section-bg-gray {

background-color: #f8f9f9;

position: relative;

z-index: 99;

}

h4.cart-bottom-title {

display: inline-block;

font-size: 18px;

font-weight: 500;

margin: 0;

padding-right: 18px;

}

.title-wrap::before {

background-color: #e3e1e1;

content: "";

height: 1px;

left: 0;

position: absolute;

top: 10px;

transition: all 0.4s ease 0s;

width: 100%;

z-index: 1;

}

.section-bg-gary-cart {

background-color: #f9f9f9;

position: relative;

z-index: 9;

}

.tax-wrapper > p {

margin: 0;

}

.tax-wrapper {

margin-top: 22px;

}

.tax-select-wrapper {

margin: 5px 0 0;

}

.tax-select label {

color: #242424;

font-size: 14px;

margin: 0 0 5px;

}

.tax-select select {

-moz-appearance: none;

-webkit-appearance: none;

background: #fff url("../img/icon-img/cart.png") no-repeat scroll right 18px center;

border: 1px solid #ebebeb;

box-shadow: none;

color: #242424;

font-size: 12px;

height: 40px;

padding: 0 50px 0 15px;

width: 100%;

cursor: pointer;

}

.tax-select {

margin: 0 0 26px;

}

.tax-select input {

background: #fff none repeat scroll 0 0;

border: 1px solid #ebebeb;

height: 40px;

}

button.cart-btn-2 {

background-color: #e02c2b;

border: medium none;

border-radius: 3px;

color: #fff;

cursor: pointer;

font-size: 14px;

font-weight: 500;

padding: 13px 42px 12px;

text-transform: uppercase;

transition: all 0.3s ease 0s;

}

button.cart-btn-2:hover {

background-color: #242424;

}

.discount-code {

margin: 21px 0 0;

}

.discount-code > p {

margin: 0 0 15px;

}

.discount-code input {

background: #fff;

border: 1px solid #ebebeb;

height: 40px;

margin-bottom: 30px;

padding-left: 10px;

}

.cart-tax,

.discount-code-wrapper {

background-color: #f9f9f9;

border: 1px solid #ebebeb;

border-radius: 5px;

padding: 45px 30px 50px;

}

.grand-totall {

background-color: #f9f9f9;

border: 1px solid #ebebeb;

border-radius: 5px;

padding: 45px 30px 50px;

}

.grand-totall > h5 {

font-size: 14px;

margin: 36px 0 27px;

}

.grand-totall > h5 span {

float: right;

}

.grand-totall > h5 span {

float: right;

font-size: 18px;

font-weight: 500;

}

.total-shipping > h5 {

font-size: 14px;

margin: 0;

}

.total-shipping {

border-bottom: 1px solid #ebebeb;

border-top: 1px solid #ebebeb;

margin: 0 0 27px;

padding: 28px 0;

}

.total-shipping > ul {

padding: 19px 0 0 0px;

}

.total-shipping ul li {

color: #242424;

list-style: outside none none;

margin: 0 0 6px;

}

.total-shipping ul li:last-child,

.register-us-2 li:last-child {

margin: 0 0 0px;

}

.total-shipping ul li span {

float: right;

}

.total-shipping ul li input {

background: #e9e9e9 none repeat scroll 0 0;

border: 1px solid #d7d7d7;

border-radius: 5px !important;

color: #626262;

cursor: pointer;

height: 13px;

margin-right: 10px;

padding: 0;

position: relative;

top: 2px;

width: 13px;

}

h4.grand-totall-title {

color: #e02c2b;

font-size: 20px;

font-weight: 500;

margin: 0 0 25px;

}

h4.grand-totall-title span {

float: right;

}

.grand-totall > a {

background-color: #e02c2b;

border-radius: 3px;

color: #fff;

display: block;

font-size: 14px;

font-weight: 500;

line-height: 1;

padding: 18px 10px 19px;

text-align: center;

text-transform: uppercase;

}

.grand-totall > a:hover {

background-color: #242424;

}

.product-wishlist-cart > a {

background-color: #e02c2b;

border-radius: 3px;

color: #fff;

font-size: 13px;

font-weight: 500;

line-height: 1;

padding: 7px 10px;

text-transform: uppercase;

}

.product-wishlist-cart > a:hover {

background-color: #242424;

}

/*breadcrumb div style */

body .breadcrumbdiv{

padding: 15px 0px;

background-color: #f8f9f9;

}

body .breadcrumbdiv nav{

margin-left: 20px;

}

/*regiser from*/

body .register .container .from {

position: relative;

}

body .register .container .from h3{

color: #e22104;

font-weight: 600;

margin-top: 40px;

margin-bottom: 20px;

font-family: 'Josefin Sans', sans-serif;

}

body .register .container .from .form-control{

font-size: 14px;

color: #999999;

padding-left: 20px;

border: 0;

height: 50px;

border-radius: 0;

border: 1px solid;

}

body .register .container .from #error{

margin-left: 10px;

color: red;

display: none;

transition: 0.3s ease;

}

body .register .container .from button{

background-color: #e02c2b;

border: medium none;

border-radius: 3px;

color: #fff;

cursor: pointer;

font-size: 14px;

font-weight: 500;

padding: 13px 42px 12px;

text-transform: uppercase;

transition: all 0.3s ease 0s;

}

body .register .container .from button:hover{

background-color: red;

}

body .register .container .from p a{

text-decoration: none;

font-family: "open sans",sans-serif;

}

/*login page*/

body .login .container .from #log_error{

color: #e22104;

display: none;

}

body .login .container .from h3{

color: #e22104;

font-weight: 600;

margin-top: 40px;

margin-bottom: 20px;

font-family: 'Josefin Sans', sans-serif;

}

body .login .container .from .btn{

background-color: #e02c2b;

border: medium none;

border-radius: 3px;

color: #fff;

cursor: pointer;

font-size: 14px;

font-weight: 500;

padding: 13px 42px 12px;

text-transform: uppercase;

transition: all 0.3s ease 0s;

margin-bottom: 30px;

}

body .login .container .from .btn:hover{

background-color: red;

}

Javascript

var slideIndex = 1;

showSlides(slideIndex);

function plusSlides(n) {

showSlides(slideIndex += n);

}

function currentSlide(n) {

showSlides(slideIndex = n);

}

function showSlides(n) {

var i;

var slides = document.getElementsByClassName("mySlides");

var dots = document.getElementsByClassName("dot");

if (n > slides.length) {slideIndex = 1}

if (n < 1) {slideIndex = slides.length}

for (i = 0; i < slides.length; i++) {

slides[i].style.display = "none";

}

for (i = 0; i < dots.length; i++) {

dots[i].className = dots[i].className.replace(" active", "");

}

slides[slideIndex-1].style.display = "block";

dots[slideIndex-1].className += " active";

}

//jquery slick

$('.responsive').slick({

dots: false,

infinite: true,

speed: 300,

slidesToShow: 3,

slidesToScroll: 3,

nextArrow:$('.next'),

prevArrow: $('.prev'),

responsive: [

{

breakpoint: 1024,

settings: {

slidesToShow: 3,

slidesToScroll: 3,

infinite: true,

dots: true

}

{

breakpoint: 600,

settings: {

slidesToShow: 1,

slidesToScroll: 2

}

{

breakpoint: 480,

settings: {

slidesToShow: 1,

slidesToScroll: 1

}

// You can unslick at a given breakpoint now by adding:

// settings: "unslick"

// instead of a settings object

]

});

$(document).ready(function(){

$(window).scroll(function(){

var scroll = $(window).scrollTop();

if (scroll > 300) {

$(".header").css("background" , "#7676ff");

$(".link").css("color" , "#fff");

$(".header").css("position" , "fixed");

$(".header").css("top" , "-70px");

$(".header").css("transform" , "translateY(70px)");

$(".header").css("z-index" , "1000");

$(".header").css("transition" , "all 0.9s ease");

$(".header").css("box-shadow" , "0px 3px 16px 0px rgb(0 0 0 / 10%)");

}

else{

if (screen.width>"790px") {

$(".header").css("background" , "none");

}

$(".header").css("background" , "#fff");

$(".header").css("position" , "relative");

$(".header").css("box-shadow" , "none");

$(".header").css("transform" , "none");

$(".header").css("top" , "0");

$(".link").css("color","#888");

}

})

function clicked() {

document.getElementById("span3").style.display="none";

var getbars = document.getElementById("bars").className;

if (getbars == "bars") {

document.getElementById("span1").style.transform = "rotate(45deg)";

document.getElementById("span1").style.marginBottom = "-2px";

document.getElementById("span2").style.transform = "rotate(-45deg)";

document.getElementById("nav").style.display = "block";

document.getElementById("bars").className = "barsclicked";

}else{

document.getElementById("span1").style.transform = "rotate(0deg)";

document.getElementById("span1").style.marginBottom = "";

document.getElementById("span2").style.transform = "rotate(0deg)"

document.getElementById("nav").style.display = "none";

document.getElementById("bars").className = "bars";

document.getElementById("span3").style.display="block";

}

এই ব্লগটি সন্ধান করুন

my personal codes

Resturent Template

Html

CSS

মন্তব্যসমূহ

একটি মন্তব্য পোস্ট করুন

এই ব্লগটি থেকে জনপ্রিয় পোস্টগুলি

React Js Cards (Props, Array, Mapping, Rendaring)

React JS - Hooks

React Js - Form Submit, Input