Skip to content

Commit 4785c77

Browse files
sajibcse68sajibcse68
committed
Done HTML Protfolio Project
1 parent ed6a661 commit 4785c77

File tree

3 files changed

+154
-1
lines changed

3 files changed

+154
-1
lines changed

‎src/bg.jpg

44.5 KB
Loading

‎src/index.html

Lines changed: 33 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,40 @@
77
<title>HTML Portfolio</title>
88
</head>
99
<body>
10+
<div class="header">
11+
<div class="content-wrapper">
12+
<h1> Sajib Khan</h1>
13+
<h2>Software Developer &amp; Instructor</h2>
14+
</div>
15+
</div>
1016

11-
Welcome to the HTML Portfolio Project
17+
<div class="tagline">
18+
<div class="content-wrapper">
19+
<h3>Learn more about Sajib</h3>
20+
<p>Sajib likes to develop Software and play with coding!</p>
21+
</div>
22+
</div>
23+
24+
<div class="skills">
25+
<div class="content-wrapper">
26+
<h3>Sajib's Skill</h3>
27+
<p>Check out what Sajib loves to write code in</p>
28+
<ul>
29+
<li>HTML</li>
30+
<li>JavaScript</li>
31+
<li>Backbone.js</li>
32+
<li>CSS</li>
33+
<li>Git</li>
34+
</ul>
35+
</div>
36+
</div>
37+
38+
<div class="contact">
39+
<div class="content-wrapper">
40+
<h3>How to contact Sajib</h3>
41+
<p>Thanks for visiting! Get in contact with [email protected] or, <a href="https://www.facebook.com/sajibcse68">Facebook</a></p>
42+
</div>
43+
</div>
1244

1345
</body>
1446
</html>

‎src/main.css

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
*, *:before, *:after {
2+
box-sizing: border-box;
3+
margin: 0;
4+
padding: 0;
5+
}
6+
7+
body {
8+
background: #F5F5F5;
9+
color: #444;
10+
font-family: "Helvetica Neue", Arial, serif;
11+
font-size: 22px;
12+
margin: 0;
13+
padding: 0;
14+
font-weight: 200;
15+
-webkit-font-smoothing: antialiased;
16+
-moz-osx-font-smoothing: grayscale;
17+
}
18+
19+
h1, h2, h3, h4 {
20+
margin: 10px 0 15px;
21+
}
22+
23+
p, ul {
24+
margin: 10px 0;
25+
}
26+
27+
ul li {
28+
margin-left: 30px;;
29+
}
30+
31+
a {
32+
color: #00b8d4;
33+
font-weight: 600;
34+
text-decoration: none;
35+
border-bottom: 3px solid #00b8d4;
36+
padding: 3px;
37+
}
38+
39+
a:hover {
40+
background-color: #00b8d4;
41+
color: white;
42+
}
43+
44+
a:active {
45+
position: relative;
46+
top: 1px;
47+
}
48+
49+
.content-wrapper {
50+
line-height: 1.4;
51+
margin: 0 auto;
52+
max-width: 900px;
53+
padding: 30px 25px;
54+
}
55+
56+
/*
57+
* HEADER
58+
*/
59+
60+
.header {
61+
align-items: center;
62+
background-color: #EFEFEF;
63+
background-image: url('bg.jpg');
64+
background-position: cover;
65+
background-repeat: no-repeat;
66+
background-size: 100% auto;
67+
border-top: 4px solid #e91e63;
68+
color: #FFFFFF;
69+
display: flex;
70+
flex-direction: column;
71+
height: 40vh;
72+
justify-content: center;
73+
min-height: 250px;
74+
padding: 0 20px;
75+
position: relative;
76+
text-align: center;
77+
}
78+
79+
@media only screen and (max-device-width: 420px) {
80+
.header {
81+
background-size: auto 100%;
82+
}
83+
}
84+
85+
.header:before {
86+
background: rgba(0, 0, 0, .7);
87+
bottom: 0;
88+
content: ' ';
89+
display: block;
90+
left: 0;
91+
position: absolute;
92+
right: 0;
93+
top: 0;
94+
z-index: 1;
95+
}
96+
97+
.header * {
98+
position: relative;
99+
z-index: 2;
100+
text-shadow: 1px 1px 10px black;
101+
}
102+
103+
.header h1 {
104+
font-size: 4rem;
105+
font-weight: 100;
106+
}
107+
108+
.header h2 {
109+
font-size: 2.1rem;
110+
font-weight: 100;
111+
margin: 5px 0;
112+
}
113+
114+
/*
115+
* SKILLS
116+
*/
117+
118+
.skills {
119+
background: #e91e63;
120+
color: white;
121+
}

0 commit comments

Comments
 (0)