developer-portfolio/index.html at main · rakibal123/developer-portfolio · 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
<!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>Developer portfolio </title>
    <link rel="stylesheet" href="portfolio.css">
    <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=Open+Sans:wght@300;400&display=swap" rel="stylesheet">
</head>
<body>
    <header class="header">
        <nav>
            <h2 class="nav-title">Ma<span class="text-primary">r</span>y</h2>
            <ul>
               <li>Portfolio</li>
               <li>Blogs</li>
               <li><button class="btn-primary">Hire me</button></li>
            </ul>
        </nav>
        <!-- header banner-->
        <div class="banner">
            <div>
            <h3 class="banner-sub-title">Hi, I am </h3>
            <h1 class="banner-title">Mary Hardy</h1>
            <p class="banner-descrive">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Officia porro est exercitationem, officiis rem cumque, non commodi explicabo fuga mollitia rerum eaque quo aliquid harum.</p>
            <button class="btn-primary">Download Cv</button>

        </div>

            <img src="images\hardy.png" alt="">
        </div>

    </header>
    <main>
       <section class="about">
        <h3 class="section-title">About me</h3>
        <p class="section-description">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Doloribus earum tempore porro eaque nostrum, molestias ipsam corrupti esse nesciunt id libero eum tempora assumenda vel deserunt placeat, eveniet reprehenderit. Illum eveniet, error culpa consequuntur cumque unde voluptatibus veniam laboriosam. Exercitationem?</p>
        <div class="about-info-container">
            <div class="about-info">
                <p class="info-title">Name:</p>
                <p class="info-description">Mary Hardy</p>
            </div>
            <div class="about-info">
                <p class="info-title">Email:</p>
                <p>info21@gmail.com</p>
            </div>
            <div class="about-info">
                <p class="about-info">Specialty</p>
                <p class="info-title">Web Dev</p>
            </div>
            <div class="about-info">
                <p class="about-info">Location</p>
                <p class="info-title">Dhaka</p>
            </div>
        </div>
       </section>
    </main>
    <footer>

    </footer>
</body>
</html>