Index

<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Complete Responsive Website Design Tutorial</title>


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


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

<header class="header">
<a href="#" class="logo"> <i class="fas fa-splotch"></i> design </a>
<nav class="navbar">
<a href="#home">home</a>
<a href="#services">services</a>
<a href="#about">about</a>
<a href="#features">features</a>
<a href="#pricing">pricing</a>
<a href="#reviews">reviews</a>
<a href="#faq">FAQ</a>
</nav>
<div id="menu-btn" class="fas fa-bars"></div>
<a href="#" class="btn">join us</a>
</header>


<section class="home" id="home">
<div class="image">
<img src="images/home-img.svg" alt="">
</div>
<div class="content">
<h3> <span class="line-down">creative</span> design & development agency
</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi
magnam id laborum consequuntur inventore aliquam perspiciatis explicabo eius iure
dignissimos.</p>
<a href="#" class="btn">get started</a>
</div>
</section>


<section class="services" id="services">
<div class="heading">
<span>our services</span>
<h1>what we provide?</h1>
</div>
<div class="box-container">
<div class="box">
<img src="images/icon-1.svg" alt="">
<h3>service name</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil,
corporis.</p>
</div>
<div class="box">
corporis.</p>
</div>
<div class="box">
corporis.</p>
</div>
<div class="box">
corporis.</p>
</div>
<div class="box">
corporis.</p>
</div>
<div class="box">
corporis.</p>
</div>
</div>
</section>


<section class="about" id="about">
<div class="image">
<img src="images/about-img.svg" alt="">
</div>
<h3>why you should <span class="line-down">choose us?</span></h3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Non facilis
dolore earum ex mollitia repudiandae, asperiores expedita. Ratione iusto rem labore
repudiandae ad odit, officiis nobis. Perferendis laudantium.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga numquam
nobis illo consequuntur omnis sapiente aliquid necessitatibus dolorem?</p>
<a href="#" class="btn">read more</a>
</div>
</section>


<section class="steps">
<span>how to get started</span>
<h1>with 3 simple steps</h1>
</div>
<div class="box">
<img src="images/step-1.svg" alt="">
<h3>join us</h3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eligendi,
ducimus.</p>
</div>
<div class="box">
<h3>cutomize design</h3>
ducimus.</p>
</div>
<div class="box">
<h3>earn money</h3>
ducimus.</p>
</div>
</div>
</section>


<section class="features" id="features">
<span>our features</span>
<h1>what makes us different?</h1>
</div>
<div class="box">
<div class="image">
<img src="images/feature-1.svg" alt="">
</div>
<h3>easy to get <span class="line-down">started!</span></h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iusto
nisi fugit saepe quisquam adipisci. Consectetur ipsum cumque beatae accusantium
similique mollitia commodi, atque laborum, id, eos illo recusandae!</p>
</div>
</div>
<div class="box">
<div class="image">
</div>
<h3>unique and <span class="line-down">creative</span> designs</h3>
</div>
</div>
<div class="box">
<div class="image">
</div>
<h3>experienced <span class="line-down">team</span> members</h3>
</div>
</div>
<div class="box">
<div class="image">
</div>
<h3>fully <span class="line-down">dynamic</span> and
Responsive</h3>
</div>
</div>
</div>
</section>


<section class="pricing" id="pricing">
<span>choose your plan</span>
<h1>we've got your covered</h1>
</div>
<div class="price-toggler">
<span class="month active">monthly</span>
<span class="year">yearly</span>
</div>
<div class="box">
<h3>basic</h3>
<div class="price">
<div class="month">free</div>
<div class="year"><span>$</span>29.<span>99</span></div>
</div>
<div class="list">
<p> <i class="fas fa-check"></i> 1 person </p>
<p> <i class="fas fa-check"></i> free hosting </p>
<p> <i class="fas fa-check"></i> 2 projects </p>
<p> <i class="fas fa-check"></i> maintenance </p>
<p> <i class="fas fa-check"></i> 24/7 support </p>
</div>
<a href="#" class="btn">choose plan</a>
</div>
<div class="box">
<h3>regular</h3>
<div class="price">
<div class="month"><span>$</span>29.<span>99</span></div>
</div>
<div class="list">
</div>
</div>
<div class="box">
<h3>regular</h3>
<div class="price">
<div class="month"><span>$</span>59.<span>99</span></div>
</div>
<div class="list">
</div>
</div>
</div>
</section>


