Skip to content

Commit e0223fe

Browse files
Refan420Refan420
committed
Modue_3 Assignment (HTML,CSS) Upload Picture
1 parent a57a243 commit e0223fe

4 files changed

Lines changed: 230 additions & 0 deletions

File tree

‎Module_3/README.md‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
# Book House - Web Layout Assignment
2+
3+
This project is a web layout assignment designed to demonstrate proficiency in CSS Grid and Flexbox. The objective was to create a responsive and interactive card-based interface for a book collection.
4+
5+
## Assignment Instructions
6+
7+
The following requirements were met during the development:
8+
9+
1. **Container (Grid):** A parent container was created using CSS Grid to display 3 cards in one row on desktop devices.
10+
2. **Cards (Flexbox):** Each card contains an image, title, short description, and an 'Add to Cart' button.
11+
3. **Internal Alignment:** Flexbox was used inside each card to arrange items vertically with proper spacing.
12+
4. **Design Requirements:** Implemented border-radius, box-shadow, and interactive hover effects.
13+
5. **Button Styling:** Buttons were styled with specific background colors and interactive hover color transitions.
14+
15+
## Implementation Details
16+
17+
- **CSS Grid:** Used `grid-template-columns: repeat(3, 1fr)` to ensure a clean 3-column layout.
18+
- **Flexbox:** Employed `display: flex` with `flex-direction: column` to manage vertical alignment within the cards.
19+
- **Interactive Effects:** To achieve the "expand on hover" feature without disrupting the layout, I used `position: absolute` for the cards inside a defined `card-wrapper`. This ensures the elements stay fixed while the card expands.
20+
- **Maintainability:** Utilized CSS variables (`:root`) for color themes, allowing for easy global updates.
21+
22+
## Technologies Used
23+
24+
- **HTML5**
25+
- **CSS3** (Grid, Flexbox, Transitions, Variables)
26+
27+
---
28+
29+
_Developed as part of the MERN 16 || M-3 Assignment._

‎Module_3/book.5.jpg‎

163 KB
Loading

‎Module_3/index.html‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
8+
<link rel="stylesheet" href="style.css">
9+
<title>MERN 16 || M-3 || Assignment</title>
10+
</head>
11+
12+
<body class="bg-black">
13+
<header class="bg-white p-5 m-0 min-h-3 text-center">
14+
<h1 class="top_Header">Book House</h1>
15+
</header>
16+
<section>
17+
<h2 class="m-2 text-sky-50 text-xl text-center">Preview Books Here</h2>
18+
<main class="grid grid-cols-3 gap-6">
19+
<div class="card_Wrapper">
20+
<div class="container_Card flex justify-center items-center flex-col">
21+
<img src="./book.5.jpg" alt="My Book">
22+
<span>My Book Title</span>
23+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus esse placeat illum!
24+
Earum,<br>
25+
empore? Quia est provident eveniet pariatur numquam.</p>
26+
<div class="hoverDetails">
27+
28+
<h3 class=" text-xl text-center">Book Info</h3>
29+
<dl class="details-List ">
30+
<dt>Writer:</dt>
31+
<dd>Mr. Jonson</dd>
32+
<dt>Publishar:</dt>
33+
<dd>Demo Publishar</dd>
34+
<dt>Type:</dt>
35+
<dd>Hard Copy</dd>
36+
<dt>price:</dt>
37+
<dd>1200 TK</dd>
38+
</dl>
39+
</div>
40+
<button>Add to Cart</button>
41+
</div>
42+
</div>
43+
<div class="card_Wrapper">
44+
<div class="container_Card flex justify-center items-center flex-col">
45+
<img src="./book.5.jpg" alt="My Book">
46+
<span>My Book Title</span>
47+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus esse placeat illum!
48+
Earum,<br>
49+
empore? Quia est provident eveniet pariatur numquam.</p>
50+
<div class="hoverDetails">
51+
52+
<h3 class=" text-xl text-center">Book Info</h3>
53+
<dl class="details-List ">
54+
<dt>Writer:</dt>
55+
<dd>Mr. Jonson</dd>
56+
<dt>Publishar:</dt>
57+
<dd>Demo Publishar</dd>
58+
<dt>Type:</dt>
59+
<dd>Hard Copy</dd>
60+
<dt>price:</dt>
61+
<dd>1200 TK</dd>
62+
</dl>
63+
</div>
64+
<button>Add to Cart</button>
65+
</div>
66+
</div>
67+
<div class="card_Wrapper">
68+
<div class="container_Card flex justify-center items-center flex-col">
69+
<img src="./book.5.jpg" alt="My Book">
70+
<span>My Book Title</span>
71+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus esse placeat illum!
72+
Earum,<br>
73+
empore? Quia est provident eveniet pariatur numquam.</p>
74+
<div class="hoverDetails">
75+
76+
<h3 class=" text-xl text-center">Book Info</h3>
77+
<dl class="details-List ">
78+
<dt>Writer:</dt>
79+
<dd>Mr. Jonson</dd>
80+
<dt>Publishar:</dt>
81+
<dd>Demo Publishar</dd>
82+
<dt>Type:</dt>
83+
<dd>Hard Copy</dd>
84+
<dt>price:</dt>
85+
<dd>1200 TK</dd>
86+
</dl>
87+
</div>
88+
<button>Add to Cart</button>
89+
</div>
90+
</div>
91+
</main>
92+
</section>
93+
<footer class="bg-white p-5 m-0 min-h-3 text-center bottom-o">
94+
<h1>@MERN 16 || M-3 || Assignment</h1>
95+
</footer>
96+
</body>
97+
98+
</html>

