Skip to content

Commit 767bb6f

Browse files
princekotadiaprincekotadia
committed
made portfolio site nav,footer and experience section mobile responsive
1 parent b46f0ce commit 767bb6f

File tree

2 files changed

+146
-60
lines changed

2 files changed

+146
-60
lines changed

‎Portfoliowebsite/port.css‎

Lines changed: 95 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;
@@ -101,7 +105,7 @@ ul li a:hover{
101105
height:540px;
102106
}
103107
.one{
104-
height:65px;
108+
height:40px;
105109
border-left: 3px solid white;
106110
}
107111
.container{
@@ -119,11 +123,6 @@ ul li a:hover{
119123
font-family: 'Merriweather', serif;
120124

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

128127
#icon{
129128
margin:8px 0px;
@@ -144,7 +143,7 @@ ul li a:hover{
144143

145144
}
146145
#vertical{
147-
height: 70px;
146+
height: 50px;
148147
}
149148
.btn{
150149

@@ -171,12 +170,18 @@ ul li a:hover{
171170
}
172171
.footer{
173172
display:flex;
174-
justify-content: space-evenly;
175-
173+
justify-content: space-around;
174+
position: relative;
175+
}
176+
.service{
177+
display: flex;
178+
gap: 50px;
179+
flex-wrap: wrap;
176180
}
177181
footer{
182+
margin-top: 50px;
178183
background-color: black;
179-
height:140px;
184+
/* height:140px; */
180185
padding: 30px 18px;
181186

182187
}
@@ -192,3 +197,81 @@ footer{
192197
background-color: blueviolet;
193198
height: 0.1rem;
194199
}
200+
201+
@media (max-width: 950px){
202+
.con{
203+
flex-direction: column;
204+
}
205+
206+
.container{
207+
flex-direction: column;
208+
justify-content: space-around;
209+
}
210+
211+
.exp{
212+
display: flex;
213+
}
214+
215+
.one{
216+
width: 50px;
217+
height: 2px;
218+
background-color: aliceblue;
219+
}
220+
221+
#vertical{
222+
height: auto;
223+
margin: 10px;
224+
}
225+
226+
.Experience{
227+
margin: 40px 100px;
228+
height: auto;
229+
}
230+
231+
.service{
232+
gap: 30px;
233+
}
234+
235+
.box{
236+
display: flex;
237+
justify-content: space-evenly;
238+
}
239+
240+
.components{
241+
font-size: 14px;
242+
}
243+
}
244+
245+
@media (max-width: 650px){
246+
.one{
247+
width: 20px;
248+
height: 2px;
249+
background-color: aliceblue;
250+
}
251+
252+
.Experience{
253+
margin: 40px 60px;
254+
}
255+
256+
.service{
257+
flex-direction: column;
258+
gap: 10px;
259+
}
260+
261+
.box{
262+
justify-content: space-around;
263+
height: 80px;
264+
/* margin-top: 0px; */
265+
}
266+
267+
268+
.components{
269+
display: grid;
270+
grid-template-columns: 1fr 1fr;
271+
grid-template-rows: 1fr 1fr 1fr;
272+
margin-top: -27px;
273+
font-size: 13px;
274+
}
275+
276+
277+
}

‎Portfoliowebsite/port.html‎

Lines changed: 51 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -65,56 +65,59 @@
6565
What I have done so far
6666
</div>
6767
<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>
95-
</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>
68+
<div class="exp">
69+
<div class="container" id="icon">
70+
<img src="https://img.icons8.com/?size=1x&id=90qJ6Mat3B0I&format=gif" alt="Error" srcset="">
71+
<img src="https://img.icons8.com/?size=1x&id=13912&format=png" alt="Error" srcset="">
72+
<img src="https://img.icons8.com/?size=1x&id=32323&format=png" alt="Error" srcset="">
73+
<img src="https://img.icons8.com/?size=512&id=13963&format=png" alt="Error" srcset="">
74+
<img src="https://img.icons8.com/?size=1x&id=19318&format=png" alt="Error" srcset="">
75+
<img src="https://img.icons8.com/?size=1x&id=22989&format=png" alt="Error" srcset="">
10076
</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>
77+
<!-- <hr class="division"> -->
78+
<div class="container" id="vertical">
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 class="one"></div>
10585
</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>
86+
<div class="con" id="skills">
87+
<div class="units">
88+
<h4>HTML Developer -
89+
<span>Pinterest (2010-2012)</span></h4>
90+
<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>
91+
</div>
92+
<div class="units">
93+
<h4>Web Designer -
94+
<span>Facebook (2012-2014)</span></h4>
95+
<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>
96+
</div>
97+
<div class="units">
98+
<h4>Frontend Developer -
99+
<span>Instagram (2014-2015)</span></h4>
100+
<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>
101+
</div>
102+
<div class="units">
103+
<h4>Node.js Developer -
104+
<span>Twitter (2015-2016)</span></h4>
105+
<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>
106+
</div>
107+
<div class="units">
108+
<h4>FullStack Developer -
109+
<span>Youtube (2016-2018)</span></h4>
110+
<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>
111+
</div>
112+
<div class="units">
113+
<h4>Software Developer -
114+
<span>Microsoft (2018-2023)</span></h4>
115+
<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>
116+
</div>
117+
115118
</div>
116-
117119
</div>
120+
118121

119122
</section>
120123
<footer>
@@ -131,7 +134,7 @@ <h4>Software Developer -</h4>
131134
<div>Services</div>
132135
<div>Contact</div>
133136
</div>
134-
<div>
137+
<!-- <div>
135138
<div>Home</div>
136139
<div>About</div>
137140
<div>Services</div>
@@ -144,7 +147,7 @@ <h4>Software Developer -</h4>
144147
<div>Services</div>
145148
<div>Contact</div>
146149
147-
</div>
150+
</div> -->
148151

149152
</div>
150153

0 commit comments

Comments
 (0)