Skip to content

Instantly share code, notes, and snippets.

@wpflames

wpflames/index.html

Created September 5, 2020 07:01
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save wpflames/9a1d02a17db2dff057b8d5ae57232781 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save wpflames/9a1d02a17db2dff057b8d5ae57232781 to your computer and use it in GitHub Desktop.
Download ZIP
Responsive Website with HTML / CSS
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Complete Responsive Website Design</title>
<link rel="stylesheet" href="assets/css/style.css">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;700;800&display=swap" rel="stylesheet">
</head>
<body>
<!-- HEADER --->
<header id="header">
<div class="logo">
<a href="">YOUR LOGO</a>
</div>
<nav>
<ul>
<li><a href="#home" onclick="toggle()">Home</a></li>
<li><a href="#about" onclick="toggle()">About</a></li>
<li><a href="#services" onclick="toggle()">Services</a></li>
<li><a href="#portfolio" onclick="toggle()">Portfolio</a></li>
<li><a href="#team" onclick="toggle()">Team</a></li>
<li><a href="#contact" onclick="toggle()">Contact</a></li>
</ul>
</nav>
<div class="toggle" onclick="toggle()"></div>
</header>
<main>
<!-- COVER --->
<section id="home" class="cover">
<div class="text">
<h2><span>Responsive</span> & <span>Clean</span> </h2>
<h3>Website with HTML and CSS</h3>
<a class="cta" href="#">View Services</a>
</div>
</section>
<!-- ABOUT --->
<section id="about" class="sec">
<div class="content">
<div>
<h2>Who We Are?</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Beatae consequuntur libero cum. Error, rem. Corporis maxime accusamus quo perferendis labore iste eaque natus quas saepe, tempore aut debitis dicta doloribus.</p>
<a href="#" class="btn">Our Story</a>
</div>
</div>
</section>
<!-- SERVICES --->
<section id="services" class="sec">
<div class="content">
<div>
<h2>What We Do?</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Beatae consequuntur libero cum. Error, rem. Corporis maxime accusamus quo perferendis labore iste eaque natus quas saepe, tempore aut debitis dicta doloribus.</p>
</div>
</div>
<div class="box-wrapper">
<div class="box">
<div class="iconBx">
<img src="images/icon1.png" alt="icon">
</div>
<div class="content">
<h3>Design</h3>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis nostrum autem magni laboriosam.</p>
</div>
</div>
<div class="box">
<div class="iconBx">
<img src="images/icon2.png" alt="icon">
</div>
<div class="content">
<h3>Development</h3>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis nostrum autem magni laboriosam.</p>
</div>
</div>
<div class="box">
<div class="iconBx">
<img src="images/icon3.png" alt="icon">
</div>
<div class="content">
<h3>Marketing</h3>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis nostrum autem magni laboriosam.</p>
</div>
</div>
</div>
</section>
<!-- STATS -->>
<section id="stat" class="sec">
<div class="content">
<div>
<h2>Our Achievements</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur nesciunt eius harum repellendus recusandae reprehenderit atque laborum, dicta id! Hic aut consequatur sed. Dicta beatae ratione possimus itaque asperiores exercitationem libero repellendus eligendi eos, corporis consequuntur error facilis iure harum?</p>
</div>
<div class="statsBx">
<div class="box">
<h3>1200+</h3>
<h4>Projects</h4>
</div>
<div class="box">
<h3>800+</h3>
<h4>Happy Clinets</h4>
</div>
<div class="box">
<h3>150+</h3>
<h4>Countries</h4>
</div>
<div class="box">
<h3>50+</h3>
<h4>Awards</h4>
</div>
</div>
</div>
</section>
<!-- PORTFOLIO --->
<section id="portfolio" class="sec">
<div class="content">
<div>
<h2>Recent Work</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Beatae consequuntur libero cum. Error, rem. Corporis maxime accusamus quo perferendis labore iste eaque natus quas saepe, tempore aut debitis dicta doloribus.</p>
</div>
<div class="workBx">
<div class="brand">
<a href="#"><h4>Brand Name</h4></a>
</div>
<div class="brand">
<a href="#"><h4>Brand Name</h4></a>
</div>
<div class="brand">
<a href="#"><h4>Brand Name</h4></a>
</div>
<div class="brand">
<a href="#"><h4>Brand Name</h4></a>
</div>
</div>
</div>
</section>
<!-- TEAM --->
<section id="team" class="sec">
<div class="content">
<div>
<h2>Meet Our Team</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Beatae consequuntur libero cum. Corporis maxime accusamus quo perferendis labore iste eaque natus.</p>
</div>
<div class="teamBx">
<div class="profile">
<div class="imgBx">
<img src="images/01.jpg" alt="">
</div>
<div class="details">
<h4>Melanie Crawford</h4>
<p>Copywriter</p>
</div>
</div>
<div class="profile">
<div class="imgBx">
<img src="images/02.jpg" alt="">
</div>
<div class="details">
<h4>Jeremy Greenwald</h4>
<p>UX Designer</p>
</div>
</div>
<div class="profile">
<div class="imgBx">
<img src="images/03.jpg" alt="">
</div>
<div class="details">
<h4>Steve Anderson</h4>
<p>Web Developer</p>
</div>
</div>
<div class="profile">
<div class="imgBx">
<img src="images/04.jpg" alt="">
</div>
<div class="details">
<h4>Jessica Turner</h4>
<p>Marketing Manager</p>
</div>
</div>
</div>
</div>
</section>
<!-- CONTACT --->
<section id="contact" class="sec">
<div class="content">
<div class="mxw800p">
<h3>Send Us A Message</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita, eum?</p>
</div>
<div class="contactForm">
<form action="">
<div class="row100">
<div class="inputBx50">
<input type="text" name="" placeholder="Full Name">
</div>
<div class="inputBx50">
<input type="text" name="" placeholder="Email Address">
</div>
</div>
<div class="row100">
<div class="inputBx100">
<textarea name="" id="" placeholder="Message"></textarea>
</div>
</div>
<div class="row100">
<div class="inputBx100">
<input type="submit" value="Send">
</div>
</div>
</form>
</div>
<div class="social">
<ul>
<li><a href="#"><img src="images/facebook.png"></a></li>
<li><a href="#"><img src="images/twitter.png"></a></li>
<li><a href="#"><img src="images/linkedin.png"></a></li>
</ul>
</div>
</div>
</section>
</main>
<footer>
<p class="copyright">Design & Develped by <a target="_blank" href="https://wpflames.com">WP Flames</a></p>
</footer>
<script src="assets/js/script.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment