IMG-html-css/index.html at master · ranasiddharth/IMG-html-css · 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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- what is the exact function of the viewport tag -->
  <title>Information Management Group</title>
  <link rel="icon" href="images/favicon.ico">
  <link rel="stylesheet" href="styles.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
  <nav class="navbar">
    <ul>
      <li class ="navbar-logo image"><img title="IMG Logo"src="images/imglogo.png" alt="img-logo" width="50px" height="50px"></li>
      <li class="navbar-toggle ham"><i class="fa fa-bars"></i></li>
      <li class="navbar-links"><a href="blog.html">BLOG</a></li>
      <li class="navbar-links"><a href="#">PROJECTS</a></li>
      <li class="navbar-links"><a href="#">TEAM</a></li>
      <li class="navbar-links alum"><a href="#">ALUMNI</a></li>
    </ul>
  </nav>
  <div class="container1">

    <div class="left1">
      <div class="left1-up">
        <h1>Playing with</h1>
        <br>
        <h1>new ideas</h1>
      </div>
      <div class="left1-down">
        <p>The group flaunts a wide spectrum of projects, influencing over eight thousand lives on campus.</p>
      </div>
    </div>
    <div class="right1">
      <div class="right1-mid">
        <img src="images/computer.png" alt="computer" width="70%" height="50%">
      </div>
    </div>
  </div>
  <div class="second-div">
    <div class="mid-up">
      <h1 style="margin-bottom: 20px; margin-top: 20px;">Projects</h1>
      <div style="margin-top: 55px;"><img src="images/project.png" alt="projects" width="300px" height="175px"></div>

    </div>

    <div class="second-div-flex">
      <div class="one">
        <div class="one1">1</div>
        <div class="one2" style="font-size: 20px;"><p style="font-weight: 550;">R Drive</p></div>
        <div class="one3"><p style="color: #99999999; font-style: italic;  font-size: 14px; font-weight: 550;">An inhouse solution for the media storage and sharing at IIT-R.</p></div>
      </div>
      <div class="two">
        <div class="two1">2</div>
        <div class="two2" style="font-size: 20px;"> <p style="font-weight: 550;">Noticeboard</p></div>
        <div class="two3"><p style="color: #99999999; font-style: italic; font-size: 14px; font-weight: 550;">The official e-noticeboard for IIT-R.</p></div>

      </div>
      <div class="three">
        <div class="three1">3</div>
        <div class="three2"  style="font-size: 20px;"><p style="font-weight: 550;">No Dues</p></div>
         <div class="three3"><p style="color: #99999999; font-style: italic;  font-size: 14px; font-weight: 550;">Digitises the hectic process of obtaining no dues which were previously to be taken from 12-15 offices individually now from your personal desktop.</p></div>
      </div>
      <div class="four">
        <div class="four1">4</div>
        <div class="four2"  style="font-size: 20px;"><p style="font-weight: 550;">Connect-e-dil</p></div>
         <div class="four3"><p style="color: #99999999; font-style: italic;  font-size: 14px; font-weight: 550;">A fun app active in valentine's week (that time of the year), where students can send and receive roses (even anonymously), make couples, vote for other couples and shoutout their heart out.</p>
         </div>
      </div>

    </div>
    <button class=view>View More</button>
 </div>
 <div class="third-div">
  <h1 style="margin-bottom: 20px; margin-top: 20px;">Blog</h1>
  <div class="third-div-flex">
     <div class="third-left">
       <img src="images/blog.png" alt="blog" width="300px" height="175px">
     </div>
     <div class="third-right">
       <div class="third-right1"><p>Ken the ins and outs of life and moil at IMG.
        Find answers to all your whats, whys and hows.</p></div>
     </div>
  </div>
  <button class="view">Read More</button>
</div>
<div class="fourth-div">
  <div class="inner">
    <div class="fourth-left">
      <h4 style="margin-bottom: 20px; margin-top: 20px;">Contact Us</h1>
       <p>1st floor, ICC, IIT Roorkee</p>
       <p>Roorkee,</p>
       <p>Uttarakhand, India - 247667</p>
       <br>
       <div id="icons">
         <div><i class="fa fa-phone ""></i><span class="f" style="margin-left:12px; color:gold;">01332-284-521</span></div>
         <div style="margin-top:20px;"><i class="fa fa-envelope-o" aria-hidden="true"></i><span class="f"style="margin-left:12px; color: gold;">img@iitr.ac.in</span></div>


        <br>
        <div class="icons1"><i class="fab fa-github"></i>
          <i class="fa fa-facebook-official"></i>
          <i class="fa fa-instagram"></i></div></div>


    </div>
    <div class="fourth-right">
      <h4 style="margin-bottom: 20px; margin-top: 20px;">About</h1>
       <p>As the institute evolves, so does IMG. We are a student group, which cultivates technical innovation and drives the development of software systems and niche applications which empathize with the residents of IIT Roorkee, making their digital stay as seamless as possible. We survive on action and results, getting it done faster, better and more efficiently, with one goal in mind: Simplifying the business of college life.</p>
    </div>
  </div>

</div>
<div class="last">
  <p style="margin-left: 4vw;">&copy 2021 Information Management Group</p>
</div>
<script>

$(document).ready(function(){
  $(window).scroll(function(){
  	var scroll = $(window).scrollTop();
	  if (scroll > 1) {
	    $(".navbar").css("background" , "white");
      $(".navbar").addClass("active");
	  }
    if(scroll<=1){
      $(".navbar").css("background" , "none");
      $(".navbar").removeClass("active");
    }
  })
})
</script>
</body>
</html>