Skip to content

Commit 7229f1a

Browse files
jephlandichojephlandicho
committed
tab styling
1 parent 300eea1 commit 7229f1a

File tree

2 files changed

+84
-84
lines changed

2 files changed

+84
-84
lines changed

‎projects/tabs/index.html

Lines changed: 28 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,45 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
3+
<head>
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<title>Tabs Project</title>
7-
8-
<!-- styles -->
6+
<title>Modern Tabs Design</title>
97
<link rel="stylesheet" href="styles.css" />
10-
</head>
11-
<body>
12-
13-
<div class="section-center">
14-
<div class="image">
15-
<img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.hdnicewallpapers.com%2FWalls%2FBig%2FNature%2520and%2520Landscape%2FBeautiful_Sunrising_Nature_Image.jpg&f=1&nofb=1" alt="" />
16-
</div>
17-
<div class="tabs">
18-
<!-- btn container -->
19-
<div class="btn-container">
8+
</head>
9+
<body>
10+
<div class="section-center">
11+
<div class="image">
12+
<h2>How to cook Abobo?</h2>
13+
<img src="https://images.aws.nestle.recipes/resized/38a93505b258e61852c5c821ba1f55a1_nks-b3-d02_159_944_531.jpg" alt="Adobo" />
14+
</div>
15+
<div class="tabs">
16+
17+
<div class="btn-container">
2018
<button class="button live" data-id="step1">Step 1</button>
2119
<button class="button" data-id="step2">Step 2</button>
2220
<button class="button" data-id="step3">Step 3</button>
23-
</div>
24-
<div class="tabs-content">
25-
<!-- single item -->
21+
<button class="button" data-id="step4">Step 4</button>
22+
</div>
23+
<div class="tabs-content">
2624
<div class="content live" id="step1">
27-
<h3>Step 1</h3>
28-
<p>
29-
Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum sint cumque quasi, amet impedit tempore necessitatibus iste. Ratione possimus perspiciatis sapiente, ex alias, ipsam sint beatae vel repellat aperiam corrupti porro et molestiae nobis itaque recusandae vitae atque! Reiciendis voluptatum molestiae autem consectetur corporis libero itaque quo mollitia quod! Corrupti doloribus veniam iusto soluta laborum saepe debitis reiciendis atque nihil eaque ducimus quo ullam ipsum, laboriosam velit vitae sint, eius molestiae unde, tempora hic ipsam? Cupiditate, beatae. Nostrum eos, id velit nisi libero exercitationem, et fugiat assumenda mollitia debitis deleniti, illum iusto. Officiis, ratione ex? Magni, impedit vel. Quam, eaque.</p>
25+
<h3>Step 1</h3>
26+
<p>Lorem ipsum dolor sit amet...</p>
3027
</div>
31-
<!-- end of single item -->
32-
<!-- single item -->
3328
<div class="content" id="step2">
34-
<h3>Step 2</h3>
35-
<p>
36-
Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci molestiae doloremque enim deleniti voluptatum necessitatibus, facilis et quas, quasi magni obcaecati iusto ipsam ipsum amet autem labore dignissimos accusantium dolorem perspiciatis non harum, alias vel a asperiores? Qui amet tempora mollitia quos, facilis debitis nemo praesentium, optio facere nostrum, eum totam magnam quasi laborum sint repellendus quibusdam vero? Ipsum explicabo officiis culpa delectus quasi cumque saepe voluptates accusantium voluptatem omnis iste, sequi beatae quae dolor vero nostrum at amet eum dolores ut. Autem velit eius, libero adipisci dolore harum accusantium ipsum, voluptate ad recusandae vitae blanditiis? Harum nihil molestiae cum!
37-
</p>
38-
29+
<h3>Step 2</h3>
30+
<p>Lorem ipsum dolor sit amet...</p>
3931
</div>
40-
<!-- end of single item -->
41-
<!-- single item -->
4232
<div class="content" id="step3">
43-
<h3>Step 3</h3>
44-
<p>
45-
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quaerat, asperiores magnam? In expedita laudantium magnam ratione alias minus nemo incidunt, dignissimos architecto placeat corporis molestiae labore vitae ullam laborum ut culpa eaque officiis, blanditiis sunt fugit ex? Neque quod mollitia delectus ipsa? Dolore veritatis, tenetur laudantium possimus unde debitis enim est illum, ea distinctio quod itaque quaerat ex sint eum optio in saepe labore sunt odit? Dolore, iusto! Ducimus sint laudantium consectetur. Velit facere culpa excepturi ad, quae distinctio iure incidunt. Odio alias laboriosam unde quo repudiandae corporis laborum quaerat asperiores minima quis in nam maxime recusandae iure, provident a?
46-
</p>
33+
<h3>Step 3</h3>
34+
<p>Lorem ipsum dolor sit amet...</p>
4735
</div>
48-
<!-- end of single item -->
36+
<div class="content" id="step4">
37+
<h3>Step 4</h3>
38+
<p>Lorem ipsum dolor sit amet...</p>
4939
</div>
5040
</div>
51-
</div>
52-
53-
<!-- javascript -->
54-
<script src="app.js"></script>
55-
</body>
41+
</div>
42+
</div>
43+
<script src="app.js"></script>
44+
</body>
5645
</html>

