Skip to content

Commit

Permalink
Add files via upload
Browse files Browse the repository at this point in the history 
LGM TASK 2(Lets Grow More)
This is a Task1 to make Simple Webpage using HTML,CSS.
  • Loading branch information
@Akuu-27
Akuu-27 authored Nov 3, 2021
1 parent cb188f2 commit 4cc4af4
Show file tree
Hide file tree
Showing 19 changed files with 930 additions and 0 deletions.
Binary file added aliza.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added blog1.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added blog2.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added blog3.jpeg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added celien.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added chris.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added footer.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
305 changes: 305 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,305 @@
<!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>ZIPPY</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/e3e47aed8e.js" crossorigin="anonymous"></script>
</head>
<body>

<div id="home">
<header>
<nav>
<div class="logo">ZIPPY</div>
<ul>
<li><a href="#home">HOME</a></li>
<li><a href="#project">PROJECTS</a></li>
<li><a href="#pricing">PRICING</a></li>
<li><a href="#team">TEAM</a></li>
<li><a href="#blog">BLOG</a></li>
<li><a href="#contact">CONTACT</a></li>
</ul>
</nav>
</header>
<div class="centered">
<h3 class="header-text-h1">One page promising to fill all your needs!</h3>
<p class="header-text-p">This is Photoshop's version of Lorem Ipsum, Proin gravida nibh vel velit auctor aliquet. </p>
<button type="button" class="btn"></i>LEARN MORE</button>
<button type="button" class="btn"></i>LEARN MORE</button>
</div>
</div>

<div id="welcome">
<div class="welcome-division">
<p class="welcome-title">Welcome to Zippy</p>
<div class="welcome-row">
<div class="feature-box">
<p class="welcome-para">This is Photoshop's version of lorem Ipsum.Proin gravida nibh vel velit auctor. Aenean sol-licitudin,lorem quis bibendum auctor.</p>
</div>
<div class="feature-box">
<img class="welcome-image" src="umbrella.png" alt="Umbrella">
</div>
</div>
<div class="container">
<div class="container-box">
<i class="fas fa-bell"></i><br>
<h5 class="container-title">LOREM IPSUM</h5><br>
<p class="container-para">Lorem ipsum dolor sit amet consectetur adipisicing elit.Mollitia nobis quod autem repellat consequuntur voluptatibus modi nulla eos.
</p><br>
<button type="button" class="btn"></i> LEARN MORE</button>
</div>
<div class="container-box">
<i class="fas fa-envelope"></i><br>
<h5 class="container-title">DOLOR SIT</h5><br>
<p class="container-para">Lorem ipsum dolor sit amet consectetur adipisicing elit.Mollitia nobis quod autem repellat consequuntur voluptatibus modi nulla eos.
</p><br>
<button type="button" class="btn"></i> LEARN MORE</button>
</div>
<div class="container-box">
<i class="fas fa-clipboard"></i><br>
<h5 class="container-title">CONSECTETUR</h5><br>
<p class="container-para">Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia nobis quod autem repellat consequuntur voluptatibus modi nulla eos.
</p><br>
<button type="button" class="btn"></i> LEARN MORE</button>
</div>
</div>
</div>
</div>

<br><hr class="line">

<div id="project">
<div class="project-division">
<p class="project-title">Projects</p>
<div class="project-row">
<div class="card" >
<img src="project1.png" class="card-image" alt="Project1" height="400px" width="370px">
<div class="card-body">
<h5 class="card-title">PROJECT NAME</h5>
<p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro praesentium est omnis quasi animi ab vero maxime? Libero, fuga praesentium.</p>
<button type="button" class="project-btn"> LAUNCH CASE STUDY</button>
</div>
</div>
<div class="card" >
<img src="project2.png" class="card-image" alt="Project2" height="400px" width="370px">
<div class="card-body">
<h5 class="card-title">PROJECT NAME</h5>
<p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro praesentium est omnis quasi animi ab vero maxime? Libero, fuga praesentium.</p>
<button type="button" class="project-btn"> LAUNCH CASE STUDY</button>
</div>
</div>
<div class="card" >
<img src="project3.png" class="card-image" alt="Project3" height="400px" width="370px">
<div class="card-body">
<h5 class="card-title">PROJECT NAME</h5>
<p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro praesentium est omnis quasi animi ab vero maxime? Libero, fuga praesentium.</p>
<button type="button" class="project-btn"> LAUNCH CASE STUDY</button>
</div>
</div>
<div class="card" >
<img src="project4.jpg" class="card-image" alt="Project4" height="400px" width="370px">
<div class="card-body">
<h5 class="card-title">PROJECT NAME</h5>
<p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro praesentium est omnis quasi animi ab vero maxime? Libero, fuga praesentium.</p>
<button type="button" class="project-btn"> LAUNCH CASE STUDY</button>
</div>
</div>
</div>
</div>
</div>

<div id="pricing">
<div class="pricing-division">
<p class="pricing-title">Pricing Table</p>
<div class="pricing">
<div class="pricing-box">
<h1 class="pricing-heading">STANDARD PLAN</h1><br>
<h5 class="pricing-text">FREE</h5><br>
<p class="pricing-para">
2GB Available <br>
15 max contacts <br>
30 Messages <br>
Disgusting Ads
</p><br>
<button type="button" class="btn"></i>BUY</button>
</div>
<hr class="vline">
<div class="pricing-box">
<h1 class="pricing-heading">BUSINESS PLAN</h1><br>
<h5 class="pricing-text">14$/MONTH</h5><br>
<p class="pricing-para">
10GB Available <br>
75 max contacts <br>
120 Messages <br>
Ads Free
</p><br>
<button type="button" class="btn"></i>BUY</button>
</div>
<hr class="vline">
<div class="pricing-box">
<h1 class="pricing-heading">PREMIUM PLAN</h1><br>
<h5 class="pricing-text">19$/MONTH</h5><br>
<p class="pricing-para">
20GB Available <br>
Unlimited contacts <br>
Unlimited Messages <br>
Ads Free
</p><br>
<button type="button" class="btn"></i>BUY</button>
</div>
</div>
</div>
</div>

