Skip to content

Commit 62df04a

Browse files
Riddhi12349Riddhi12349
authored
A portfolio website (devvsakib#51)
* Add files via upload * Add files via upload
1 parent b899a9b commit 62df04a

File tree

10 files changed

+220
-0
lines changed

10 files changed

+220
-0
lines changed

‎my Portfolio/bk1.jpg‎

9.16 KB
Loading

‎my Portfolio/chillies.png‎

39.4 KB
Loading

‎my Portfolio/cloud.png‎

3.81 KB
Loading

‎my Portfolio/computer.png‎

2.57 KB
Loading

‎my Portfolio/css/styles.css‎

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
/* All properties in alphabetical order */
2+
/* ** For seeing unique color pallets goto 'colorhunt.com' */
3+
*{
4+
margin:0; /* css (as margin) set default by browser will now be reset to 0px */
5+
}
6+
/* **** ( 16px = 1em = 100% ) */
7+
body{
8+
9+
font-family: 'Baloo Bhai 2', cursive;
10+
text-align: center;
11+
font-size: 22px;
12+
}
13+
.container1{
14+
margin-top: 0px;
15+
background: #E4F9F5;
16+
text-align:center;
17+
margin-top: 0px;
18+
}
19+
20+
.mountain{
21+
margin: 20px auto 10px;
22+
23+
}
24+
25+
h1{
26+
margin-top: 80px;
27+
font-family: 'Sacramento', cursive;
28+
font-size: 100px;
29+
color: #54BAB9;
30+
word-spacing: 24px;
31+
letter-spacing: 2px;
32+
}
33+
.head{
34+
font-size: 35px;
35+
color: #54BAB9;
36+
}
37+
.cloud1{
38+
position: absolute;
39+
top: 360px;
40+
left: 380px;
41+
}
42+
.cloud2 img{
43+
position: relative;
44+
top: 70px;
45+
left: 350px;
46+
47+
}
48+
h2,h3,a{
49+
color: #11999E;
50+
51+
}
52+
.bottom{
53+
margin: 40px 60px;
54+
}
55+
h2{
56+
font-size: 40px;
57+
}
58+
.skill-row{
59+
width:50%;
60+
margin: 100px auto 100px;
61+
text-align: left;
62+
}
63+
.Myprofile{
64+
height: 200px;
65+
width: 200px;
66+
}
67+
.profile{
68+
margin:100px 100px;
69+
}
70+
71+
.wd1{
72+
width: 45%;
73+
float:left;
74+
margin-right: 30px;
75+
76+
margin-bottom: 30px;
77+
78+
}
79+
.wd2{
80+
width: 45%;
81+
float:right;
82+
margin-left: 30px;
83+
84+
}
85+
.btn{
86+
border-radius :8px;
87+
word-spacing: 10px;
88+
text-decoration:none;
89+
border:2px solid #30e3cb;
90+
91+
background-image: linear-gradient( #11cdd4,#11999e);
92+
color:white;
93+
padding:6px 18px 6px 18px;
94+
95+
}
96+
.button{
97+
margin:60px;
98+
}
99+
.btn:hover{
100+
background-image: linear-gradient( #30e3cb,#2bc4ad);
101+
102+
}
103+
/* (ANTI - FLOAT PROPERTIES ----by using this property our text will not wrap around the image only heading will wrap around it.)
104+
.content{
105+
clear:left;
106+
or
107+
clear:right;
108+
} */
109+
110+
/* **** u can use css button-generator.com to make button in just 2 mins. */
111+
112+
.bottom-container{
113+
background-color: #66BFBF;
114+
height: 260px;
115+
width:100%;
116+
117+
}
118+
.footer-link{
119+
120+
margin: 40px auto 40px;
121+
color: white;
122+
text-decoration: none;
123+
124+
}
125+
.links{
126+
127+
display: inline-block;
128+
margin: 80px 80px 70px;
129+
}

‎my Portfolio/favicon (2).ico‎

318 Bytes
Binary file not shown.

‎my Portfolio/girl.jpg‎

55.6 KB
Loading

‎my Portfolio/index.html‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Riya_Garg</title>
6+
<link rel="stylesheet" href="css/styles.css">
7+
<link rel="shortcut icon" href="favicon (2).ico" type="image/x-icon">
8+
<link href="https://fonts.googleapis.com/css2?family=Anek+Kannada:wght@300&family=Baloo+Bhai+2&family=Balthazar&family=Dancing+Script:wght@600&family=Prompt:wght@300&family=Sansita+Swashed:wght@300&family=Signika+Negative&family=Square+Peg&family=Titillium+Web:ital@1&family=Ubuntu:ital,wght@0,400;1,300&family=Vazirmatn:wght@200&display=swap" rel="stylesheet">
9+
<link href="https://fonts.googleapis.com/css2?family=Anek+Kannada:wght@300&family=Balthazar&family=Dancing+Script:wght@600&family=Prompt:wght@300&family=Sacramento&family=Sansita+Swashed:wght@300&family=Signika+Negative&family=Square+Peg&family=Titillium+Web:ital@1&family=Ubuntu:ital,wght@0,400;1,300&family=Vazirmatn:wght@200&display=swap" rel="stylesheet">
10+
</head>
11+
<body>
12+
<div class="container1">
13+
14+
15+
<div class="cloud2">
16+
<img src="cloud.png" alt="image">
17+
</div>
18+
19+
<h1>Hi! I'm Riya</h1>
20+
<p class="head">a programmer</p>
21+
22+
<div class="cloud1">
23+
<img src="cloud.png" alt="image">
24+
</div>
25+
26+
27+
28+
<div class="mountain">
29+
<img src="mountain.png" alt="an image">
30+
</div>
31+
</div>
32+
<div class="middle-container">
33+
<div class="profile">
34+
<img src="girl.jpg" class="Myprofile" alt="myprofile">
35+
<h2>Hello . Welcome to my Website</h2>
36+
<p class="content">With a programmer , I'm web developer . I like to read books , doing coding , and yaa good enough googler</p>
37+
</div>
38+
39+
<div class="skills">
40+
<h2> My Skills </h2>
41+
<div class="skill-row">
42+
<img class="wd1" src="wd.jpg" alt="image">
43+
<h3>Web Development</h3>
44+
<p>I started my web devlopment in my first year of college with the hope of building great websites.This is fun in itself , writing code, executing it , thinking bugs and all makes you a good coder. </p>
45+
</div>
46+
<div class="skill-row">
47+
<img class="wd2" src="bk1.jpg" alt="image">
48+
<h3>Reading Books</h3>
49+
<p class="content">I think books are something which can change our life or our perspective towards our life which according to me is a great thing in itself.</p>
50+
</div>
51+
</div>
52+
53+
<div class="contact-me">
54+
<h2 class="bottom">Get In Touch</h2>
55+
<h3>If you also want to code and explore.</h3>
56+
<p class="content">So , let 's code and make beautiful websites and explore much more.</p>
57+
<div class="button">
58+
<a class="btn" href="mailto:riddhigarg385@gmail.com">Contact Me</a>
59+
</div>
60+
61+
</div>
62+
</div>
63+
64+
65+
<div class="bottom-container">
66+
<div class="links">
67+
<a class="footer-link" href="https://www.linkedin.com/">LinkedIn</a>
68+
</div>
69+
70+
<div class="links">
71+
<a class="footer-link" href="https://www.instagram.com/">Instagram</a>
72+
</div>
73+
<div class="links">
74+
<a class="footer-link" href="https://www.twitter.com/">Twitter</a>
75+
</div>
76+
<div class="links">
77+
<a class="footer-link" href="https://www.website.com/">Website</a>
78+
</div>
79+
80+
81+
82+
<div class="link2">
83+
<p>© 2022 Riddhi Garg @The Company</p>
84+
</div>
85+
86+
87+
</div>
88+
89+
90+
</body>
91+
</html>

‎my Portfolio/mountain.png‎

64.3 KB
Loading

‎my Portfolio/wd.jpg‎

6.81 KB
Loading

0 commit comments

Comments
 (0)