Scribd Logo
Upload

Welcome to Scribd!

  • Assignment 01

    Uploaded by

    Abdul Basit
    2 views7 pages

    Original Title

    assignment 01

    Copyright

    © © All Rights Reserved

    Available Formats

    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 PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    2 views7 pages

    Assignment 01

    Uploaded by

    Abdul Basit

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    of 7

    Assignment : 01

    Name : M. Sameer
    Student Id : 16164

    Input
    <html>

    <head>

    <style>

    body{

    background-color:rgb(162, 217, 199);

    border-style: dashed;

    border-color: rgb(80, 146, 167);

    border-width: 10px;

    padding: 0px;

    margin: 0px;

    .G1{

    text-align:center;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    color:rgb(190, 184, 184);

    background-color: rgb(18, 59, 136);

    font-family:sans-serif;

    height:24%;
    font-size:large;

    .p{

    font-size:x-large;

    height:2px;

    .buttons {

    text-align: center ;

    justify-content:center;

    background-color:rgb(146, 211, 214);

    padding: 8px 4px 30px 2px;

    .S1 {

    width: 109px;

    height: 52px;

    border: 3px;

    border-radius: 10px 2px 10px 2px;

    color: rgb(192, 186, 186);

    background-color:rgb(62, 102, 173);

    margin-left:2%;

    margin-top: 2%;

    font-size: large;

    .A2 {

    width: 109px;
    height: 52px;

    border: 3px;

    border-radius: 10px 2px 10px 2px;

    color: rgb(145, 129, 129);

    background-color:rgb(62, 101, 173);

    margin-left:1%;

    margin-top: 2%;

    font-size: large;

    .M3 {

    width: 109px;

    height: 52px;

    border: 3px;

    border-radius: 10px 2px 10px 2px;

    color: rgb(135, 121, 121);

    background-color:rgb(62, 101, 173);

    margin-left:1%;

    margin-top: 2%;

    font-size: large;

    .E4 {

    width: 109px;

    height: 52px;

    border: 3px;

    border-radius: 10px 2px 10px 2px;


    color: rgb(148, 132, 132);

    background-color:rgb(62, 101, 173);

    margin-left:1%;

    margin-top: 2%;

    font-size: large;

    #content-area{

    margin-top: 20px;

    text-align: center;

    </style>

    </head>

    <body>

    <div class="G1">

    <h1>Muhammad Sameer</h1>

    <p class="p">Student</p>

    </div>

    <div class="buttons">

    <button class="S1" id="introductionBtn">Introduction</button>

    <button class="A2" id="hobbiesBtn">Hobbies</button>

    <button class="M3" id="languagesBtn">Languages</button>

    <button class="E4" id="contactBtn">Contact</button>

    </div>

    <div id="content-area"></div>

    <script>
    const introText = "My name is Muhammad Sameer , I am 19 years Old ,And i am doing bachelors in
    Artificial Intelligent at Paf Kiet university , Insha Allah I will complete my bachelours in 2028.";

    const hobbiesText = "Cricket,\nGaming,\nListening Songs,\nLove Travelling,\nLove Driving";

    const languagesText = "Urdu,English,Arabic,German,Hindi,Bangali,chinese,french,spanish";

    const contactText = "m.sameer280804@Gmail.com";

    const contentArea = document.getElementById('content-area');

    const introBtn = document.getElementById('introductionBtn');

    const hobbiesBtn = document.getElementById('hobbiesBtn');

    const languagesBtn = document.getElementById('languagesBtn');

    const contactBtn = document.getElementById('contactBtn');

    function displayContent(content) {

    contentArea.textContent = content;

    introBtn.addEventListener('click', () => displayContent(introText));

    hobbiesBtn.addEventListener('click', () => displayContent(hobbiesText));

    languagesBtn.addEventListener('click', () => displayContent(languagesText));

    contactBtn.addEventListener('click', () => displayContent(contactText));

    </script>

    </body>

    </html>
    Output

    You might also like