Scribd
Upload
1 views43 pages

HTML, CSS

Uploaded by

Soumadip Naskar
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
1 views43 pages

HTML, CSS

Uploaded by

Soumadip Naskar
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

<br>

HTML &
CSS Programming, JavaSeript
1. Create Lambda Stock Dashboard using HTML &
CSS.

HTML CODE:

<DOCTYPE html>
<html lang="en'">
<head>
<meta charset="UTF-8">
<title>Lambda Stock Market Dashboard</title>
<link rel="stylesheet" href="'[Link]">
<link rel="stylesheet"
href="[Link] family=Roboto:400,700&display=Swap">
<link rel='stylesheet" href="[Link]
awesome/6.5.0/css/[Link]">
</head>
<body>
<div class="dashboard-bg">
<div class="container creative">
<header>
<div class="header-content">
<iclass="fas fa-chart-line fa-2x"></i>
<h2>Lambda Stock Dashboard</h2>
<span class="powered">Powered by Big Data Lambda Layers</span>
</div>
</header>

<-- Speed Layer: Real-time Data -->


<section class="layer card speed-layer glass">
<h3><iclass="fa fa-bolt"></i> Speed Layer</h3>
<div class="stock-row">
<span class="'stock-symbol">AAPL</span>
<span class="'stock-price up">$150.33</span>
<span class="'stock-change up">+1.22%</span>
<iclass="fa fa-arrow-up"></|>
</div>
<div class="'stock-row"'>
<span class="stock-symbol">TSLA</span>
<span class="stock-price down">$650.81</span>
<span class='stock-change down">-0.759%</span>
<iclass="fa fa-arrow-down"></i>
</div>
</section>
<--Batch Layer: Historical Data -->
<section class="layer card batch-layer glass">
<h3><i class="fa fa-database"></i> Batch Layer</h3>
<br>

<table>
<thead>
<tr>
<th>Date</th>
<th>Open</th>
<th>Close</th>
<th>Volume</th>
</t>
</thead>
<tbody>
<tr>
<td>2025-11-12</td>
<td>$148.50</td>
<td>$150.33</td>
<td>20M</td>
</t>
<tr>
<td>2025-11-11</td>
<td>$147.10</td>
<td>$148.50 </td>
<td>19M</td>
</tr>
</tbody>
</table>
</section>
<-- Serving Layer: Actions & Summary -->
<section class="layer card serving-layer glass"'>
<h3><i class="fa fa-user-tie"></i> Serving Layer</h3>
<div class="actions">
<button class="buy-btn"'><i class="fa fa-arrow-up"></i> Buy</button>
<button class="'sell-btn"'><iclass="fa fa-arrow-down"></i> Sell</butto n>
</div>
<div class="search">
<input type="text'" placeholder=" Q Search stock...">
</div>
<div class="chart-preview">
<img src="[Link] 20/2d333b/fff&text=Sample+Chart"
alt="Sample Chart Preview"/>
</div>
</section>
</div>
</div>
</body>
</html>
<br>

