Skip to content

Commit c5a9200

Browse files
MDJAminMDJAmin
committed
Code 2 Class 12 / 2
1 parent 49d1b53 commit c5a9200

3 files changed

Lines changed: 124 additions & 0 deletions

File tree

‎Block Chain Collage Code 2/12/2/css/style.css‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
font-family: "Poppins", sans-serif;
9+
text-align: center;
10+
background: #ddd;
11+
}
12+
13+
.dark {
14+
background: #333;
15+
color: #fff;
16+
}
17+
18+
#navbar {
19+
padding: 24px 0;
20+
/* display: flex; */
21+
justify-content: center;
22+
gap: 8px;
23+
}
24+
25+
#navbar p {
26+
padding: 12px;
27+
border-radius: 12px;
28+
transition: all 0.5s;
29+
transform: scale(1);
30+
cursor: pointer;
31+
}
32+
33+
#navbar p:hover {
34+
background-color: rgba(255, 255, 255, 0.7);
35+
color: rgb(0, 0, 0);
36+
transform: scale(1.05);
37+
}
38+
39+
#navbar p:active {
40+
background-color: rgba(255, 255, 255, 0.7);
41+
color: rgb(255, 0, 0);
42+
transform: scale(0.9);
43+
}
44+
45+
46+
.link{
47+
scale: 2;
48+
}

‎Block Chain Collage Code 2/12/2/index.html‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta
6+
name="viewport"
7+
content="width=device-width, initial-scale=1.0"
8+
/>
9+
<link
10+
rel="stylesheet"
11+
href="css/style.css"
12+
/>
13+
<title>Document</title>
14+
</head>
15+
<body>
16+
<nav id="navbar">
17+
<p
18+
href="#"
19+
class="link"
20+
>Home</p
21+
>
22+
<p
23+
href="#"
24+
class="link"
25+
>About</p
26+
>
27+
<p
28+
href="#"
29+
class="link"
30+
>Contact</p
31+
>
32+
<p
33+
href="#"
34+
class="link"
35+
>Products</p
36+
>
37+
</nav>
38+
<h1 id="title">Hello</h1>
39+
<h2 class="mainContent">My name is Amin</h2>
40+
41+
<div class="div"></div>
42+
<div class="div"></div>
43+
<div class="div"></div>
44+
<div class="div"></div>
45+
<div class="div"></div>
46+
47+
<script src="js/script.js"></script>
48+
</body>
49+
</html>

‎Block Chain Collage Code 2/12/2/js/script.js‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
let title = document.querySelector("#title");
2+
title.style.color = "rEd";
3+
title.innerText = "Hello World!";
4+
5+
const mainContent = document.querySelector(".mainContent");
6+
7+
const navbarEl = document.querySelector("#navbar");
8+
9+
const linkEl = document.querySelectorAll(".link");
10+
11+
const divEl = document.querySelectorAll(".div");
12+
13+
console.log(linkEl, divEl);
14+
15+
navbarEl.style.backgroundColor = "red";
16+
navbarEl.style.margin = "20px";
17+
navbarEl.style.display = "flex";
18+
navbarEl.style.borderRadius = "16px";
19+
20+
linkEl[2].textContent = "Product";
21+
linkEl[3].textContent = "Product detail";
22+
23+
for (let i = 0; i < linkEl.length; i++) {
24+
linkEl[i].textContent += " Page"
25+
linkEl[i].classList.add("dark")
26+
linkEl[i].classList.remove("link")
27+
}

0 commit comments

Comments
 (0)