Shoyeb Portfolio website

Shoyeb Portfolio website

জুন ১৬, ২০২১

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"

integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<link rel="stylesheet" href="style/style.css">

<title>Sk Shoyeb - Protfolio</title>

</head>

<body>

<section class="home">

<nav class="primary-menu navbar navbar-expand-lg">

<div class="container">

<div class="col-auto col-lg-2 d-inline-flex">

<a href="/">

<h2>SHOYEB</h2>

</a>

</div>

<div class="col col-lg-10">

<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#header-nav"

aria-controls=header-nav" aria-expanded="false" aria-label="Toggle navigation">

<span class="navbar-toggler-icon"></span>

<span class="navbar-toggler-icon"></span>

<span class="navbar-toggler-icon"></span>

</button>

<div class="collapse navbar-collapse justify-content-right" id="header-nav">

<ul class="navbar-nav">

<li class="nav-item"><a href="/" class="nav-link">Home</a></li>

<li class="nav-item"><a href="#about" class="nav-link">About</a></li>

<li class="nav-item"><a href="#services" class="nav-link">Services</a></li>

<li class="nav-item"><a href="#resume" class="nav-link">Resume</a></li>

<li class="nav-item"><a href="#protfolio" class="nav-link">Protfolio</a></li>

<li class="nav-item"><a href="#contact" class="nav-link">Contact</a></li>

</ul>

</div>

</div>

</div>

</nav>

<div class="main">

<div class="container">

<div class="row">

<div class="col-lg-7">

<h1>Hi, I'm a <span class="job">freelancer</span></h1>

<h2>

<span class="type"></span>

</h2>

<p>based in Burdwan, West Bengal</p>

<a href="#protfolio" class="btn btn-dark rounded-0 mt-3 f1">View My Work</a>

<a class="btn btn-link text-dark mt-3 link" href="#contact">contact me <i class="fa fa-arrow-circle-o-down"

aria-hidden="true"></i>

</a>

</div>

<div class="col-lg-5">

<div class="image-round">

<img src="img/myimg.png" alt="my image">

</div>

</div>

</div>

</div>

</div>

</section>

<section id="about">

<div class="container">

<p class="intro-p"><span>About Me</span></p>

<h2 class="intro-h">Know Me More</h2>

<div class="row">

<div class="col-lg-8">

<h2>Hi, I'm <span class="name">Sk Shoyeb</span></h2>

<p>I am a web developer with the passion of web development. I enjoy developing simple, clean and slick

websites that provide real value to the end user. I also a self thought Web developer and worked in many

freelancing projects as Frontend Developer.</p>

</div>

<div class="col-lg-4">

<div class="feature-box">

<div class="box-icon">

<span class="exprience">1</span>

</div>

<h3>Years Of <span class="bold">Exprience</span></h3>

</div>

</div>

</div>

<div class="short row mt-4">

<div class="col-lg-3 col-6">

<p class="text-muted">Name:</p>

<p class="val">Sk Shoyeb</p>

</div>

<div class="col-lg-3 col-6">

<p class="text-muted">Email:</p>

<p class="val">shoyebjio3398@gmail.com</p>

</div>

<div class="col-lg-3 col-6">

<p class="text-muted">Date of Birth:</p>

<p class="val">16 December, 2001</p>

</div>

<div class="col-lg-3 col-6">

<p class="text-muted">From:</p>

<p class="val">Burdwan, West Bengal, India</p>

</div>

</div>

</div>

</section>

<section id="services">

<div class="container">

<p class="text-center"><span class="hff">What I Do?</span></p>

<h2>How I Can Help Your Next Project</h2>

<div class="row">

<div class="col-lg-4 col-md-6 col-12">

<div class="feature-icon">

<i class="fa fa-desktop"></i>

</div>

<h3>Web Design</h3>

<p>I can design websites with the frontend technologies. If you want to design websites I can help you.</p>

</div>

<div class="col-lg-4 col-md-6 col-12">

<div class="feature-icon">

<i class="fa fa-pencil-square"></i>

</div>

<h3>Web Development</h3>

<p>Develope exciting websites for your business and present youself in online.</p>

</div>

<div class="col-lg-4 col-md-6 col-12">

<div class="feature-icon">

<i class="fa fa-bullhorn"></i>

