Skip to content

Commit f1d5d93

Browse files
ervinpepicervinpepic
committedApr 2, 2022
Added personal site using html css
1 parent a0785e7 commit f1d5d93

File tree

7 files changed

+214
-0
lines changed

7 files changed

+214
-0
lines changed
 

‎day_44/MySite/css/styles.css

+150
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,150 @@
1+
body {
2+
margin: 0;
3+
text-align: center;
4+
font-family: 'Merriweather', serif;
5+
color: #40514E;
6+
}
7+
8+
h1 {
9+
font-size: 5.625rem;
10+
margin: 50px auto 0 auto;
11+
font-family: 'Sacramento', cursive;
12+
color: #66BFBF;
13+
}
14+
15+
h2 {
16+
font-family: 'Montserrat', sans-serif;
17+
font-size: 2.5rem;
18+
color: #66BFBF;
19+
font-weight: normal;
20+
padding-bottom: 10px;
21+
}
22+
23+
h3 {
24+
font-family: 'Montserrat', sans-serif;
25+
font-size: 2.5rem;
26+
color: #11999E;
27+
}
28+
29+
a {
30+
color: #11999E;
31+
text-decoration: none;
32+
margin: 10px 20px;
33+
}
34+
35+
a:hover {
36+
color: white;
37+
}
38+
39+
p {
40+
line-height: 2;
41+
}
42+
43+
hr {
44+
border: dotted #EAF6F6 6px;
45+
border-bottom: none;
46+
width: 4%;
47+
margin: 100px auto;
48+
}
49+
50+
.top-container {
51+
background-color: #00AFC1;
52+
position: relative;
53+
padding-top: 100px;
54+
}
55+
56+
.dev {
57+
color: white;
58+
}
59+
60+
.top-cloud {
61+
position: absolute;
62+
right: 300px;
63+
top: 40px;
64+
}
65+
66+
.bottom-cloud {
67+
position: absolute;
68+
left: 250px;
69+
bottom: 300px;
70+
71+
}
72+
73+
.skill-row {
74+
width: 50%;
75+
margin: 100px auto 100px auto;
76+
text-align: left;
77+
}
78+
79+
.code-img {
80+
width: 25%;
81+
float: left;
82+
margin-right: 30px;
83+
border-radius: 50%;
84+
}
85+
86+
.chilli-img {
87+
width: 25%;
88+
float: right;
89+
margin-left: 30px;
90+
}
91+
92+
.profile-pic {
93+
border-radius: 50%;
94+
}
95+
96+
.middle-container {
97+
margin: 100px 0;
98+
}
99+
100+
.intro {
101+
width: 30%;
102+
margin: auto;
103+
}
104+
105+
.contact-message {
106+
width: 40%;
107+
margin: 40px auto 60px;
108+
}
109+
110+
.btn {
111+
background: #11cdd4;
112+
background-image: -webkit-linear-gradient(top, #11cdd4, #11999e);
113+
background-image: -moz-linear-gradient(top, #11cdd4, #11999e);
114+
background-image: -ms-linear-gradient(top, #11cdd4, #11999e);
115+
background-image: -o-linear-gradient(top, #11cdd4, #11999e);
116+
background-image: linear-gradient(to bottom, #11cdd4, #11999e);
117+
-webkit-border-radius: 8;
118+
-moz-border-radius: 8;
119+
border-radius: 8px;
120+
font-family: 'Montserrat', sans-serif;
121+
color: #ffffff;
122+
font-size: 20px;
123+
padding: 10px 20px 10px 20px;
124+
text-decoration: none;
125+
}
126+
127+
.btn:hover {
128+
background: #30e3cb;
129+
background-image: -webkit-linear-gradient(top, #30e3cb, #2bc4ad);
130+
background-image: -moz-linear-gradient(top, #30e3cb, #2bc4ad);
131+
background-image: -ms-linear-gradient(top, #30e3cb, #2bc4ad);
132+
background-image: -o-linear-gradient(top, #30e3cb, #2bc4ad);
133+
background-image: linear-gradient(to bottom, #30e3cb, #2bc4ad);
134+
text-decoration: none;
135+
}
136+
137+
.top-heading {
138+
color: #ffffff;
139+
}
140+
141+
.bottom-container {
142+
background-color: #66BFBF;
143+
padding: 50px 0 20px;
144+
}
145+
146+
.copyright {
147+
color: #ffffff;
148+
font-size: 0.7rem;
149+
padding: 10px 20px;
150+
}

‎day_44/MySite/favicon.ico

318 Bytes
Binary file not shown.

‎day_44/MySite/images/chillies.png

39.4 KB
Loading

‎day_44/MySite/images/cloud.png

3.81 KB
Loading

‎day_44/MySite/images/computer.png

2.57 KB
Loading

‎day_44/MySite/images/mountain.png

64.3 KB
Loading

‎day_44/MySite/index.html

+64
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title>Ervin Pepic</title>
9+
10+
<link rel="stylesheet" href="css/styles.css">
11+
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
12+
<link rel="preconnect" href="https://fonts.googleapis.com">
13+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
14+
<link href="https://fonts.googleapis.com/css2?family=Merriweather&family=Montserrat&family=Sacramento&display=swap" rel="stylesheet">
15+
</head>
16+
17+
<body>
18+
<div class="top-container">
19+
<img class="top-cloud" src="images/cloud.png" alt="cloud-image">
20+
<h1 class="top-heading">I'm Ervin.</h1>
21+
<h2 class="top-heading">A software <span class="dev">dev</span>eloper.</h2>
22+
<img class="bottom-cloud" src="images/cloud.png" alt="cloud-image">
23+
<img src="images/mountain.png" alt="mountain-image">
24+
</div>
25+
<div class="middle-container">
26+
<div class="profile">
27+
<img class="profile-pic" src="https://ervinpepic.com/media/images/profile/profile_pic.webp" alt="profile-pic" width="200" height="200">
28+
<h2>Hello.</h2>
29+
<p class="intro">Lorem ipsum dolor sit amet, vitae volutpat, dui conubia, dolor urna. Non auctor, montes nulla distinctio.</p>
30+
</div>
31+
<hr>
32+
<div class="skills">
33+
<h2>My Skills.</h2>
34+
<div class="skill-row">
35+
<img class="code-img" src="https://media.giphy.com/media/l1J9RFoDzCDrkqtEc/giphy.gif" alt="code-img">
36+
<h3>Lorem & Ipsum</h3>
37+
<p>Lorem ipsum dolor sit amet, quis in duis, iaculis id felis. Consectetuer vestibulum, nunc urna lectus, erat ligula. Hendrerit nam, lectus ante, ut lorem eros.</p>
38+
</div>
39+
<div class="skill-row">
40+
<img class="chilli-img" src="images/chillies.png" alt="chillies-img">
41+
<h3>Lorem Ipsum Dolor</h3>
42+
<p>Lorem ipsum dolor sit amet, mauris sed consectetuer. Etiam et eu, bibendum interdum, lacus quis mauris. Curabitur wisi, quisque vel eu, rutrum nam.</p>
43+
</div>
44+
</div>
45+
<hr>
46+
<div class="contact-me">
47+
<h2>Get In Touch</h2>
48+
<h3>Lorem ipsum dolor sit amet, non elit.</h3>
49+
<p class="contact-message">Lorem ipsum dolor sit amet, in quis, aenean amet. Phasellus sodales, tellus donec dui, ornare erat.</p>
50+
<a class="btn" href="mailto:name@email.com">CONTACT ME</a>
51+
</div>
52+
</div>
53+
54+
55+
<div class="bottom-container">
56+
<a class="footer-link" href="https://www.linkedin.com/">LinkedIn</a>
57+
<a class="footer-link" href="https://twitter.com/">Twitter</a>
58+
<a class="footer-link" href="https://www.appbrewery.co/">Website</a>
59+
<p class="copyright">© 2022 Ervin Pepic.</p>
60+
</div>
61+
62+
</body>
63+
64+
</html>

0 commit comments

Comments
 (0)
Please sign in to comment.