Skip to content

Commit a5511c0

Browse files
git-pi-egit-pi-e
committed
lot of formatting
1 parent 9de6d3d commit a5511c0

File tree

6 files changed

+119
-65
lines changed

6 files changed

+119
-65
lines changed

‎img/aboutme-div.jpg

1.22 MB
Loading

‎img/intro.jpg

197 KB
Loading

‎img/intro.jpeg renamed to ‎img/myself2.jpeg

File renamed without changes.

‎img/work-bg.jpg

1.04 MB
Loading

‎index.html

Lines changed: 28 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -14,27 +14,16 @@
1414
</head>
1515
<body>
1616

17-
<!-- <header> -->
18-
<!-- <button class="nav-toggle"></button>
1917

20-
<button class="nav-toggle">
21-
<span class="nav-button"></span>
22-
</button> -->
23-
<div id="navbar" >
24-
<!-- <span class="logo flex">
25-
<img src="./img/pi-logo.png" alt="mohite-pi">
26-
</span> -->
27-
28-
<!-- <nav class="nav flex"> -->
29-
18+
<div id="navbar">
19+
3020
<a class="nav__list" href="#home">Home</a>
3121
<a class="nav__list" href="#my-work">My Work</a>
3222
<a class="nav__list" href="#about-me">About Me</a>
3323
<a class="nav__list" href="#handles">Connect with Me</a>
34-
35-
<!-- </nav> -->
24+
3625
</div>
37-
<!-- </header> -->
26+
3827
<section class="content">
3928
<!-- Introduction -->
4029
<section class="intro" id="home">
@@ -54,34 +43,43 @@ <h1 class="w3-panel w3-border w3-jumbo w3-animate-top w3-center" >Hello, I am <s
5443
<section class="my-work" id="my-work">
5544
<div id="my_work_title"><h2 class="section__title section__title--my-work">What I do</h2></div>
5645
<div class="my-works">
57-
<div class="work">
58-
<h3 id="workid1">Learn</h3>
59-
<p id="work1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique optio alias laudantium modi blanditiis quas ipsam nulla, voluptas sequi, accusamus saepe non. Molestiae animi quisquam, nam sed minima sit esse?</p>
46+
<div class="work-div">
47+
<h3 class="workid">Learn</h3>
48+
<p class="work-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique optio alias laudantium modi blanditiis quas ipsam nulla, voluptas sequi, accusamus saepe non. Molestiae animi quisquam, nam sed minima sit esse?</p>
6049
</div>
61-
<div class="work">
62-
<h3 id="workid2">Watch</h3>
63-
<p id="work2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum, perspiciatis, nesciunt assumenda facilis id error optio, hic tenetur mollitia enim repellat architecto quibusdam! Autem dolorem maxime dignissimos distinctio cum labore?</p>
50+
<div class="work-div">
51+
<h3 class="workid">Watch</h3>
52+
<p class="work-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum, perspiciatis, nesciunt assumenda facilis id error optio, hic tenetur mollitia enim repellat architecto quibusdam! Autem dolorem maxime dignissimos distinctio cum labore?</p>
6453
</div>
65-
<div class="work">
66-
<h3 id="workid3">Sleep</h3>
67-
<p id="work3">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias natus molestiae eum nihil consequatur doloremque neque facilis at, expedita aliquid, aut, porro accusantium maiores vel nisi nemo sapiente rerum iusto?</p>
54+
<div class="work-div">
55+
<h3 class="workid">Sleep</h3>
56+
<p class="work-text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias natus molestiae eum nihil consequatur doloremque neque facilis at, expedita aliquid, aut, porro accusantium maiores vel nisi nemo sapiente rerum iusto?</p>
6857
</div>
6958
</div>
7059
</section>
7160

72-
<!-- About Me -->
7361

62+
63+
<!-- About Me -->
7464
<section class="aboutme" id="about-me">
75-
<div id="about-me-box">
65+
<div id="about-me-box-main">
7666
<div class="container"><h2 class="section__title section__title--aboutme">About Me</h2></div>
77-
<div><img src="./img/myself.jpeg" alt="Piyush" id="myself"></div>
78-
<h3 class="section__subtitle section__subtitle--aboutme">Undergrad student based in Maharashtra, India</h3>
79-
<div><p id="aboutme-para">Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero omnis eos minima illo accusantium dolorum illum nam, perspiciatis fuga deserunt deleniti. Nemo ea dolorum delectus fugiat molestiae, odit temporibus explicabo?</p>
67+
68+
<div class="aboutme-container ">
69+
<div class="aboutme-text work-flex" style="flex-grow: 7">
70+
<h3 class="section__subtitle section__subtitle--aboutme">Undergrad student based in Maharashtra, India</h3>
71+
<p id="aboutme-para">Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero omnis eos minima illo accusantium dolorum illum nam, perspiciatis fuga deserunt deleniti. Nemo ea dolorum delectus fugiat molestiae, odit temporibus explicabo?</p>
72+
</div>
73+
<div class="myself-img work-flex" style="flex-grow: 2; align-self: center;">
74+
<img src="./img/myself.jpeg" alt="Piyush" id="myself">
75+
</div>
8076
</div>
8177
</div>
8278
</section>
8379