</div>

<h3>Digital Marketing</h3>

<p>I can write contents to promote your business and do SEO for your website.</p>

</div>

</div>

</div>

</section>

<section id="resume">

<div class="container">

<p class="text-center">

<span>Resume</span>

</p>

<h2>A Summary of My Resume</h2>

<div class="row">

<div class="col-lg-6">

<h2>My Education</h2>

<div class="resume-div">

<h3>Bachelor in Computer Application</h3>

<p class="des">Burdwan University / 2019-2022</p>

<p class="text-muted">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum

has been the dummy text.</p>

<hr>

<h3>High Secondary Examination</h3>

<p class="des">Burdwan CMS School / 2017-2019</p>

<p class="text-muted">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum

has been the dummy text.</p>

<hr>

<h3>WB Secondary Examination</h3>

<p class="des">Burdwan Raj School / 2017</p>

<p class="text-muted">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum

has been the dummy text.</p>

</div>

</div>

<div class="col-lg-6">

<h2>My Exprience</h2>

<div class="resume-div">

<h3>Front End Developer</h3>

<p class="des">Self Projects/ 2020-current</p>

<p class="text-muted">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum

has been the dummy text.</p>

<hr>

<h3>HTML Developer</h3>

<p class="des">Self Projects / 2020-current</p>

<p class="text-muted">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum

has been the dummy text.</p>

<hr>

<h3>Php Developer</h3>

<p class="des">Self Projects / 2021-current</p>

<p class="text-muted">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum

has been the dummy text.</p>

</div>

</div>

</div>

<h2 class="skills">My Skills</h2>

<div class="row range">

<div class="col-lg-6">

<p>Web Development<span class="meter">85%</span></p>

<div class="bar">

<div class="fill web"></div>

</div>

<p>HTML5<span class="meter">95%</span></p>

<div class="bar">

<div class="fill html"></div>

</div>

<p>CSS<span class="meter">88%</span></p>

<div class="bar">

<div class="fill css"></div>

</div>

</div>

<div class="col-lg-6">

<p>JavaScript<span class="meter">75%</span></p>

<div class="bar">

<div class="fill js"></div>

</div>

<p>Bootstrap<span class="meter">90%</span></p>

<div class="bar">

<div class="fill bs"></div>

</div>

<p>PHP / MYSQL<span class="meter">57%</span></p>

<div class="bar">

<div class="fill php"></div>

</div>

</div>

</div>

<p class="text-center mt-5 download">

<a href="https://drive.google.com/file/d/1V5EpGtL5GEb2dQYvZr10MbieyXFAONW8/view?usp=sharing" class="btn btn-outline-dark rounded-0">Download CV</a>

</p>

</div>

</section>

<section id="protfolio">

<div class="container">

<p class="text-center"><span>Protfolio</span></p>

<h2>Some of My Most Recent Projects</h2>

<div class="row">

<div class="col-lg-6">

<div class="resume-div">

<h3><a href="http://thefactory.c1.biz/">The Factory Template Front End Design</a></h3>

<p class="des">Personal Project /2020</p>

<p class="text-muted">This project has been created using HTML, CSS, JS and Bootstrap. This is a personal

project.</p>

<hr>

<h3><a href="http://myfoodorder.c1.biz/">Food Ordering Website Template Design</a></h3>

<p class="des">Self Project / 2021</p>

<p class="text-muted">This is a food ordering website frontend project full responsive using HTML, CSS, JS,

Bootstrap.</p>

</div>

</div>

<div class="col-lg-6">

<div class="resume-div">

<h3><a href="http://flyodark.c1.biz/">Flyo Dark Theme Front End Design</a></h3>

<p class="des">Self Project / 2020</p>

<p class="text-muted">This is a simple flyo Dark template full responsive using HTML, CSs, JS, Bootstrap.

</p>

<hr>

<h3><a href="http://sendme.c1.biz/login.php">Anonymous Message Prank Web Application</a></h3>

<p class="des">Friend's Project / 2021</p>

<p class="text-muted">This is a php and mysql based project developed from scratch by me which send

anonymous messages.</p>

</div>

</div>

</div>

</div>

</section>

<section id="hire">

<div class="opacity"></div>

<div class="bg"></div>

<div class="contain">

