testingforproject/index.html at main · RyderWanted/testingforproject · 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
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Qatar Green Project</title>

        <meta charset="UTF-8">
        <meta name="author" content="Mohammad Faiyad, Abdulla Midyan, Ayesha Tariq, Mobolaji">
        <meta name="keywords" content="Qatar, Greenery, Sustainability, Protecting the environment">
        <meta name="description" content="Making Qatar Green through various ways">
        <meta name="viewport" content="initial-scale=1.0, width=device-width, user-scalable=no, maximum-scale=1">

        <link rel="stylesheet" href="home.css" type="text/css">

        <script>
            function openNav() {
                // Check if the screen width is less than or equal to 600px
                if (window.innerWidth <= 600) {
                    document.getElementById("Sidenav").style.width = "70%";
                } else {
                    document.getElementById("Sidenav").style.width = "250px";
                }
            }

            function closeNav() {
                document.getElementById("Sidenav").style.width = "0";
            }
        </script>
    </head>
    <body> <!-- Add an image and some transparency to the image -->
        <div id="Sidenav" class="sidenavig">
            <a href="javascript:void(0)" class="closebutton" onclick="closeNav()">&times;</a>
            <br>
            <a href="index.html" target="_self">Home</a>
            <br>
            <a href="Links.html" target="_self">Our Research</a>
            <br>
            <a href="Ourinfo.html" target="_self">About Us</a>
            <br>
        </div>
        <header> <!-- This is the light pale green background area-->
            <button onclick="openNav()">&#9776; Pages</button>
            <br>
            <img src="home assets/tempicon.png.jpg" alt="pretend logo">
            <h1>Qatar Green Project</h1>
            <br>
            <h3>For Greenery, We Will Always Stand.</h3>
            <br>
            <br>
            <br>
        </header>
        <main> <!-- This is the white background area-->
            <br>
            <br>
            <img src="home assets/frontpageintrofile.jpg" alt="enter an introductory image">
            <br>
            <br>
            <h2>Welcome to Qatar Green Project</h2>
            <p>This Project was built to create awarness and inform people of the ongoing status of sustainability in Qatar, the decision and steps Qatar has taken and how far it has reached the community including Qatar's Vision 2030.</p>
            <br>
            <br>
            <section class="setimages">
                <img src="home assets/frontpagefile.jpeg" alt="these are test images">
                <img src="home assets/frontpagefiles.jpg" alt="these are test images">
            </section>
            <section class="setimages2">
                <img src="home assets/frontpagefile2.jpg" alt="these are test images">
                <img src="home assets/frontpagefile3.jpg" alt="these are test images">
            </section>
            <section class="mobimages">
                <section id="advert"> <!-- This is for the Advert Carousel -->
                    <img class="mySlides" src="home assets/frontpagefile.jpeg" alt="">
                    <img class="mySlides" src="home assets/frontpagefiles.jpg" alt="">
                    <img class="mySlides" src="home assets/frontpagefile2.jpg" alt="">
                    <img class="mySlides" src="home assets/frontpagefile3.jpg" alt="">
                </section>
            </section>
                  <!--Add carousel here or in CSS -->
                  <script>
                     var myIndex = 0;
                carousel();

                function carousel() {
                  var i;
                  var x = document.getElementsByClassName("mySlides");
                  for (i = 0; i < x.length; i++) {
                    x[i].style.display = "none";
                  }
                  myIndex++;
                  if (myIndex > x.length) {
                    myIndex = 1
                  }
                  x[myIndex - 1].style.display = "block";
                  setTimeout(carousel, 3000);
                }

                  </script>
            <div class="homeend">
            <a href="Links.html"><button class="further">Learn More!</button></a>
            <hr>
            <p>Bright Future International School <span>|</span> Abu Hamour </p>
            </div>
        </main>
    </body>
</html>