-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
107 lines (94 loc) · 3.92 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Task Card</title>
<link rel="icon" type="image/x-icon" href="assets/programmer-icon.webp">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css">
<style>
body{
background-color: lightgrey;
font-family: Arial, Helvetica, sans-serif;
}
.container{
background-color: whitesmoke;
max-width: 768px;
border-radius: 10px;
margin: auto;
padding: 50px 400px;
margin: 50px 40px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.container p{
text-align: justify;
}
.container a{
color: black;
text-decoration: none;
}
button{
background: black;
border-radius: 25px;
width: 100px;
margin-right: 15px;
margin-top: 25px;
margin-bottom: 25px;
}
.container button a{
color: white;
font-size: 15px;
text-decoration: none;
}
.icon{
margin: auto;
max-width: 400px;
text-align: center;
margin-top: 30px;
margin-bottom: 40px;
}
.icon i{
width: 30px;
font-size: 30px;
margin-right: 20px;
}
.card{
background-color: white;
max-width: 500px;
border-radius: 10px;
margin: auto;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.card img{
border-radius: 10px 10px 0px 0px;
}
.card h2{
text-align: center;
}
.card p{
text-align: center;
padding-bottom: 25px;
}
</style>
</head>
<body>
<div class="container">
<h2>Hi Welcom to my hut</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Et mollitia veritatis, libero quod minus nulla minima veniam provident incidunt corrupti recusandae, non perferendis tempore sint quis aliquam maiores illum, doloremque possimus hic sequi dolorum voluptates esse. Incidunt repellendus velit alias, earum modi dicta non aliquam veniam quibusdam, harum, omnis laboriosam nisi quas qui tenetur ut fugit neque dolorum autem illo. Quas qui id eveniet, consequuntur labore quidem alias veritatis commodi? Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque sit maxime unde suscipit iste laudantium non qui, repellendus officia ullam, accusantium vel libero ipsum necessitatibus dignissimos ad natus? Architecto, cumque reiciendis cum mollitia vitae accusamus repudiandae delectus officiis. Ab nesciunt excepturi nostrum possimus animi, rem debitis delectus porro facilis fugit enim culpa voluptate explicabo est libero sit sed iste rerum cumque. Nesciunt ipsa, provident rerum debitis amet ratione id? Obcaecati?</p>
<button><a href="#">contact</a></button><br>
<a href="">download cv <i class="fa-solid fa-download"></i></a>
<div class="icon">
<a href="https://linkedin.com"><i class="fa-brands fa-linkedin-in"></i></a>
<a href="https://instagram.com"><i class="fa-brands fa-instagram"></i></a>
<a href="https://facebook.com"><i class="fa-brands fa-facebook-f"></i></a>
<a href="https://twitter.com"><i class="fa-brands fa-twitter"></i></a>
</div>
<div class="card">
<img src="assets/image.jpeg" alt="person" width="100%">
<h2>Khaerul Umam</h2>
<p>Fullstack Developer</p>
</div>
</div>
</body>
</html>