<div class="container">

<h2>Interested in working with me?</h2>

<p class="text-center">

<a href="#contact" class="btn btn-primary rounded-0">Hire Me!</a>

</p>

</div>

</div>

</section>

<section id="contact">

<div class="container">

<div class="row">

<div class="col-lg-6 info">

<h2>Let's get in touch</h2>

<p class="add">I enjoy discussing new projects and design challenges. Please share as much info, as possible

so we can get the most out of our first catch-up.</p>

<h3>Living In:</h3>

<p class="add">Puratanchwak, Burdwan, West Bengal, India, Pin-713102</p>

<h3>Call:</h3>

<p class="add">+919749220398</p>

<ul>

<li><a href=""><i class="fa fa-facebook"></i></a></li>

<li><a href=""><i class="fa fa-instagram"></i></a></li>

<li><a href=""><i class="fa fa-github"></i></a></li>

<li><a href=""><i class="fa fa-linkedin"></i></a></li>

</ul>

</div>

<div class="col-lg-6">

<h2>Estimate Your Project</h2>

<form class="form" method="POST">

<div class="form-group mb-4">

<label for="name">What is Your Name</label>

<input type="text" class="form-control" name="name" required>

</div>

<div class="form-group mb-4">

<label for="name">Your Email Address</label>

<input type="email" class="form-control" name="email" required>

</div>

<div class="form-group mb-4">

<label for="name">How Can I Help You?</label>

<textarea name="msg" class="form-control" id="msg" rows="4"></textarea>

</div>

<p class="button">

<button type="submit" class="btn btn-dark rounded-0">Send Me</button>

</p>

</form>

</div>

</div>

</div>

</section>

<footer id="footer">

<div class="container">

<div class="row">

<div class="col-lg-6">

<p class="text-left">Copyright 2021 <a href="#">Shoyeb</a>. All Rights Reserved.</p>

</div>

<div class="col-lg-6">

<p class="text-right">Developed By <a href="#">Sk Shoyeb</a></p>

</div>

</div>

</div>

</footer>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"

integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4"

crossorigin="anonymous"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script src="typed.min.js"></script>

<script src="js/script.js"></script>

</body>

</html>

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');

*{

margin: 0;

padding: 0;

box-sizing: border-box;

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

}

a{

text-decoration: none;

}

body .home .navbar .container .col-auto a h2{

font-weight: 700;

font-size: 34px;

color: #000;

margin-top: 8px;

}

body .home .navbar .container .col-lg-10 .collapse .nav-item{

margin-left: 2px;

}

body .home .navbar .container .col-lg-10 .collapse .nav-item a{

padding: 0px 0.86rem;

color: #252b33;

font-weight: 600;

text-transform: uppercase;

position: relative;

}

body .home .navbar .container .col-lg-10 #header-nav{

float: right;

}

body .home .navbar .container .col-lg-10 .navbar-toggler{

position: relative;

width: 25px;

height: 30px;

display: none;

margin-left: auto;

border: none;

}

body .home .navbar .container .col-lg-10 .navbar-toggler:enabled{

box-shadow: none;

}

body .home .navbar .container .col-lg-10 .navbar-toggler span{

position: absolute;

display: none;

width: 100%;

background-color: #3c3636;

height: 2px;

opacity: 1;

left:0;

}

body .home .navbar .container .col-lg-10 .navbar-toggler span:first-child{

top: 7px;

}

body .home .navbar .container .col-lg-10 .navbar-toggler span:nth-child(2){

top: 14px;

}

body .home .navbar .container .col-lg-10 .navbar-toggler span:last-child{

top: 21px;

}

body .home .navbar .container .col-lg-10 .collapse .nav-item a:hover{

color: #f5df4e;

}

body .main{

width: 100%;

min-height: calc(100vh - 73px);

background-color: #f5df4e;

}

body .main .container .col-lg-7 h1{

font-size: 3rem;

font-weight: 300;

text-transform: uppercase;

margin-top: 98px;

}

body .main .container .col-lg-7 h2{

font-size: 6.5rem;

font-weight: 600;

line-height: 1.3;

text-transform: uppercase;

}

body .main .container .col-lg-7 p{

font-size: 1.3124rem;

line-height: 1.8;

}

