Skip to content

Instantly share code, notes, and snippets.

@ahmedmengal

ahmedmengal/code index.html

Created June 6, 2020 14:07
Show Gist options
  • Save ahmedmengal/37bdc23b83288c21f83a64adec451efb to your computer and use it in GitHub Desktop.
Save ahmedmengal/37bdc23b83288c21f83a64adec451efb to your computer and use it in GitHub Desktop.
Download ZIP
saylani assigment 4 completed
Raw
code index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Saylani assigment 4</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css.map" integrity="undefined" crossorigin="anonymous" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header" id="topheader">
<nav class="navbar navbar-expand-lg fixed-top">
<div class="container text-uppercase p-2">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand font-weight-bold text-white" href="#">learning</a>
</ul>
<div class="collapse navbar-collapse" id="navbarTogglerDemo03">
<ul class="navbar-nav ml-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#servicediv">service</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#footer-div">about</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contactid">contact</a>
</li>
</div>
</div>
</nav>
<section class="header section">
<img width="100%" height="100%" src="images\logo 5.jpg" alt="">
<div class="center-div">
<h1 class="font-weight-bold">DEVLOPEMENT</h1>
<P>AS SOON AS POSSIBLE WE WILL CREATE WORLD'S BEST WEBSITES</P>
<Div class="header-buttons">
<a href="#footer-div">ABOUT ME</a>
<a href="#contactid">CONTACT ME</a>
</Div>
</div>
</section>
</div>
<!-- header part end -->
<!-- Three extra div -->
<section class="header-extradiv">
<div class="container">
<div class="row">
<div class="extra-div col-lg-4 col-md-4 col-12">
<a href="#"><i class="fa-3x fa fa-desktop" aria-hidden="true"></i></a>
<h2>EASY TO USE</h2>
<P>Lorem ipsum dolor, sit amet consectetur adipisicing elit</P>
</div>
<div class="extra-div col-lg-4 col-md-4 col-12">
<a href="#"><i class="fa-3x fa fa-trophy" aria-hidden="true"></i></a>
<h2>AWESOME DESIGN</h2>
<P>Lorem ipsum dolor, sit amet consectetur adipisicing elit</P>
</div>
<div class="extra-div col-lg-4 col-md-4 col-12">
<a href="#"><i class="fa-3x fa fa-magic" aria-hidden="true"></i></a>
<h2>EASY TO COSTOMIZE</h2>
<P>Lorem ipsum dolor, sit amet consectetur adipisicing elit</P>
</div>
</div>
</div>
</section>
<!-- three extra div -->
<!-- offer section start -->
<section class="serviceoffers" id="servicediv">
<div class="continer headings text-center">
<h1"text-center">WHAT DO WE LEARN</h1>
<p class="text-center">Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
</div>
<div class="continer headings text-center">
<div class="container d-flex justify-content-around align-items-center ">
<div class="row">
<div class="col-lg-6 col-md-12 col-10 offset-1 offset-lg-0">
</div>
</div>
</div>
</div>
</div>
<div class="names my3">
<h1>html</h1>
<div class="progress w-75">
<div class="progress-bar progress-bar-striped progress-bar-animated" style="width:100%">100%</div>
</div>
</div>
<div class="names-my3">
<h1>css</h1>
<div class="progress w-75">
<div class="progress-bar progress-bar-striped progress-bar-animated bg-warning" style="width:70%">70%</div>
</div>
</div>
<div class="names-my3">
<h1>JAVASCRIP</h1>
<div class="progress w-75">
<div class="progress-bar progress-bar-striped progress-bar-animated bg-success" style="width:85%">80%</div>
</div>
</div>
<div class="names-my3">
<H1>REACT</H1>
<div class="progress w-75">
<div class="progress-bar progress-bar-striped progress-bar-animated bg-primary" style="width:75%">75%</div>
</div>
</div>
<div class="names-my3">
<H1>NODE.JS</H1>
<div class="progress w-75">
<div class="progress-bar progress-bar-striped progress-bar-animated bg-danger" style="width:80%">80%</div>
</div>
</div>
</div>
</div>
</Div>
</section>
<!-- offer section end -->
<!-- **************project done ends************* -->
<section class="project-work">
<div class="container headings text-center">
<p class="text-center font-weight-bold">DREAM WORK</p>
</div>
<Div class="container d-flex justify-content-around align-items-center text-center">
<div>
<h1 class="count"></h1>
<h1>WEB DEVLOPEMENT</h>
</div>
</section>
<section class="happyclients">
<div class="container headings text-center">
<h1 class="text-center font-weight-bold">
OUR happyclientS</h1>
<P class="text-capitalize pt-1">Our satissfaid customer says</P>
</div>
<div id="demo" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<!-- The slideshow -->
<div class="carousel-inner container offset-lg-4">
<div class="carousel-item active">
<div class="row">
<div class="col-lg-4 col-md-4 col-12 align-items-center">
<div class="box">
<a href="#">
<img width="100%" height="100%" src="images\logo 5.jpg" class="img-fluidi img-thumbnail"></a>
<p class="m-4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem aliquam molestiae dignissimos,
omnis tenetur.</p>
<h1>AHMED UR REHMAN</h1>
<br> <hr>
<H2>WEB DEVLOPER IN FUTURE</H2>
</div>
</div>
</div>
</section>
<br>
<br>
<!-- conatact us -->
<section class="contactus" id="contactid">
<div class="container headings text-center">
<h1 class="text-center font-weight-bold">contact us</h1>
<p class="text-capitalize pt-1">In future i will help my clients and every one as soon as they contact me</p>
</div>
</section>
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-8 col-10 offset-lg-2 offset-md-2 col-1">
<form action="/action page php">
<div class="form-group">
<input type="text" class="form-control" id="username" required autocomplete="off" placeholder="Enter Your Name">
</div>
<form action="/action page php">
<div class="form-group">
<input type="email" class="form-control" id="email" required autocomplete="off" placeholder="Enter Email">
</div>
<form action="/action page php">
<div class="form-group">
<input type="number" class="form-control" id="mobile" required autocomplete="off" Enter placeholder="Enter Mobile Number">
</div>
<div class="form-group">
<textarea name="form-control" id="comment" placeholder="Enter Your Message" cols="50" rows="4"></textarea>
</div>
<div d-flex justify-content-cener>
<button type="submit" class="btn btn-primary">submite</button>
</form>
</div>
</div>
</div>
</div>
<br>
<br>
<section class="newsletter" id="newsletter">
<div class="container headings text-center">
<h1 class="text-center font-weight-bold">SUBSCRIBE TO MY WORK</h1>
<br>
<Div class="container">
<div class="row">
<div class="col-lg-8 offset-lg-2 col-12">
<div class="input-group mb-3">
<input type="text" class="form-control news-input" placeholder="Your Email">
<div class="input-group-append">
<span class="input-group-text">SUBSCRIBE</span>
</div>
</div>
</div>
</div>
</Div>
</div>
</section>
<!-- footer starts -->
<footern class="footersection" id="footer-div">
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-6 col-12 footer-div text-center">
</div>
<h3>ABOUT AHMED UR REHMAN</h3>
<P class="good"> My name is ahmed ur rehman I thanks to saylani team
and mohummad ali mughal his hard working for youth of pakistan Now we have
seen world is going in a new era and we will learn more skills all technological scientist are working on artificial intalligance AI
because of that we will be getting more opportunities for work with you
</P>
</div>
</div>
<div class="row">
</div>
<div class="mt-5 text-center">
<p>Copy right 2020 all write reserved | This template is made with love by "Ahmed Ur Rehman"</p>
</div>
<div class="scrooltop flout-right">
<i class="fa fa-arrow-up" onclick="topfuntion()" id="mybtn"></i>
</div>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Counter-Up/1.0.0/jquery.counterup.min.js" integrity="sha256-JtQPj/3xub8oapVMaIijPNoM0DHoAtgh/gwFYuN5rik=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<SCript>
$('.count').counerup({
delay:10,
time:3000})
</SCript>
</body>
</html>
Raw
images
there is only one images for background sir whene you start my work on vs code so take care of that image
if image remove so copy other on and give it place with my codding thanks boss!
Raw
style.css codes
*{margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif;}
a{text-decoration: none;}
a:hover{
text-decoration: none;}
li{list-style: none;}
p{font-size: 0.9rem;
line-height: 1.6;
font-weight: 400;
color: #606060;
}
.header{
width: 100%;
height: 100 auto;
background-color: linear-gradient(rgba(1,168,255,0.3)), rgba(1,168,255,0.3);
background-repeat: no-repeat;
background-size: 100% 100%;
clip-path: polygon(100% 0%, 100% 77%, 50% 100%, 0 75%, 0 0);
position: relative;
}
.header::before{
content: "";
position: absolute;
top: 0%;
bottom: 0%;
left: 0%;
right: 0%;
opacity: .3;
z-index: -1;
background: linear-gradient(to right, #1e5799 0%,#3ccdbb 0%, #16c9f6 100%);
}
.navbar::before{
content: "";
position: absolute;
top: 0%;
bottom: 0%;
left: 0%;
right: 0%;
opacity: .3;
z-index: -1;
background: linear-gradient(to right, #1e5799 0%,#3ccdbb 0%, #16c9f6 100%);
}
.nav-item a{
color: #fff;
font-weight: bold;
}
.header section{
width: 100%;
height: inherit;
color: #fff;
text-align: center;
position: relative;
transform: translate(50%-50%);
}
.center-div{
width: 100%;
height: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
-ms-transform: translate(-50%,50%);
-webkit-transform: translate(-50%,-50%);
}
.header-buttons a{
border: 1px solid #fff;
border-radius: 100px;
margin: 0 5px;
padding: 12px 35px;
outline: none;
color: #fff;
font-size: 1rem;
font-weight: 400;
line-height: 1.4;
text-align: center;
}
.header-buttons a:hover{
color: #50d1c0;
background: #fff;
text-decoration: none;
box-shadow: 0 0 20px 0 rgba(0,0,0,0.3);
}
.center-div p{
font-size: 1.3rem;
padding: 10px 0 20px 0;
color: #fff;
}
.extra-div h2, .servicediv h2{
font-size: 0.9rem;
margin: 20px 0 15px 0;
font-weight: bold;
line-height: 1.1;
word-spacing: 4px;
}
.header-extradiv{
width: 100%;
height: auto;
margin: 100px 0;
text-align: center;
}
.extra-div{
background: #fff;
border: medium none;
padding: 50px !important;
border-radius: 3px;
transition: 0.3s;
}
.extra-div:hover{
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0);
transform: translate(-20px);
}
.serviceoffers{
background: #f7f7f9;
padding: 50px 0;
margin-bottom: 50px;
}
.headings{
margin-bottom: 50px;
}
.headings h1{
font-size: 1.5rem;
font-weight: 600;
text-transform: uppercase;
}
.names h1{
color: #2e2e2e;
font-size: 0.9rem;
text-transform: uppercase;
font-weight: bold;
}
.service-icons{
display: flex;
justify-content: center;
align-items: center;
}
.progress{
margin-bottom: 25px !important;
background: #606060;
}
i{
color: #2fccd0;
}
.project-work{
margin: 100px 0;
}
.project-work h1{
font-size: 2rem;
text-align: center;
}
.pricing{
width: 100%;
height: 100 auto;
padding: 50px;
position: relative;
}
.pricing:before{
content: "";
position: absolute;
top: 0%;
bottom: 0%;
left: 0%;
right: 0%;
z-index: -1;
background: linear-gradient(160deg#16c9f6 55%, #fff 0);
text-align: center;
}
.money{
font-size: 40px;
line-height: 1;
color: #606060;
}
.card{
transition: 0.4s ease;
}
.card-header{
font-size: 1.6rem;
font-weight: bold;
background: #fff !important;
padding: 25px 9 !important;
justify-content: center;
}
.card-body li{
margin: 10px 0;
}
.happyclients{
width: 100%;
height: 100 auto;
padding: 80px 0;
text-align: center !important;
}
.box{
text-align: center !important;
border: 1px solid rgba(0,0,0,0.2);
box-shadow: 0 5px 10px 0 rgba(0,0,0,0.3);
border-radius: 2px;
transition: 0.3s ease;
}
.box:hover{
background: #16c9f6;;
}
.box a{
position: relative;
}
.box a img{
width: 100%;
height: 100px;
border-radius: 50%;
margin-top: 20px;
text-align: center !important;
}
.box a:after{
content: "\f10d";
font-family: fontawesome;
width: 40px;
height: 40px;
position: absolute;
top: 120%;
left: 50%;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.box h1{
font-size: 13px;
font-size: 700;
color: #0000;
margin-bottom: 10px;
}
.box h2{
font-size: 30px;
font-weight: 400px;
color: #666666;
margin-bottom: 20px;
}
.contactus:before{
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: linear-gradient( 330deg #16c9f6 55%, #fff 0%) !important;
}
::placeholder{
font-size: 0.85rem;
}
.newsletter{
width: 100%;
height: auto;
margin: 80px auto;
}
.news-input{
border-radius: 100px 0px 0px 100px !important;
min-width: 150px;
min-width: 45px;
}
.good{
text-align: center !important;
color: #1e5799;
}
.footersection{
border: 100%;
text-justify: auto;
width: 100%;
height: 100 auto;
color: #1e5799;
background-color: #1e5799 !important;
}
#mybtn{
display: none;
position: fixed;
bottom: 20px;
right: 40px;
z-index: 99;
border: none;
color: #000000;
background: #00abff;
padding: 10px;
border-radius: 10px;
}
/* ***********media queries************** */
@media(max-width:768px){
.nav-item{text-align: center;}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment