Amrita website

-

 AIM: Create a web site for Amrita School of Arts and Sciences. (Hint: CSS3 and HTML5).

SOURCE CODE:

<!DOCTYPE html>

<html lang="en">

<head>

 <title>record 12</title>

 <link rel="stylesheet" href="r12.css">

 <link rel="icon" type="image/png" href="amrita.png">


</head>

<body>

 <header>

 <h1>Amrita Vishwa Vidyapeetham,Kochi Campus</h1>

</header>

<br>

<div>

<navbar class="navbar">

 <ul>

 <li><a href="https://www.amrita.edu/campus/kochi"> Home</a></li>

 <li><a href="https://www.amrita.edu/news-all"> News</a></li>

 <li><a href="https://www.amrita.edu/jobs/"> Jobs</a></li>

 </ul>

</navbar>

</div>

<main>

 <section>

 <h2>About us</h2>

 <p>The expansive and serene Brahmasthanam Temple Complex at Edappally, Kochi, by the

NH-17 is home to Amrita Vishwa Vidyapeetham, Kochi, which is candidly achieving fame and

glory. The University founded by the well-known humanitarian, Sadguru Sri Mata

Amritanandamayi Devi, offers academic education rooted in Indian cultural history. Amrita

Vishwa Vidyapeetham is a multi-campus, multi-disciplinary research university that is rated as

one of the top research universities in India and is certified by NAAC with a “A++” rating.

 There are three primary schools on the site, which the UGC and Ministry of Human

Resource Development of India have authorized.

 <ol>

 <li>

 School of Arts, Humanities & Commerce

 </li>

 <li>

Fourth Semester INT MCA – B BATCH

School of Computing, Amrita Vishwa Vidyapeetham, Kochi Campus

 School of Physical Sciences

 </li>

 <li>

 School of Computing

 </li>

 </ol></p>

 <div class="gallery">

 <a target="_blank" href="https://www.amrita.edu/school/computing/kochi/">

 <img

src="https://www.stjohns.worcs.sch.uk/_site/data/files/images/content/F39912F3A367CC0B3A17

3C15511B25D9.jpg" alt="background" width="100" height="100">

 </a>

 <div class="description">Computing</div>

 </div>

 <div class="gallery">

 <a target="_blank" href="https://www.amrita.edu/school/physical-sciences/kochi/">

 <img src="https://encryptedtbn0.gstatic.com/images?q=tbn:ANd9GcThE_YHagI509RzLLFa1OiJ288FJyGwW80z3g&s.jpg"

alt="background" width="100" height="100">

 </a>

 <div class="description">Physical Science</div>

 </div>

 <div class="gallery">

 <a target="_blank" href="https://www.amrita.edu/school/arts-humanitiescommerce/kochi/">

 <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRxbFhQ1Uvq_ABh-VvqJNJxEYPNziUCXF8eQ&s.jpg" alt="background" width="100" height="100">

 </a>

 <div class="description">Arts,Commerce & Humanities</div>

 </div>

 </section>

 <article>

 <h3>Related Links</h3>

 <ol>

 <li><a

href="https://aumscn.amrita.edu/cas/login?service=https%3A%2F%2Faumscn.amrita.edu%2Faum

s%2FJsp%2FCore_Common%2Findex.jsp" target="_blank" class="aums">

 Amrita University Management System (AUMS)

 </a></li>

 <li><a href="https://intranet.kh.amrita.edu/" target="_blank" class="intranet"> Amrita Kochi

Intranet</a></li>

 <li><a href="https://onlineamrita.com/" class="ahead">Amrita AHEAD</a></li>

 </ol>

 <h2>Contact US</h2>

 <pre>Amrita Vishwa Vidyapeetham, Kochi Campus

 Brahmasthanam, Edappally North P. O.

Fourth Semester INT MCA – B BATCH

School of Computing, Amrita Vishwa Vidyapeetham, Kochi Campus

 Kochi – 682024


 Phone: +91 484 280 2899

 Email: kochicampus@kh.amrita.edu


 Admissions: +91 830 400 4400, +91 484 280 2000

 Email: admission@kh.amrita.edu</pre>

 </article>

</main>

</body>

</html>

CSS CODE:

*{

 box-sizing: border-box;

}

 header {

 background-image: url('https://webfiles.amrita.edu/2019/11/bUyyHitG-Aims-1384.jpg');

 background-size: cover;

 background-position: center;

 height: 200px;

 display: flex;

 align-items: center;

 justify-content: center;

 color: white;

 text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);

 font-size: 28px;

 font-weight: bold;

 }


.navbar{

 height: 50px;

}

.navbar ul{

 list-style-type: none;

 background-color: lightgreen;

 padding: 0px;

 margin: 0px;

 overflow: hidden;

}

Fourth Semester INT MCA – B BATCH

School of Computing, Amrita Vishwa Vidyapeetham, Kochi Campus

.navbar a{

 color: white;

 text-decoration: none;

 padding: 15px;

 display: block;

 text-align: center;

}

.navbar a:hover{

 background-color: hsl(0, 0%, 10%);

}

.navbar li{

 float: left;

}

.aums:hover{

 color: red;

}

.intranet:hover{

 color: green;

}

.ahead:hover{

 color: saddlebrown;

}

section{

 width: 50%;

 float:left;

 padding: 10px;

}

#img{

 float:right;

 margin-left: 10px;

}

article{

 width: 50%;

 float: right;

 padding: 100px;

}

.gallery{

 display: inline-block;

 border: 1px solid hsl(0, 0%, 60%);

 margin: 5px;

 width: 200px;

}

.gallery .description{

 padding: 10px;

 text-align: center;

 font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;

Fourth Semester INT MCA – B BATCH

School of Computing, Amrita Vishwa Vidyapeetham, Kochi Campus

}

.gallery:hover{

 border: 1px solid hsl(0, 0%, 20%);

}

.gallery img{

 width: 100%;

 height: auto;

}

pre{

 font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;

}

Comments

Post a Comment

Popular posts from this blog

Calculate Factorial using While loop in JavaScript.

-
 AIM:  Source Code: <!DOCTYPE html> <html lang="en"> <head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>Document</title> </head> <body>  <input type="button" onclick="multi_3n5()" value="click here">  <script>  function multi_3n5() {  var n = parseInt(prompt("Number : "));  var i=1,f=1;  while(i<=n){  f=f*i;  i++;  }  document.write("factorial of the number = "+f);}  </script> </body> </html>
Read more

Registration form

-
 <!DOCTYPE html><html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Student Registration Form</title></head> <body><h2>Student Registration Form</h2> <form action="submit_form.html" method="post">     <label for="name">Full Name:</label>     <input type="text" id="name" name="name" required>     <label for="email">Email:</label>     <input type="email" id="email" name="email" required>     <label for="phone">Phone Number:</label>     <input type="tel" id="phone" name="phone" required>     <label for="dob">Date of Birth:</label>     <input type="date" id="dob...
Read more

Calculator

-
 <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Document</title> </head> <body>     Enter a Number 1:<input type="text" id="number1" ><br>     Enter a Number 2:<input type="text" id="number2" ><br>     Result:<input type="text" id="result" ><br>     <input type="button" value="+" onclick="calc('+')">     <input type="button" value="-" onclick="calc('-')">     <input type="button" value="/" onclick="calc('/')">     <input type="button" value="x" onclick="calc('x')"> </body> <script> function calc(operator){     ...
Read more