‎projects/tabs/styles.css

Lines changed: 56 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,82 +1,93 @@
11
body {
22
margin: 0;
33
padding: 0;
4-
font-family: sans-serif;
5-
background: #f5abc9;
6-
color: grey;
7-
}
8-
9-
img {
10-
display: block;
11-
width: 100%;
4+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
5+
background: #f0f2f5;
6+
color: #333;
127
}
138

149
.section-center {
15-
width: 90vw;
16-
margin: 0 auto;
10+
width: 80vw;
11+
margin: 2rem auto;
1712
max-width: 1170px;
18-
min-width: 340px;
19-
padding: 5rem 0;
13+
padding: 2rem;
14+
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
15+
border-radius: 8px;
16+
background: #fff;
2017
}
2118

22-
.image {
23-
margin-bottom: 2rem;
24-
}
25-
img {
26-
border-radius: 0.5rem;
19+
.image img {
20+
width: 100%;
21+
border-radius: 8px 8px 0 0;
2722
object-fit: cover;
28-
height: 30rem;
23+
height: 200px;
2924
}
25+
3026
.tabs {
31-
background: #ffe5e2;
32-
border-radius: 0.5rem;
33-
grid-template-rows: auto 1fr;
27+
background: #ffffff;
3428
}
29+
3530
.btn-container {
36-
display: grid;
37-
grid-template-columns: 1fr 1fr 1fr;
38-
}
39-
.button:nth-child(1) {
40-
border-top-left-radius: 0.5rem;
41-
}
42-
.button:nth-child(3) {
43-
border-top-right-radius: 0.5rem;
31+
display: flex;
32+
justify-content: center;
33+
padding: 1rem;
4434
}
35+
4536
.button {
46-
padding: 1rem 0;
37+
padding: 0.75rem 1.5rem;
4738
border: none;
4839
font-size: 1rem;
49-
background: #b6c9f0;
40+
background: #e4e6eb;
41+
color: #050505;
5042
cursor: pointer;
51-
transition: all 0.3s linear;
52-
letter-spacing: 0.25rem;
43+
transition: background-color 0.3s ease;
44+
margin: 0 10px;
45+
border-radius: 20px;
5346
}
47+
5448
.button:hover:not(.live) {
55-
background: #e93b81;
56-
color: white;
49+
background: #d1d8e0;
5750
}
51+
5852
.tabs-content {
59-
padding: 2rem 1.5rem;
53+
padding: 1rem;
54+
transition: all 0.5s ease-in-out;
6055
}
61-
/* hide content */
56+
6257
.content {
6358
display: none;
59+
animation: fadeIn 0.5s ease-in-out;
6460
}
65-
.button.live {
66-
background: #ffe5e2;
61+
62+
@keyframes fadeIn {
63+
from {
64+
opacity: 0;
65+
transform: translateY(20px);
66+
}
67+
to {
68+
opacity: 1;
69+
transform: translateY(0);
70+
}
6771
}
72+
73+
.button.live, .button.live:hover {
74+
background: #007bff;
75+
color: #ffffff;
76+
}
77+
6878
.content.live {
6979
display: block;
7080
}
7181

7282
@media (min-width: 992px) {
73-
.image {
74-
margin-bottom: 0;
83+
.section-center {
84+
display: grid;
85+
grid-template-columns: 1fr 2fr;
86+
gap: 20px;
7587
}
7688

77-
.section-center {
78-
display: grid;
79-
grid-template-columns: 1fr 1fr;
80-
column-gap: 2rem;
89+
.image img {
90+
height: auto;
91+
border-radius: 8px;
8192
}
8293
}

0 commit comments

Comments
 (0)