Scribd
Upload
65 views12 pages

Lab Sheet 1-2

The document outlines a lab sheet assignment to create a multi-page website for Presidency University. It provides specifications for splitting the homepage into frames and creating pages for about, academics, admissions, facilities, and login sections. It then provides the code solution with HTML files for each page section and a CSS stylesheet. The solution creates the framed homepage and individual pages for each section with styling applied.

Uploaded by

sowmiya
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
65 views12 pages

Lab Sheet 1-2

The document outlines a lab sheet assignment to create a multi-page website for Presidency University. It provides specifications for splitting the homepage into frames and creating pages for about, academics, admissions, facilities, and login sections. It then provides the code solution with HTML files for each page section and a CSS stylesheet. The solution creates the framed homepage and individual pages for each section with styling applied.

Uploaded by

sowmiya
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 12

Course Code: CSE3150

Course Title: Front End Full Stack Development


Lab sheet 1 - Module 1
Problem Statement:
Mr. Kiran Student of Presidency University wants to create an attractive web page for Presidency
University using HTML and CSS with following specifications.

 Split the web page into two parts using frames, top section 20% and bottom section 80%.
 Place your college logo at the top of the page withmenu’s (About, Academic, Admission,
Facilities, etc). Createhyperlink for all menus.
 Create a web page about the college linked at the bottom of the frame.
 Create a web page about the Academic linked at the bottom of the frame.
 Create a web page about the admission, list out the departments, click any deportment name
that connects to the registration page and apply the position concept in CSS.
 Create a web page about the Facilities, list out the college facilities and display the images
using floating concepts in CSS.
 Create a web page about the login page linked at the bottom of the frame.

Solution

Home.html

frameset rows="25%,*">
    <frame src="top.html" name="top">
    <frame src="bottom.html" noresize name="bottom" >
    </frameset>
    </frameset>