CSS CODE:
{
body
margin: 0;
background: linear-gradient(120deg, #181b22 0%, #242834 100%):
font-family: 'Roboto, Arial, sans-serif;
min-height: 100vh;
}

.dashboard-bg{
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: radial-gradient(ellipse at bottom right, #4537be36 0%, transparent 80%);

.[Link] {
width: 100%;
max-width: 1150px;
margin: auto;
padding: 2em 2.5em;
border-radius: 20px;
box-shadow: 0 12px 36px rgba(50, 50,180, 0.10), 0 1.5px 6px rgba(75,75, 125,0.10);
background: rgba(32, 34, 44, 0.85);
backdrop-filter: blur(1 4px);
}

header{
display: flex;
align-items: center;
margin-bottom: 2em;
background: transparent;
border-bottom: 2px solid #44486122;
padding-bottom: 1em;

.header-content {
display: flex;
align-items: center;
width: 100%;
gap: 1.2em;

.header-content h2 {
color: #80b2ff;
margin: 00.5em 0 0;
font-weight: 700;
font-size: 2.1rem;
letter-spacing: 2px;

.powered{
color: #3ddc97;
<br>

font-size: 1em;
margin-left: auto;
opacity: 0.8;

layer {
margin-bottom: 2em;

.card{
border-radius: 18px;
box-shadow: 0 2px 16px rgba(20,30,62,0.12);
padding: 2em 1.3em 1.5em 1.3em;
background: rgba(40,43,61,0.55);
{
-glass
backdrop-filter: blur(8px);
border: 1px solid rgba(90, 130, 210, 0.18);

.speed-layer{
border-left: 7px solid #3ddc97;
}

.batch-layer{
border-left: 7px solid #55aaff;
margin-top: -0.5em;

.serving-layer {

border-left: 7px solid #ffa 067;


margin-top: -0.5em;

.layer h3 {
margin-top: 0;
letter-spacing: 1px;
font-size: 1.32em;
display: flex;
align-items: center;
gap: 0.7em;

.stock-row {
padding: 1em 0.5em;
display: flex;
align-items: center;
gap: 1.2em;
font-size: 1.17em;
border-bottom: 1px solid #31323e60;

.stock-symbol {
font-weight: 700;
letter-spacing: 2px;
<br>

min-width: 60px;
color: #75efd7;

.[Link] {
color: #3fd96e;
font-weight: bold;

.[Link]{
color: #fa3b57;
font-weight: bold;

.[Link], .fa-arrow-up {

color: #90ff98;
}

.[Link], .fa-arrow-down {
color: #ff6f8b;
}

table {
width: 100%;
margin-top: 1em;
border-collapse: separate;
border-spacing:0 6px;
background: transparent;

th, td {
padding: 0.7em 1em;
text-align: right;
color: #cadbfd;

th {
background: #30384890;
font-size: 1em;
letter-spacing: 1px;
color: #99caf8;
border-radius: 9px 9px 00;

td{
background: #2c2f43e8;
border-radius:4pX;

.actions {
display: flex;
gap: 1.2em;
margin-bottom: 1.2em;

.buy-btn, .sell-btn{
padding: 0.75em 2em;

11 5
<br>

border: none:
border-radius: 10px;
background: linear-gradient(90deg, #77ebb5 0%, #3ddc97 100%);
color: #122726;
font-size: 1em;
font-weight: 700;
box-shadow: 0 4px 16px #37ecb93e;
cursor: pointer;
transition: 0.18s;

.sell-btn{
background: linear-gradient(90deg, #fab07e 0%, #ffa067 100%);
color: #310000;
box-shadow: 0 4px 16px #ffa 06730;

.buy-btn:hover, .sell-btn:hover {
opacity: 0.85;
transform: translateY(-1 px) scale(1 .03);

.search input[type='text'] {
margin: 0.5em 0 1.3em 0;
width: 220px;
padding: 0.7em 1.2em;
border: 1px solid #aadcf6;
border-radius: 6px;
background: #2b3648aa;
color: #b9e3f9;
font-size: 1em;
outline: none;
}

.chart-preview {
margin-top: 1.1em;
border-radius: 6px;
overflow: hidden;
background: #232848;
box-shadow: 0 2px 10px #20254a44;
}

.chart-preview img{
max-width: 100%;
display: block;

@media (max-width: 900px) {


.[Link] {padding: 1em; }
.card { padding: 1em; }

header, .header-content { flex-direction: column; gap: 0.5em; }


<br>

OUTPUT:

Stock Maket Dashbs


6 Lamsla
O
He D/Project%201/[Link]

Lambda Stock Dashboard


Powered by Big Datn Lanbda Layers

* Speed Layer
^
AAPL S150.33 +1229%
TSLA S650.81 -0.759%

Batch Layer

Date Open Close Volume


2025-11-12 SI48.50 S150.33 20M
2025-11-11 S147.10 S148.50 19M

A Serving Layer

Buy Sell
Q Search stock

Sample Chart
<br>

CSS & JavaScript.


website help of HTML,
2. Creating a portfolio

HTMLCode
<DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"> content="width=device-width, initial-scale=1.0">
<meta name="viewport"
<title>Portfolio Book</title>
<link rel="'stylesheet"
href="'[Link]'">
</head>
<body>
<l-- Previous Button -->
onclick="goToPrevious Page()">
<button class="btn prev-btn"
<i>E</i>
</button>

<-- Book Container -->


<div id="book'">
<l-- Cover Page -->
<div id="cover" class="paper">
<div class="front">
<div class="front-content">
<h1>Computer Networking</h1>
<p class="subtitle">Graphical Interface</p>
<p class="author">Santanu Bhowmik</p>
</div>
</div>
<div class="back">
<div class="back-content">
<h2>About Me</h2>
<p>Hello Students, hope all of you are greeting well. I'm Santanu Bhowmik
your center director, Haldia JYCSM. I have worked in a variety of IT fields for more than
Seven years. Ialso hold a Master of Computer Science degree. lI'm a junior research
follower as well. </p>
<div class="'skills">
<span class="'s kill-tag"'>HTML</span>
<span class="'skill-tag">CSS</span>
<span class="'skill-tag">JavaScript</span>
<span class="'s kill-tag"> React</span>
</div>
</div>
</div>
</div>

<l-- Page 1 -->


<divid="page1" class="paper">
<br>

<div class="front">
<div class="front-content">
<h2>Project 1</h2>
<div class="project-image">
<div class="img-placeholder">E-commerce Website </div>
</div>
<pclass="'project-desc">A fully responsive e-commerce platform with
shopping cart and payment integration.</p>
<divclass="tech-stack">
<span class="tech">React</span>
<span class="tech">[Link]</span>
<span class="tech">MongoDB</span>
</div>
</div>
</div>
<div class="back">
<div class="back-content">
<h2>Project 2</h2>
<div class="project-image">
<div class="img-placeholder"'>Portfolio Website</div>
</div>
<pclass="project-desc">A creative portfolio showcasing design work with
smooth animations and transitions.</p>
<div class="tech-stack">
<span class="tech">HTML5</span>
<span class="tech">CSS3</span>
<span class="tech">JavaScript</span>
</div>
</diy>
</div>
</div>

<!-- Page 2 -->


<div id="page2" class="paper">
<div class="front">
<div class="front-content">
<h2>Project 3</h2>
<div class="project-image">
<div class="img-placeholder">Task Manager App</div>
</div>
<p class="project-desc">Aproductivity app with drag-and-drop functionality
and real-time updates.</p>
<div class="tech-stack"'>
<span class="tech">[Link]</span>
<span class="tech">Firebase</span>
<span class="tech">Tailwind</span>
</div>
<br>

</div>
</div>
<div class="back">
<div class="back-content">
<h2>Experience</h2>
<div class="experience-item">
<h3>Senior Developer</h3>
<p class="company">Tech Company Inc.</p>
<p class="duration">2021 - Present</p>
</div>
<div class="experience-item">
<h3>Frontend Developer</h3>
<p class="company">Creative
Agency</p>
<p class="duration'">2019 -
2021</p>
</div>
<div class="experience-item">
<h3>Junior Developer</h3>
<p class="company">Startup
Co.</p>
<p class="duration">2018
-2019</p>
</div>
</div>
</div>
</div>

<!-- Page 3 -->


<div id="page3" class=" paper">
<div class="front">
<div class="front-content">
<h2>Skills & Expertise</h2>
<div class="skills-grid">
<div class="'skill-category'">
<h3>Frontend</h3>
<ul>
<li>HTML5 & CSS3</li>
<li>JavaScript (ES6+)</li>
<li>React & [Link]</li>
<li>Responsive Design</li>
</ul>
</diy>
<div class="skill-category">
<h3>Backend</h3>
<ul>
<li>[Link]</li>
<li>Express</li>
<li>RESTful APls</l|>
<li>Database Design</li>
</u>
<br>

</diy>
</div>
</div>
</div>
<divclass="back'">
<div class="back-content">
<h2>Contact
Me</h2>
<div class="contact-info">
<divclass="contact-itenm">
<span
class="icon"></span>
<span>jycsm45@[Link]</span>
</div>
<div
class="contact-itemn">
<span
class="icon"><|span>
<span>+91
<ldiv> 89101
<div 79332<lspan>
class="
<span contact-item"'>
class="icon'>
<span>[Link]<lspan>
</div>
<div </span>
class="'contact-item'>
<span
class="icon'>
<span>[Link]/in/jycsm</span>
<ldiv>
</div>
<p <lspan>
<ldiv>class="thank-you'>Thankyou
<Idiv>
<ldiv>
<ldiv>

<l-- forviewing
Nex
<buttonButton my
-->
class="btnnext-btn' portfolio!</p>
<|buton>

<script
<Ibody oncick="goToNextPage()">
<Ihtm> src="scriptjs><script>
<br>

CSS Code

* Global Styles /
margin: 0;
padding: 0;
box-sizing: border-box;

body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-family: 'Segoe UI, Tahoma, Geneva,
Verdana,
background: linear-gradient(135deg, #667eea 0%, sans-serif;
Overflow: hidden;
#764ba2 100%):

* Navigation Buttons */
.btn {
background: rgba(255, 255, 255, 0.9);
border: none;
width: 50px;
height: 50px;
border-radius: 50%;
Cursor: pointer;
transition: all 0.3s ease;
font-size: 24px;
color: #667 eea;
box-shadow: 0 4px 15px rgba(0,0, 0, 0.2);
z-index: 100;

.btn:hover {
background: white;
transform: scale(1.1);
box-shadow: 0 6px 20px
rgba(0, 0, 0, 0.3);

.btn:active {
transform: scale(0.95);

prev-btn {
margin-right: 20px;

.next-btn{
margin-left: 20px;
<br>

/* Book Container*/
#book {

position: relative;
width:600px;
height: 450px;
perspective: 200Opx;
display: flex;
justify-content: center;
align-items: center;

* Paper Styles */
paper{
position: absolute;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: transform
cursor: pointer; 1s cubic-bezier(0.645,
0.045, 0.355, 1);

front,
.back{
position: absolute;
width: 50%;
height: 100%;
background:
white;
backface-visibility:
padding: 30px; hidden;
overflow: hidden;
box-shadow:
0 10px 30px
rgba(0, 0,
0,0.3);
front{
right: 0;
transform-origin:
border-radius: left;
border-left: 0 10px 10px 0;
2px solid
#ddd:
.back {
left: 0;
transform:
rotateY(180deg);
transform-origin:
border-radius: right;
border-right: 10px 0
2px solid0 10px;
#ddd;
1* Page
FlipEffect
.[Link] /
transform: {
rotateY(-180deg):
<br>

z-index: 1 limportant;

/*Z-index for stacking */


#cover {
z-index: 4;

#page1 {

z-index: 3;

#page2{
z-index: 2;

#page3{
z-index: 1;

/* Content Styles */
.front-content,
.back-content{
height: 100%;
display: flex;
flex-direction: column;

h1{
font-size: 42px;
color: #667eea;
margin-bottom: 20px;
text-align: center;

h2{
font-size: 28px;
color: #667eea;
margin-bottom: 20px;
border-bottom: 3px solid #667eea;
padding-bottom: 1Opx;
}

h3{
font-size: 20px;
color: #764ba2;
margin-bottom: 8px;

p{
line-height: 1.6;
<br>

color: #333:

/* Cover Page Styles /


.subtitle{
font-size: 20px;
color: #764ba2:
text-align: center;
margin-bottom: 1Opx;
font-style: italic;

.author {
text-align: center;
font-size: 18px;
color: #666;
margin-top: auto;

/* Skills Section */
.skills {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 20px;

.skill-tag {
background: linear-gradient(1
color: white; 35deg, #667eea 0%,
#764ba2 100%);
padding: 8px 16px;
border-radius: 20px;
font-size: 14px;
font-weight: 600;
}

/* Project Styles
*/
project-image {

width: 100%;
height: 150px;
background: linear-gradient(135deg,
border-radius: 10px; #667eea 0%, #764ba2
margin: 15px 0; 100%);
display: flex;
align-items: center;
justify-content:
center;

img-placeholder{
color: white;
font-size: 20px;
<br>

font-weight: 600:
text-align: center,

project-desc
font-size: 15px;
margin-bottom: 15px;

tech-stack {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-top: auto;

{
tech
background: #f0f0f0;
color: #667eea;
padding: 5px 12px;
border-radius: 15px;
font-size: 12px;
font-weight:600;

/* Experience Styles */
.experience-item {
margin-bottom: 2Opx;
padding-bottom: 15px;
border-botto m: 1px solid #eee;

{
.experience-item:last-child
border-bottom: none;

.Company {

color: #764ba2;
font-weight: 600;
margin: 5px 0;

.duration{
color: #999;
font-size: 14px;

7 Skills Grid */
skills-grid {

display: grid;
grid-tenmplate-columns: 1fr 1fr;
<br>

gap: 20px;
margin-top: 20px;

skill-category ul (
list-style: none;
margin-top: 10px;

.skill-category li{
padding: 8px 0;
color: #666;
position: relative;
padding-left: 20px;
}

.skill-category li:before {
Content: "":
position: absolute;
left: 0;
color: #667eea;
font-weight: bold;

/* Contact Styles */
{
.contact-info
margin-top: 30px;
}

.contact-item {
display: flex;
align-items: center;
gap: 15px;
padding: 12px 0;
border-bottom: 1 px solid #eee;

{
.contact-item .icon
font-size: 24px;
}

.thank-you{
text-align: center;
margin-top: auto;
font-size: 18px;
color: #667eea;
font-weight: 600;

/*Responsive Design */
@media (max-width: 768px){
<br>

#book {
width: 90vw;
height: 400px;

.btn
width: 40px;
height: 40px;
font-size: 20px;

.front,
.back{
padding: 20px;

h1{
font-size: 32px;

h2{
font-size: 24px;

.skills-grid {
grid-template-columns: 1fr;

JavaScript Code
I/ Get all paper elements
const papers = [Link](.paper);
1/ Initialize current page state
let currentPage = 0;
const totalPages =
[Link];

1/ Set initial z-index for proper stacking


[Link]((paper, index) => {
-
[Link]= totalPages index;

1/ Function to go to next page


function goToNextPage() {

if (currentPage < totalPages) {


/ Flipthe current page
papers[current Page].class List. add ('flipped');
<br>

I/Update z-index for proper stacking


=
during animation
papers[currentPage].[Link] currentPage;

currentPage++;

I/ Function to go to previous page


function goToPrevious Page(){
if (current Page > 0){

currentPage--;

Unflip the page


1/
papers[currentPage].[Link]('flipped');:

/ Restore z-index
papers[currentPage].[Link] = totalPages - currentPage;

Il Add click event to each paper for flipping


[Link]((paper, index) =>{
[Link]('click, function(e) {
I/ Only flip forward if clicking on the front side
const rect = [Link]();
const clickX = [Link] - [Link];

I/ If clicking on right half (front) and not already flipped


>
if (clickX [Link] / 2 && ![Link](flipped')) {
if (index === currentPage){
goToNext Page();
}

I/ If clicking on left half (back) and already flipped


else if (clickX <= [Link] / 2 && [Link]('flipped')){
if (index === CurrentPage - 1){
goTo PreviousPage ():
}

1/ Keyboard navigation
[Link] EventListener('keydown', function(e) {
if ([Link] ==='ArrowRight' || [Link] ==='Enter') {
goToNextPage();
}else if ([Link] === 'ArrowLeft' || [Link] ==='Backspace') {
<br>

[Link](0: // Prevent browser back navigation


goToPrevious Page();

}):

I/ Add hover effect to show cursor pointer on


cickable areas
[Link](paper =>{
[Link]('mousemove, function(e) {
const rect = [Link]();
Const mouseX = [Link] - [Link];

1/ Show pointer cursor on the front (right) side if not flipped


if (mouseX > [Link] / 2 && ![Link]('flipped')) {
[Link] ='pointer';

1/ Showpointer cursor on the back (left) side if


flipped
else if(mouseX <=[Link] / 2 && [Link]('flipped'){
[Link] ='pointer';
}else{
[Link] = 'default';

I/Optional: Auto-openthe book when page loads


[Link] EventListener('load, function() {

| Add a slight delay for dramatic effect


setTimeout() => {
[Link]('Portfolio book loaded! Use arrow
}, 500);
keys or click to navigate.');
):

I/ Track page changes for


analytics or other purposes
function onPageChange(pageNumber) {
[Link](' Currently viewing page: $/pageNumber}' );
I/ Youcan add analytics tracking
here

/ Call thiswhenever page


changes
const originalGoToNext =goTo NextPage;
const originalGoTo Prev=goTo Previous
Page;
goToNext Page = function() {

originalGoToNext();
onPageChange(currentPage);
<br>

goTo Previous Page = function(){


originalGoTo Prev();
onPageChange(currentPage):

Code Output

Computer Ahout M Project 1

Networking

Eroject2 Contact Me
<br>

3. Build a Mind Game web game using HTML,CSS & JavaSeript.


HTML

<|DOCTYPE html>
chtml lang="en"'>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mind Puzzle - Brain Teaser Game</title >
<link rel="styles heet" href="'[Link]'>
</head>
<body>
<div class="container'>
<header>
<h1> Mind Puzzle</h1 >
<p class="'subtitle">Test Your
Memory & Logic</p>
</header>

<divclass="game-wrapper">
<divclass="game-info">
<div class="info-box">
<span class="label"'>Level:</span>
<span class="value'" id="levelDisplay">1</span>
</div>
<div class="info-box"'>
<span class="label"> Score:</span>
<span class="value" id="'scoreDisplay"'>0</span>
</div>
<div class="info -box">
<span class="label">Moves:</span>
<span class="value"
id="moves Display">0</span>
</div>
</diy>

<div class="game-board">
<div class="sequence-display"
id="sequenceDisplay">
Watch the pattern...
</div>
<div class="buttons-grid">
<button class='game-button'" id="btnO"
<button class='game-button"' id="btn1"
data-color="red"></button>
data-color="'blue'></button>
<button class="game-button'"'
id="btn2" data-color="green"></button>
<button class="game-button'"' id="btn3"
<Jdiv> data- color'yellow"></button>
<ldiv>

<div classm"controls">
<br>

cbutton class="control-btn" id="startBtn">Start Game</button>


<button class="control-btn" id="resetBtn">Reset</button>
<button class="control-btn" id="difficultyBtn" >Difficulty: Easy</button
</div>

<div class="game-status" id="gameStatus"></div>


<Jdiv>

<div class="instructions">
<h2>How to Play</h2>
<ul>
<li>Watch the color sequence
that plays automatically</i>
<li>Repeat the sequence by clicking
<li>Each round adds one more color
the colored buttons</i>
to remember</i>
<li>Complete 10 levels to win!</i>
</ul>
</div>
</div>

<script src="'[Link]"></script>
</body>
</htm>

CSS Code
*{
margin: 0;
padding: 0;
box-sizing: border-box;

body {
font-family: 'Arial, sans-serif;
background: linear-gradient(135deg,
min-height: 100vh; #667 eea 0%, #764ba2
100%):;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;

.Container{
background: white,
border-radius:
20px,
box-shadow:
0 20px 60px rgba(0,
padding: 40px; 0,0,0.3)%
max-width:
600px,
width: 100%;
<br>

header{
text-align: center;
margin-bottom: 30px;

header h1{
font-size: 3em;
color: #667eea;
margin-bottom: 10px;

.subtitle {
color: #666;
font-size: 1.2em;

-game-wrapper(
background: #f8f9fa;
padding: 30px;
border-radius: 15px;
margin-bottom: 20px;

-game-info {
display: flex;
justify-content: space-around;
margin-bottom: 3Opx;
gap: 10px;

.info-box{
background: white;
padding: 15px 25px;
border-radius: 10px;
text-align: center;
flex: 1;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);:

label {

display: block;
color: #999;
font-size: 0.9em;
margin-bottom: 5px;
<br>

value block;
display: 1.8em;
font-size:
font-weight: bold;
#667eea;
color:

.sequence-display {
text-align:
center;
font-size: 1.1em;
color: #666;
margin-bottom: 30px;
padding: 15px;
background: white;
border-radius: 10px;
min-height: 30px;
}

.buttons-grid{
display: grid; 1fr 1fr;
grid-template-columns:
gap: 20px;
margin-bottom: 30px;

-game-button {
width: 100%;
aspect-ratio: 1;
border: none;
border-radius: 10px;
cursor: pointer;
font-size: 1.2em;
font-weight: bold;
transition: all 0.2s ease; 0, 0, 0.2);
box-shadow: 0 5px 15px rgba(0,

#btn0{ #ff6b6b, #ff5252);


background: linear-gradient(135deg,
color: white;

#btn1{
background: linear-gradient(1 35deg, #4ecdc4, #44a5a0);
color: white;
<br>

#btn2 (
background: lineargradient(135deg, #95077d, #7ac74f);
color: white;

#btn3(
background: linear-gradient(135deg, #ffd93d, #ffc700);:
color: white;

-game-button:hover {

transform: translateY(-3 px);


box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);

-game-button:active,
-[Link] {
transform: scale(0.95);
opacity: 0.8;

.controls {
display: flex;
gap: 10px;
margin-bottom: 20px;
flex-wrap: wrap;
}

.control-btn {
flex: 1;
min-width: 120px;
padding: 12px 20px;
background: #667eea;
color: white;
border: none;
border-radius: 8px;
font-size: 1em;
Cursor: pointer;
transition: all 0.3s ease;
font-weight: bold;

{
.control-btn:hover
background: #5568d3;
transform: translateY(-2 px);
box-shadow: 0 5px15px rgba(102, 126, 234, 0.4);
<br>

.control-btn:active(
transform: translateY(0);

-game-status {
text-align: center;
font-size: 1.2em;
font-weight: bold;
padding: 15px;
border-radius: 8px;
min-height: 30px;
display: none;

-[Link] {

display: block;
background: #d4edda;
color: #155724;
border: 1 px solid #c3e6cb;

-[Link]{
display: block;
background: #f8d7da;
color: #721c24;
border: 1 px solid #f5c6cb;

-game-status. info{
display: block;
background: #d1ecf1;
color: #0c5460;
border: 1px solid #bee5eb;
}

.instructions {
background: #f0f4ff;
padding: 25px;
border-radius: 15px;
border-left: 4px solid #667eea;

instructions h2 (
color: #667eea;
margin-bottom: 15px;
<br>

font-size: 1.3em;

instructions ul{
list-style: none;

.instructions li {
color: #555;
margin-bottom: 10px;
padding-left: 25px;
position: relative;

.instructions li:before{
Content: " ":
position: absolute;
left: 0;
color: #667 eea;
font-weight: bold;

@media (max-width: 480px) {


.container
padding: 20px;
}

header h1{
font-size: 2em;

.buttons-grid {
gap: 15px;
}

.controls {
gap: 8px;

.control-btn {
min-width: 100px;
padding: 10px 15px;
<br>

JavaScript Code
{
class MindPuzzleGame
constructor() {

[Link] [):
[Link] [):
[Link] = 1;
[Link] =0;
[Link] = 0;
[Link] = false;
[Link] ='easy';
[Link] = 10;

I/Game timing based on difficulty


[Link] ={
easy: (delay: 600, wait: 1000},
medium: delay: 400, wait: 600
{ )},

hard: { delay: 200, wait: 300}

[Link] Elements();
[Link]()0;

{
initializeElements()
[Link] [Link] mentByld('startBtn');
=

[Link] = [Link] ('resetBtn');


[Link] [Link] ElenmentByld('difficultyBtn');
=

[Link] [Link](game-button');
=

[Link] = [Link]('levelDisplay');
[Link]= [Link]('score Display');
[Link] Display = [Link] mentByld ('moves Display');
[Link] = [Link]('sequenceDisplay');
[Link] = [Link]('gameStatus');

attach EventListeners() {
[Link]. addEventListener('click () => [Link]();
[Link]. addEventListener('click, () => [Link]();
[Link]('click, () => [Link] Difficulty());

[Link]((button, index) =>{


[Link] ner('click, () => [Link] (index));

{
toggleDifficulty()
=
const difficulties ['easy, 'medium, 'hard'];
<br>

const currentlndex = difficulties. indexOf([Link]);


[Link] = difficulties[(currentindex + 1) % difficulties. length]:

=
const difficultyLabels {

easy: 'Easy,
medium: 'Medium
hard: 'Hard'

[Link]
=
Difficulty: ${difficultyLabels[[Link]]};

startGame) {
if (![Link]) {
[Link] = true;
[Link] = 0;
= [);
[Link]
[Link] = 1;
[Link] = 0;
[Link] = 0;
[Link]():
[Link]();
}

resetGame() {
[Link] = false;
[Link] = 0;
[Link] = [1;
[Link] = 1;
[Link] = 0;
[Link] = 0;
[Link] Display();
[Link] = 'Ready to play? Click Start!';
[Link] Status();
[Link]= 'Start Game';

{
playNextLevel()
[Link] = [0:
const colors = ['red, 'blue, 'green, 'yellow']:
const randomColor = colors[[Link]([Link]() * [Link])];
[Link](randomColor);
-
[Link] Display. text Content =`Level ${[Link]) Watch carefully!;

setTimeout() => {
<br>

[Link]();
} 1000);

playSequence() {
let i = 0;
const delay = [Link][[Link]].delay;
const wait = [Link][[Link]].wait;

const playNextButton = () =>{


if (i < [Link]) {
const colorName =[Link][i;
[Link] Button(colorName);
I++;
setTimeout(playNextButto n, delay + wait);
}else {
[Link] ='Your turn! Repeat
thesequence.;

playNextButton();

flashButton (colorName) {
const button = [Link] m(this. buttons).find (btn => [Link] ===
colorName);
if (button) {
[Link] List. add('active');
setTimeout(() => {
[Link]('active');
}, [Link] [[Link]].delay);
}

playerPress(button index) {
if (![Link]) return;

const colorName = this. buttons[buttonindex].[Link];


[Link](colorName);
[Link]++;
[Link] Display();

[Link] Button(colorName);

if ([Link][[Link] -
1]!==
[Link][[Link]. length - 1]) {

[Link] ();
<br>

return;

if ([Link] == [Link]) (
this.levelComplete0:

levelComplete() {
[Link] += [Link]* 10;
[Link]++;
[Link] Display):

if (this. level > [Link]) {

[Link]();
return;

[Link]('Level Complete! v, 'success');


setTimeout() => {
[Link]();
},1500);

endGame) {

=
[Link] false;
[Link]( Game Over! Final Score: ${[Link]}, 'error');
[Link] = 'Play Again';

gameWin) {
=
[Link] false;
[Link]( You Won! Final Score: ${[Link]}, 'success');
[Link] ='Play Again';
}

updateDisplay() {
[Link] Content = this. level;
[Link] [Link] =this. score;
[Link] [Link] = [Link];

showStatus(message, type){
[Link] = message;
[Link] Name = game-status ${type};
<br>

hideStatus() {
[Link] Status. className 'game-status';
this. [Link] Content ";

/Initialize game when DOM is ready


[Link] EventListener('DOMContentLoaded, () => {

new Mind PuzzleGame():


:

OUTPUT
Med Ptzte Brn Tener

&Mind Puzzle
<br>

4, Build a website to create a moving animated baby face.


HTML Code
<DOCTYPE html>
<html lang="en'>
<head>
<meta charset="UTF-8">
<meta name='viewport" content="width=device-width, initial-scale=1.0">
<title>Animated Baby Face - Interactive</title>
<link rel="styles heet" href="'[Link]">
</head>
<body>
<div class="container">
<header>
<h1> Interactive Baby Face</h1>
<p class="subtitle">Move your mouse around to Interact with the baby!</p>
</header>

<div class="canvas-wrapper">
<svg class="baby-face"width="600" height="700" viewBox="0 0 600 700">
<--Head -->
<ellipse cx="300" cy="300" rx="1 80" ry="220" fill="#dbcb4" stroke="##5a89f" stroke
width="3"/>

<l--Ears -->
<ellipse cx="1 20" cy='"280" rx="50" ry="80" fill="#tdbcb4" stroke="#5a89f" stroke
width="2" id="leftEar"/>
<ellipse cx="480" cy="280" rx="50" ry="80" fill="#fdbcb4" stroke="#f5a89f" stroke
width="2" id="rightEar"/>

<-- Ear inner -->


cellipse cx="120" cy="280" rx="25" ry="50" fll="#5a89r" id="leftEarlnner"/>
<ellipse cx="480" cy="280" rx="25" y="50" fil|="#5a89f" id="rightEarinner"/>

<l-- Left Eye Background -->


<ellipse cx="240" cy="260" rx="45" y="60" fil[="white" id="leftEye Bg"/>

<l-- Right Eye Background -->


cellipse cx="360" cy="260" rx="45" ry="60" fill="white" id="right Eye
Bg"/>

<l--Left Pupil -->


<circle cx="240" cy="270" r="25" fill="black" id="leftPupil"/>
<circle cCx="245" cy="260" r="8" fill="white" opacity="0.6"
id="leftGloss"/>
<-- Right Pupil -->
<circle Cx="360" cy="270" r="25" fill="black"
ld="rightPupil"/>
<circle cx="365" cy="260" r="8" fill="white"
opacity="0.6" id="rightGloss'"/>
<--Eyebrows -->
<br>

<path d="M 210 220 Q 240 200 270 210" stroke="Hd4846f" stroke-widthw'g" fill='nonet
stroke-linecap="'round" id="leftBrow"/>
cnath d="M 330 210 Q 360 200 390 220" stroke="#d4846f" stroke-width"8" fillnone"
stroke-inecap="round" id="rightBrow"/>

<Nose -->
cellipse Cx="300" cy="320" rx="30" ry="40" fill="#{5a89f" id="nose'/>
<circle cx="280" cy="345" r="12" fill="#fdbcb4" id="nostrilLeft"l>
<circle cx="320" cy="345" r=" 1 2" fill="#fdbcb4" id="nostrilRight"/>

<-Mouth -->
<path d="M 250 400 Q 300 450 350 400" stroke="#ff6b9d" stroke-width="6" fill="none"
stroke-linecap="round" id="mouth"/>
<path d="M 250 400 Q 300 420 350 400" fill="#ffb3d9" opacity="0.3" id="lip"/>

<l--Cheeks -->
<ellipse cx="150" cy="340" rx="40" ry="30" fill="#ff9ab0" opacity="0.5" id="leftCheek"/>
<ellipse cx="450" cy="340" rx="40" ry="30" fill="#ff9ab0" opacity="0.5"
id="rightCheek"/>

<-- Rosy cheeks effect -->


<circle Cx="150" cy="340" r="35" fill="#ff6b9d" opacity="0.2" id="leftRosy"/>
<circle CX="450" cy="340" r="35" fill="#ff6b9d" opacity="0.2" id="rightRosy"/>
</svg>

<l--Coordinates Display -->


<div class="coordinates'" id="coordinates">
Mouse Position: X:0|Y: 0
</div>
</div>

<div class="controls">
<button class="control-btn" id="resetBtn'">Reset Face</button>
<button class="control-btn" id="binkBtn">Blink Eyes</button>
<button class="control-btn" id="smileBtn">Smile</button>
<button class="control-btn" id="surpriseBtn">Surprised</button>
</div>

<div class="instructions">
<h2>How to Interact</h2>
<ul>
<li>Move your mouse around to control
the baby's eyes</li>
<l>The baby's nose will rotate based on your mouse
position</li>
<li>Ears willwiggle as you move the cursor</li>
<li>Click buttons to trigger facial expressions</li>
<li>Watch the cheeks blush based on interaction</li>
</ul>
</div>
</div>

<script src="'[Link]"> </script>


<br>

</body>
</htmb
CSSCode

margin: 0;
padding: 0;
box-sizing: border-box;

body{
font-family: 'Comic Sans MS, 'Trebuchet MS, cursive;
background: linear-gradient(135deg, #ffecd2 09%, #fcb69f 100%);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
}

.container {

background: white;
border-radius: 30px;
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.2);
padding: 40px;
max-width: 800px;
width: 100%;

header{
text-align: center;
margin-botto m:
30px;

header h1 {

font-size: 2.5em;
color: #ff6b9d;
margin-bottom: 10px;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);

.subtitle{
color: #666;
font-size: 1.1em;

.canvaS-Wrapper{
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 30px;
<br>

background: #fff9f5:
padding: 20px;
border-radius: 20px;
border: 3px dashed #ffb3d9;

.baby-face {

max-width: 100%;
height: auto;
Cursor: crosshair;
filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.1);

.coordinates {
margin-top: 15px;
font-size: 1em;
color: #666;
font-family: 'Courier New', monospace;
background: #f0fOf0;
padding: 10px 20px;
border-radius: 1Opx;
text-align: center;

.controls {

display: grid;
grid-template-columns:
gap: 12px; repeat(auto-fit, minmax(150px,
1fr));
margin-bottom: 30px;

.control-btn{
padding: 12px 20px;
background: linear-gradient(135deg,
color: white; #ff6b9d, #ff8fb5);
border: none;
border-radius: 12px;
font-size: 0.95em;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0
5px 15px rgba(255,
font-family: inherit; 107,157,0.3):;

.control-btn:hover {
transform: translateY(-3px);
box-shadow:
0 8px20pxrgba(255,
107, 157,0.4);

.control-btn:active
(
<br>

transform:translateY(-1 px):

instructions {
background: #ff9f5;
padding: 25px;
border-radius: 15px;
border-left: 5px solid #ff6b9d;

instructions h2{
color: #ff6b9d;
margin-botto m: 15px;
font-size: 1.3em;

.instructions ul {
list-style: none;

.instructions li {
color: #555;
margin-bottom: 10px;
padding-left: 25px;
position: relative;
line-height: 1.5;

{
.instructions li:before
Content: "":
position: absolute;
left: 0;
font-size: 1.1em;
{

@media (max-width: 600px)


.container{
padding: 20px;

header h1 {
font-size: 1.8em;

.
baby-face {
max-width: 100%;

.controls {
grid-template-columns: 1fr 1fr;
<br>

JavaSeript
class BatbyFace(
constructor) {

[Link] [Link](.baby-face');
[Link] = [Link](.canvas-wrapper');
[Link] = [Link] ('coordinates');

1/SVG Elements
[Link] = [Link](left Pupil') ;
[Link] = [Link] mentByld('right Pupil');
[Link] = [Link]('nose'):
[Link] = [Link] ('leftEar');
[Link] = [Link]('rightEar');
[Link] = [Link] ('mouth');
[Link] = [Link] (lip');
[Link] = [Link](leftBrow');
[Link] = [Link](rightBrow'):
[Link] = [Link](leftCheek');
[Link] = [Link]('rightCheek'):
[Link] = [Link] ('leftRosy');
[Link] = [Link] ('rightRosy');
[Link] = [Link] mentByld('leftGloss');
[Link] = [Link]('rightGloss');

I/Mouse tracking
[Link] = 0;
[Link] = 0;
[Link] =300;
[Link] = 270;

||Animation states
this. is Blinking = false;
[Link] =
'neutral';

[Link] EventListeners ();

initialize EventListeners() {
1/Mouse tracking
[Link]('mousemove', (e) => [Link](e));
[Link]('mouseleave', () => [Link]();

I/Button events
[Link] mentByld('resetBtn').addEventListener('click', () => [Link]()):
[Link]('binkBtn').addEventListener('click, () => [Link]()):
[Link]('smileBtn').addEventListener('click, () => [Link]();
[Link]('surpriseBtn'). addEventListener('click, () => [Link]()):

trackMouse(event) {
<br>

const rect =
[Link]():
[Link] [Link] - [Link]:
[Link] [Link]- [Link]:

this.updateEyes0:
[Link]():
[Link]():
[Link]();
[Link]();

updateEyes() {
const angle = Math.atan2([Link] - [Link], [Link] - [Link]);
Const distance=15;

1/Left eye
const leftEyeX = 240 + [Link](angle) * distance;
const leftEyeY = 270 + [Link](angle) * distance;
[Link]('cx, leftEyeX);
[Link] ('cy, leftEyeY);

I/ Update gloss position


[Link]('cx', leftEyeX + 5);
[Link] ('cy, leftEyeY - 8);

I/Right eye
const rightEyeX = 360 + [Link](angle) * distance;
const rightEyeY = 270 + [Link](angle) * distance;
[Link]('cx, rightEyeX);
[Link]('cy, rightEyeY);

1/Update gloss position


[Link] ('cx, rightEyeX+ 5);
[Link] ('cy, rightEyeY -8);
}

updateNose() {
const angle = Math.atan2([Link] - [Link], [Link] - [Link]);
const rotation = (angle * 180) / [Link];
[Link]('transform',` rotate(${rotation} 300 320)` );

updateEars) {

Const distance = [Link](


[Link]([Link] - [Link], 2) +

[Link]([Link] - [Link], 2)

1/ Earswiggle based on mouse distance


const wiggle= [Link](distance / 100, 10);
const angle =
Math.atan2 ([Link] - [Link], [Link] - [Link]);
<br>

I/ Left ear rotation


const leftEarRotation = (angle * 180) / [Link] -45;
[Link](transform; rotate(${leftEarRotation) 120 280) ).

I/ Right ear rotation


const rightEarRotation = (angle * 180) / [Link]+ 45;
[Link]('transform, rotate($(rightEarRotation) 480 280) ):

updateCheeks() {
const distance=[Link](
[Link]([Link] - [Link], 2) +
[Link](this. mouseY - [Link], 2)
)

Cheek blush increases with


|/
const blushOpacity = interaction
[Link](distance /500,0.6);
[Link]('r;,
35 + blushOpacity * 15);
[Link]. setAttribute('opacity',
0.2 + blushOpacity *
0.3);
[Link]('r, +
35 blushOpacity
[Link]. setAttribute('opacity', * 15):
+
0.2 blushOpacity *
0.3);
updateCoordinates() {
const svgRect = [Link]():
const relativeX =
const relativeY = [Link]- ([Link] -
[Link] -
([Link] -
[Link]().left);
[Link]()
[Link]
Mouse Position: = .top);
X: ${[Link](relativeX)}
|Y: $([Link](relativeY)}:;
blink0) {
if ([Link])
[Link] = return;
true;
|| Close eyes
[Link]('r',
[Link] '0');
[Link]('r,
('r','0');
[Link]('r,'0'):
'O');

setTimeout()
=>{
I| Open eyes
[Link]('r,
[Link]
[Link]('r,25);
('r',"25');
[Link](r,'8);
[Link] '8);
=false;
<br>

), 300);

smile() {
[Link]('d, 'M 250 400Q 300 460 350
400);
[Link]('d:, 'M 250 400 Q 300 430
350 400);
[Link] 'smile';

setTimeout(() =>{
if([Link] ='smile') {
[Link]('d: 'M 250 400 Q 300 450 350 400');
[Link]('d, 'M 250 400 Q 300 420 350 400');
[Link] ='neutral';
), 2000);

surprised() {
I/Wide mouth
[Link]('d', 'M 280 390 Q 300 480 320 390');
[Link]('d, 'M 280 390Q 300 460320 390');

I/ Raised eyebrows
[Link]. setAttribute('d; 'M 210 180 Q 240 160 270 170");
[Link]('d', 'M 330 170 Q 360 160 390 180');

[Link]='surprised';

setTimeout() => {
if ([Link] ==='surprised'){
[Link]('d, 'M 250 400 Q 300 450 350 400'):
[Link]('d, 'M 250 400Q300 420 350 400');
[Link]('d, 'M 210 220 Q 240 200 270 210');
[Link]('d', 'M 330 210 Q 360 200 390 220');
[Link]='neutral';
), 2000);

resetFace() {
1/ Reset pupils to center
[Link]('cx, "240');
[Link]('cy, '270');
[Link]. setAttribute('cx, '360');
[Link]('cy, '270);

1/ Reset gloss
[Link]('cx, '245');
[Link]. setAttribute('cy, '260');
[Link]('cx, '365');
<br>

[Link](cy; 260):

I Reset nose
[Link]. setAttribute('transform', 'rotate(0 300 320)):

II Reset ears
[Link]('transform, 'rotate(0 120 280)');
[Link]. setAttribute(transform, 'rotate(0 480 280):

/ Reset cheeks
[Link]. setAttribute('r: 35):
[Link]. setAttribute('opacity, 0.2);
[Link]. setAttribute('r, '35'):
[Link]. setAttribute ('opacity, "0.2):

/ Reset coordinates
[Link] = Mouse Position: X: 0 |Y: 0';

HInitlalize when DOM is ready


document.a ddEventListener( DOMContentLoaded, () =>{
new BabyFace0:

OUTPUT

You might also like