Scribd Logo
Upload

Welcome to Scribd!

  • Archita1 Websyslabexer

    Uploaded by

    Tijnara Archita
    2 views11 pages

    Original Title

    Archita1_websysLabexer

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    2 views11 pages

    Archita1 Websyslabexer

    Uploaded by

    Tijnara Archita

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 11

    Archita, Aranjit D

    BSIT3

    WebSys
    HTML/CSS
    Html
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>A Responsive Website</title>
    <link rel="stylesheet" href="style.css" />
    <script src="../custom-scripts.js" defer></script>
    </head>
    <body>
    <main>

    <!-- Header/Navigation Start -->


    <header>
    <nav class="nav container">
    <h1><a href="#">WebSys</a></h1>

    <ul class="menu_items">
    <img src="" alt="timesicon" id="menu_toggle" />
    <li><a href="#" class="nav_link">Home</a></li>
    <li><a href="#" class="nav_link">About</a></li>

    <li><a href="#" class="nav_link">Contact</a></li>


    </ul>
    <img src="" alt="timesicon" id="menu_toggle" />
    </nav>
    </header>
    <!-- Header End -->

    <!--Start -->
    <section class="hero">
    <div class="row container">
    <div class="column">
    <h1>Sample</h1><br />
    <h2>sample lang po ito. Maraming Salamat!</h2>
    <p></p>
    <div class="buttons">
    <button class="btn">Read More</button>
    <button class="btn">Contact Us</button>
    </div>
    </div>
    <div class="column">
    <img src="D:\Docs\websyslabexer1\Power-Wordle.png" alt="sampleimg" class="sample_img" />
    </div>
    </div>

    </section>
    <!-- Hero End-->

    <!--Footer-->
    <footer>
    <div class=”footer-content”>
    <center><h2>Aranjit Archita</h2>
    </div>
    </footer>
    </main>

    <script>
    const header = document.querySelector("header");
    const menuToggler = document.querySelectorAll("#menu_toggle");

    menuToggler.forEach(toggler => {
    toggler.addEventListener("click", () => header.classList.toggle("showMenu"));
    });
    </script>
    </body>
    </html>

    CSS
    @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");
    * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
    }
    main {
    background: #6610f2;
    }
    .container {
    max-width: 1300px;
    width: 100%;
    margin: 0 auto;
    }
    header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    }
    .nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 60px;
    }

    .menu_items {
    display: flex;
    list-style: none;
    gap: 20px;
    }
    a {
    color: #fff;
    text-decoration: none;
    }

    /* Hero */
    .hero {
    position: relative;
    min-height: 100vh;
    width: 100%;
    background-position: 10px 10px, bottom 215px right 10px, left 55% top -1%, left 45% bottom -1px;
    background-repeat: no-repeat;
    }

    .hero .row {
    display: flex;
    align-items: center;
    min-height: 100vh;
    height: 100%;
    width: 100%;
    padding: 0 60px;
    gap: 30px;
    justify-content: space-between;
    }
    .hero .row h2,
    .hero .row p {
    color: #fff;
    }
    .hero .row h2 {
    font-size: 26px;
    margin-bottom: 16px;
    }
    .hero .row h1 {
    font-size: 46px;
    margin-bottom: 16px;
    }
    .hero .column {
    width: 50%;
    }
    .buttons {
    display: flex;
    margin-top: 25px;
    gap: 10px;
    }
    .btn {
    padding: 14px 26px;
    background: #fff;
    border-radius: 50px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    }
    .btn:last-child {
    border: 2px solid #fff;
    background: transparent;
    color: #fff;
    }
    .btn:last-child:hover {
    background-color: #fff;
    color: #333;
    }
    .hero_img {
    width: 100%;
    z-index: 10;
    position: relative;
    }
    #menu_toggle {
    display: none;
    }

    /*footer */
    footer{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: #111;
    height: auto;
    width: 100vw;
    padding-top: 40px;
    color: #fff;
    }
    .footer-content h3{
    font-size: 2.1rem;
    font-weight: 500;
    text-transform: capitalize;
    line-height: 3rem;
    }
    .footer-content{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    }
    .footer-content h2{
    font-size: 2.1rem;
    font-weight: 500;
    text-transform: capitalize;
    line-height: 3rem;
    }
    /* Reponsive */
    @media (width < 860px) {
    #menu_toggle {
    display: block;
    }
    .nav {
    padding: 0 20px;
    background-color: #fff;
    }

    .menu_items {
    position: fixed;
    top: 0;
    width: 260px;
    background-color: #fff;
    height: 100%;
    left: -100%;
    padding: 50px 30px 30px;
    flex-direction: column;
    transition: all 0.5s ease;
    }
    .showMenu .menu_items {
    left: 0;
    }
    a {
    color: #333;
    }
    #menu_toggle {
    width: 20px;
    cursor: pointer;
    }
    .menu_items #menu_toggle {
    position: absolute;
    top: 20px;
    right: 20px;
    }
    .hero {
    padding-top: 130px;
    }
    .hero .row {
    flex-direction: column;
    padding: 0 20px;
    justify-content: center;
    }
    .hero .row .column {
    width: 100%;
    }
    }

    @media (width < 600px) {


    .hero {
    padding-top: 80px;
    }
    .hero .row h2 {
    font-size: 26px;
    }
    .buttons {
    justify-content: center;
    }
    .btn {
    padding: 10px 16px;
    }
    }

    You might also like