Skip to content

Commit 787084e

Browse files
ibrahimhc19ibrahimhc19
committed
Number 3
1 parent 0a5ee46 commit 787084e

3 files changed

Lines changed: 146 additions & 0 deletions

File tree

‎03 - User Profile Card/index.html‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<!-- Favicon -->
8+
<link
9+
rel="icon"
10+
type="image/png"
11+
sizes="32x32"
12+
href="../favicon/ms-icon-32x32.png"
13+
/>
14+
<link
15+
rel="apple-touch-icon"
16+
sizes="60x60"
17+
href="../favicon/apple-icon-60x60.png"
18+
/>
19+
<!-- Hojas de estilos -->
20+
<link rel="stylesheet" href="styles.css" />
21+
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> -->
22+
<script
23+
src="https://kit.fontawesome.com/4086eabc67.js"
24+
crossorigin="anonymous"
25+
></script>
26+
<title></title>
27+
</head>
28+
29+
<body>
30+
<div class="cardContainer">
31+
<div class="cardTop">
32+
<li><i class="fa-solid fa-arrow-left" style="color: #ffffff"></i></li>
33+
<div class="icons-right">
34+
<li><i class="fa-solid fa-heart" style="color: #ff0000"></i></li>
35+
<li><i class="fa-solid fa-bars" style="color: #ffffff"></i></li>
36+
</div>
37+
</div>
38+
<img src="../imgs/WhatsApp Image 2023-03-29 at 19.42.27.jpg" alt="" />
39+
40+
<h1>Ibrahim Calzadilla</h1>
41+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam sapiente iusto est. Dolorem voluptatibus labore omnis error nihil alias ex? Iure sapiente, non repellendus maxime nulla quo et. Vero, ex.</p>
42+
<button type="button">Hire me</button>
43+
<div class="socials">
44+
<li><i class="fa-brands fa-instagram" style="color: #ffffff;"></i><p>100K</p></li>
45+
<li><i class="fa-brands fa-youtube" style="color: #ffffff;"></i><p>100K</p></li>
46+
<li><i class="fa-brands fa-twitter" style="color: #ffffff;"></i><p>100K</p></li>
47+
</div>
48+
</div>
49+
</body>
50+
</html>

‎03 - User Profile Card/styles.css‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200&family=Ubuntu:wght@300;400&display=swap");
2+
* {
3+
margin: 0;
4+
padding: 0;
5+
color: #f9f5f6;
6+
list-style: none;
7+
text-decoration: none;
8+
box-sizing: border-box;
9+
font-family: "Ubuntu", sans-serif;
10+
-webkit-tap-highlight-color: transparent;
11+
}
12+
13+
:root {
14+
--bg-color: linear-gradient(217deg, #ee6fca, rgba(255, 0, 0, 0) 70.71%),
15+
linear-gradient(127deg, #67bad4, rgba(0, 255, 0, 0) 70.71%),
16+
linear-gradient(336deg, #24b6e7, rgba(0, 0, 255, 0) 70.71%);
17+
--altura: 5rem;
18+
}
19+
20+
body {
21+
background-color: #dbcce9;
22+
justify-content: center;
23+
align-items: center;
24+
display: flex;
25+
width: 100%;
26+
height: 100vh;
27+
}
28+
29+
.cardContainer {
30+
background-color: black;
31+
width: 425px;
32+
height: 600px;
33+
border-radius: 8px;
34+
margin: 0 auto;
35+
display: flex;
36+
flex-direction: column;
37+
padding: 2rem;
38+
align-items: center;
39+
}
40+
41+
.cardTop {
42+
justify-content: space-between;
43+
display: flex;
44+
width: 100%;
45+
}
46+
47+
/* .cardTop li {
48+
padding: 0 1rem;
49+
} */
50+
.cardTop i {
51+
font-size: 1.6rem;
52+
}
53+
54+
.icons-right {
55+
display: flex;
56+
}
57+
58+
img {
59+
width: 150px;
60+
border-radius: 50%;
61+
}
62+
63+
button {
64+
background-color: #ffffff;
65+
width: 160px;
66+
padding: 1rem 2rem;
67+
border-radius: 2rem;
68+
color: black;
69+
font-size: 20px;
70+
font-weight: bold;
71+
}
72+
73+
.icons-right li:first-of-type {
74+
padding-right: 1rem;
75+
}
76+
77+
.socials {
78+
display: flex;
79+
justify-content: space-around;
80+
}
81+
82+
.socials li {
83+
padding: 0 1rem;
84+
}
85+
86+
h1,
87+
img,
88+
p,
89+
button {
90+
margin-bottom: 1rem;
91+
}
92+
93+
94+
p, h1{
95+
text-align: center;
96+
}

‎imgs/WhatsApp Image 2023-03-29 at 19.42.27.jpg‎

24.8 KB
Loading

0 commit comments

Comments
 (0)