<div id="videos">
<div class="video-division">
<p class="video-title">Video Projects</p>
<div class="card video-card">
<iframe width="900" height="500" src="video.mp4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
</div>

<div id="team">
<div class="team-division">
<p class="team-heading">Zippy Team</p>
<div class="team">
<div class="team-box">
<img src="sara.png" alt="Sara-Johnson" class="team-image"><br>
<h5 class="team-title">SARA JOHNSON</h5><br>
<p class="team-para">Creative Head</p><br>
</div>
<div class="team-box">
<img src="matt.png" alt="Matt-Alex" class="team-image"><br>
<h5 class="team-title">MATT ALEX</h5><br>
<p class="team-para">Art Director</p><br>
</div>
<div class="team-box">
<img src="chris.png" alt="Chris-Philips" class="team-image"><br>
<h5 class="team-title">CHRIS PHILIPS</h5><br>
<p class="team-para">Senior Designer</p><br>
</div>
</div>
<div class="team">
<div class="team-box">
<img src="jimmy.jpg" alt="Jimmy-Smith" class="team-image"><br>
<h5 class="team-title">JIMMY SMITH</h5><br>
<p class="team-para">Marketing Manager</p><br>
</div>
<div class="team-box">
<img src="aliza.png" alt="Aliza" class="team-image"><br>
<h5 class="team-title">ALIZA</h5><br>
<p class="team-para">SEO MONSTER</p><br>
</div>
<div class="team-box">
<img src="celien.jpg" alt="Celien-John" class="team-image"><br>
<h5 class="team-title">CELIEN JOHN</h5><br>
<p class="team-para">Senior Designer</p><br>
</div>
</div>
</div>
</div>
</div>

<div id="newsletter">
<div class="newsletter-division">
<p class="newsletter-heading">Newsletter Signup</p>
<div class="newsletter-box">
<input type="email" class="email" placeholder="[email protected]">
<button type="button" class="btn newsletter-btn" >SIGN UP</button>
</div>
</div>
</div>

<div id="blog">
<div class="blog-division">
<p class="blog-title">Blog</p>
<div class="blog">
<div class="blog-box">
<img src="blog1.jpg" alt="Blog1" width="150px" height="100px"><br>
<h1 class="blog-heading">LOREM IPSUM DOLOR SIT AMET</h1><br>
<h5 class="blog-text">15 Jan, 2015</h5><br>
<p class="blog-para">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellat delectus possimus reprehenderit facilis, eaque nisi.
</p><br>
<button type="button" class="btn"></i>READ MORE</button>
</div>
<div class="blog-box">
<img src="blog2.jpg" alt="Blog2" width="150px" height="100px"><br>
<h1 class="blog-heading">LOREM IPSUM DOLOR SIT AMET</h1><br>
<h5 class="blog-text">15 Jan, 2015</h5><br>
<p class="blog-para">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellat delectus possimus reprehenderit facilis, eaque nisi.
</p><br>
<button type="button" class="btn"></i>READ MORE</button>
</div>
<div class="blog-box">
<img src="blog3.jpeg" alt="Blog3" width="150px" height="100px"><br>
<h1 class="blog-heading">LOREM IPSUM DOLOR SIT AMET</h1><br>
<h5 class="blog-text">15 Jan, 2015</h5><br>
<p class="blog-para">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellat delectus possimus reprehenderit facilis, eaque nisi.
</p><br>
<button type="button" class="btn"></i>READ MORE</button>
</div>
</div>
</div>
</div>

<div id="contact">
<div class="contact-division">
<div class="map">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d14005.584199652538!2d77.11399785!3d28.6478578!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x390d03728716454d%3A0xb0541668d13b6501!2sRajouri%20Garden!5e0!3m2!1sen!2sin!4v1632247578150!5m2!1sen!2sin" width="100%" height="448" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
</div>
<div class="contact">
<h1 class="contact-title">Contact</h1>
<div class=contact-details>
<label class="contact-label">NAME</label><br>
<input type="text" class="form-control"><br>
<label class="contact-label">EMAIL ADDRESS</label><br>
<input type="email" class="form-control"><br>
<label class="contact-label">SUBJECT</label><br>
<input type="text" class="form-control"><br>
<label class="contact-label">MESSAGE</label><br>
<textarea class="form-control" cols="50" rows="6"></textarea><br><br>
<button type="button" class="btn contact-btn" >SEND</button>
</div>
</div>
</div>
</div>

<div id="footer">
<div class="footer-division">
<div class="footer">
<div class="footer-box">
<h1 class="footer-heading">OFFICE ADDRESS</h1><br>
<p class="footer-para">
Lorem ipsum dolor, 234 <br>
1200 Consectetur <br>
Aspernatur
</p><br>
</div>
<div class="footer-box">
<h1 class="footer-heading">FOLLOW US</h1><br>
<img src="images/footer.jpg" alt="Footer" width="120px" >
</div>
<div class="footer-box">
<h1 class="footer-heading">CONTACT US</h1><br>
<p class="footer-para">
+123 456 789 <br>
zippy@skype <br>
[email protected]
</p><br>
</div>
</div>
</div>
</div>

</body>
</html>
Binary file added jimmy.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added matt.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added mountain.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added newsletter.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added project1.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added project2.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added project3.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added project4.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added sara.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit 4cc4af4

Please sign in to comment.