Add files via upload

eytorsousa · Jul 8, 2023 · 99cea78 · 99cea78
commit 99cea78
Show file tree

Hide file tree

Showing 7 changed files with 207 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=, initial-scale=1.0">
+
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght@400;700&display=swap" rel="stylesheet">
+
+    <link rel="stylesheet" href="src/styles/index.css">
+    <link rel="shortcut icon" href="src/imgs/favicon-32x32.png" type="image/x-icon">
+    <title>Profile Card Component</title>
+</head>
+<body>
+    <img id="top" class="hidden-mobile" src="src/imgs/bg-pattern-top.svg">
+    <img id="bottom" class="hidden-mobile" src="src/imgs/bg-pattern-bottom.svg">
+    <main>
+        <div id="main-card">
+            <div id="img-card">
+                <img src="src/imgs/bg-pattern-card.svg" alt="Background">
+            </div>
+
+            <div id="profile-pic">
+                <img src="src/imgs/image-victor.jpg" alt="Victor Crest">
+            </div>
+
+            <div id="name-age">
+                <div id="name">Victor Crest</div>
+                <div id="age">26</div>
+            </div>
+
+            <div id="london">London</div>
+
+            <div id="hr"></div>
+
+            <div id="infos">
+                <div class="info">
+                    <div class="main-number">80K</div>
+                    <div class="title">Followers</div>
+                </div>
+                <div class="info">
+                    <div class="main-number">803K</div>
+                    <div class="title">Likes</div>
+                </div>
+                <div class="info">
+                    <div class="main-number">1.4K</div>
+                    <div class="title">Photos</div>
+                </div>
+            </div>
+        </div>
+    </main>
+</body>
+</html>
diff --git a/src/imgs/bg-pattern-bottom.svg b/src/imgs/bg-pattern-bottom.svg
diff --git a/src/imgs/bg-pattern-card.svg b/src/imgs/bg-pattern-card.svg
diff --git a/src/imgs/bg-pattern-top.svg b/src/imgs/bg-pattern-top.svg
diff --git a/src/imgs/favicon-32x32.png b/src/imgs/favicon-32x32.png
diff --git a/src/imgs/image-victor.jpg b/src/imgs/image-victor.jpg
diff --git a/src/styles/index.css b/src/styles/index.css
@@ -0,0 +1,150 @@
+@charset "UTF-8";
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    width: 100vw;
+    height: 100vh;
+    max-height: 1000px;
+    background-color: hsl(185, 75%, 39%);
+    position: relative;
+    display: flex;
+    overflow: hidden;
+}
+
+#top {
+    position: absolute;
+    right: 50%;
+    transform: translateY(-500px);
+}
+
+#bottom {
+    position: absolute;
+    left: 50%;
+    transform: translateY(400px);
+}
+
+main {
+    width: 100vw;
+    height: 100vh;
+    display: flex;
+    overflow: hidden;
+}
+
+#main-card {
+    margin: auto auto;
+    font-family: 'Kumbh Sans', sans-serif;
+    width: 400px;
+    height: 450px;
+    border-radius: 18px;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    overflow: hidden;
+    background-color: white;
+    box-shadow: 0px 10px 50px rgba(0, 0, 0, 0.4);
+}
+
+#img-card {
+    width: 100%;
+    height: 35%;
+    overflow: hidden;
+}
+
+#img-card img {
+    width: 100%;
+    height: 100%;
+}
+
+#profile-pic {
+    position: absolute;
+    border: solid 5px white;
+    margin-top: 26%;
+    align-self: center;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 100%;
+    overflow: hidden;
+}
+
+#name-age {
+    margin: 70px auto 0px auto;
+    width: 170px;
+    display: flex;
+    align-items: center;
+    font-size: 1.3rem;
+}
+
+#name {
+    font-weight: 700;
+    color: hsl(229, 23%, 23%);
+}
+
+#age {
+    font-weight: 400;
+    color: hsl(227, 10%, 46%);
+    margin-left: 10px;
+}
+
+#london {
+    margin: 10px auto 0px auto;
+    width: 75px;
+    font-size: 1.1rem;
+    font-weight: 400;
+    color: hsl(227, 10%, 46%);
+}
+
+#hr {
+    margin-top: 30px;
+    width: 100%;
+    height: 1px;
+    background-color: hsl(0, 0%, 59%)
+}
+
+#infos {
+    margin-top: 30px;
+    display: flex;
+    justify-content: space-evenly;
+}
+
+
+.info {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.main-number {
+    font-weight: 700;
+    font-size: 1.4rem;
+    color: hsl(229, 23%, 23%);
+}
+
+.title {
+    font-size: 0.9rem;
+    letter-spacing: 0.1rem;
+    margin-top: 3px;
+    color: hsl(227, 10%, 46%);
+}
+
+@media (max-width: 1023px) {
+    .hidden-mobile {
+        display: none;
+    }
+
+}
+
+@media (max-width: 410px) {
+    #main-card {
+        width: 90%;
+    }
+
+    #profile-pic {
+        margin-top: 105px;
+    }
+}