initial-portfolio/index.html at main · saim-codes/initial-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
<!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="./styles/style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
    <title>Initial</title>
</head>

<body>
    <!-- nav sart -->
    <div class="ultra-header">
        <nav class="navbar">
            <div class="content">
                <div class="logo">
                    <a href="index.html">SaimR.</a>
                </div>
                <ul class="menu-list">
                    <div class="icon cancel-btn">
                        <i class="fas fa-times"></i>
                    </div>
                    <li><a href="#home">Home</a></li>
                    <li><a href="#about-section">About</a></li>

                    <li><a href="#">Skills</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
                <div class="icon menu-btn">
                    <i class="fas fa-bars"></i>
                </div>
            </div>
        </nav>


        <!-- nav end -->

        <!-- home start -->


        <section class="home" id="home">
            <div class="container-home">
                <h1 class="home-heading">
                    Hi, I am Saim Raza. I am a<br> Web <span class="heading">Developer</span>
                </h1>
                <div class="btn">
                    <a href="https://drive.google.com/uc?export=download&id=1dhi59x41LcAfFjsg9SxcuWup2zIrcuNX">Get
                        CV</a>
                </div>
            </div>

        </section>
        <!-- home end -->

    </div>


    <!--  about section start  -->

    <div class="about-section" id="about-section">
        <h1 class="about-heading">
            About Me
        </h1>
        <div class="about-container">
            <div class="left-about-img">
                <img src="./img/sign transparent digital.png" alt="my image">
            </div>
            <div class="right-about-text">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur iste quam minus, quia consectetur
                beatae inventore labore facere architecto asperiores atque pariatur ab placeat minima quo?
                Necessitatibus eos sequi magnam.
                Voluptate quod, porro debitis ipsa ut unde quis quasi ab nam architecto ullam, perspiciatis
            </div>
        </div>

    </div>
    <!-- about section end  -->

    <!-- skills section start -->
    <!-- <section class="skills">
    <h1 class="skills-heading">
        My Skills
    </h1>
    <div class="skills-container">

    </div>
</section> -->
    <!-- skils section end -->


    <script>
        const body = document.querySelector("body");
        const navbar = document.querySelector(".navbar");
        const menuBtn = document.querySelector(".menu-btn");
        const cancelBtn = document.querySelector(".cancel-btn");
        menuBtn.onclick = () => {
            navbar.classList.add("show");
            menuBtn.classList.add("hide");
            body.classList.add("disabled");
        }
        cancelBtn.onclick = () => {
            body.classList.remove("disabled");
            navbar.classList.remove("show");
            menuBtn.classList.remove("hide");
        }
        window.onscroll = () => {
            this.scrollY > 20 ? navbar.classList.add("sticky") : navbar.classList.remove("sticky");
        }
    </script>


</body>


</html>