Skip to content
This repository was archived by the owner on Oct 30, 2025. It is now read-only.

Commit 8b435b4

Browse files
Sing-LiSing-Li
authored
Merge pull request #92 from djcruz93/improvement-signed-home-layout
Improvement signed home layout
2 parents 9799b68 + fa5a12a commit 8b435b4

6 files changed

Lines changed: 238 additions & 116 deletions

File tree

‎client/public/community.jpg‎

1.87 MB
Loading

‎client/public/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
<meta name="theme-color" content="#000000" />
1010
<meta
1111
name="description"
12-
content="rc4git"
12+
content="rc4community"
1313
/>
1414
<!--
1515
Notice the use of %PUBLIC_URL% in the tags above.
@@ -20,7 +20,7 @@
2020
work correctly both with client-side routing and a non-root public URL.
2121
Learn how to configure a non-root public URL by running `npm run build`.
2222
-->
23-
<title>RC4GIT</title>
23+
<title>RC4Community</title>
2424
</head>
2525
<body>
2626
<noscript>You need to enable JavaScript to run this app.</noscript>

‎client/public/search-icon.png‎

32.5 KB
Loading

‎client/src/components/Home/index.css‎

Lines changed: 106 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,89 +1,144 @@
11
.home-wrapper {
2-
width: 77%;
3-
padding: 20px;
4-
font-family: 'Poppins', sans-serif;
5-
font-weight: 400;
6-
font-size: 15px;
7-
overflow-y: auto;
2+
width: 77%;
3+
padding: 20px 20px 20px 30px;
4+
font-family: "Poppins", sans-serif;
5+
font-weight: 400;
6+
font-size: 15px;
7+
overflow-y: auto;
88
}
99

1010
.powered-by-title {
11-
text-decoration: none;
12-
color: hsl(240, 6%, 17%);
11+
text-decoration: none;
12+
color: hsl(240, 6%, 17%);
1313
}
1414

1515
.powered-by-title:hover {
16-
text-decoration: underline;
16+
text-decoration: underline;
1717
}
1818

19-
.home-wrapper header h1 {
19+
.unsigned-home-heading {
2020
font-weight: 600;
2121
color: hsl(240, 6%, 17%);
2222
margin: 20px 0;
2323
font-weight: 200;
2424
}
2525

26-
.home-wrapper header p { color: hsl(240, 5%, 36%); }
27-
26+
.unsigned-home-text {
27+
color: hsl(240, 5%, 36%);
28+
max-width: 520px;
29+
margin: auto;
30+
}
2831

29-
.home-wrapper header {
32+
.unsigned-home-header {
3033
margin: 40px 30px;
3134
text-align: center;
3235
}
3336

34-
.home-wrapper header p {
35-
max-width: 520px;
36-
margin: auto;
37-
}
38-
3937
.button-container {
40-
display: flex;
41-
justify-content: center;
42-
align-items: center;
38+
display: flex;
39+
justify-content: center;
40+
align-items: center;
4341
}
4442

4543
.main-stats-container {
46-
margin-top: 70px;
47-
margin-bottom: 70px;
48-
display: flex;
49-
flex-direction: row;
50-
align-items: center;
51-
justify-content: space-around;
52-
flex-wrap: wrap;
44+
margin-top: 70px;
45+
margin-bottom: 70px;
46+
display: flex;
47+
flex-direction: row;
48+
align-items: center;
49+
justify-content: space-around;
50+
flex-wrap: wrap;
5351
}
5452

5553
.stat-container {
56-
padding: 20px;
57-
display: flex;
58-
flex-direction: column;
59-
align-items: center;
60-
color: #29292e;
61-
background-color: #e0e0e01a;
62-
border-radius: 100px;
63-
height: 170px;
64-
width: 170px;
65-
margin: 10px;
66-
box-shadow: 0px 8px 12px -7px #a9a6a6fc;
54+
padding: 20px;
55+
display: flex;
56+
flex-direction: column;
57+
align-items: center;
58+
color: #29292e;
59+
background-color: #e0e0e01a;
60+
border-radius: 100px;
61+
height: 170px;
62+
width: 170px;
63+
margin: 10px;
64+
box-shadow: 0px 8px 12px -7px #a9a6a6fc;
6765
}
6866

69-
7067
.stat-icon {
71-
width: 60px;
72-
height: 60px;
73-
display: block;
74-
margin-bottom: 15px;
68+
width: 60px;
69+
height: 60px;
70+
display: block;
71+
margin-bottom: 15px;
7572
}
7673

7774
.stat-number {
78-
font-size: 40px;
79-
letter-spacing: 2px;
80-
margin-bottom: 5px;
81-
font-weight: 500;
75+
font-size: 40px;
76+
letter-spacing: 2px;
77+
margin-bottom: 5px;
78+
font-weight: 500;
8279
}
8380

8481
.stat-label {
85-
font-weight: 400;
86-
text-transform: uppercase;
87-
text-align: center;
82+
font-weight: 400;
83+
text-transform: uppercase;
84+
text-align: center;
85+
}
86+
87+
.search-icon-explore-desc {
88+
vertical-align: bottom;
89+
}
90+
91+
.community-home-img {
92+
margin: 0 10px 10px;
93+
width: 500px;
94+
}
95+
96+
.signed-home-main {
97+
display: flex;
98+
flex-direction: row;
99+
justify-content: space-between;
100+
}
101+
102+
.signed-home-header {
103+
margin-bottom: 50px;
104+
}
105+
106+
.signed-home-header p {
107+
font-size: 0.90em;
108+
line-height: 27px;
109+
color: #252525;
110+
}
111+
112+
.signed-home-shortcut-container {
113+
margin-bottom: 50px;
114+
}
115+
116+
.signed-home-shortcut-container h5 {
117+
font-size: 0.90em;
118+
}
119+
120+
.signed-home-shortcut {
121+
background-color: #e3e9fe66;
122+
padding: 14px;
123+
border-radius: 5px;
124+
font-size: 0.90em;
125+
cursor: pointer;
126+
display: flex;
127+
align-items: center;
128+
}
129+
130+
.signed-home-shortcut:hover {
131+
background-color: #dae0f7b0;
132+
}
133+
134+
.shortcut-icon-small {
135+
width: 1.5em;
136+
height: 1.5em;
137+
margin-right: 7px;
88138
}
89139

140+
.shortcut-icon-medium {
141+
width: 1.7em;
142+
height: 1.7em;
143+
margin-right: 5px;
144+
}

0 commit comments

Comments
 (0)