Skip to content

Commit 49f5fdf

Browse files
HuXn-WebDevHuXn-WebDev
committed
Awesome Header
1 parent 8dfaa5f commit 49f5fdf

File tree

3 files changed

+183
-0
lines changed

3 files changed

+183
-0
lines changed

‎40. Awesome Header/index.html

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
<html lang="en">
2+
<head>
3+
<meta charset="UTF-8" />
4+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Awesome Header</title>
7+
<link rel="stylesheet" href="style.css" />
8+
<!-- Font Awesome -->
9+
<link
10+
rel="stylesheet"
11+
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css"
12+
integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ=="
13+
crossorigin="anonymous"
14+
referrerpolicy="no-referrer"
15+
/>
16+
</head>
17+
<body>
18+
<nav>
19+
<div class="icons">
20+
<i class="fa-brands fa-youtube"></i>
21+
<i class="fa-brands fa-twitter"></i>
22+
<i class="fa-brands fa-github"></i>
23+
<i class="fa-brands fa-instagram"></i>
24+
</div>
25+
<ul>
26+
<li><a href="#">HOME</a></li>
27+
<li><a href="#">WORK</a></li>
28+
<li><a href="#">CONTACT</a></li>
29+
</ul>
30+
</nav>
31+
32+
<main>
33+
<div class="content1">
34+
<div class="content">
35+
<p class="badge-label">BADGE</p>
36+
<p class="info">I'm a software engineer and UI/UX lover.</p>
37+
</div>
38+
<div class="content">
39+
<p class="badge-label">TOOLS</p>
40+
<p class="info">
41+
I've worked with lots of popular & unpopular technologies,
42+
frameworks, and libraries.
43+
</p>
44+
</div>
45+
<div class="content">
46+
<p class="badge-label">Languages</p>
47+
<div class="pills-container">
48+
<p class="pill">JS</p>
49+
<p class="pill">Golang</p>
50+
<p class="pill">Python</p>
51+
<p class="pill">Java</p>
52+
<p class="pill">Dart</p>
53+
<p class="pill">C++</p>
54+
</div>
55+
</div>
56+
</div>
57+
58+
<div class="image-container">
59+
<div class="image"></div>
60+
</div>
61+
62+
<div class="content2">
63+
<div class="content">
64+
<p class="badge-label">Previous Work</p>
65+
<p class="info">Previously I've worked with FQ8, Xerus, 2FGC</p>
66+
</div>
67+
<div class="content">
68+
<p class="badge-label">Hobbies</p>
69+
<div class="pills-container">
70+
<p class="pill">Cricket</p>
71+
<p class="pill">Football</p>
72+
<p class="pill">Swimming</p>
73+
<p class="pill">Reading</p>
74+
<p class="pill">Writing</p>
75+
<p class="pill">Coding</p>
76+
</div>
77+
</div>
78+
<div class="content">
79+
<p class="badge-label">Location</p>
80+
<p class="info">Downtown San Francisco</p>
81+
</div>
82+
</div>
83+
</main>
84+
</body>
85+
</html>

‎40. Awesome Header/meysam-jarahkar-LI7jB1925j0-unsplash.jpg

2.64 MB
Loading

‎40. Awesome Header/style.scss

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
* {
2+
padding: 0;
3+
margin: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
background: radial-gradient(#fff0f0, #f6fdff);
9+
}
10+
11+
nav {
12+
display: flex;
13+
justify-content: space-around;
14+
align-items: center;
15+
margin-top: 2rem;
16+
17+
.icons i {
18+
margin-left: 20px;
19+
font-size: 20px;
20+
cursor: pointer;
21+
}
22+
23+
ul li {
24+
display: inline;
25+
margin-left: 20px;
26+
list-style: none;
27+
a {
28+
text-decoration: none;
29+
font-family: sans-serif;
30+
color: #181818;
31+
}
32+
}
33+
}
34+
35+
main {
36+
display: flex;
37+
justify-content: space-around;
38+
align-items: center;
39+
flex-wrap: wrap;
40+
margin: 6rem;
41+
}
42+
43+
.image-container {
44+
background: #fff;
45+
border-radius: 200px;
46+
padding: 20px;
47+
box-shadow: 4px 4px 10px -4px #ccc;
48+
49+
.image {
50+
background: url(meysam-jarahkar-LI7jB1925j0-unsplash.jpg);
51+
background-repeat: no-repeat;
52+
background-size: cover;
53+
background-position: center;
54+
width: 300px;
55+
height: 500px;
56+
border-radius: 200px;
57+
}
58+
}
59+
60+
.content {
61+
margin: 3rem 0;
62+
font-family: sans-serif;
63+
64+
.badge-label {
65+
margin-bottom: 20px;
66+
font-size: 1.4rem;
67+
}
68+
69+
p.info {
70+
width: 300px;
71+
color: #4a4a4a;
72+
line-height: 1.5;
73+
}
74+
}
75+
76+
.pills-container {
77+
display: grid;
78+
grid-template-columns: 100px 100px 100px;
79+
gap: 10px;
80+
.pill {
81+
border: 2px solid white;
82+
box-shadow: 4px 4px 10px -4px #ccc;
83+
84+
padding: 10px 20px;
85+
86+
border-radius: 100px;
87+
width: 100px;
88+
text-align: center;
89+
}
90+
}
91+
92+
.content2 {
93+
text-align: right;
94+
95+
.info {
96+
transform: translateX(20px);
97+
}
98+
}

0 commit comments

Comments
 (0)