‎Module_3/style.css‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Edu+NSW+ACT+Cursive:wght@400..700&display=swap');
2+
3+
body {
4+
margin: 0;
5+
padding: 0;
6+
box-sizing: border-box;
7+
}
8+
9+
:root {
10+
--border_btn: rgb(244, 209, 13);
11+
--bg_btn: aqua;
12+
--color_title: wheat;
13+
--color_dsp: white;
14+
--font_Hand: "Edu NSW ACT Cursive", cursive;
15+
16+
}
17+
18+
.top_Header {
19+
font-family: var(--font_Hand);
20+
font-weight: 700;
21+
}
22+
23+
/* .card_Wrapper {
24+
position: relative;
25+
width: 100%;
26+
height: auto;
27+
} */
28+
29+
.container_Card {
30+
padding: 2rem;
31+
background-color: rgb(255, 255, 255);
32+
border: var(--border_btn);
33+
border-radius: .4rem;
34+
box-shadow: 1px 4px 8px var(--border_btn);
35+
margin: 1rem;
36+
transition: All .3s ease-in-out;
37+
max-height: fit-content;
38+
position: relative;
39+
top: 0;
40+
left: 0;
41+
height: auto;
42+
43+
}
44+
45+
.container_Card:hover {
46+
max-height: 100%;
47+
box-shadow: 0px 0px 15px 3px rgb(72, 247, 72);
48+
z-index: 1111;
49+
}
50+
51+
52+
53+
.container_Card img {
54+
width: 8rem;
55+
height: auto;
56+
align-self: center;
57+
}
58+
59+
60+
.container_Card span {
61+
font-family: var(--font_Hand);
62+
margin: 1rem auto;
63+
font-weight: 600;
64+
}
65+
66+
.hoverDetails {
67+
opacity: 0;
68+
visibility: hidden;
69+
height: 0;
70+
overflow: hidden;
71+
transition: all .3s ease-in-out;
72+
}
73+
74+
75+
76+
.container_Card:hover .hoverDetails {
77+
opacity: 1;
78+
visibility: visible;
79+
height: 200px;
80+
}
81+
82+
.details-List {
83+
display: grid;
84+
grid-template-columns: 1fr 1fr;
85+
gap: 1rem;
86+
87+
}
88+
89+
.container_Card button {
90+
border: 1px solid var(--border_btn);
91+
border-radius: .4rem;
92+
margin: .8rem;
93+
padding: .5rem 2rem;
94+
transition: .3s ease-in-out;
95+
font-family: var(--font_Hand);
96+
font-weight: 500;
97+
background-color: var(--border_btn);
98+
}
99+
100+
.container_Card button:hover {
101+
background-color: rgb(92, 243, 92);
102+
scale: calc(1.3);
103+
}

0 commit comments

Comments
 (0)