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
>
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 Projecttitle>
7-
8-
6+
<title>Modern Tabs Designtitle>
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-
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 1button>
2119
<button class="button" data-id="step2">Step 2button>
2220
<button class="button" data-id="step3">Step 3button>
23-
div>
24-
<div class="tabs-content">
25-
32-
3328
<div class="content" id="step2">
34-
<h3>Step 2h3>
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 2h3>
30+
<p>Lorem ipsum dolor sit amet...p>
3931
div>
40-
41-
4232
<div class="content" id="step3">
43-
<h3>Step 3h3>
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 3h3>
34+
<p>Lorem ipsum dolor sit amet...p>
4735
div>
48-
36+
<div class="content" id="step4">
37+
<h3>Step 4h3>
38+
<p>Lorem ipsum dolor sit amet...p>
4939
div>
5040
div>
51-
div>
52-
53-
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)