[go: up one dir, main page]

0% found this document useful (0 votes)
12 views7 pages

Assignment 01

The document contains code for a web page profile of a student with sections for introduction, hobbies, languages, and contact information. Buttons allow toggling between the different sections and content is displayed in a centered div area using JavaScript event listeners.

Uploaded by

Abdul Basit
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
12 views7 pages

Assignment 01

The document contains code for a web page profile of a student with sections for introduction, hobbies, languages, and contact information. Buttons allow toggling between the different sections and content is displayed in a centered div area using JavaScript event listeners.

Uploaded by

Abdul Basit
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 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