SchoolProjectWebsite/index.html at master · PeeyushKumar/SchoolProjectWebsite · 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
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>PeeRich</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <script src="https://code.jquery.com/jquery-3.5.0.js" ></script>
    <script type="text/javascript">
      $(window).on('scroll', function(){
        if($(window).scrollTop()){
          document.getElementById("underlay").style.backgroundColor = "rgba(0,0,0,0.8)";
          document.getElementById("underlay").style.height = "80px";
          document.getElementById("logo").style.width = "80px";
          document.getElementById("logo").style.margin = "0px";
          document.getElementById("list-container").style.padding = "0px";
          document.getElementById("navlist").style.backgroundColor = "rgb(0,0,0,0)";
        }
        else{
          document.getElementById("underlay").style.backgroundColor = "rgba(0,0,0,0)";
          document.getElementById("underlay").style.height = "100px";
          document.getElementById("logo").style.width = "150px";
          document.getElementById("logo").style.margin = "20px";
          document.getElementById("list-container").style.paddingTop = "50px";
          document.getElementById("navlist").style.backgroundColor = "rgb(0,0,0,0)";
        }
      })
    </script>
  </head>

  <body>

    <nav id="navbar">
      <div id="underlay">
        <img id="logo" src="image/logo.png" alt="">
        <div id="list-container">
          <ul id=navlist>
            <li><a href="#" class="active">home</a></li>
            <li><a href="#quote">about</a></li>
            <li><a href="#gallery">Gallery</a></li>
            <li><a href="#login">Attendance</a></li>
            <li><a href="#contact">contact</a></li>
            <li><a href="#footer">assistance</a></li>
          </ul>
        </div>
      </div>
    </nav>

    <section id="preview">
      <div class="overlay">
          <div class="slogan">
            <H1>Attend Today, Achieve Tommorow.</H1>
          </div>
          <div class="join">
            <a href="#login">Sign Up</a>
            <a href="#login">Log In</a>
          </div>
      </div>

      <div class="seperator1"></div>
    </section>


    <section class="content">
        <p id="quote">“Positive student behavior support helps educators and
         parents appreciate good behavior,
         and motivates all students to achieve.”</p>
      <p class="para">Absenteeism negatively impacts student’s academic performance.
         Students with poor attendance received a poor grade.
         Most faculty members concede that the regular class attendance helps student learn and improve academic outcomes.
         In fact, truant student’s relationship with faculty is also a critical factor that affects attendance.
         And student were also not able to maintain there 75% attendance.<br><br>
         The good news is that implementing cloud and mobile-based attendance management system in educational institutions will have a positive impact on student attendance. Schools, colleges and higher education institutes can use these
         innovative strategies to keep attendance high in classrooms. </p>
    </section>

    <section id="gallery">
      <h1>Gallery</h1>
      <div class="box">
        <div class="out">
          <div class="box1"></div>
          <p>Hello, how are you</p>
        </div>
        <div class="out">
          <div class="box2"></div>
          <p>Nice to meet you</p>
        </div>
        <div class="out">
          <div class="box3"></div>
          <p>Come play with me</p>
        </div>
      </div>
    </section>


    <section id="login">
      <div class="login-box">
        <div class="left-box">
          <h1>Sign Up</h1>
          <form class="register" action="index.html" method="post" id="sign-up">
            <input type="text" name="user name" placeholder="User Name">
            <input type="text" name="Email id" placeholder="Email id">
            <input type="text" name="Password" placeholder="Password">
            <input type="text" name="Confirm Password" placeholder="Confirm Password">
            <button type="button" name="button">Sign Up</button>
            <p class="message">Already have an account? <a href="#sign-in">Sign in</a>
            </p>
        </form>
      </div>
      <div class="right-box">
          <span class="signinwith">Sign in with  <br>  </span>
          <button type="button" name="button" class="social facebook">Log in with Facebook</button>
          <button type="button" name="button" class="social Twitter">Log in with Twitter</button>
          <button type="button" name="button" class="social google">Log in with Google</button>
      </div>
    </div>
    </section>


    <section id="contact">
      <div class="box">
        <h1>CONTACT</h1>
        <h2>Lets get in touch. Send us a message:</h2>
        <div class="inner-box">

          <h3><i class="material-icons" style="font-size:36px;">place</i> &nbsp;&nbsp; New Delhi, India</h3>
          <h3><i class="material-icons" style="font-size:36px;">smartphone</i> &nbsp;&nbsp; +1 831 422 3905</h3>
          <h3><i class="material-icons" style="font-size:36px;">mail</i> &nbsp;&nbsp; contact@peerich.com</h3>
          <br>
          <form>
            <input type="text" placeholder="Name" required name="Name">
            <input type="text" placeholder="Email" required name="Email">
            <input type="text" placeholder="Subject" required name="Subject">
            <input type="text" placeholder="Message" required name="Message">
            <button type="submit">SEND MESSAGE</button>
          </form>
        </div>
      </div>
    </section>

    <section>
      <div class="seperator2"></div>
    </section>

    <section id="lower">
        <div class="left">
          <div class="container1">
            <div class="front">
              <img src="image/logo.png" alt="">
            </div>
            <div class="back">
              <img src="image/logo.png" alt="">
            </div>
          </div>
        </div>
          <div class=lowlist>
            <h2>Student Lifecycle Solutions</h2>
            <ul>
              <li><a href="#">Admissions & Enrollment</a></li>
              <li><a href="#">Attendance</a></li>
              <li><a href="#">Assessment</a></li>
              <li><a href="#">Learning Management system</a></li>
            </ul>
          </div>
          <div class=lowlist>
            <h2>Academic Solutions</h2>
            <ul>
              <li><a href="#">Scheduling</a></li>
              <li><a href="#">Student Information System</a></li>
              <li><a href="#">Faculty Management System</a></li>
            </ul>
          </div>
          <div class=lowlist>
            <h2>Company</h2>
            <ul>
              <li><a href="#quote">About Us</a></li>
              <li><a href="#contact">Contact Us</a></li>
            </ul>
          </div>
    </section>

    <div class="topbutton-container">
      <a id="topbutton" href="#preview">Scroll To Top</a>
    </div>

    <footer id="footer">
      <div class="container">
        <p>Copyright &copy; <span id="peerich">PeeRich</span> 2020</p>
      </div>
    </footer>
  </body>
</html>