Skip to content

Commit bfa3520

Browse files
AmolShelke2AmolShelke2
committed
Added Ps_controller_landing page
1 parent 43fefab commit bfa3520

File tree

2 files changed

+243
-1
lines changed

2 files changed

+243
-1
lines changed

‎Ps_controller_page/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<meta charset="UTF-8" />
55
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<link rel="stylesheet" href="styles/style.css" />
7+
<link rel="stylesheet" href="style.css" />
88
<title>Gaming Controller website</title>
99
</head>
1010
<body>

‎Ps_controller_page/style.css

Lines changed: 242 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,242 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
font-family: sans-serif;
5+
}
6+
7+
.container {
8+
width: 100%;
9+
min-height: 100vh;
10+
padding-left: 8%;
11+
padding-right: 8%;
12+
box-sizing: border-box;
13+
overflow: hidden;
14+
}
15+
16+
.navbar {
17+
width: 100%;
18+
display: flex;
19+
align-items: center;
20+
}
21+
22+
.logo {
23+
width: 50px;
24+
cursor: pointer;
25+
margin: 30px 0;
26+
}
27+
28+
.menu-icon {
29+
width: 25px;
30+
cursor: pointer;
31+
display: none;
32+
}
33+
34+
nav {
35+
flex: 1;
36+
text-align: right;
37+
}
38+
39+
nav ul li {
40+
list-style: none;
41+
display: inline-block;
42+
margin-right: 30px;
43+
}
44+
45+
nav ul li a {
46+
text-decoration: none;
47+
color: #000;
48+
font-size: 15px;
49+
text-transform: capitalize;
50+
}
51+
52+
nav ul li a:hover {
53+
color: #ff5ea2;
54+
}
55+
56+
.row {
57+
display: flex;
58+
justify-content: space-between;
59+
align-items: center;
60+
margin: 100px 0;
61+
}
62+
63+
.col-1 {
64+
flex-basis: 40%;
65+
position: relative;
66+
margin-left: 50px;
67+
}
68+
69+
.col-1 h2 {
70+
font-size: 54px;
71+
}
72+
73+
.col-1 h3 {
74+
font-size: 30px;
75+
color: #707070;
76+
font-weight: 100;
77+
margin: 20px 0 10px;
78+
}
79+
80+
.col-1 p {
81+
font-size: 16px;
82+
color: #b7b7b7;
83+
font-weight: 100;
84+
}
85+
86+
.col-1 h4 {
87+
margin: 30px 0;
88+
font-size: 20px;
89+
}
90+
91+
button {
92+
width: 140px;
93+
outline: none;
94+
border: none;
95+
background: linear-gradient(to right, #fb5283, #ff3227);
96+
padding: 12px 10px;
97+
color: #fff;
98+
text-transform: capitalize;
99+
border-radius: 5px;
100+
cursor: pointer;
101+
transition: width 0.5;
102+
}
103+
104+
button img {
105+
width: 30px;
106+
display: none;
107+
}
108+
109+
button:hover img {
110+
display: block;
111+
}
112+
113+
button:hover {
114+
width: 160px;
115+
display: flex;
116+
align-items: center;
117+
justify-content: space-between;
118+
}
119+
120+
.col-1::after {
121+
content: "";
122+
width: 10px;
123+
height: 57%;
124+
background: linear-gradient(#ff469f, #ff6062);
125+
position: absolute;
126+
left: -40px;
127+
top: 8px;
128+
}
129+
130+
.col-2 {
131+
position: relative;
132+
flex-basis: 60%;
133+
display: flex;
134+
align-items: center;
135+
}
136+
137+
.col-2 .controller {
138+
width: 90%;
139+
}
140+
141+
.color-box {
142+
position: absolute;
143+
background: linear-gradient(#ff469f, #ff6062);
144+
top: 0;
145+
right: 0;
146+
border-radius: 20px 0 0 20px;
147+
height: 100%;
148+
width: 80%;
149+
right: 0;
150+
z-index: -1;
151+
transform: translateX(150px);
152+
}
153+
154+
.add-btn img {
155+
width: 35px;
156+
margin-bottom: 5px;
157+
}
158+
159+
.add-btn {
160+
text-align: center;
161+
color: #fff;
162+
cursor: pointer;
163+
}
164+
165+
.social-links img {
166+
height: 15px;
167+
margin: 20px;
168+
cursor: pointer;
169+
}
170+
171+
.social-links {
172+
text-align: center;
173+
}
174+
175+
@media screen and (max-width: 700px) {
176+
nav ul {
177+
width: 100%;
178+
background: linear-gradient(#ff469f, #ff6062);
179+
position: absolute;
180+
top: 75px;
181+
right: 0;
182+
z-index: 2;
183+
}
184+
185+
nav ul li {
186+
display: block;
187+
margin-bottom: 10px;
188+
margin-top: 10px;
189+
transition: 0.2s ease-in-out;
190+
}
191+
192+
nav ul.active {
193+
display: block;
194+
}
195+
196+
nav ul li a {
197+
color: #fff;
198+
}
199+
200+
nav ul li a:hover {
201+
color: #000;
202+
}
203+
204+
.menu-icon {
205+
display: block;
206+
}
207+
208+
#menu-list {
209+
overflow: hidden;
210+
transition: 0.5s;
211+
}
212+
213+
.row {
214+
flex-direction: column-reverse;
215+
margin: 50px 0;
216+
}
217+
218+
.col-2 {
219+
flex-basis: 100%;
220+
margin-bottom: 50px;
221+
}
222+
223+
.col-2 .container {
224+
width: 77%;
225+
}
226+
227+
.color-box {
228+
transform: translateX(75px);
229+
}
230+
231+
.col-1 {
232+
flex-basis: 100%;
233+
}
234+
235+
.col-1 h2 {
236+
font-size: 35px;
237+
}
238+
239+
.col-1 h3 {
240+
font-size: 15px;
241+
}
242+
}

0 commit comments

Comments
 (0)