<section class="reviews" id="reviews">
<span>client's reviews</span>
<h1>what say about us?</h1>
</div>
<div class="slide-container">
<div class="slide active">

<img src="images/pic-1.png" alt="">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima
libero ullam, facilis similique nam possimus obcaecati tempore sunt laboriosam
alias?</p>
<h3>john deo</h3>
<span>designer</span>
</div>
<div class="slide">
alias?</p>
<h3>john deo</h3>
</div>
<div class="slide">
alias?</p>
<h3>john deo</h3>
</div>
<div class="slide">
alias?</p>
<h3>john deo</h3>
</div>
</div>
<div class="controls">
<div class="fas fa-long-arrow-alt-left" onclick="next()"></div>
<div class="fas fa-long-arrow-alt-right" onclick="prev()"></div>
</div>
</section>


<section class="faq" id="faq">
<span>FAQ</span>
<h1>questions & answers</h1>
</div>
<div class="accordion-container">
<div class="accordion">
<div class="accordion-heading">
<h3>how to contact support team?</h3>
<i class="fas fa-angle-down"></i>
</div>
<p class="accordion-content">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam,
non labore omnis odit sapiente a mollitia quisquam ad culpa, dignissimos excepturi
unde pariatur voluptatem magni amet suscipit. Ea, unde error.
</p>
</div>
<h3>how does free trial works?</h3>
</div>
</p>
</div>
<h3>how long does it take to create a design?</h3>
</div>
</p>
</div>
<h3>are designs beginners friendly?</h3>
</div>
</p>
</div>
<h3>do I need to learn any special skills?</h3>
</div>
</p>
</div>
<h3>how do I manage my websites?</h3>
</div>
</p>
</div>
</div>
</section>


<section class="newsletter">
<h3><span class="line-down">sign up</span> and get started</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo veniam odit
repellat nostrum eius quaerat dolor, dolore possimus nihil optio?</p>
<form action="">
<input type="email" name="" placeholder="enter your email" id=""
class="email">
<input type="submit" value="sign up" class="btn">
</form>
<p>already have an account? <a href="#">sign in</a></p>
</div>
</section>

<section class="footer">
<div class="box">
<h3>quick links</h3>
<a href="#home">home</a>
<a href="#services">services</a>
<a href="#about">about</a>
<a href="#features">features</a>
<a href="#pricing">pricing</a>
<a href="#reviews">reviews</a>
<a href="#faq">FAQ</a>
</div>
<div class="box">
<h3>extra links</h3>
<a href="#">my account</a>
<a href="#">team members</a>
<a href="#">payments</a>
<a href="#">terms of use</a>
<a href="#">privacy policy</a>
</div>
<div class="box">
<h3>contact us</h3>
<a href="#">+123-456-7890</a>
<a href="#">+111-222-3333</a>
<a href="#">shaikhanas@gmail.com</a>
<a href="#">mumbai, india - 400104</a>
</div>
<div class="box">
<h3>follow us</h3>
<a href="#">facebook</a>
<a href="#">twitter</a>
<a href="#">instagram</a>
<a href="#">linkedin</a>
<a href="#">pinterest</a>
</div>
</div>
<div class="credit">created by <span> mr. web designer </span> | all rights
reserved! </div>
</section>



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

Index

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Index

Uploaded by

Copyright:

Available Formats

<!

<a href="#" class="logo"> <i class="fas fa-splotch"></i> design </a>

<div id="menu-btn" class="fas fa-bars"></div>

<a href="#" class="btn">join us</a>

<section class="home" id="home">

<section class="services" id="services">

<section class="about" id="about">

<section class="features" id="features">

<section class="pricing" id="pricing">

<section class="reviews" id="reviews">

<div class="slide active">

<section class="faq" id="faq">

You might also like