Skip to content

Commit e67c58e

Browse files
SubhayanDas08SubhayanDas08
committed
Landing Page Responsive
1 parent cf67228 commit e67c58e

File tree

12 files changed

+12973
-10936
lines changed

12 files changed

+12973
-10936
lines changed

‎package-lock.json

+1,742-18
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/Components/A Star/about.jsx

-27
This file was deleted.

‎src/Components/Landing/Projects/Projects.css renamed to ‎src/Components/Landing/Algorithms/Algorithms.css

+15-2
Original file line numberDiff line numberDiff line change
@@ -12,18 +12,21 @@
1212
}
1313

1414
.algo_heading {
15+
padding-top: 10vh;
1516
width: 80%;
1617
height: 60%;
1718
}
1819

1920
.algo_heading_h2 {
20-
font-size: 3rem;
21+
font-size: 4rem;
2122
color: #8cc9f0;
2223
}
2324

2425
.algo_heading_p {
25-
font-size: 1.2rem;
26+
font-size: 1.8rem;
2627
color: #ffffff;
28+
line-height: 180%;
29+
2730
}
2831

2932
.algo_button_div {
@@ -46,6 +49,7 @@
4649
animation: glow 0.7s ease-in-out infinite alternate;
4750
border-width: 4px;
4851
}
52+
4953
@keyframes glow {
5054
from {
5155
box-shadow: 0 0 20px #fff, 0 0 50px #fff, 0 0 50px #a4dcff,
@@ -57,3 +61,12 @@
5761
border-color: #a4dcff;
5862
animation: none;
5963
}
64+
65+
@media only screen and (max-width: 1080px) {
66+
.algo_heading_h2{
67+
font-size: 2rem;
68+
}
69+
.algo_heading_p{
70+
font-size: 1.2rem;
71+
}
72+
}

‎src/Components/Landing/Algorithms/Algorithms.jsx

+14-21
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,25 @@
11
import React from 'react';
2-
import './Algorithms.scss';
2+
import "./Algorithms.css"
33

4-
const Algorithms = () => {
54

5+
const Algorithms = () => {
66
return (
77
<>
8-
<div className="project_container">
9-
<main className="project_grid">
10-
<section className="content project_item1">
11-
<h1 className="project_h1">Algorithms</h1>
12-
<p className="project_p">Lorem ipsum dolor sit amet. Quo perspiciatis sunt qui nemo velit aut eaque accusamus ut commodi porro quo alias praesentium At provident error</p>
13-
</section>
14-
<section className="project_card project_item2 project_flex">
15-
<h2 className="project_h2">Splitwise</h2>
16-
</section>
17-
<section className="project_card project_item5 project_flex">
18-
<h2 className="project_h2">Path Finding</h2>
19-
</section>
20-
<section className="project_card project_item8 project_flex" >
21-
<h2 className="project_h2 project_h2_bk">Backtracking Algorithm</h2>
22-
</section>
23-
<section className="project_card project_item11 project_flex">
24-
<h2 className="project_h2">Image Compression</h2>
25-
</section>
26-
</main>
8+
<div className="algo_container">
9+
<div className="algo_heading">
10+
<h2 className="algo_heading_h2">ALGORITHMS</h2>
11+
<p className="algo_heading_p">Lorem ipsum dolor sit amet. Non minus corrupti ea voluptatem voluptas non aliquam
12+
molestias eum vero rerum? Ex nulla molestiae eum accusamus error aut aliquam
13+
pariatur. Non laboriosam repudiandae sit nobis facilis qui exercitationem voluptatem.
14+
Eos doloremque aut animi quod et rerum perferendis!</p>
15+
</div>
16+
<div className="algo_button_div">
17+
<button type="button" className="algo_button">See More</button>
18+
</div>
2719
</div>
2820
</>
2921
);
3022
}
3123

24+
3225
export default Algorithms;

‎src/Components/Landing/Footer/Footer.css

+13-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
.footer_container {
2+
align-items: center;
23
height: 100vh;
34
background-image: url("../images/Footer.jpg");
45
background-repeat: no-repeat;
@@ -10,11 +11,12 @@
1011
}
1112

1213
.footer_description {
13-
width: 500px;
14+
width: 800px;
1415
height: fit-content;
1516
margin-top: 5%;
1617
text-align: left;
1718
line-height: 1.8;
19+
font-size: 1.5rem;
1820
}
1921

2022
.footer_links_div {
@@ -23,6 +25,7 @@
2325
height: fit-content;
2426
margin-top: 5%;
2527
justify-content: space-evenly;
28+
font-size: x-large;
2629
}
2730
.footer_links_heading {
2831
color: #a4dcff;
@@ -100,4 +103,13 @@
100103
.footer_animated_particles9 {
101104
animation: fly 6s linear infinite;
102105
transform: translateX(-20vw);
106+
}
107+
108+
@media only screen and (max-width: 1080px) {
109+
.footer_description{
110+
font-size: 1rem;
111+
}
112+
.footer_links_div{
113+
font-size: 100%;
114+
}
103115
}

‎src/Components/Landing/Hero/Hero.css

+6
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,12 @@
6464
margin: 10vh auto;
6565
width: 100vw;
6666
}
67+
.hero_av {
68+
font-size: 10rem;
69+
}
70+
.hero_algo_ve {
71+
font-size: 2rem;
72+
}
6773
}
6874
@media only screen and (max-width: 650px) {
6975
.carousel {

‎src/Components/Landing/Landing.jsx

+3-2
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,9 @@ import Hero from './Hero/Hero';
44
import './Landing.css';
55
import Top from './Top/Top';
66
import Navbars from './Navbar/Navbars';
7-
import Algorithms from './Algorithms/Algorithms';
87
import Projects from './Projects/Projects';
8+
import Algorithms from './Algorithms/Algorithms';
9+
910

1011
const Landing = () => {
1112

@@ -14,8 +15,8 @@ const Landing = () => {
1415
<Top/>
1516
<Navbars/>
1617
<Hero/>
17-
<Algorithms/>
1818
<Projects/>
19+
<Algorithms/>
1920
<Footer />
2021
</>
2122
);

‎src/Components/Landing/Projects/Projects.jsx

+21-16
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,30 @@
11
import React from 'react';
2-
import "./Projects.css"
3-
2+
import './Projects.scss';
43

54
const Projects = () => {
5+
66
return (
7-
<>
8-
<div className="algo_container">
9-
<div className="algo_heading">
10-
<h2 className="algo_heading_h2">LOREM IPSUM AMET CONSET</h2>
11-
<p className="algo_heading_p">Lorem ipsum dolor sit amet. Non minus corrupti ea voluptatem voluptas non aliquam
12-
molestias eum vero rerum? Ex nulla molestiae eum accusamus error aut aliquam
13-
pariatur. Non laboriosam repudiandae sit nobis facilis qui exercitationem voluptatem.
14-
Eos doloremque aut animi quod et rerum perferendis!</p>
15-
</div>
16-
<div className="algo_button_div">
17-
<button type="button" className="algo_button">See More</button>
18-
</div>
7+
<div className="project_container">
8+
<main className="project_grid">
9+
<section className="content project_item1">
10+
<h1 className="project_h1">Projects</h1>
11+
{/* <p className="project_p">Lorem ipsum dolor sit amet. Quo perspiciatis sunt qui nemo velit aut eaque accusamus ut commodi porro quo alias praesentium At provident error</p> */}
12+
</section>
13+
<section className="project_card project_item2 project_flex">
14+
<a className="proj_link" href="/splitman"><h2 className="project_h2">Splitman</h2></a>
15+
</section>
16+
<section className="project_card project_item5 project_flex">
17+
<a className="proj_link" href="/pathfinder"><h2 className="project_h2">Path Seeker</h2></a>
18+
</section>
19+
<section className="project_card project_item8 project_flex" >
20+
<a className="proj_link" href="/sudoku"><h2 className="project_h2">Sudoku</h2></a>
21+
</section>
22+
<section className="project_card project_item11 project_flex">
23+
<a className="proj_link" href="/huffman"><h2 className="project_h2">Image Deflater</h2></a>
24+
</section>
25+
</main>
1926
</div>
20-
</>
2127
);
2228
}
2329

24-
2530
export default Projects;

‎src/Components/Landing/Algorithms/Algorithms.scss renamed to ‎src/Components/Landing/Projects/Projects.scss

+19-14
Original file line numberDiff line numberDiff line change
@@ -59,15 +59,15 @@
5959

6060
.project_grid {
6161
width: 100%;
62-
height: 100%;
62+
height: 110vh;
6363
padding: 20px;
6464
display: grid;
6565
overflow: hidden;
6666
grid-template-columns: repeat(5, 1fr);
6767
grid-template-rows: repeat(4, 1fr);
6868
grid-gap: 30px;
6969
padding: 6%;
70-
background: url("https://i.pinimg.com/originals/07/f5/55/07f55516c49808f89f7fd3935b0af04f.gif");
70+
background: url("https://i.pinimg.com/originals/07/f5/55/07f55516c49808f89f7fd3935b0af04f.gif");
7171
background-repeat: no-repeat;
7272
}
7373

@@ -79,7 +79,7 @@
7979
background: url("../images/path.gif");
8080
&.project_card:hover,
8181
&.project_card:focus {
82-
background: #00005c;
82+
background: #6b6bff;
8383
}
8484
}
8585
.project_item3 {
@@ -118,12 +118,12 @@
118118
align-items: center;
119119
}
120120

121-
.project_h2_bk {
122-
text-align: center;
123-
color: #fff;
124-
font-size: 1.5rem !important;
125-
opacity: 1 !important;
126-
}
121+
// .project_h2_bk {
122+
// text-align: center;
123+
// color: #fff;
124+
// font-size: 1.5rem !important;
125+
// opacity: 1 !important;
126+
// }
127127

128128
.project_item9 {
129129
grid-area: 2 / 5 / 3 / 6;
@@ -146,6 +146,14 @@
146146
justify-content: center;
147147
}
148148

149+
.proj_link {
150+
color: white;
151+
text-decoration: none;
152+
}
153+
.proj_link:hover {
154+
color: black;
155+
}
156+
149157
*,
150158
*:before,
151159
*:after {
@@ -176,15 +184,12 @@
176184
font-family: inherit;
177185
text-align: center;
178186
text-transform: capitalize;
187+
font-size: 2em;
179188
}
180189

181190
.project_h1 {
182191
margin-top: 0;
183-
font-size: 3.052em;
184-
}
185-
186-
.project_h2 {
187-
font-size: 1em;
192+
font-size: 5rem;
188193
}
189194

190195
.project_p {

‎src/Components/Landing/Top/Top.jsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ function Top() {
1010
useLax();
1111

1212
return (
13-
<div id="main" style={{ backgroundImage: `url('https://i.postimg.cc/3J39qH1t/rocket.png')`, overflowX: 'hidden', backgroundRepeat: 'no-repeat', backgroundSize: 'cover', zIndex: '1' }}>
13+
<div id="main" style={{ backgroundImage: `url('https://i.postimg.cc/3J39qH1t/rocket.png')`, overflowX: 'hidden', backgroundRepeat: 'no-repeat', backgroundSize: 'cover', zIndex: '1', backgroundPositionX: 'center', backgroundPositionY: 'bottom' }}>
1414
<TopAlgo />
1515
<SectionOne />
1616
</div>

‎src/Components/Landing/TopAlgo/TopAlgo.css

+4-2
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,14 @@
77
flex-direction: column;
88
align-items: center;
99
justify-content: center;
10-
width: 100vw;
10+
width: 100vmax;
1111
z-index: 2;
1212
height: 100vh;
1313
background: url("../images/Header.png");
1414
background-size: cover;
1515
background-position: fixed;
16+
background-position-x: center;
17+
1618
}
1719

1820
#top_header img {
@@ -87,4 +89,4 @@
8789
#top_section1 {
8890
height: 600pt;
8991
background: fixed;
90-
}
92+
}

0 commit comments

Comments
 (0)