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
