FrontEnd-with-javascript/index.html at master · Aruq/FrontEnd-with-javascript · 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
<html xmlns="http://www.w3.org/1999/html">
<link>
<meta charset="UTF-8">
<title>Portfolio</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Vollkorn&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</link>
<script src="run.js" type="text/javascript"></script>
</head>

<body>

    <div id="nav-top">
        <button class="nav-button" onclick="home()">
            <p>Home</p>
        </button>
        <button class="nav-button" onclick="projects()">
            <p>Projects</p>
        </button>
        <button class="nav-button" onclick="contact()">
            <p>Contact</p>
        </button>
    </div>
    <div id="polygon_path">
        <div id="cloud-wrapper">
            <div class="x1">
                <div class="cloud"></div>
            </div>
            <div class="x2">
                <div class="cloud"></div>
            </div>
            <div class="x3">
                <div class="cloud"></div>
            </div>
            <div class="x4">
                <div class="cloud"></div>
            </div>
            <div class="x5">
                <div class="cloud"></div>
            </div>
        </div>
        <div id="sun"></div>
        <div id="wrapper">
                <div id="intro">
                    <h1>Hi, I'm Aruzhan!</h1>
                    <h4>I am studying to be a programmer. This time I am preparing a video tutorial for a web development course.</h4>
                </div>
                <div id="projects" style="display: none">
                    <div class="project-card"><button onclick="test()">test</button></div>
                    <div class="project-card"></div>
                    <div class="project-card"></div>
                </div>
                <div id="contact" style="display: none" >
                    <div class="contact-card" style="color: white">Whatsapp :87000444</div>
                </div>
            </div>
            <div id="bottom-left">
                <div class="wave"></div>
                <div class="wave"></div>
            </div>
        </div>


    <img id="github" src="./images/Octocat.png" alt="github-avatar"></img>
    <img id="umbrella" src="./images/beach-umbrella-clipart-png-2.png" alt="umbrella-avatar"></img>
    <img id="chair" src="./images/chair.png" alt="chair"></img>
    <div id="talk-bubble" alt="talk">
        Find me on
        <a href="https://github.com/Aruq" target="_blank" rel="noopener noreferrer">
            <img id="github-link"  src="images/github.png" alt="Github" height="75px" width="75px">
            </img>
        </a>
        <a href="https://www.instagram.com/qordasheva/" target="_blank" rel="noopener noreferrer">
            <img id="instagram-link" src="images/insta.png" alt="Instagram" height="75px" width="75px">
            </img>
         </div>

</body>

</html>