social-links-profile/index.html at main · giampieropace/social-links-profile · GitHub

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
<!DOCTYPE html>
<html data-bs-theme="light" lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <title>Frontend Mentor | Social Links Profile</title>
    <meta name="description"
        content="The challenge is to build out a social links profile and get it looking as close to the design as possible.">
    <link rel="icon" type="image/png" sizes="32x32" href="assets/img/favicon-32x32.png">
    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/Inter.css">
    <link rel="stylesheet" href="assets/css/bss-overrides.css">
    <link rel="stylesheet" href="assets/css/styles.css">
</head>

<body class="text-white bg-body">
    <main class="d-flex vw-100 vh-100 justify-content-center align-items-center">
        <div
            class="bg-body-secondary border rounded-4 border-0 d-flex flex-column justify-content-start align-items-center link-box">
            <img class="rounded-circle" src="assets/img/avatar-jessica.jpeg" width="90rem" height="90rem"
                alt="Profile Image">
            <h1 class="fw-bold mt-5">Jessica Randall</h1>
            <p class="fw-semibold text-primary mb-5 box-location">London, United Kingdom</p><span
                class="fw-semibold mb-2 box-subtitle">"Front-end developer and avid reader."</span><a
                class="fw-semibold text-center border rounded-4 border-0 d-block w-100 mt-4 py-4 social-link" href="#"
                target="_blank" data-bs-target="#">GitHub</a><a
                class="fw-semibold text-center border rounded-4 border-0 d-block mt-4 py-4 social-link" href="#"
                target="_blank" data-bs-target="#">Frontend Mentor</a><a
                class="fw-semibold text-center border rounded-4 border-0 d-block mt-4 py-4 social-link" href="#"
                target="_blank" data-bs-target="#">LinkedIn</a><a
                class="fw-semibold text-center border rounded-4 border-0 d-block mt-4 py-4 social-link" href="#"
                target="_blank" data-bs-target="#">Twitter</a><a
                class="fw-semibold text-center border rounded-4 border-0 d-block mt-4 py-4 social-link" href="#"
                target="_blank" data-bs-target="#">Instagram</a>
        </div>
    </main>
</body>

</html>