body .main .container .col-lg-7 .btn{

padding: 0.8rem 2.6rem;

font-weight: 500;

border: 2px;

transition: 0.3s;

text-decoration: none;

}

body .main .container .col-lg-7 .link:hover{

text-decoration: underline;

}

body .main .container .col-lg-7 .f1:hover{

box-shadow: 0px 5px 15px rgb(0 0 0 / 15%);

}

body .main .container .col-lg-7 .btn i{

font-size: 20px !important;

margin-left: 7px;

}

body .main .container .col-lg-5 .image-round{

border-radius: 50rem;

background-color: #f8f9fa;

padding: 1rem;

margin-top: 2rem;

}

body .main .container .col-lg-5 .image-round img{

width: 100%;

height: auto;

overflow: hidden;

border-radius: 50rem;

}

@media (max-width:992px) {

body .main .container .col-lg-7{

order: 1;

}

body .main .container .col-lg-5 .image-round{

width: 60%;

margin: auto;

margin-top: 2rem;

}

body .main .container .col-lg-7{

text-align: center;

}

body .main .container .col-lg-7 h1{

font-size: calc(1.425rem + 2.1vw);

}

body .main .container .col-lg-7 h2{

font-size: calc(1.775rem + 6.3vw);

}

body .main .container .col-lg-7 .btn:last-child{

padding-bottom: 30px;

}

body .home .navbar .container .col #header-nav{

width: 70%;

position: absolute;

top: 99%;

left: 0px;

right: 0px;

margin: auto;

background: rgb(255, 255, 255);

}

body .home .navbar .container .col #header-nav ul li{

margin-left: 2px;

border-bottom: 1px solid #eee;

padding: 10px 0px;

}

body .home .navbar .container .col-lg-10 .navbar-toggler span{

display: block;

}

body .home .navbar .container .col-lg-10 .navbar-toggler{

display: block;

}

}

/*home section ends*/

/*about section starts*/

body #about{

width: 100%;

height: auto;

}

body #about .container .intro-p{

text-align: center;

margin-bottom: 0.5rem;

line-height: 1.8rem;

margin-top: 100px;

}

body #about .container .intro-p span{

background-color: #f5df4e;

padding: 0 10px;

}

body #about .container .intro-h {

text-align: center;

font-weight: 600;

font-size: 2.50rem;

margin-bottom: 3rem;

}

body #about .container .row .col-lg-8 h2{

font-size: 2rem;

font-weight: 400;

margin-bottom: 1rem;

}

body #about .container .row .col-lg-8 h2 .name{

font-weight: 600;

border-bottom: 3px solid #f5df4e;

}

body #about .container .row .col-lg-8 p{

line-height: 1.8;

font-size: 1.32rem;

margin-bottom: 1rem;

}

body #about .container .row .col-lg-4 .feature-box .box-icon{

width: 120px;

height: 120px;

background-color: #f5df4e;

border-radius: 50rem;

margin: auto;

}

body #about .container .row .col-lg-4 .feature-box .box-icon span{

font-size: 7rem;

font-weight: 600;

width: 40px;

margin-left: 34px;

}

body #about .container .row .col-lg-4 .feature-box h3{

text-align: center;

font-size: 1.75rem;

margin-bottom: 10px;

font-weight: 500;

margin-top: 18px;

}

body #about .container .row .col-lg-4 .feature-box h3 .bold{

font-weight: 700;

}

body #about .container .short .text-muted{

font-weight: 500;

}

body #about .container .short .val{

font-size: 1.125rem;

font-weight: 600;

color: #343a40;

}

@media (max-width:992px) {

body #about .container .row .col-lg-8 h2 {

text-align: center;

}

body #about .container .row .col-lg-8 p{

text-align: center;

}

body #about .container .row{

overflow-y: hidden;

}

}

/*about ends */

/*services starts*/

body #services{

width: 100%;

height: auto;

background-color: #f8f9fa;

margin-top: 170px;

}

body #services .container .text-center {

padding-top: 124px;

}

body #services .container p span{

background-color: #f5df4e;

padding: 0 10px;

}

body #services .container h2{

text-align: center;

font-weight: 600;

font-size: 2.50rem;

margin-bottom: 3rem;

}

body #services .container .row{

padding-bottom: 150px;

}

