Skip to content

Commit bf9b98b

Browse files
Ayushparikh-codeAyushparikh-code
authored
Merge pull request #218 from RiyaGupta89/parallex-website
Parallex website added
2 parents e01bae3 + edc91ff commit bf9b98b

File tree

12 files changed

+608
-0
lines changed

12 files changed

+608
-0
lines changed

‎Index.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -77,3 +77,4 @@
7777
| [Tindog](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Tindog) | Tinder customized for dogs to find their mate online |
7878
| [Word counter App](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/word%20counter) | Simple Word counter App written in HTML, CSS, and JavaScript
7979
| [Chess Game](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Chess-Game) | A basic chess game for entertainment purpose. |
80+
| [Parallex Website](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Chess-Game) | A basic website using HTML, CSS, JAVASCRIPT with modern look. |

‎parallex-website/.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
node_modules

‎parallex-website/README.md

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
# Welcome 🖐 to the Parallex Website
2+
This is a basic HTML, CSS, JAVASCRIPT website where images of this website has their position fixed that results in giving the parallex look and that is why it is called Parallex Website. This gives the look of modern website.
3+
4+
5+
## 💻Tech Stack
6+
<br>
7+
8+
![HTML](https://img.shields.io/badge/html5%20-%23E34F26.svg?&style=for-the-badge&logo=html5&logoColor=white)
9+
![CSS](https://img.shields.io/badge/css3%20-%231572B6.svg?&style=for-the-badge&logo=css3&logoColor=white)
10+
![JS](https://img.shields.io/badge/javascript%20-%23323330.svg?&style=for-the-badge&logo=javascript&logoColor=%23F7DF1E)
11+
12+
<br>
13+
14+
15+
### How to get the project on your local machine:
16+
17+
---
18+
19+
- Download or clone the repository
20+
21+
```
22+
git clone https://github.com/Ayushparikh-code/Web-dev-mini-projects.git
23+
```
24+
25+
- Go to the directory
26+
- Open parallex-website folder
27+
- Open the terminal and run
28+
```
29+
node app.js
30+
```
31+
- Open *localhost:3000* in your browser.
32+
33+
***
34+
###Remember:
35+
If you are using node then you need to reload your server everytime you make changes in your file. Otherwise if you have nodemon installed, you can use nodemon.
36+
***
37+
38+
39+
<br>
40+
41+
##Screenshot
42+
43+
![Demo1](public/images/demo.png)
44+
<br>
45+
46+
47+
## Happy Coding!

‎parallex-website/app.js

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
const express = require("express");
2+
3+
const app = express();
4+
5+
app.use(express.static("public"));
6+
7+
app.get("/", function(req, res) {
8+
res.sendFile(__dirname + "/index.html");
9+
});
10+
11+
12+
app.listen(3000, function(req, res) {
13+
console.log("Server started running on port 3000.");
14+
})

‎parallex-website/index.html

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<link rel="preconnect" href="https://fonts.gstatic.com">
8+
<link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet">
9+
<link rel="stylesheet" href="css/style.css">
10+
<title>Parallex Website</title>
11+
</head>
12+
13+
<body>
14+
<div class="pImg1">
15+
<div class="pText">
16+
<span class="border">Parallex Website</span>
17+
</div>
18+
</div>
19+
20+
<section class="section section-light">
21+
<h2>Web Dev Mini Projects</h2>
22+
<p>This project is a part of following Open Source Program. Add any web development mini project. Eaque esse asperiores corporis
23+
dolor soluta. Maiores iste quam hic rerum animi consequatur ipsum perferendis enim dolores consequuntur
24+
suscipit nesciunt ab eaque itaque doloremque earum placeat, architecto non. Accusantium eum harum
25+
repellendus rerum vitae voluptas minima, quod nostrum aut facere amet, consectetur ad, fugit sequi facilis
26+
aliquam ipsam provident quisquam alias! Fugiat saepe quae, perspiciatis in, consequatur natus rem debitis
27+
fuga officia fugit dolorem reiciendis, odit aliquid. Esse, enim adipisci. Sed labore quam eveniet.</p>
28+
</section>
29+
30+
<div class="pImg2">
31+
<div class="pText">
32+
Image Two Text
33+
</div>
34+
</div>
35+
36+
<section class="section section-dark">
37+
<h2>Section Two</h2>
38+
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laudantium animi asperiores, ullam, nobis rerum quo
39+
recusandae itaque non, voluptates earum cumque quis sit harum unde voluptatem exercitationem veritatis nihil
40+
quos? Voluptates debitis eius minima nisi facilis laboriosam, animi dolorum, veritatis necessitatibus beatae
41+
odit accusamus rem ut saepe fugiat perferendis ipsa deserunt eligendi explicabo libero id modi aliquam
42+
magnam natus. Placeat!</p>
43+
</section>
44+
45+
<div class="pImg3">
46+
<div class="pText">
47+
Image Three Text
48+
</div>
49+
</div>
50+
51+
<section class="section section-light">
52+
<h2>Section Three</h2>
53+
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sunt cum eos laborum. Numquam quas, fugiat est
54+
voluptatum reprehenderit recusandae deserunt sequi magni unde voluptates repudiandae voluptate quae porro
55+
eligendi nemo illo ratione. Repellat adipisci itaque iste veniam, dolorum, commodi obcaecati incidunt quod
56+
facere repudiandae explicabo quisquam, molestias cum doloremque fuga maxime quasi suscipit cupiditate
57+
numquam. Eveniet consectetur quam laboriosam reprehenderit.
58+
</p>
59+
</section>
60+
61+
62+
<div class="pImg1">
63+
<div class="pText">
64+
<span class="border">Web Dev Mini Project</span>
65+
</div>
66+
</div>
67+
68+
69+
70+
71+
</body>
72+
<script src="app.js"></script>
73+
74+
</html>

0 commit comments

Comments
 (0)