Top.html

 <html>
    <head>
        <link rel="stylesheet" href="mystyle.css">
        <style>
            *    {
        margin:0;
        padding:0;
        box-sizing: border-box;
  }
    body{
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background-color: #151925;
        font-family: sans-serif;
        font-weight: bold;
  }
  a
  {
        position: relative;
        display: inline-block;
        padding:25px 15px;
        margin:20px 10px;
        color: #03e9f4;
        text-decoration: none;
        text-transform: uppercase;
        transition: 0.9s;
        /* letter-spacing: 2px; */
        overflow: hidden;
        margin-right:20px;
  
  }
    a:hover
  {
        background: #03e9f4;
        color: #050801;
        box-shadow: 0 0 5px #03e9f4, 0 0 25px #03e9f4, 0 0 50px #03e9f4, 0 0 200px #03e9f4;
        -webkit-box-reflect:below 1px linear-gradient(transparent, #0005);
  
  }
    a:nth-child(1)
  {
        filter:hue-rotate(270deg);
  }
    a:nth-child(2)
  {
        filter:hue-rotate(110deg);
  }
    a:nth-child(3)
  {
        filter:hue-rotate(200deg);
  }
    a:nth-child(4)
  {
        filter:hue-rotate(270deg);
  }
    a:nth-child(5)
  {
        filter:hue-rotate(110deg);
  }
    a:nth-child(6)
  {
        filter:hue-rotate(186deg);
  }
    a span
  {
        position: absolute;
        display:block;
  }
    a span:nth-child(1)
  {
        top:0;
        left:0;
        width:100%;
        height:2px;
        background: linear-gradient(90deg, transparent,#03e9f4);
        animation: animate1 1s linear infinite;
  }
    @keyframes animate1
  {
        0%{left:-100%;}
        50%,100%{left:100%;}
  }
    a span:nth-child(2)
  {
        top:-100%;
        right:0;
        width:2px;
        height:100%;
        background: linear-gradient(180deg, transparent,#03e9f4);
        animation: animate2 1s linear infinite;
        animation-delay: 0.25s;
  }
    @keyframes animate2
  {
        0%{top:-100%}
        50%, 100%{top:100%;}
  }
    a span:nth-child(3)
  {
        bottom:0;
        right:0;
        width:100%;
        height:2px;
        background: linear-gradient(270deg, transparent,#03e9f4);
        animation: animate3 1s linear infinite;
        animation-delay: 0.5s;
  }
    @keyframes animate3
  {
        0%{right:-100%}
        50%, 100%{right:100%;}
  }
    a span:nth-child(4)
  {
        bottom:-100%;
        left:0;
        width:2px;
        height:100%;
        background: linear-gradient(360deg, transparent,#03e9f4);
        animation: animate4 1s linear infinite;
        animation-delay: 0.75s;
        /* border-radius:20px; */
  }
    @keyframes animate4
  {
        0%{bottom:-100%}
        50%, 100%{bottom:100%;}
  }
  
  
    </style>
    </head>
    <body>
        <imgsrc="pulogo.png" alt="PU Logo" style="background-color:white; padding:10px;border-
radius: 10px; margin-top: 5px;margin-bottom: 5px; height:100px; border:3px solid lightgrey">
        <a href="about.html" target="bottom">
            Home<span></span>
            <span></span>
            <span></span>
            <span></span>
        </a>
        <a href="academics.html" target="bottom">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            Academic
        </a>
        <a href="admission.html" target="bottom">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            Admissions
        </a>
        <a href="facilities.html" target="bottom">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            Facilities
        </a>
        <a href="login.html" target="bottom">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            Login
        </a>
        <a href="Register.html" target="bottom">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            Register
        </a>
    </body>
</html>
About.html

<html>
    <head>
        <style>
            body
      {
                background-color: rgb(193, 193, 189);
      }
        </style>
    </head>
<body>
    <h1>   Over View</h1>
    <p><b>About the University</p>
    <imgsrc="pu.jpg">
</body>
</html>

Academics.html
<html>
<body>
  
    <h1 style="text-align:center">   WELCOME<br> TO <br>PRESIDENCY UNIVERSITY
</h1>
  
    </body>
</html>

Admission.html
<html>
<head>
    <link rel="stylesheet" href="mystyle.css">
    <style>
        body
    {
            background-color: rgba(189, 189, 188, 0.79);
    }
        .static
    {
        position:sticky;
        top:0;
        right:0;
        display: inline;
        float: right;
        font-size:25px;    
        border-radius: 15px;
        padding:10px;
        background-color: aliceblue;
        box-shadow: 0 0 25px black;
    }
        li
    {
            list-style: none;
            margin:8px 5px;
    }
    a
    {
            text-decoration: none;
            color:rgb(50, 53, 51);
    }
        li:hover
    {
            border:2px solid black;
            display:inline-block;
            padding:8px;
            color: azure;
            border-radius: 20px;
            background-color:rgb(37, 38, 43);
    }
        h1
    {
            /* border:2px solid black; */
            display: inline-block;
            padding:5px;
            color:darkslateblue;
            text-shadow: 2px 1px 2px rgb(120, 127, 131);
    }

    </style>
</head>
<body>
    <div class="static">
        <a href="register.html"> For Admission Click Here</a></div>
<h1 >Admissions Open </h1>
<ul>
  <a href="register.html"><li>School of Engineering</li></a>
  <a href="register.html"><li>School of Law</li></a>
  <a href="register.html"><li>School of Management</li></a>
 <a href="register.html"><li>School of Commerce</li></a>
 <a href="register.html"><li>School of Design</li></a>
</ul>
</body>
</html>

Facilities.html
<html>
  <head>
    <title>Facilities</title>
    <style>
    body
  {
      background-color: rgb(211, 215, 211);
  }
    img
  {
      float:right;
      height:200px;
      width:350px;
      border-radius: 20px;
      margin:110px 19px;
  }
  p
  {
   
      margin:29px 23px;
      font-size: 24px;
      width:750px;
      text-align: justify;
  }
    h1
  {
      font-family:'Courier New', Courier, monospace;
      font-size:30px;
      margin:25px 203px;
      border:2px solid black;
      display: inline-block;
      padding:5px;
      border-radius: 15px;
      background-color: lightgray;
  }
    #a2
  {
      float: left;
      margin:160px 10px;
  }
    #P2
  {
      /* border:2px solid black; */
      margin:10px 370px;
      width:650px;
  }
    #h2
  {
      margin:10px 10px;
  }
    </style>
  </head>
  <body>

    <imgsrc="Library.jpg" alt="Library" class="image" id="a1">


    <h1>Library</h1>
  <p>
    The Presidency University reference and lending library is well-stocked with a vast collection of
books, reports, journals and periodicals. The library also provides access to the best of business and
management-related digital resources through its subscription to various databases consisting of
scholarly and industry-relevant content. Students utilize these services for their classroom-related
work and for further research into their areas of interest.
  </p>

  <imgsrc="classroom.jpg" alt="Library" class="image" id="a2">


  <h1 #id="H2">Classrooms</h1>
  <p id="P2">
    The Presidency University reference and lending library is well-stocked with a vast collection of
books, reports, journals and periodicals. The library also provides access to the best of business and
management-related digital resources through its subscription to various databases consisting of
scholarly and industry-relevant content. Students utilize these services for their classroom-related
work and for further research into their areas of interest.
   </p>
    <imgsrc="Library.jpg" alt="Library" class="image" id="a1">
    <h1>Library</h1>
  <p>
    The Presidency University reference and lending library is well-stocked with a vast collection of
books, reports, journals and periodicals. The library also provides access to the best of business and
management-related digital resources through its subscription to various databases consisting of
scholarly and industry-relevant content. Students utilize these services for their classroom-related
work and for further research into their areas of interest.
  </p>

  <imgsrc="classroom.jpg" alt="Library" class="image" id="a2">


  <h1 #id="H2">Classrooms</h1>
  <p id="P2">
    The Presidency University reference and lending library is well-stocked with a vast collection of
books, reports, journals and periodicals. The library also provides access to the best of business and
management-related digital resources through its subscription to various databases consisting of
scholarly and industry-relevant content. Students utilize these services for their classroom-related
work and for further research into their areas of interest.
   </p>
</body>
</html>
Login.html

<html>
<head>

    <title>Login_Page</title>
</head>
<body>
            <h1 >
                Login Page - // code here
            </h1>
</body>
</html>

Registration .html

<html>
<head>

    <title>Login_Page</title>
</head>
<body>
            <h1 >
               RegistrationPage - // code here
            </h1>
</body>
</html>

Output:
Home page:
Admission page

Facilities Page

Login page
Registration page

You might also like