Aula_1/index.html at main · Thi4guinho/Aula_1 · 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
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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
    <link rel="stylesheet" href="style.css">
    <title>Personal Portfolio #08 | AsmrProg</title>
</head>

<body>

    <nav>
        <div class="logo">
            <i class="fa-solid fa-code"></i>
        </div>
        <div class="links">
            <a href="#" class="active">About</a>
            <a href="#">Portfolio</a>
            <a href="#">Contact Me</a>
        </div>
    </nav>

    <div class="about">
        <div class="left">
            <h3>UI/UX Designer</h3>
            <div class="info">
                <h2>I'm Alex Thompson</h2>
                <p>I craft seamless and engaging digital experiences.</p>
                <div class="buttons">
                    <button class="hire">
                        Hire me <i class="fa-solid fa-plus"></i>
                    </button>
                    <button class="email">
                        Copy Email <i class="fa-regular fa-copy"></i>
                    </button>
                </div>
            </div>
        </div>
        <div class="right">
            <a href="#" class="online"><i class="fa-solid fa-circle"></i> Available For Job</a>
            <img src="image/profile-1.png">
        </div>
    </div>

    <div class="works">
        <div class="left">
            <h3><i class="fa-solid fa-circle"></i> Recent Works</h3>
            <div class="works-list">
                <div class="item">
                    <div class="work-info">
                        <h5 class="active">Lead Product Designers</h5>
                        <p>2024 - Present</p>
                    </div>
                    <p>Figma</p>
                </div>
                <div class="item">
                    <div class="work-info">
                        <h5>Senior UI/UX Designer</h5>
                        <p>2021 - 2023</p>
                    </div>
                    <p>Google</p>
                </div>
                <div class="item">
                    <div class="work-info">
                        <h5>Product Designer</h5>
                        <p>2020 - 2021</p>
                    </div>
                    <p>Freelance</p>
                </div>
                <div class="item">
                    <div class="work-info">
                        <h5>Junior UX Designer</h5>
                        <p>2018 - 2020</p>
                    </div>
                    <p>Startup Inc.</p>
                </div>
            </div>
        </div>

        <div class="right">
            <div class="item">
                <a href="#">About My Work</a>
                <p>
                    At AsmrProg, we specialize in creating intuitive and visually stunning digital products. Our team is
                    dedicated to delevrering high-quality user experiences that meet your business goals. We focus on
                    user-centric design principles to ensure that our products are both functional and aesthetically
                    pleasing.
                </p>
            </div>
            <div class="item">
                <a href="#">Desing Solutions</a>
                <p>Ways to solve design challenges with creative approaches.</p>
            </div>
            <div class="item">
                <a href="#">Responsive Design</a>
                <p>Ensuring a seamless user experience across all devices.</p>
            </div>
            <div class="item">
                <a href="#">Research and Testing</a>
                <p>Using data-driven insights to inform design decisions</p>
            </div>
            <div class="item">
                <a href="#">Collaborative Projects</a>
                <p>Working with cross-functional teams to bring ideas to life.</p>
            </div>
        </div>

    </div>

    <footer>
        <a href="#">My Portfolio</a>
        <div class="socials">
            <a href="#">Github</a>
            <a href="#">Instagram</a>
            <a href="#">Linkedin</a>
        </div>
        <a href="#" class="online"><i class="fa-solid fa-circle"></i> Available For Job</a>
    </footer>

    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="script.js"></script>
</body>

</html>