Hannah-Portfolio/index.html at main · NN-Bayat/Hannah-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
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
127
128
129
130
131
132
133
134
135
136
137
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hannah</title>
    <link rel="stylesheet" href="styles.css">
    <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.1/css/all.min.css"
        integrity="sha512-5Hs3dF2AEPkpNAR7UiOHba+lRSJNeM2ECkwxUIxC1Q/FLycGTbNapWXB4tP889k5T5Ju8fs4b1P5z/iB4nMfSQ=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>

<body>
    <header class="header">
        <a href="#" class="logo"><span>Han</span>nah</a>

        <nav class="navbar" id="nav-link">
            <a href="#"class="active">Portfolio</a>
            <a href="#">Services</a>
            <a href="#">Experience</a>
            <a href="#">Projects</a>
            <a href="#">Education</a>
        </nav>

        <a href="#heading" class="contact">Contact Me</a>

        <a href="#" class="menu_btn" id="menu-btn"><i class="fa-solid fa-bars"></i></a>
    </header>

    <section class="home section_container">
        <div class="home-content">
            <h3>Hi</h3>

            <h1>I'm <span>Hannah<br></span>a Frontend Developer</h1>

            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.
                Ad autem repudiandae vero ipsum iusto id cum
                dolor, harum soluta veritatis possimus numquam explicabo
                maxime commodi.</p>

            <div class="btn-box">
                <button class="btn-1">Hire Me</button>
                <button class="btn-2">Experience</button>
            </div>
        </div>

        <div class="img-box">
            <img src="images/about-image.jpg" alt="">
        </div>

    </section>

    <section class="about">
        <div class="about-img section_container">
            <img src="images/hero-image.jpg" alt="">
        </div>

        <div class="about-content">
            <h2>About <span>Me</span></h2>
            <h3>Frontend <span>Developer</span></h3>
            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit.
                Quas eligendi delectus aliquid, id adiandae veri repellat
                repud iandae veritatis reiciendis, aspernatur quod
                perspiciatis nemo abiandae veri expedita, Sed sapiente
                dist inctio repel lendus nostrum tenetur.
            </p>
            <a href="#" class="btn-2">Experience</a>
        </div>
    </section>

    <section class="contact-form">
        <h2 id="heading">Contact <span>Me</span></h2>

        <form action="#">
            <div class="input-box">
                <input type="text" placeholder="Full Name">
                <input type="email" placeholder="Email">
            </div>

            <div class="input-box">
                <input type="number" placeholder="Phone Number">
                <input type="text" placeholder="Subject">
            </div>

            <textarea name="" id="" cols="30" rows="5" placeholder="Your Message"></textarea>

            <input type="submit" value="Send Message" class="btn-1">
        </form>
    </section>

    <footer class="footer">
        <div class="social">
            <a href="#"><i class='bx bxl-facebook-circle'></i></a>
            <a href="#"><i class='bx bxl-linkedin-square'></i></a>
            <a href="#"><i class='bx bxl-twitter'></i></a>
            <a href="#"><i class='bx bxl-instagram-alt'></i></a>
        </div>

        <ul class="list">
            <li><a href="#">FAQ</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">About Me</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">Privacy Policy</a></li>
        </ul>

        <p class="copyright">&copy; 2024 Hannah | All R ights Reserved</p>
    </footer>


    <script>

        const menuBtn = document.getElementById("menu-btn");
        const navLink = document.getElementById("nav-link");
        const menuX = menuBtn.querySelector("i")

        menuBtn.addEventListener("click", (e) => {
            navLink.classList.toggle("open");
        });

        navLink.addEventListener("click", (e) => {
            navLink.classList.remove("open");
        })

    </script>


</body>

</html>