Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 838fd3d

Browse files
author
visualdennis
committed
room homepage
1 parent db17672 commit 838fd3d

39 files changed

+1003
-1
lines changed

‎src/App.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ import Error from './Error';
2222
import ExpChart from './components/junior/ExpChart/ExpChart';
2323
import Pricing from './components/junior/priceColumns/Pricing';
2424
import Testimonials from './components/junior/testimonials/Testimonials';
25+
import RoomHome from './components/intermediate/RoomHome/RoomHome';
2526

2627
const App = () => {
2728

@@ -51,12 +52,13 @@ AOS.init({
5152
<Route path='/components/expense-chart' element={<ExpChart></ExpChart>}/>
5253
<Route path='/components/pricing-toggle' element={<Pricing></Pricing>}/>
5354
<Route path='/components/testimonials' element={<Testimonials></Testimonials>}/>
55+
<Route path='/components/room-homepage' element={<RoomHome></RoomHome>}/>
5456

5557
{/* Pages */}
5658
<Route path='/pages' element={<Pages></Pages>}/>
5759

5860
{/* Working on currently */}
59-
{/* <Route path='/build' element={<Pricing></Pricing>}/> */}
61+
{/* <Route path='/build' element={<RoomHome></RoomHome>}/> */}
6062
<Route path='*' element={<Error></Error>}></Route>
6163
</Routes>
6264
</Router>

‎src/Card/Card.jsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ const Card = ({card}) => {
66
return (
77
<div data-aos="fade-up"
88
data-aos-delay="100"
9+
data-aos-offset="-25"
910
data-aos-duration="400" className='card'>
1011
<img src={card.img} alt=""/>
1112
<div className="app-main-components-card-title">

‎src/components/data.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,15 @@ export const componentCardData = [
88
type: "component",
99
link:"/components/news-homepage",
1010
},
11+
{
12+
id:"14",
13+
title: "Room homepage",
14+
desc: "Responsive homepage built with CSS Grid, including Image gallery with slider function and mobile toggle navbar menu",
15+
img: "https://res.cloudinary.com/dz209s6jk/image/upload/f_auto,q_auto,w_475/Challenges/m1v21ubdjc2n75bl8p7n.jpg",
16+
category:"intermediate",
17+
type: "component",
18+
link:"/components/room-homepage",
19+
},
1120
{
1221
id:"10",
1322
title: "Github User Search",
Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
.room-home-about {
2+
/* border: 5px solid blue; */
3+
display: grid;
4+
grid-template-columns: 28.82% auto 30.56%;
5+
height: 100%;
6+
/* overflow: hidden; */
7+
width: 100%;
8+
}
9+
10+
.room-home-about-left-img,
11+
.room-home-about-right-img {
12+
display: block;
13+
width: 100%;
14+
height: 100%;
15+
max-height: 100%;
16+
object-fit: cover;
17+
}
18+
19+
.room-home-about-text-content {
20+
padding: 0px 40px;
21+
display: flex;
22+
flex-direction: column;
23+
justify-content: center;
24+
}
25+
26+
.room-home-about-text-content > h5 {
27+
margin-bottom: 20px;
28+
font-size: 1.3em;
29+
text-transform: uppercase;
30+
letter-spacing: 4px;
31+
}
32+
.room-home-about-text-content > p {
33+
font-size: 1.1em;
34+
color: hsl(0, 0%, 63%);
35+
line-height: 1.5;
36+
}
37+
38+
@media only screen and (max-width: 1057px) {
39+
.room-home-about {
40+
grid-template-columns: auto;
41+
grid-template-rows: 60% 40% 60%;
42+
}
43+
44+
.room-home-about-text-content {
45+
flex-direction: row;
46+
padding: 0px 80px;
47+
align-items: center;
48+
}
49+
50+
.room-home-about-text-content > h5 {
51+
margin: 0;
52+
margin-right: 40px;
53+
font-size: 2em;
54+
}
55+
.room-home-about-text-content > p {
56+
font-size: 1em;
57+
color: hsl(0, 0%, 63%);
58+
line-height: 1.5;
59+
}
60+
}
61+
62+
@media only screen and (max-width: 600px) {
63+
.room-home-about {
64+
grid-template-rows: 250px 1fr 250px;
65+
}
66+
67+
.room-home-about-text-content {
68+
padding: 40px 20px;
69+
flex-direction: column;
70+
align-items: flex-start;
71+
}
72+
73+
.room-home-about-text-content > h5 {
74+
margin: 0;
75+
margin-bottom: 20px;
76+
font-size: 1.5em;
77+
}
78+
}
Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import React from 'react'
2+
import './About.css'
3+
4+
const About = ({about}) => {
5+
return (
6+
<section className="room-home-about">
7+
<img src={about.imgDark} alt="" className="room-home-about-left-img"/>
8+
<div className="room-home-about-text-content">
9+
<h5>{about.title}</h5>
10+
<p>{about.text}</p>
11+
</div>
12+
<img src={about.imgLight} alt=""
13+
className="room-home-about-right-img"/>
14+
</section>
15+
)
16+
}
17+
18+
export default About
Lines changed: 172 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,172 @@
1+
.room-home-hero {
2+
/* border: 5px solid red; */
3+
display: grid;
4+
grid-template-columns: auto calc(30.56% + 160px);
5+
}
6+
7+
/* HERO SLIDER */
8+
9+
.room-home-hero-slider {
10+
/* border: 5px solid yellow; */
11+
position: relative;
12+
}
13+
14+
.room-home-hero-slider-container {
15+
width: 100%;
16+
overflow: hidden;
17+
}
18+
19+
.room-home-hero-img-wrapper {
20+
height: 63vh;
21+
max-height: 63vh;
22+
display: flex;
23+
width: 300%;
24+
/* border: 1px solid red; */
25+
}
26+
27+
.room-home-hero-img-wrapper > img {
28+
height: 100%;
29+
width: 100%;
30+
/* border: 1px solid red; */
31+
display: block;
32+
object-fit: cover;
33+
transform: translateX(0%);
34+
transition: all 0.6s ease-in-out;
35+
}
36+
37+
.room-home-hero-nav {
38+
display: flex;
39+
position: absolute;
40+
bottom: 0;
41+
right: -160px;
42+
}
43+
.room-home-hero-nav-btn {
44+
width: 80px;
45+
height: 80px;
46+
display: flex;
47+
justify-content: center;
48+
align-items: center;
49+
border: none;
50+
background-color: hsl(0, 0%, 0%);
51+
cursor: pointer;
52+
transition: all 0.4s ease-in-out;
53+
}
54+
55+
.room-home-hero-nav-btn:hover {
56+
background-color: hsl(0, 0%, 27%);
57+
}
58+
59+
.room-home-hero-nav-arrow {
60+
height: 20px;
61+
opacity: 0.8;
62+
}
63+
64+
/* - Dark Gray: hsl(0, 0%, 63%)
65+
- Black: hsl(0, 0%, 0%)
66+
- White: hsl(0, 0%, 100%)
67+
- Very Dark Gray: hsl(0, 0%, 27%) */
68+
69+
/* HERO TEXT */
70+
71+
.room-home-hero-text-content-wrapper {
72+
padding: 60px 80px;
73+
display: flex;
74+
flex-direction: column;
75+
/* align-items: center; */
76+
/* justify-content: center; */
77+
/* border: 5px solid salmon; */
78+
}
79+
80+
.room-home-hero-text-content-wrapper-fade-in {
81+
animation: room-fade-in 0.8s ease-in-out;
82+
}
83+
84+
@keyframes room-fade-in {
85+
from {
86+
opacity: 0;
87+
}
88+
89+
to {
90+
opacity: 1;
91+
}
92+
}
93+
94+
.room-home-hero-text-content-title {
95+
font-size: 3em;
96+
font-weight: 600;
97+
margin-bottom: 20px;
98+
}
99+
100+
.room-home-hero-text-content-desc {
101+
color: hsl(0, 0%, 63%);
102+
font-size: 1.2em;
103+
margin-bottom: 10px;
104+
line-height: 1.5;
105+
}
106+
107+
.room-home-hero-text-content-cta {
108+
display: flex;
109+
letter-spacing: 10px;
110+
font-size: 1em;
111+
background-color: transparent;
112+
padding: 10px 0px;
113+
border: none;
114+
cursor: pointer;
115+
transition: all 0.4s ease-in-out;
116+
font-weight: 600;
117+
}
118+
119+
.room-home-hero-text-content-cta:hover {
120+
opacity: 0.5;
121+
}
122+
123+
.room-home-hero-text-content-cta > img {
124+
margin-left: 20px;
125+
transition: all 0.4s ease-in-out;
126+
}
127+
128+
.room-home-hero-text-content-cta:hover > img {
129+
margin-left: 30px;
130+
}
131+
132+
@media only screen and (max-width: 1057px) {
133+
.room-home-hero-nav {
134+
bottom: 0;
135+
right: 0px;
136+
}
137+
.room-home-hero {
138+
display: flex;
139+
flex-direction: column;
140+
}
141+
.room-home-hero-img-wrapper {
142+
height: 500px;
143+
}
144+
}
145+
146+
@media only screen and (max-width: 600px) {
147+
.room-home-hero-img-wrapper {
148+
/* height: auto; */
149+
/* min-height: 300px; */
150+
max-height: 380px;
151+
}
152+
153+
.room-home-hero-nav-btn {
154+
width: 60px;
155+
height: 60px;
156+
}
157+
158+
.room-home-hero-text-content-wrapper {
159+
padding: 40px 20px;
160+
}
161+
162+
.room-home-hero-text-content-desc {
163+
margin-bottom: 20px;
164+
}
165+
}
166+
167+
@media only screen and (max-width: 375px) {
168+
.room-home-hero-nav-btn {
169+
width: 50px;
170+
height: 50px;
171+
}
172+
}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /