Skip to content

Commit 4b6d0f5

Browse files
aayush105aayush105
authored
Merge pull request #863 from princekotadia/responsive-portfolio
made portfolio site nav,footer and experience section mobile responsive
2 parents 4359b93 + acb354d commit 4b6d0f5

File tree

2 files changed

+227
-61
lines changed

2 files changed

+227
-61
lines changed

‎Portfoliowebsite/port.css‎

Lines changed: 156 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,11 @@ body{
1010
color: aliceblue;
1111
overflow:auto;
1212
}
13+
1314
.components{
1415
display:flex;
1516
list-style: none;
16-
17+
height: 40px;
1718
}
1819
.name{
1920
list-style: none;
@@ -31,9 +32,12 @@ nav{
3132
height: 3rem;
3233

3334
}
35+
ul li {
36+
margin: auto;
37+
}
3438
ul li a{
3539
margin:5px 10px;
36-
padding:8px;
40+
/* padding:8px; */
3741
font-family: 'Mukta', sans-serif;
3842
color: aliceblue;
3943
text-decoration: none;
@@ -70,6 +74,7 @@ ul li a:hover{
7074
padding:77px;
7175
height: 290px;
7276
}
77+
7378
.right_section img{
7479
margin-top: -30px;
7580
width:600px;
@@ -101,7 +106,7 @@ ul li a:hover{
101106
height:540px;
102107
}
103108
.one{
104-
height:65px;
109+
height:40px;
105110
border-left: 3px solid white;
106111
}
107112
.container{
@@ -119,11 +124,6 @@ ul li a:hover{
119124
font-family: 'Merriweather', serif;
120125

121126
}
122-
.year{
123-
124-
margin:7.5px;
125-
font-family: 'Merriweather', serif;
126-
}
127127

128128
#icon{
129129
margin:8px 0px;
@@ -144,7 +144,7 @@ ul li a:hover{
144144

145145
}
146146
#vertical{
147-
height: 70px;
147+
height: 50px;
148148
}
149149
.btn{
150150

@@ -171,12 +171,18 @@ ul li a:hover{
171171
}
172172
.footer{
173173
display:flex;
174-
justify-content: space-evenly;
175-
174+
justify-content: space-around;
175+
position: relative;
176+
}
177+
.service{
178+
display: flex;
179+
gap: 50px;
180+
flex-wrap: wrap;
176181
}
177182
footer{
183+
margin-top: 50px;
178184
background-color: black;
179-
height:140px;
185+
/* height:140px; */
180186
padding: 30px 18px;
181187

182188
}
@@ -192,3 +198,141 @@ footer{
192198
background-color: blueviolet;
193199
height: 0.1rem;
194200
}
201+
202+
.menu, .hamburger{
203+
display: none;
204+
}
205+
206+
@media (max-width: 950px){
207+
.con{
208+
flex-direction: column;
209+
}
210+
211+
.container{
212+
flex-direction: column;
213+
justify-content: space-around;
214+
}
215+
216+
.exp{
217+
display: flex;
218+
}
219+
220+
.one{
221+
width: 50px;
222+
height: 2px;
223+
background-color: aliceblue;
224+
}
225+
226+
#vertical{
227+
height: auto;
228+
margin: 10px;
229+
}
230+
231+
.Experience{
232+
margin: 40px 100px;
233+
height: auto;
234+
}
235+
236+
.service{
237+
gap: 30px;
238+
}
239+
240+
.box{
241+
display: flex;
242+
justify-content: space-evenly;
243+
}
244+
245+
.components{
246+
font-size: 14px;
247+
}
248+
249+
}
250+
251+
@media (max-width: 650px){
252+
.one{
253+
width: 20px;
254+
height: 2px;
255+
background-color: aliceblue;
256+
}
257+
258+
.Experience{
259+
margin: 40px 60px;
260+
}
261+
262+
.service{
263+
flex-direction: column;
264+
gap: 10px;
265+
}
266+
267+
.box{
268+
justify-content: space-around;
269+
height: 50px;
270+
/* margin-top: 0px; */
271+
}
272+
273+
274+
.components{
275+
display: none;
276+
}
277+
278+
.menu {
279+
display: block;
280+
}
281+
282+
.hamburger{
283+
display: inline;
284+
}
285+
286+
.hamburger {
287+
position: fixed;
288+
/* a large z-index puts the ham button above the rest of the page*/
289+
z-index: 99;
290+
background: transparent;
291+
border: none;
292+
cursor: pointer;
293+
top: 1rem;
294+
right: 1rem;
295+
}
296+
297+
.menu {
298+
position: fixed;
299+
/* give the menu a larger z-index than the ham link
300+
to put the menu above it */
301+
z-index: 100;
302+
top: 0;
303+
left: 40;
304+
right: 0;
305+
bottom: 0;
306+
width: 40%;
307+
height: 70%;
308+
/* basic menu styling*/
309+
list-style: none;
310+
background: rgb(31, 31, 87);
311+
display: flex;
312+
313+
box-shadow: 10px 0px 13px rgb(44, 44, 125);
314+
border-bottom-left-radius: 40px;
315+
flex-direction: column;
316+
/* animate slide up/down */
317+
transform: translateY(-100%);
318+
transition: transform 0.2s ease;
319+
}
320+
321+
.close {
322+
position: absolute;
323+
border: none;
324+
color: white;
325+
cursor: pointer;
326+
top: 1rem;
327+
right: 1rem;
328+
}
329+
330+
.menu:target {
331+
/* show menu */
332+
transform: translateY(0);
333+
}
334+
335+
.service{
336+
display: none;
337+
}
338+
}

‎Portfoliowebsite/port.html‎

Lines changed: 71 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,9 @@
1313
<link href="https://fonts.googleapis.com/css2?family=Mukta:wght@700&display=swap" rel="stylesheet">
1414
<link rel="preconnect" href="https://fonts.googleapis.com">
1515
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
16-
<link href="https://fonts.googleapis.com/css2?family=Merriweather:wght@900&display=swap" rel="stylesheet">
16+
<link href="https://fonts.googleapis.com/css2?family=Merriweather:wght@900&display=swap"
17+
rel="stylesheet">
18+
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
1719
</head>
1820

1921
<body>
@@ -32,6 +34,23 @@
3234

3335

3436
</ul>
37+
<ul class="menu" id="menu">
38+
<li><a href="#">Home</a></li>
39+
<li><a href="#">About</a></li>
40+
<li><a href="#">Services</a></li>
41+
<li><a href="#">Projects</a></li>
42+
<li><a href="#">Contact Me</a></li>
43+
<a class="close" href="#">
44+
<span class="material-icons">
45+
close
46+
</span>
47+
</a>
48+
</ul>
49+
<a class="hamburger" href="#menu">
50+
<span class="material-icons">
51+
menu
52+
</span>
53+
</a>
3554
</nav>
3655
</section>
3756

@@ -65,56 +84,59 @@
6584
What I have done so far
6685
</div>
6786
<h1 class="heading">Work Experience</h1>
68-
<div class="container" id="icon">
69-
<img src="https://img.icons8.com/?size=1x&id=90qJ6Mat3B0I&format=gif" alt="Error" srcset="">
70-
<img src="https://img.icons8.com/?size=1x&id=13912&format=png" alt="Error" srcset="">
71-
<img src="https://img.icons8.com/?size=1x&id=32323&format=png" alt="Error" srcset="">
72-
<img src="https://img.icons8.com/?size=512&id=13963&format=png" alt="Error" srcset="">
73-
<img src="https://img.icons8.com/?size=1x&id=19318&format=png" alt="Error" srcset="">
74-
<img src="https://img.icons8.com/?size=1x&id=22989&format=png" alt="Error" srcset="">
75-
</div>
76-
<hr class="division">
77-
<div class="container" id="vertical">
78-
<div class="one"></div>
79-
<div class="one"></div>
80-
<div class="one"></div>
81-
<div class="one"></div>
82-
<div class="one"></div>
83-
<div class="one"></div>
84-
</div>
85-
<div class="con" id="skills">
86-
<div class="units">
87-
<h4>HTML Developer -</h4>
88-
<div class="year">Pinterest (2010-2012)</div>
89-
<p class="p">Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit odit sapiente vero optio aliquid nesciunt perspiciatis vitae nostrum? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Asperiores, illum vero sed sit tempora voluptatibus! </p>
90-
</div>
91-
<div class="units">
92-
<h4>Web Designer -</h4>
93-
<div class="year">Facebook (2012-2014)</div>
94-
<p class="p">Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit odit sapiente vero optio aliquid nesciunt perspiciatis vitae nostrum?Lorem ipsum dolor, sit amet consectetur adipisicing elit. Veritatis corporis deleniti officia ipsam placeat.</p>
87+
<div class="exp">
88+
<div class="container" id="icon">
89+
<img src="https://img.icons8.com/?size=1x&id=90qJ6Mat3B0I&format=gif" alt="Error" srcset="">
90+
<img src="https://img.icons8.com/?size=1x&id=13912&format=png" alt="Error" srcset="">
91+
<img src="https://img.icons8.com/?size=1x&id=32323&format=png" alt="Error" srcset="">
92+
<img src="https://img.icons8.com/?size=512&id=13963&format=png" alt="Error" srcset="">
93+
<img src="https://img.icons8.com/?size=1x&id=19318&format=png" alt="Error" srcset="">
94+
<img src="https://img.icons8.com/?size=1x&id=22989&format=png" alt="Error" srcset="">
9595
</div>
96-
<div class="units">
97-
<h4>Frontend Developer-</h4>
98-
<div class="year">Instagram (2014-2015)</div>
99-
<p class="p">Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit odit sapiente vero optio aliquid nesciunt perspiciatis vitae nostrum? Lorem ipsum dolor sit amet consectetur adipisicing elit. A, ipsa natus eligendi adipisci sapiente ratione?</p>
96+
<!-- <hr class="division"> -->
97+
<div class="container" id="vertical">
98+
<div class="one"></div>
99+
<div class="one"></div>
100+
<div class="one"></div>
101+
<div class="one"></div>
102+
<div class="one"></div>
103+
<div class="one"></div>
100104
</div>
101-
<div class="units">
102-
<h4>Node.js Developer -</h4>
103-
<div class="year">Twitter (2015-2016)</div>
104-
<p class="p">Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit odit sapiente vero optio aliquid nesciunt perspiciatis vitae nostrum? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis blanditiis voluptatum omnis, eum hicdo</p>
105-
</div>
106-
<div class="units">
107-
<h4>FullStack Developer -</h4>
108-
<div class="year">Youtube (2016-2018)</div>
109-
<p class="p">Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit odit sapiente vero optio aliquid nesciunt perspiciatis vitae nostrum? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repellendus, perferendis repudiandae. Quae sit soluta.</p>
110-
</div>
111-
<div class="units">
112-
<h4>Software Developer -</h4>
113-
<div class="year">Microsoft (2018-2023)</div>
114-
<p class="p">Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit odit sapiente vero optio aliquid nesciunt perspiciatis vitae nostrum? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam dicta illo molestias fuga, laboriosam .</p>
105+
<div class="con" id="skills">
106+
<div class="units">
107+
<h4>HTML Developer -
108+
<span>Pinterest (2010-2012)</span></h4>
109+
<p class="p">Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit odit sapiente vero optio aliquid nesciunt perspiciatis vitae nostrum? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Asperiores, illum vero sed sit tempora voluptatibus! </p>
110+
</div>
111+
<div class="units">
112+
<h4>Web Designer -
113+
<span>Facebook (2012-2014)</span></h4>
114+
<p class="p">Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit odit sapiente vero optio aliquid nesciunt perspiciatis vitae nostrum?Lorem ipsum dolor, sit amet consectetur adipisicing elit. Veritatis corporis deleniti officia ipsam placeat.</p>
115+
</div>
116+
<div class="units">
117+
<h4>Frontend Developer -
118+
<span>Instagram (2014-2015)</span></h4>
119+
<p class="p">Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit odit sapiente vero optio aliquid nesciunt perspiciatis vitae nostrum? Lorem ipsum dolor sit amet consectetur adipisicing elit. A, ipsa natus eligendi adipisci sapiente ratione?</p>
120+
</div>
121+
<div class="units">
122+
<h4>Node.js Developer -
123+
<span>Twitter (2015-2016)</span></h4>
124+
<p class="p">Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit odit sapiente vero optio aliquid nesciunt perspiciatis vitae nostrum? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis blanditiis voluptatum omnis, eum hicdo</p>
125+
</div>
126+
<div class="units">
127+
<h4>FullStack Developer -
128+
<span>Youtube (2016-2018)</span></h4>
129+
<p class="p">Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit odit sapiente vero optio aliquid nesciunt perspiciatis vitae nostrum? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repellendus, perferendis repudiandae. Quae sit soluta.</p>
130+
</div>
131+
<div class="units">
132+
<h4>Software Developer -
133+
<span>Microsoft (2018-2023)</span></h4>
134+
<p class="p">Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit odit sapiente vero optio aliquid nesciunt perspiciatis vitae nostrum? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam dicta illo molestias fuga, laboriosam .</p>
135+
</div>
136+
115137
</div>
116-
117138
</div>
139+
118140

119141
</section>
120142
<footer>
@@ -131,7 +153,7 @@ <h4>Software Developer -</h4>
131153
<div>Services</div>
132154
<div>Contact</div>
133155
</div>
134-
<div>
156+
<!-- <div>
135157
<div>Home</div>
136158
<div>About</div>
137159
<div>Services</div>
@@ -144,7 +166,7 @@ <h4>Software Developer -</h4>
144166
<div>Services</div>
145167
<div>Contact</div>
146168
147-
</div>
169+
</div> -->
148170

149171
</div>
150172

0 commit comments

Comments
 (0)