Scribd
Upload
70 views9 pages

Pseudocode

The document contains the HTML code for the website of Eastern Samar State University's main campus. It includes sections for the header with navigation links, an introductory text section, and a section listing courses offered. The navigation links allow users to access pages for home, courses, information, about, and history. The header also includes the university's logo and menus for mobile.

Uploaded by

Adriane Garcia
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
70 views9 pages

Pseudocode

The document contains the HTML code for the website of Eastern Samar State University's main campus. It includes sections for the header with navigation links, an introductory text section, and a section listing courses offered. The navigation links allow users to access pages for home, courses, information, about, and history. The header also includes the university's logo and menus for mobile.

Uploaded by

Adriane Garcia
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/ 9

<!

DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="with=device-width, initial-scale=1.0">
    <title>ESSU Main Files</title>
    <link rel="stylesheet" href="style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?
family=Bebas+Neue&family=Poppins:wght@100;200;300;400;600;700&display=swap"
rel="stylesheet">
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/
fontawesome.min.css">
</head>
<body>
    <section class="header">
        <nav>
            <a href="index.html"><img src="image/logo.png"></a>
            <div class="nav-links" id="navLinks">
                <i class="fa fa-times" onclick="hideMenu()"></i>
                 <ul>
                    <li><a href="">HOME</a></li>
                    <li><a href="">COURSES</a></li>
                    <li><a href="">INFORMATION</a></li>
                    <li><a href="">ABOUT</a></li>
                    <li><a href="">HISTORY</a></li>
                 </ul>
            </div>
            <i class="fa fa-bars" onclick="showMenu()"></i>
        </nav>

        <div class="text-box">
            <h1>Eastern Samar State University</h1>
            <p>This website is created for the deep information about ESSU Main
Campus,
                in this website you will see who is the teachers, <br>admin
officials, facilities
                and even course offerings, here inside the ESSU.
            </p>
            <a href="" class="hero-btn">Visit us to know more</a>
        </div>

    </section>
<section class="course">
    <h1>List of Courses That We Offer</h1>
    <p>This is the courses that the Eastern Samar State University offers for the
upcoming<br>
        students who will enroll here, click the buttons below to view more.</p>
    <div class="row">
        <div class="course-col">
        <h3>Intermediate</h3>
        <p>
            An intermediate course is the first year of a programme that is then
continued<br> at
            another university.</p>
        </div>
        <div class="course-col">
        <h3>Degree</h3>
        <p>
            Degrees are divided both by discipline and the level of study.</p>
        </div>
         <div class="course-col">
         <h3>Post Graduation</h3>
        <p>
            relating to or occurring in the time following completion of an
undergraduate degree.</p>
         </div>
    </div>
   

</section>

<script>

    var navLinks = document.getElementById("navLinks");

    function showMenu(){
        navLinks.style.right = "0";
    }
    function hideMenu(){
        navLinks.style.right = "-200px";
    }
</script>

</body>
</html>
*{
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
}
.header{
    min-height: 100vh;
    width: 100%;
    background-image: linear-
gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),url(image/banner.jpg);
    background-position: center;
    background-size: cover;
    position: relative;
}
nav{
    display: flex;
    padding: 2% 6%;
    justify-content: space-between;
    align-items: center;
}
nav img{
    width: 150px;  
}
.nav-links{
    flex: 1;
    text-align: right;
}
.nav-links ul li{
    list-style: none;
    display: inline-block;
    padding: 8px 12px;
    position: relative;
}
.nav-links ul li a{
    color: #fff;
    text-decoration: none;
    font-size: 13px;
}
.nav-links ul li::after{
    content: '';
    width: 0px;
    height: 2px;
    background: #c3d80a;
    display: block;
    margin: auto;
    transition: 0.5s;
}
.nav-links ul li:hover::after{
    width: 100%;
}
.text-box{
    width: 90%;
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
}
.text-box h1{
    font-size: 62px;
}
.text-box p{
    margin: 10px 0 40px;
    font-size: 14px;
    color: #fff;
}
.hero-btn{
    display: inline-block;
    color: #f0f0f0;
    border: 1px solid #fff;
    padding: 12px 34px;
    font-size: 13px;
    background: transparent;
    position: relative;
    cursor: pointer;
}
.hero-btn:hover{
    border: 1px solid #0a9e36;
    background: #0a9e36;
    transition: 1s;
}

nav .fa{
    display: none;
}

@media(max-width: 700px){
    .text-box h1{
         font-size: 20px;
    }
    .nav-links ul li{
        display: block;
    }
    .nav-links{
        position: absolute;
        background: #0a9e36;
        height: 100vh;
        width: 200px;
        top: 0;
        right: -200px;
        text-align: left;
        z-index: 2;
        transition: 1s;
    }
    nav .fa{
        display: block;
        color: #fff;
        margin: 10px;
        font-size: 22px;
        cursor: pointer;
    }
    .nav-links ul{
        padding: 30px;
    }
}
.course{
    width: 80%;
    margin: auto;
    text-align: center;
    padding: 100px;
}
h1{
    font-size: 36px;
    font-weight: 600;
}
p{
    color: #777;
    font-size: 14px;
    font-weight: 300;
    line-height: 22px;
    padding: 10px;
}
.row{
    margin-top: 5%;
    display: flex;
    justify-content: space-between;
}
.course-col{
    flex-basis: 31%;
    background: #eaaef76b;
    border-radius: 10px;
    margin-bottom: 5%;
    padding: 20px 12px;
    box-sizing: border-box;
    transition: 0.5s;
}
h3{
    text-align: center;
    font-weight: 600;
    margin: 10px 0;
}
.course-col:hover{
    box-shadow: 0 0 20px 0px rgba(148, 7, 141, 0.938);
}
@media(max-width: 700px){
    .row{
        flex-direction: column;
    }
}
Pseudocode
Start Program;
Homepage;
Home, Courses, Information, About, History;
If home, automatically goes back to home page;
If Courses, shows list of course offered;
If Information, shows the following:
Students, Teachers, Admin staffs, Facilities;
If About, displays about the webpage;
If History, shows history of ESSU;
Program End;
ESSU Main Campus Files

Start

Home Page

Home Courses Information About History

Post- About the Shows history


Intermediate Degree webpage of ESSU
Graduation

Students Teachers Admin Staffs Facilities

Shows list of Shows list of Shows list of


Show facilities
students Teachers admin staffs

End

You might also like