84-
<!-- Connect with Me -->
80+
81+
82+
<!-- Connect with Me -->
8583
<section class="connect" id="handles">
8684
<h2 class="section__title section__title--connect">Connect With Me</h2>
8785
<div class="handles">

‎style.css

Lines changed: 91 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ body{
3636

3737
section{
3838
margin: 0;
39-
padding: 15%;
39+
padding: 12%;
4040
justify-content: center;
4141
/* height: 100vh; */
4242
}
@@ -47,29 +47,6 @@ section{
4747
}
4848

4949

50-
/* header{
51-
background-color: #42f08d;
52-
height: 30px;
53-
}
54-
.nav-div{
55-
max-width: 1152px;
56-
padding: 0 15px;
57-
margin: 0 auto;
58-
}
59-
header .nav-div nav a{
60-
color: #272525;
61-
text-decoration: none;
62-
justify-content: space-between;
63-
padding: 10px;
64-
}
65-
.logo img{
66-
max-width: 10%;
67-
}
68-
.flex{
69-
display: flex;
70-
} */
71-
72-
7350

7451

7552

@@ -129,12 +106,10 @@ header .nav-div nav a{
129106
height: 100vh;
130107
}
131108

132-
/* strong{
133-
display: inline-block;
134-
} */
135-
136109
.intro{
137-
background-image: url(./img/front-img.jpg);
110+
background-image: url(./img/intro.jpg);
111+
background-position: center;
112+
background-size: cover;
138113
}
139114

140115
#myname{
@@ -146,12 +121,16 @@ header .nav-div nav a{
146121

147122
/* My Work */
148123
#my_work_title{
149-
padding: 100px;
124+
padding: 70px;
125+
border-radius: 1em;
126+
border-width: 1px;
150127
}
151128

152129
.my-work{
153130
background-image: url(./img/bg-img.jpg);
154131
margin: 0%;
132+
background-position: center;
133+
background-size: cover;
155134

156135
}
157136

@@ -161,23 +140,55 @@ header .nav-div nav a{
161140
flex-wrap: wrap;
162141
}
163142

164-
.work {
143+
.work-div {
165144
margin-right: 3%;
166145
width: 30%;
146+
background-image: url(./img/work-bg.jpg);
147+
opacity: 0.9;
148+
background-size: cover;
149+
border: #272525;
150+
border-width: 1em;
151+
border-radius: 5%;
167152
}
168153

169-
work p {
154+
.work-div p {
170155
text-align: justify;
156+
padding-left: 1em;
157+
padding-right: 1em;
158+
padding-bottom: 1em;
171159
}
172160

173161
.section__title--my-work{
174162
text-align: center;
163+
font-family: 'Nunito', sans-serif;
164+
font-weight: 800;
165+
border: #f5f0f0;
166+
border-width: 1px;
167+
168+
}
169+
170+
.workid{
171+
text-align: center;
172+
color: #272525;
173+
font-weight: bold;
174+
font-family: 'Nunito', sans-serif;
175+
}
176+
177+
.work-text{
178+
color: #363333;
179+
font-weight: 300;
180+
175181
}
176182

183+
184+
185+
177186
/* About Me */
178187
.aboutme{
179188
background-image: url(./img/abtme-img.jpg);
180189
margin: 0%;
190+
background-position: center;
191+
background-size: cover;
181192

182193
}
183194

@@ -187,10 +198,34 @@ work p {
187198
margin-right: 5%;
188199
}
189200

201+
/* .section__title--aboutme{
202+
} */
190203

204+
#about-me-box-main{
205+
background:url(./img/aboutme-div.jpg);
206+
background-position: center;
207+
background-size: cover;
208+
padding: 1em;
209+
border-radius: 7%;
210+
}
191211

212+
.aboutme-container{
213+
display: flex;
214+
flex-wrap: wrap;
215+
flex-direction: row-reverse;
216+
}
192217

218+
.section__title--aboutme{
219+
text-align: center;
220+
font-family: 'Nunito', sans-serif;
221+
font-weight: 800;
222+
border: #f5f0f0;
223+
border-width: 1px;
224+
}
193225

226+
.section__subtitle--aboutme{
227+
font-weight: 600;
228+
}
194229

195230

196231

@@ -202,19 +237,40 @@ work p {
202237
.handles a{
203238
text-decoration: none;
204239
color: #42f08d;
240+
border:#363333;
241+
}
242+
243+
.section__title--connect{
244+
text-align:start;
245+
font-family: 'Nunito', sans-serif;
246+
font-weight: 800;
247+
border: #f5f0f0;
248+
border-width: 1px;
249+
}
250+
251+
.folder{
252+
border: #42f08d;
253+
}
254+
255+
.handles{
256+
justify-content: center;
205257
}
206258

207259

208-
@media screen and (max-width: 800px) {
209-
.work {
260+
261+
262+
263+
264+
@media screen and (max-width: 850px) {
265+
.work-div {
210266
width: 40%;
211267
margin-right: 5%;
212268
margin-bottom: 20px;
213269
}
214270
}
215271

216272
@media screen and (max-width: 600px) {
217-
.work {
273+
.work-div {
218274
width: 80%;
219275
/* margin-right: 5%; */
220276
margin-bottom: 20px;

0 commit comments

Comments
 (0)