body #services .container .row .col-lg-4 .feature-icon{

max-width: 55px;

height: auto;

margin: auto;

margin-bottom: 1rem;

}

body #services .container .row .col-lg-4 .feature-icon i{

font-size: 3rem;

color: #f5df4e;

font-weight: 800;

}

body #services .container .row .col-lg-4 h3{

text-align: center;

font-size: 1.50rem;

font-weight: 600;

margin-bottom: 1rem;

}

body #services .container .row .col-lg-4 p{

line-height: 1.8;

color: #6c757d;

text-align: center;

}

@media (max-width:992px){

body #services .container .row{

padding-top: 45px;

}

body #services .container .row .col-12{

margin-top: 2rem;

}

}

/*services ends*/

/*resume starts*/

body #resume{

width: 100%;

height: auto;

}

body #resume .container .text-center{

padding-top: 124px;

}

body #resume .container p span{

background-color: #f5df4e;

padding: 0 10px;

}

body #resume .container h2{

text-align: center;

font-weight: 600;

font-size: 2.50rem;

margin-bottom: 3rem;

}

body #resume .container .row .col-lg-6 h2{

font-size: 1.75rem;

margin-bottom: 2.5rem !important;

font-weight: 600;

text-align: left !important;

}

body #resume .container .row .col-lg-6 .resume-div{

padding-left: 2rem;

border-left: 2px solid #f5df4e;

}

body #resume .container .row .col-lg-6 .resume-div h3{

font-size: 1.31rem;

margin-bottom: 0.5rem;

line-height: 1.2;

font-weight: 500;

}

body #resume .container .row .col-lg-6 .resume-div .des{

margin-bottom: 0.5rem;

}

body #resume .container .row .col-lg-6 .resume-div .text-muted{

margin-bottom: 1rem;

line-height: 1.8;

}

body #resume .container .row .col-lg-6 .resume-div hr{

margin-top: 1.5rem;

margin-bottom: 1.5rem;

}

body #resume .container .skills{

font-size: 1.75rem;

margin-bottom: 1.5rem !important;

font-weight: 600;

text-align: left !important;

margin-top: 3rem;

}

body #resume .container .range .col-lg-6 p{

font-weight: 500;

margin-bottom: 0.5rem;

}

body #resume .container .range .col-lg-6 p .meter{

float: right;

background: none;

padding: 0;

}

body #resume .container .range .col-lg-6 .bar{

height: 0.5rem;

margin-bottom: 1.5rem;

overflow: hidden;

background: #e9ecef;

border-radius: 0.25rem;

}

body #resume .container .range .col-lg-6 .bar .fill{

background-color: #f5df4e;

height: 100%;

}

body #resume .container .range .col-lg-6 .bar .web{

width: 85%;

}

body #resume .container .range .col-lg-6 .bar .html{

width: 95%;

}

body #resume .container .range .col-lg-6 .bar .css{

width: 88%;

}

body #resume .container .range .col-lg-6 .bar .js{

width: 75%;

}

body #resume .container .range .col-lg-6 .bar .bs{

width: 90%;

}

body #resume .container .range .col-lg-6 .bar .php{

width: 57%;

}

body #resume .container .download{

padding-top: 0 !important;

}

body #resume .container .download a{

padding: 0.8rem 2.6rem;

font-weight: 500;

}

/*resume ends*/

/*protfolio starts*/

body #protfolio{

width: 100%;

height: auto;

margin-top: 124px;

background-color: #f8f9fa;

}

body #protfolio .container .text-center{

padding-top: 124px;

}

body #protfolio .container .text-center span{

background-color: #f5df4e;

padding: 0 10px;

}

body #protfolio .container h2{

text-align: center;

font-weight: 600;

font-size: 2.50rem;

margin-bottom: 3rem;

}

body #protfolio .container .row{

padding-bottom: 70px;

}

body #protfolio .container .row .col-lg-6 .resume-div{

padding-left: 2rem;

border-left: 2px solid #f5df4e;

}

body #protfolio .container .row .col-lg-6 .resume-div h3{

font-size: 1.31rem;

margin-bottom: 0.5rem;

line-height: 1.2;

font-weight: 500;

}

body #protfolio .container .row .col-lg-6 .resume-div .des{

