Skip to content

Simple website #359

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Simple website #359

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions Simple HTML CSS website/.vscode/settings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"liveServer.settings.port": 5501
}
Binary file added Simple HTML CSS website/cle.jpeg
View file
Open in desktop
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 Simple HTML CSS website/hbj.jfif
View file
Open in desktop
Binary file not shown.
Binary file added Simple HTML CSS website/image (4).jpeg
View file
Open in desktop
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 Simple HTML CSS website/image.jpeg
View file
Open in desktop
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 Simple HTML CSS website/images (1).jfif
View file
Open in desktop
Binary file not shown.
Binary file added Simple HTML CSS website/images.jfif
View file
Open in desktop
Binary file not shown.
194 changes: 194 additions & 0 deletions Simple HTML CSS website/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,194 @@
<!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>Demo</title>
<link rel="stylesheet" text="text/css" href="style.css">
<link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

</head>
<body>

<!--first page-->
<header>
<!--navbar-->
<nav>
<div class="logo">Zippy</div>

<div class="menu">
<a href="#">Home</a>
<a href="#aboutUs">About</a>
<a href="#projects">Projects</a>
<a href="#contact">Contact</a>
</div>
</nav>

<!--Text inside first page-->
<section class ="h-text" >
<h1 data-aos=fade-up>One page promising to fill all your dreams</h1>
<p data-aos=fade-up>This is Photoshhop's version of loream ipsum.It is a long established fact that a reader will be
at its layout. </p>
<button class="btn1" >Learn More</button>
<button class="btn2" >Learn More</button>
</section>
</header>


<!--AboutUs Page-->
<div id="aboutUs">
<h1 data-aos=fade-up>Welcome to Zippy</h1>
<div class="welcome1" data-aos=fade-up>
<div>
<p class="para" style="color: rgba(163, 161, 161, 0.74);">Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
</div>
<div style="margin-top: 10px;">
<img src="umbrella.png" alt="umbrella image" width=100% height="250">
</div>
</div>

<div class="welcome2" data-aos=fade-up>
<div>
<div class="icons">
<i class="fa fa-bell"></i>
</div>
<h4 style="padding-top: 20px; padding-bottom: 20px;">Lorem Ipusm</h4>
<p class="para" style="color: rgba(163, 161, 161, 0.74);">Lorem ipsum dolor sit amet, consectetur adipiscing
elit, sed do
eiusmod tempor incididunt ut labore et
dolore magna aliqua.</p><br>
<button class="button" style="padding: 10px 20px;">Learn More</button>
</div>
<div>
<div class="icons">
<i class="fa fa-search"></i>
</div>
<h4 style="padding-top: 20px; padding-bottom: 20px;">Lorem Ipusm</h4>
<p class="para" style="color: rgba(163, 161, 161, 0.74);">Lorem ipsum dolor sit amet, consectetur adipiscing
elit, sed do
eiusmod tempor incididunt ut labore et
dolore magna aliqua.</p><br>
<button class="button" style="padding: 10px 20px;">Learn More</button>
</div>
<div>
<div class="icons">
<i class="fa fa-umbrella"></i>
</div>
<h4 style="padding-top: 20px; padding-bottom: 20px;">Lorem Ipusm</h4>
<p class="para" style="color: rgba(163, 161, 161, 0.74);">Lorem ipsum dolor sit amet, consectetur adipiscing
elit, sed do
eiusmod tempor incididunt ut labore et
dolore magna aliqua.</p><br>
<button class="button" style="padding: 10px 20px;">Learn More</button>
</div>
</div>
</div>

<hr>
<!--Project section-->
<h1 style="text-align: center; margin: 40px;" id="projects">Projects</h1>
<div class="row">
<div class="column c2" data-aos="fade-up">
<img src="images.jfif" alt="project image" width=100% height="500">
<div id="projects" class="project">
<h3>Project Name</h3><br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nunc lacus, consequat vel arcu sit amet,
laoreet tempor diam.</p><br>
<button class="button btn">Launch Case Study</button>
</div>
</div>
<div class="column c2" data-aos="fade-up">
<img src="cle.jpeg" alt="project image" width=100% height="500">
<div class="project">
<h3>Project Name</h3><br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nunc lacus, consequat vel arcu sit amet,
laoreet tempor diam.</p><br>
<button class="button btn">Launch Case Study</button>
</div>
</div>
<div class="column c2" data-aos="fade-up">
<img src="hbj.jfif" alt="project image" width=100% height="500">
<div class="project">
<h3>Project Name</h3><br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nunc lacus, consequat vel arcu sit amet,
laoreet tempor diam.</p><br>
<button class="button btn">Launch Case Study</button>
</div>
</div>
<div class="column c2" data-aos="fade-up">
<img src="nk.jfif" alt="project image" width=100% height="500">
<div class="project">
<h3>Project Name</h3><br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nunc lacus, consequat vel arcu sit amet,
laoreet tempor diam.</p><br>
<button class="button btn">Launch Case Study</button>
</div>
</div>
</div>


<hr>


<section id="contact" data-aos="flip-right">
<h3>Contact Form</h3>
<div id="contact" class="container">
<div class="row row1">
<div class="column c1">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d227822.55036634734!2d80.8024220992549!3d26.84862298912083!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x399bfd991f32b16b%3A0x93ccba8909978be7!2sLucknow%2C%20Uttar%20Pradesh!5e0!3m2!1sen!2sin!4v1628183175377!5m2!1sen!2sin" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy">
</iframe>
</div>
<div class="column c1" style="background: #f5f10b;">
<div class="contact">
<h1><strong>Contact</strong></h1><br>
</div>
<form name="contact" style="padding-bottom: 5px;">
<h6 style="margin-left:50px;">NAME<h6>
<input type="text" id="name">
<h6 style="margin-left:50px;">EMAIL ADDRESS</h6>
<input type="text" id="email">
<h6 style="margin-left:50px;">SUBJECT</h6>
<input type="text" id="subject">
<h6 style="margin-left:50px;">MESSAGE</h6>
<textarea id="message" style="height:90px"></textarea>
<br>
<input type="submit" value="SEND">
</form>
</div>
</div>
</div>
</section>


<!--Footer Section-->
<footer>
<div class="ft1">
<h5><b>OFFICE ADDRESS</b></h5><br>
<p>Lorem Ipusm 123 <br>1200 consectetur adipiscing</p>
</div>
<div class="ft2">
<h5><b>FOLLOW US</b></h5><br>
<a href="#" class="fa fa-facebook"></a>
<a href="#" class="fa fa-twitter"></a>
<a href="#" class="fa fa-google"></a>
<a href="#" class="fa fa-linkedin"></a>
<a href="#" class="fa fa-tumblr"></a>
<a href="#" class="fa fa-instagram"></a>
</div>
<div class="ft3">
<h5><b>CONTACT US</b></h5><br>
<p>+1234566789 <br>zippy@skype<br> [email protected]</p>
</div>
</footer>

<script src="https://unpkg.com/[email protected]/dist/aos.js"></script>

<script>
AOS.init();
</script>

</body>
</html>
Binary file added Simple HTML CSS website/jak.jpg
View file
Open in desktop
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 Simple HTML CSS website/nk.jfif
View file
Open in desktop
Binary file not shown.
Binary file added Simple HTML CSS website/proj1.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading