 |
| App |
HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<link href="https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<style>
*{
margin: 0;
padding: 0;
}
.text-left{
text-align: left;
}
.text-right{
text-align:right ;
}
.-center{
text-align: center;
}
.siddikurbhola-justify{
text-align: justify;
}
img{
max-width: 100%;
}
.clear::after{
content: '';
clear: both;
display: block;
}
.left{
float: left;
}
.right{
float: right;
}
a{
text-decoration: none;
}
body,h1,h2,h3.h4.h5.span,a{
font-family: 'Work Sans',sans-serif;
}
.mid-contant{
max-width: 1300px;
margin: auto;
}
.p-bg{
background-color: #f7f9ff;
}
/*header section*/
.header-section{
background: #fff;
border-bottom: 1px solid #ddd;
padding: 5px 0;
position: fixed;
left: 0;
top: 0;
z-index: 99;
width: 100%;
}
.header-section a{
color: #010101;
}
.header-logo{
width: 30%;
}
.logo img{
width: 45px;
float: left;
margin-right: 10px;
margin-top: 5px;
}
.logo span{
display: inline-block;
margin-top: 15px;
font-size: 25px;
font-weight: 500;
}
.header-menu{
width: 55%;
}
.primary-menu ul li{
display: inline-block;
padding: 0 15px;
line-height: 60px;
}
.primary-menu ul li a{
display: block;
font-size: 17px;
font-weight: 500;
line-height: 60px;
}
.primary-menu ul li{
position: relative;
}
.primary-menu ul li:hover > a {
color: #6278df;
}
/*dropDown menu*/
.primary-menu ul li{
position: relative;
}
.primary-menu ul li ul{
position: absolute;
left: 0;
top: 100%;
width: 250px;
background: #fff;
opacity: 0;
visibility: hidden;
transition: .4s;
transform: scaleY(0);
transform-origin: top center;
}
.primary-menu ul li:hover ul{
opacity: 1;
visibility: visible;
transform: scaleY(1);
}
.defult-btn {
color: #6278df;
padding: 10px 23px;
background: #fff;
display: inline-block;
font-size: 20px;
margin-top: 5px;
text-align: right;
font-weight: 600;
border-radius: 10px;
transition: 0.3s;
border: 2px solid #6278df ;
}
.defult-btn:hover{
background: #6278df;
color: #fff;
z-index: 8;
}
/*banner */
.banner-section{
background: url(https://i.ibb.co/cgzV6yX/1.jpg) no-repeat center center;
background-size: cover;
padding: 200px;
position: relative;
z-index: 8;
margin-top: 70px;
}
.banner-section::after{
content: '';
left: 0;
top: 0;
height: 100%;
width: 100%;
background: rgba(0, 0, 0, .4);
z-index: -1;
position: absolute;
}
.banner-contant h3{
font-size: 25px;
font-weight: 400;
color: #fff;
margin-bottom: 30px;
}
.banner-contant h2{
font-size: 50px;
font-weight: 700;
color: #fff;
margin-top: 15px;
margin-bottom: 40px;
}
.default-btn.banner{
color: #7d7d7d;
padding: 20px 50px;
background: #fff;
display: inline-block;
font-size: 20px;
font-weight: 600;
margin-left: 5px;
margin-right: 5px;
border-radius: 10px;
transition: .4s;
}
.default-btn {
color: #7d7d7d;
padding: 17px 113px;
background: #fff;
display: inline-block;
font-size: 18px;
font-weight: 600;
margin-left: 5px;
margin-right: 5px;
border-radius: 10px;
transition: .4s;
}
.default-btn:hover{
background: #6278df;
color: #fff;
}
.banner-bottom{
background: #f7f9ff;
padding: 100px 0;
margin-top: 0;
}
.video-left{
width: 48%;
}
.video-contant{
width: 48%;
}
.video-contant h1 {
font-size: 45px;
font-weight: 400;
margin-bottom: 30px;
}
.video-contant p{
font-size: 23px;
font-weight: 200;
line-height: 1.2em;
}
/*service section*/
.service-section{
padding: 100px o;
background: #ffffff;
}
.service-contant{
margin-top: 70px;
}
.service-contant h2 {
font-size: 52px;
font-weight: 700;
margin-bottom: 25px;
}
.service-contant p{
font-size: 25px;
font-weight: 200;
margin-bottom: 40px;
}
.service-item{
margin-top: 80px;
}
.service-box{
width: 32%;
box-shadow: 4px 4px 20px 0 rgba(0,0,0.1);
margin-right: 2%;
margin-bottom: 30px;
padding: 30px;
box-sizing: border-box;
}
.service-box:nth-child(3n+3){
margin-right: 0;
}
.s-icon {
font-size: 45px;
color: #6278df;
width: 51px;
height: 179px;
float: left;
margin-right: 25px;
}
.s-contant{
margin-top: 10px;
}
.s-contant h2{
font-size: 25px;
font-weight: 500;
margin-bottom: 30px;
}
.s-contant p{
font-size: 19px;
font-weight: 300;
color: #767676 ;
line-height: 1.6em;
}
.pricing-table-section{
background: #f7f9ff;
padding: 50px;
}
.service-contant h3{
font-size: 60px;
font-weight: 400;
margin: 30px 0;
}
/*pricing-table-section*/
.pricing-table-section{
padding: 50px;
background: #f7f9ff;
}
.pricing-table-section .service-contant p{
margin-bottom: 60px;
color: #767676;
}
.pricing-table-item{
width: 32%;
margin-right: 2%;
background: #fff;
box-shadow: 3px 4px 30px 0 rgba(98, 120, 223, .3);
border-radius: 5px 5px 0 0;
}
.pricing-table-item:hover .p-heading{
background: #6278df;
color: #ffffff;
border-radius: 5px 5px 0 0;
}
.pricing-table-item:nth-child(3){
margin-right: 0;
}
.p-heading{
padding: 30px;
border-bottom: 1px solid #ddd;
transition: .3s;
}
.p-heading h3 {
margin-bottom: 30px;
font-size: 23px;
font-weight: 500;
}
.p-heading h1{
font-size: 56px;
}
.p-heading h1 span{
font-size: 20px;
margin-bottom: 35px;
}
.p-heading h5 {
font-size: 20px;
font-weight: 500;
margin-bottom: 24px;
}
.p-heading p {
font-size: 22px;
font-weight: 300;
margin-bottom: 30px;
line-height: 1.5em;
}
.p-contant{
padding: 40px;
}
.p-contant ul {
list-style: none;
}
.p-contant ul span{
display: inline-block;
font-size: 35px;
width: 56px;
color: #6278df;
}
.p-contant ul li{
margin-bottom: 25px;
font-size: 22px;
color: #767676;
line-height: 1.8em;
}
.p-batton .default-btn{
margin-bottom: 30px;
box-shadow: 3px 4px 30px 0 rgba(98, 120, 223,.3);
}
.pricing-table-item:hover .p-batton .default-btn{
background: #6278df;
color: #ffffff;
}
/* team-section */
.team-section{
padding: 80px 0;
}
.section-title h2 {
font-size: 44px;
font-weight: 500;
margin-bottom: 60px;
}
.team{
width: 23.5%;
margin-right: 2%;
background: #ffffff;
box-shadow: 3px 4px 30px 0 rgba(98, 120, 223,.4);
}
.team:nth-child(4){
margin-right: 0;
}
.team img{
width: 100%;
border-radius: 5px 5px 0 0;
}
.team-bio{
padding: 30px;
}
.team-bio h2{
font-size: 25px;
font-weight: 500;
margin-bottom: 8px;
}
.team-bio p{
font-size: 20px;
color: #767676;
}
/*newslatter-section */
.newslatter-section{
padding: 100px 0;
}
.newslatter-titel h3{
font-size: 43px;
}
.default-input {
width: 350px;
padding: 20px 15px;
font-size: 20px;
border: 1px solid #e4e4e4;
border-radius: 10px;
box-shadow: 3px 4px 30px 0 rgba(98, 120, 223,.4);
transition: .4s;
box-sizing: border-box;
}
.default-input:focus{
box-shadow: 3px 4px 30px 0 rgba(98, 120, 223,.5);
border: 1px solid #6278df;
}
.submit-btn {
background: #6278df;
font-size: 23px;
color: #fff;
border: none;
padding: 20px 80px;
font-weight: 500;
border-radius: 10px;
cursor: pointer;
display: inline-block;
margin-left: 15px;
box-shadow: 3px 4px 30px 0 rgba(98, 120, 223,.2);
border: 2px solid transparent;
transition: .4s;
}
.submit-btn:hover{
box-shadow: 3px 4px 30px 0 rgba(98, 120, 223,.2);
background: #fff;
color: #6278df;
border: 2px solid #6278df;
}
/*blog section */
.blog-section{
padding: 100px 0;
}
.blog-titel{
padding: 60px 0;
}
.blog-post-item{
width: 48%;
box-shadow: 3px 4px 30px 0 rgba(98, 120, 223,.2);
}
.b-heading {
width: 50%;
}
.b-heading h2{
font-size: 45px;
font-weight: 500;
margin-top: 25px;
}
.b-contant{
width: 50%;
}
.blog-post-item img {
width: 300px;
float: left;
margin-right: 25px;
}
.bp-contant h3 {
font-size: 20px;
font-weight: 500;
margin: 27px 0;
}
.bp-contant p {
font-size: 23px;
color: #767676;
font-weight: 300;
text-align: justify;
margin-left: 25px;
margin-right: 15px;
}
.testimonial-section {
padding: 100px 0;
}
.fedback-titel {
margin-top: 0px;
}
.fedback-titel h3 {
margin-top: 5px;
font-size: 45px;
font-weight: 400;
margin-bottom: 80px;
}
.testimonial-items {
background: #f7f9ff;
}
.t-item{
width: 30%;
margin-right: 5%;
}
.t-item:last-child{
margin-right: 0
}
.t-contant {
padding: 50px 70px;
background: #fff;
box-shadow: 3px 4px 30px 0 rgba(98, 120, 223,.4);
box-sizing: border-box;
margin-bottom: 60px;
position: relative;
}
.t-contant::after {
content: "";
position: absolute;
bottom: -19px;
left: 0;
right: 0;
margin: auto;
display: inline-block;
width: 0;
height: 0;
border-style: solid;
border-width: 20px 20px 0 20px;
border-color: #ffffff transparent transparent transparent;
}
.t-contant p {
font-size: 20px;
color: #767676;
line-height: 1.8em;
position: relative;
font-weight: 300;
}
.t-contant p::before {
content: "\f10d";
font-family: FontAwesome;
font-size: 75px;
position: absolute;
top: -10px;
left: -18px;
opacity: 13%;
}
.t-user-img {
width: 285px;
margin: auto;
}
.t-user-img img {
border-radius: 50%;
width: 80px;
float: left;
margin-right: 20px;
}
.t-user-bio {
position: relative;
top: 13px;
}
.t-user-bio h2 {
font-size: 20px;
font-weight: 500;
margin-bottom: 10px;
}
.t-user-bio h4 {
font-size: 15px;
color: #767676;
font-weight: 500;
}
/* contact section */
.contact-left-map{
width: 48%;
}
.contact-right-form{
width: 48%;
}
.w50{
width: 48%;
}
.w100{
width: 100%;
}
.contact-right-form.right h2 {
font-size: 27px;
font-weight: 400;
margin-top: 45px;
margin-bottom: 26px;
}
.contact-right-form p {
font-size: 20px;
color: #767676;
margin-bottom: 54px;
}
input.default-input {
margin-bottom: 20px;
}
button.submit-btn.footer{
margin-left: 0;
padding: 13px 274px;
margin-top: 20px;
}
.footer-contant {
padding: 50px;
}
.footer-contant p {
font-size: 20px;
margin-top: 23px;
}
</style>
</head>
<body>
<div class="header-section clear">
<div class="mid-contant">
<div class="header-logo left">
<a class="logo" href="#"><img src="https://i.ibb.co/wN4Wb71/logo.png" alt="">
<span>STR Rayhan App</span></a>
</div>
<div class="header-menu left">
<div class="primary-menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Live Demo <i class="fa fa-caret-down" aria-hidden="true"></i>
</a>
<ul>
<li><a href="#">Time Planner App</a></li>
<li><a href="#">Health Tracker App</a></li>
</ul>
</li>
<li><a href="#">Demo Blocks <i class="fa fa-caret-down" aria-hidden="true"></i>
</a>
<ul>
<li><a href="#">Headers</a></li>
<li><a href="#">Pricing Table & Article</a></li>
<li><a href="#">Team & Testimonials</a></li>
<li><a href="#">Features</a></li>
<li><a href="#">Team & Testimonials</a></li>
<li><a href="#">Galery & Video</a></li>
<li><a href="#">Forms & Maps & Footers</a></li>
</ul>
</li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</div>
<div class="header-botton left">
<a class="defult-btn" href="#">Buy Now</a>
</div>
</div>
</div>
<div class="banner-section text-center">
<div class="mid-contant">
<div class="banner-contant">
<h3>Created to save your time</h3>
<h2>Time Planner App</h2>
<a class="default-btn banner" href="#"><i class="fa fa-android" aria-hidden="true"></i>
Google Play</a>
<a class="default-btn banner" href="#"><i class="fa fa-apple" aria-hidden="true"></i>
Apple Store</a>
</div>
</div>
</div>
<div class="banner-bottom clear">
<div class="mid-contant">
<div class="video-left left">
<iframe width="100%" height="341" src="https://www.youtube.com/embed/7MnP25BL-wI" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="video-contant right">
<h1>Watch a video on how to use our app</h1>
<p class="siddikurbhola-justify">It’s not just about recording employee hours. It’s about understanding employee availability. It’s about hitting project deadlines — while staying on budget. It’s knowing you’ll never have to update another Excel spreadsheet. It’s about making things easy. It’s giving your team the tools they need to do their jobs well. And the insights to work more effectively than ever before.</p>
</div>
</div>
</div>
<div class="service-section">
<div class="mid-contant">
<div class="service-contant text-center">
<h2>Learn more about our application
</h2>
<p>Track time without wasting a second
</p>
</div>
<div class="service-item clear">
<div class="service-box left">
<div class="s-icon">
<span><i class="fa fa-laptop" aria-hidden="true"></i></span>
</div>
<div class="s-contant">
<h2>Time Tracking</h2>
<p>Accurate and simple time tracking. Task-based estimation</p>
</div>
</div>
<div class="service-box left">
<div class="s-icon">
<span><i class="fa fa-external-link" aria-hidden="true"></i></span>
</div>
<div class="s-contant">
<h2>Resource Planning
</h2>
<p>Monitor team’s utilization across different projects </p>
</div>
</div>
<div class="service-box left">
<div class="s-icon">
<span><i class="fa fa-hdd-o" aria-hidden="true"></i></span>
</div>
<div class="s-contant">
<h2>Integrations</h2>
<p>Track time inside the most popular project management tools
</p>
</div>
</div>
<div class="service-box left">
<div class="s-icon">
<span><i class="fa fa-laptop" aria-hidden="true"></i></span>
</div>
<div class="s-contant">
<h2>Task Management
</h2>
<p>Create tasks, track time and update progress in one place
</p>
</div>
</div>
<div class="service-box left">
<div class="s-icon">
<span><i class="fa fa-external-link" aria-hidden="true"></i></span>
</div>
<div class="s-contant">
<h2>Reporting</h2>
<p>Highly flexible reports to analyze time the way you want
</p>
</div>
</div>
<div class="service-box left">
<div class="s-icon">
<span><i class="fa fa-hdd-o" aria-hidden="true"></i></span>
</div>
<div class="s-contant">
<h2>Invoicing</h2>
<p>Create invoices from time entries and send them to your clients
</p>
</div>
</div>
</div>
</div>
</div>
<div class="pricing-table-section">
<div class="mid-contant">
<div class="service-contant text-center">
<h3>Start using our app today </h3>
<p>Set of tools to seamlessly manage projects during their entire life cycle</p>
</div>
<div class="pricing-table clear">
<div class="pricing-table-item left">
<div class="p-heading">
<h3>Free Version</h3>
<h1>$ 0 <span>/ month</span></h1>
<h5>Who is this for?</h5>
<p>Free version for students and regular users</p>
</div>
<div class="p-contant">
<ul>
<li> <span><i class="fa fa-check" aria-hidden="true"></i></span> Time Tracking</li>
<li> <span><i class="fa fa-check" aria-hidden="true"></i></span> Resource Planning</li>
<li> <span><i class="fa fa-times" aria-hidden="true"></i></span> Integrations</li>
<li> <span><i class="fa fa-times" aria-hidden="true"></i></span> Task Management</li>
<li> <span><i class="fa fa-times" aria-hidden="true"></i></span> Reporting</li>
<li> <span><i class="fa fa-times" aria-hidden="true"></i></span> Invoicing</li>
</ul>
</div>
<div class="p-batton center">
<a href="#" class="default-btn pricing">Get Free Now</a>
</div>
</div>
<div class="pricing-table-item left">
<div class="p-heading">
<h3>User</h3>
<h1>$10 <span>/ month</span></h1>
<h5>Who is this for?</h5>
<p>The version for business people having a tight schedule</p>
</div>
<div class="p-contant">
<ul>
<li> <span><i class="fa fa-check" aria-hidden="true"></i></span> Time Tracking</li>
<li> <span><i class="fa fa-check" aria-hidden="true"></i></span> Resource Planning</li>
<li> <span><i class="fa fa-check" aria-hidden="true"></i></span> Integrations</li>
<li> <span><i class="fa fa-check" aria-hidden="true"></i></span> Task Management</li>
<li> <span><i class="fa fa-times" aria-hidden="true"></i></span> Reporting</li>
<li> <span><i class="fa fa-times" aria-hidden="true"></i></span> Invoicing</li>
</ul>
</div>
<div class="p-batton center">
<a href="#" class="default-btn">Get Acces Now</a>
</div>
</div>
<div class="pricing-table-item left">
<div class="p-heading">
<h3>Pro</h3>
<h1>$15 <span>/ month</span></h1>
<h5>Who is this for?</h5>
<p>Maximum version for large companies</p>
</div>
<div class="p-contant">
<ul>
<li> <span><i class="fa fa-check" aria-hidden="true"></i></span> Time Tracking</li>
<li> <span><i class="fa fa-check" aria-hidden="true"></i></span> Resource Planning</li>
<li> <span><i class="fa fa-check" aria-hidden="true"></i></span> Integrations</li>
<li> <span><i class="fa fa-check" aria-hidden="true"></i></span> Task Management</li>
<li> <span><i class="fa fa-check" aria-hidden="true"></i></span> Reporting</li>
<li> <span><i class="fa fa-check" aria-hidden="true"></i></span> Invoicing</li>
</ul>
</div>
<div class="p-batton center">
<a href="#" class="default-btn">Get Acces Now</a>
</div>
</div>
</div>
</div>
</div>
<div class="team-section">
<div class="mid-contant">
<div class="section-title text-center">
<h2>Our team is constantly trying for you</h2>
</div>
<div class="team-member clear">
<div class="team left">
<img src="https://i.ibb.co/7XcPq9G/E13-FACC4-11-E5-40-D4-A3-A8-61-C85-F389-C39.jpg" alt="">
<div class="team-bio">
<h2>Siddikur Rahman Tamim</h2>
<p>Programmer</p>
</div>
</div>
<div class="team left">
<img src="https://i.ibb.co/6ZSyk7x/4428-E47-B-64-DF-476-A-A5-B5-F7-EBD32-C8755.jpg" alt="">
<div class="team-bio">
<h2>STR Rayhan</h2>
<p>Designer</p>
</div>
</div>
<div class="team left">
<img src="https://i.ibb.co/tLCyxK5/1652598047711.jpg" alt="">
<div class="team-bio">
<h2>Rana</h2>
<p>Support</p>
</div>
</div>
<div class="team left">
<img src="https://i.ibb.co/zsfY82X/c65qwt.jpg" alt="">
<div class="team-bio">
<h2>Shuvo</h2>
<p>Manager</p>
</div>
</div>
</div>
</div>
</div>
<div class="newslatter-section p-bg">
<div class="mid-contant">
<div class="service-contant newslatter-titel text-center">
<p>Keep up to date with the latest updates</p>
<h3>Subscribe to our newsletter</h3>
<div class="neswletter-form">
<form action="#">
<input type="email" class="default-input" placeholder="E-mail Address">
<button class="submit-btn" type="submit">Subscribe</button>
</form>
</div>
</div>
</div>
</div>
<div class="blog-section">
<div class="mid-contant">
<div class="blog-titel clear">
<div class="b-heading left">
<h2>What's new?</h2>
</div>
<div class="b-contant right">
<p>Accurate employee time tracking software for reporting, invoicing and painless payroll. Trusted by over 2,000 businesses in more than 70 countries.</p>
</div>
</div>
<div class="blog-items clear">
<div class="blog-post-item left">
<img src="https://ibb.co/hKsvKDd" alt="">
<div class="bp-contant">
<h3>Reporting</h3>
<p>Highly flexible reports to analyze time the way you want</p>
</div>
</div>
<div class="blog-post-item right">
<img src="https://ibb.co/cYFzhd5" alt="">
<div class="bp-contant">
<h3>Invoicing</h3>
<p>Create invoices from time entries and send them to your clients</p>
</div>
</div>
</div>
</div>
</div>
<div class="testimonial-section p-bg">
<div class="mid-contant">
<div class="service-contant fedback-titel text-center">
<p>Feedback from our users</p>
<h3>What do users say about our application</h3>
</div>
<div class="testimonial-items clear">
<div class="t-item left">
<div class="t-contant">
<p class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis perspiciatis vero accusantium excepturi aperiam eius sit quis nobis</p>
</div>
<div class="t-user-img clear">
<img src="https://i.ibb.co/4WYXTZF/0-BDF8-B53-995-C-4713-A3-AF-4-ED190140-E06.jpg" alt="">
<div class="t-user-bio">
<h2>Naim</h2>
<h4>User</h4>
</div>
</div>
</div>
<div class="t-item left">
<div class="t-contant">
<p class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis perspiciatis vero accusantium excepturi aperiam eius sit quis nobis</p>
</div>
<div class="t-user-img clear">
<img src="https://i.ibb.co/dQByQGp/CB011-E97-3-E6-D-44-D6-859-A-49342-B71763-F.jpg" alt="">
<div class="t-user-bio">
<h2>Abdur Rahman</h2>
<h4>User</h4>
</div>
</div>
</div>
<div class="t-item left">
<div class="t-contant">
<p class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis perspiciatis vero accusantium excepturi aperiam eius sit quis nobis</p>
</div>
<div class="t-user-img clear">
<img src="https://i.ibb.co/jJM7kFK/4-AACCE5-D-4-B80-45-B8-8-E55-507-E63-C6-D280.jpg" alt="">
<div class="t-user-bio">
<h2>Shamim</h2>
<h4>User</h4>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="contact-section">
<div class="mid-contant">
<div class="contact-row clear">
<div class="contact-left-map left">
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d3691.7967625494257!2d90.8155676!3d22.2856873!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x30ab3d8535daa94f%3A0x80cb5645622055ef!2sJamadar%20Family%20House!5e0!3m2!1sbn!2sbd!4v1663691976644!5m2!1sbn!2sbd" width="100%" height="600" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
</div>
<div class="contact-right-form right">
<h2>Contact us</h2>
<p>Contact us if you have any questions and we will contact you. We appreciate user feedback and be sure to take into account your wishes.</p>
<div class="footer-contact-form clear">
<form action="#">
<input type="email" placeholder="E-mail Address" class="default-input w100">
<input type="text" placeholder="Name" class="default-input w50 left">
<input type="number" placeholder="Your Phone" class="default-input w50 right">
<textarea name="" id="" cols="10" rows="2" placeholder="Message" class="default-input w100"></textarea>
<button type="submit" class="submit-btn footer">Send</button>
</form>
</div>
</div>
</div>
<div class="footer-contant">
<p class="text-center">© Copyright 2022 - All Rights Reserved by <a href="fb.com/siddikurbhola">STR RAYHAN</a></p>
</div>
</div>
</div>
</body>
</html>