margin-bottom: 0.5rem;

}

body #protfolio .container .row .col-lg-6 .resume-div .text-muted{

margin-bottom: 1rem;

line-height: 1.8;

}

body #protfolio .container .row .col-lg-6 .resume-div hr{

margin-top: 1.5rem;

margin-bottom: 1.5rem;

}

/*protfolio ends*/

/*hire me starts*/

body #hire{

width: 100%;

height: auto;

position: relative;

}

body #hire .opacity{

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

z-index: 1;

background-color: #111418;

opacity: 0.8;

}

body #hire .bg{

background-image: url("../img/bg.jpg");

background-size: cover;

background-repeat: no-repeat;

background-attachment: fixed;

background-position: center;

z-index: 0;

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

}

body #hire .contain{

width: 100%;

height: 100%;

position: relative;

background: transparent;

z-index: 2;

}

body #hire .contain .container h2{

font-size: 2.50rem;

color: #fff;

font-weight: 600;

padding-top: 100px;

margin-bottom: 3rem;

text-align: center;

}

body #hire .contain .container .btn-primary{

background-color: #f5df4e!important;

border-color: #f5df4e !important;

color: #212529;

font-weight: 500;

padding: 0.8rem 2rem;

text-align: center !important;

}

body #hire .contain .container p{

padding-bottom: 100px;

margin-bottom: 0 !important;

}

/*hire me ends */

/*contact starts*/

body #contact{

width: 100%;

height: auto;

background: #f5df4e;

}

body #contact .container .row .col-lg-6 h2{

padding-top: 100px;

font-weight: 600;

font-size: 2.50rem;

margin-bottom: 5rem;

}

body #contact .container .row .col-lg-6 p{

font-size: 1.31rem;

margin-bottom: 3rem;

line-height: 1.8;

}

body #contact .container .row .col-lg-6 h3{

font-weight: 600;

font-size: 21px;

margin-bottom: 0.5rem;

}

body #contact .container .row .col-lg-6 .add{

font-size: 1.125rem !important;

margin-bottom: 1rem;

}

body #contact .container .row .col-lg-6 ul{

margin-top: 3rem;

padding-left: 0 !important;

list-style-type: none;

}

body #contact .container .row .col-lg-6 ul li{

display: inline;

margin: 0px 6px 4px;

}

body #contact .container .row .col-lg-6 ul li a{

width: 34px;

height: 34px;

line-height: 34px;

font-size: 26px;

color: #4d555a;

}

body #contact .form .form-group .form-control{

background-color: transparent;

border: none;

border-bottom: 2px solid rgba(0, 0, 0, 0.12);

border-radius: 0px;

padding-left: 0px;

color: black;

font-size: 1.25rem;

}

body #contact .form .form-group .form-control:enabled{

box-shadow: none;

}

body #contact .form .button .btn{

padding: 0.8rem 2rem;

font-weight: 500;

}

@media (max-width:992px) {

body #contact .container .row .info{

text-align: center;

}

body #contact .container .row .col-lg-6 h2{

text-align: center;

}

body #contact .container .row .col-lg-6 .button{

text-align: center;

}

}

/*contact section ends*/

/*footer starts*/

body #footer{

background-color: #111418;

width: 100%;

height: auto;

}

body #footer p{

color: #fff;

font-weight: 400;

}

body #footer p a{

color: #f5df4e;

font-weight: 500;

transition: all 0.3s ease;

}

body #footer p a:hover{

text-decoration: underline;

}

body #footer .row{

padding-top: 56px;

padding-bottom: 49px;

}

body #footer .text-right{

text-align: right;

}

@media (max-width:992px) {

body #footer p{

text-align: center !important;

}

}

var typed = new Typed('.type', {

// Waits 1000ms after typing "First"

strings: ['Shoyeb','Developer', 'Blogger', 'Student', 'YouTuber'],

loop: true,

typeSpeed: 100,

backSpeed: 50,

backDelay: 1500,

});

$(document).ready(function(){

$(window).scroll(function(){

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

if (scroll > 300) {

$(".navbar").css("width" , "100%");

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

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

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

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

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

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

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

}

if (scroll < 300) {

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

$(".navbar").css("background" , "transparent");

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

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

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

}

})

})

মন্তব্যসমূহ