COPS-IITBHU · kartiklucky9n · Jun 9, 2019 · Jun 10, 2019
diff --git a/newsite/Mainpage.htm b/newsite/Mainpage.htm
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>This is the beggining of a new era</title>
+  <link href="external.css" rel="stylesheet" type="text/css">
+</head>
+<body class="bodyStyle"  id="bodyStyle">
+  <ul id ="menu">
+    <li><a class="active" href="home.htm" target="main">Home</a></li>
+    <li><a target="main" href="events.htm">Events</a></li>
+    <li><a target="main" href="contact.htm">Contact</a></li>
+    <li><a target="main" href="about.htm">About</a></li>
+  </ul>
+
+  <iframe class="mainContent" name="main" src="home.htm" allowtransparency="true"></iframe>
+
+  <button class="button" onclick="counting()"><span>Wanna change?</span></button>
+  <script type="text/javascript">
+  var count=0;
+  var myVar;
+  function counting(){
+    count++;
+    myPress(count);
+  }
+
+  function myPress(count){
+    var k=document.getElementById('bodyStyle');
+    if(count>100000) count=0;
+    if(count%4==1){
+    k.style.backgroundImage="url('background2.jpg')";
+  }
+    if(count%4==2){
+      k.style.backgroundImage="url('background3.jpg')";
+    }
+    if(count%4==3){
+      k.style.backgroundImage="url('background4.jpg')";
+    }
+    if(count%4==0){
+
+    k.style.backgroundImage="url('background.jpg')";
+    }
+  }
+
+  function myTimer(){
+    count++;
+    myPress(count);
+  }
+  function setVar(){
+    myVar=setInterval(myTimer,2000);
+  }
+
+  </script>
+
+
+    <div><br><br><br><h1>OR</h1><br><br><br></div>
+
+
+
+
+
+    <button class="button" onclick="setVar()" target="main"><span>Set Random</span></button>
+    <button class="button0" onclick="clearInterval(myVar)">Stop Changing</button>
+
+
+
+</body>
+</html>
diff --git a/newsite/about.htm b/newsite/about.htm
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Home</title>
+  <link rel="stylesheet" href="external.css" type="text/css">
+</head>
+<body class="bodyStyle" id="bodyStyle">
+  <div>
+    Here I have used several effects in css, also i have used as many as tags of HTML and used JavaScripting for the effects by the buttons
+    Here i have also used form validation for empty boxes, pincode of 5 numbers and email using javascipting.
+  </div>
+</body>
+</html>
diff --git a/newsite/background.jpg b/newsite/background.jpg
diff --git a/newsite/background2.jpg b/newsite/background2.jpg
diff --git a/newsite/background3.jpg b/newsite/background3.jpg
diff --git a/newsite/background4.jpg b/newsite/background4.jpg
diff --git a/newsite/contact.htm b/newsite/contact.htm
@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Home</title>
+  <link rel="stylesheet" href="external.css" type="text/css">
+  <script type = "text/javascript">
+   <!--
+      // Form validation code will come here.
+      function validate() {
+
+         if( document.myForm.Name.value == "" ) {
+            alert( "Please provide your name!" );
+            document.myForm.Name.focus() ;
+            return false;
+         }
+         if( document.myForm.EMail.value == "" ) {
+            alert( "Please provide your Email!" );
+            document.myForm.EMail.focus() ;
+            return false;
+         }
+         if( document.myForm.Zip.value == "" || isNaN( document.myForm.Zip.value ) ||
+            document.myForm.Zip.value.length != 5 ) {
+
+            alert( "Please provide a zip in the format #####." );
+            document.myForm.Zip.focus() ;
+            return false;
+         }
+         if( document.myForm.Country.value == "-1" ) {
+            alert( "Please provide your country!" );
+            return false;
+         }
+         return( true );
+      }
+
+      function validateEmail() {
+     var emailID = document.myForm.EMail.value;
+     atpos = emailID.indexOf("@");
+     dotpos = emailID.lastIndexOf(".");
+
+     if (atpos < 1 || ( dotpos - atpos < 2 )) {
+        alert("Please enter correct email ID")
+        document.myForm.EMail.focus() ;
+        return false;
+     }
+     return( true );
+  }
+   //-->
+</script>
+</head>
+
+   <body>
+      <form action = "/cgi-bin/test.cgi" name = "myForm" onsubmit = "return(validate());">
+         <table cellspacing = "2" cellpadding = "2" border = "1">
+
+            <tr>
+               <td align = "right">Name</td>
+               <td><input type = "text" name = "Name" /></td>
+            </tr>
+
+            <tr>
+               <td align = "right">EMail</td>
+               <td><input type = "text" name = "EMail" /></td>
+            </tr>
+
+            <tr>
+               <td align = "right">Zip Code</td>
+               <td><input type = "text" name = "Zip" /></td>
+            </tr>
+
+            <tr>
+               <td align = "right">Country</td>
+               <td>
+                  <select name = "Country">
+                     <option value = "-1" selected>[choose yours]</option>
+                     <option value = "1">INDIA</option>
+                     <option value = "2">UK</option>
+                     <option value = "3">USA</option>
+                     <option value = "3">From wherever you are we don't care</option>
+                  </select>
+               </td>
+            </tr>
+
+            <tr>
+               <td align = "right"></td>
+               <td><input type = "submit" value = "Submit" /></td>
+            </tr>
+
+         </table>
+      </form>
+   </body>
+</html>
diff --git a/newsite/documents/marketing.pdf b/newsite/documents/marketing.pdf
diff --git a/newsite/events.htm b/newsite/events.htm
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<HTML>
+  <HEAD>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <TITLE>practicing</title>
+    <script></script>
+    <link rel="stylesheet" href="external.css" type="text/css">
+  </head>
+<body>
+  <table>
+    <tr>
+      <th class="c"><a href="/home/kartik/Desktop/newsite/documents/marketing.pdf" download="Events">EVENTS</a></th>
+      <th>DATES</th>
+      <th>PARTICIPANTS</th>
+    </tr>
+    <tr>
+      <td>Riqueza</td>
+      <td>03/Feb/2020</td>
+      <td>5-6</td>
+    </tr>
+    <tr>
+      <td>Pahal</td>
+      <td>03/Feb/2020</td>
+      <td>1-2</td>
+    </tr>
+    <tr>
+      <td>Technobot</td>
+      <td>03/Feb/2020</td>
+      <td>7-8</td>
+    </tr>
+    <tr>
+      <td>Maze Explorer</td>
+      <td>04/Feb/2020</td>
+      <td>4-5</td>
+    </tr>
+    <tr>
+      <td>SHE</td>
+      <td>04/Feb/2020</td>
+      <td>3-4</td>
+    </tr>
+    <tr>
+      <td>Enquista</td>
+      <td>05/Feb/2020</td>
+      <td>2-3</td>
+    </tr>
+    <tr>
+      <td>ByteTheBits</td>
+      <td>05/Feb/2020</td>
+      <td>4</td>
+    </tr>
+  </table>
+</body>
+</html>
diff --git a/newsite/external.css b/newsite/external.css
@@ -0,0 +1,165 @@
+#menu {
+   float:left;
+   width:100%;
+   height:47px;
+ }
+ .mainContent {
+   float:left;
+   width:85%;
+   height:600px;
+   border: 0;
+ }
+ .sideContent {
+   float:right;
+   width:15%;
+   height:600px;
+   border: 0;
+ }
+ ul {
+   list-style-type: none;
+   margin: 0;
+   padding: 0;
+   overflow: hidden;
+   background-color: #333;
+ }
+
+ li {
+   float: left;
+ }
+
+ li a {
+   display: block;
+   color: white;
+   text-align: center;
+   padding: 14px 16px;
+   text-decoration: none;
+   transition: 0.4s;
+ }
+
+ li a:hover {
+   background-color: #111;
+ }
+
+ table{
+   align-self: center;
+   font-style: normal;
+   font-family: sans-serif,cursive,fantasy,monospace;
+   border-collapse: collapse;
+   width: 100%;
+   background-color: #003399;
+   margin: 0;
+   padding: 0;
+   color: white;
+ }
+ th,td{
+   text-align: center;
+   padding:20px;
+   transition: 0.4s;
+ }
+
+ tr:nth-child(even){
+   background-color: #0099ff
+ }
+th.c:hover{
+   background-color:#0099ff;
+   padding: 20px 39px ;
+ }
+ a{
+
+   color: white;
+ }
+
+
+.bodyStyle{
+  background-image: url("/home/kartik/Desktop/newsite/image/background.jpg");
+  background-repeat: no-repeat;
+  background-attachment: fixed;
+  background-position: center;
+  background-size: cover;
+  transition: 0.5s;
+
+}
+
+.button0{
+  display: inline-block;
+  border-radius: 2px;
+  background-color: #00134d;
+  border: none;
+  color: #FFFFFF;
+  text-align: center;
+  font-size: 10px;
+  padding: 4px;
+  width: 100px;
+  transition: all 0.5s;
+  cursor: pointer;
+  margin: 0px;
+}
+
+
+.button{
+  display: inline-block;
+  border-radius: 10px;
+  background-color: #000000   ;
+  border: none;
+  color: #FFFFFF;
+  text-align: center;
+  font-size: 24px;
+  padding: 20px;
+  width: 170px;
+  transition: all 0.5s;
+  cursor: pointer;
+  margin: 3px;
+}
+
+.button span {
+  cursor: pointer;
+  display: inline-block;
+  position: relative;
+  transition: 0.5s;
+
+}
+
+.button span:after {
+  content: '\00bb';
+  position: absolute;
+  opacity: 0;
+  top: 0;
+  right: -20px;
+  transition: 0.5s;
+  background-color: red;
+}
+
+.button:hover span {
+  padding-right: 25px;
+
+}
+
+.button:hover span:after {
+  opacity: 1;
+  right: 0;
+
+}
+.red{
+  color:red;
+}
+.green{
+  color:green;
+}
+
+div{
+  size:40px;
+  font-size: 20px;
+  text-align: center;
+  text-indent: inherit;
+  text-rendering: geometricPrecision;
+  text-shadow: 2px;
+  text-decoration: inherit;
+  text-emphasis-color: white;
+  color:white;
+  top: 50%;
+  left: 50%;
+  padding: 40px 60px;
+}
+video{
+  radius:5px;
+}