diff --git a/cards-03/index.html b/cards-03/index.html
index 7ae7138354ea8fae59302228a6440e72822a8135..2c59dc896c285241215c50771594552be9c7d54f 100644
--- a/cards-03/index.html
+++ b/cards-03/index.html
@@ -7,152 +7,151 @@
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
-<!DOCTYPE html>
+ <title>Cards</title>
-<!DOCTYPE html>
+ <title>Cards</title>
<!DOCTYPE html>
-<!DOCTYPE html>
+ <title>Cards</title>
<html lang="en">
-<!DOCTYPE html>
+ <title>Cards</title>
<head>
-<!DOCTYPE html>
+ <title>Cards</title>
<meta charset="UTF-8">
-<!DOCTYPE html>
+ <title>Cards</title>
<title>Cards</title>
-<!DOCTYPE html>
+ <title>Cards</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<!DOCTYPE html>
+ <title>Cards</title>
<link rel="stylesheet" type="text/css" href="style.css">
-<!DOCTYPE html>
+ <title>Cards</title>
</head>
-<!DOCTYPE html>
+ <title>Cards</title>
<body>
-<html lang="en">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
-<html lang="en">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
<!DOCTYPE html>
-<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<html lang="en">
- <div class="action-bottom-bar">
+ </div>
-<html lang="en">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
-<html lang="en">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
-<html lang="en">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cards</title>
-<html lang="en">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<html lang="en">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
-<html lang="en">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
-<html lang="en">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>
-<html lang="en">
+ <svg xmlns="http://www.w3.org/2000/svg" class="arrow" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <link rel="stylesheet" type="text/css" href="style.css">
- <path d="M5 12l14 0"></path>
- <head>
+ <link rel="stylesheet" type="text/css" href="style.css">
<!DOCTYPE html>
- <head>
+ <link rel="stylesheet" type="text/css" href="style.css">
<html lang="en">
- </svg>
- <head>
+ <link rel="stylesheet" type="text/css" href="style.css">
<head>
-<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <body>
- <head>
+ <link rel="stylesheet" type="text/css" href="style.css">
<meta charset="UTF-8">
- <article class="card">
-<!DOCTYPE html>
+ <title>Cards</title>
<meta charset="UTF-8">
- <head>
+ <link rel="stylesheet" type="text/css" href="style.css">
<title>Cards</title>
+ <title>Cards</title>
<!DOCTYPE html>
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <div class='card-background'>
-<!DOCTYPE html>
<link rel="stylesheet" type="text/css" href="style.css">
- <head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- <p>
+ </div>
- <head>
+ <div class='content'>
+ <link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="style.css">
- </p>
+ <p>
- <head>
+ <link rel="stylesheet" type="text/css" href="style.css">
</head>
-<html lang="en">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
<html lang="en">
- <a href="#">
+ </div>
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
- <body>
- <svg xmlns="http://www.w3.org/2000/svg" class="chevron" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+ <a href="#">
-<html lang="en">
+ Find Experts
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<html lang="en">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
-<html lang="en">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
-<html lang="en">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>
- <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
- <head>
+ <link rel="stylesheet" type="text/css" href="style.css">
- <path d="M15 16l4 -4"></path>
+ <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
- <path d="M15 8l4 4"></path>
+ <path d="M5 12l14 0"></path>
+ <link rel="stylesheet" type="text/css" href="style.css">
<html lang="en">
- </head>
- <head>
+ <link rel="stylesheet" type="text/css" href="style.css">
<head>
-<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <body>
- <head>
+ <link rel="stylesheet" type="text/css" href="style.css">
<meta charset="UTF-8">
- <article class="card">
-<!DOCTYPE html>
+ <title>Cards</title>
<meta charset="UTF-8">
- <img src="assets/card-3.png" alt="background" />
+ </article>
+ <title>Cards</title>
<!DOCTYPE html>
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <div class='card-background'>
+ </head>
<!DOCTYPE html>
- <link rel="stylesheet" type="text/css" href="style.css">
+ <title>Cards</title>
<meta charset="UTF-8">
-<!DOCTYPE html>
- <p>
+ <div class='content'>
- <meta charset="UTF-8">
+ </head>
<html lang="en">
- </p>
+ <p>
- <meta charset="UTF-8">
+ </head>
<head>
-<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<html lang="en">
-<html lang="en">
+
+ </div>
-<html lang="en">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
- <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
-<html lang="en">
+ </head>
<title>Cards</title>
-<html lang="en">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<html lang="en">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
-<html lang="en">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
-<html lang="en">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>
- <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
- <head>
+ <link rel="stylesheet" type="text/css" href="style.css">
- <head>
+ <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+ <link rel="stylesheet" type="text/css" href="style.css">
<!DOCTYPE html>
- <head>
+ <link rel="stylesheet" type="text/css" href="style.css">
<html lang="en">
- </svg>
- <head>
+ <link rel="stylesheet" type="text/css" href="style.css">
<head>
-<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <body>
- <head>
+ <link rel="stylesheet" type="text/css" href="style.css">
<meta charset="UTF-8">
+ <title>Cards</title>
<meta charset="UTF-8">
+ <link rel="stylesheet" type="text/css" href="style.css">
<title>Cards</title>
- <meta charset="UTF-8">
+ </head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</body>
</html>
diff --git a/cards-03/style.css b/cards-03/style.css
index 634adbe4ddaec9b67c813e9948ef6f7247ae27fc..fee2054db8bbb41fee3292e5e8811e69627c6d9c 100644
--- a/cards-03/style.css
+++ b/cards-03/style.css
@@ -1,3 +1,5 @@
+
+
:root {
--primary-color: #635bff;
--secondary: #0a2540;
@@ -7,46 +9,33 @@ body {
display: flex;
width: 100%;
padding-top: 180px;
- font-family: "sohne-var","Helvetica Neue","Arial",sans-serif;
-}
-
-* {
-:root {
+ width: 100%;
--primary-color: #635bff;
-:root {
+ width: 100%;
--secondary: #0a2540;
-:root {
+ width: 100%;
}
}
:root {
-
:root {
-body {
:root {
- display: flex;
-}
-
-
-.container-wrapper > h1 {
- position: relative;
--primary-color: #635bff;
- --primary-color: #635bff;
:root {
- font-size: 48px;
- --primary-color: #635bff;
--secondary: #0a2540;
- --primary-color: #635bff;
+:root {
}
}
+
.container {
display: flex;
- justify-content: start;
+ justify-content: center;
flex-wrap: wrap;
margin: 0 auto;
- --primary-color: #635bff;
+ max-width: 90%;
width: 100%;
+ display: flex;
}
.content {
@@ -59,7 +49,9 @@ display: flex;
flex-direction: column;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
- box-shadow: 0px 18px 36px -18px rgba(0,0,0,0.1), 0px 30px 45px -30px rgba(50,50,93,0.25);
+ box-shadow: 0px 18px 36px -18px
+ rgba(0,0,0,0.1),
+ 0px 30px 45px -30px rgba(50,50,93,0.25);
background-color: white;
cursor: pointer;
width: 100%;
@@ -74,8 +66,6 @@ font-size: 32px;
margin-bottom: 16px;
line-height: 1.384615385;
}
- width: 100%;
-}
.content > p {
font-size: 18px;
@@ -108,6 +98,10 @@ height: 100%;
object-fit: cover;
}
+.card:hover .action-bottom-bar a {
+ opacity: 1;
+}
+
.action-bottom-bar {
display: flex;
font-size: 18px;
@@ -124,11 +118,6 @@ font-weight: 800;
opacity: 0;
padding: 0 24px;
}
- --secondary: #0a2540;
-}
-
-.card:hover .action-bottom-bar a {
- display: flex;
--secondary: #0a2540;
}
diff --git a/vertical-tabs-02/assets/brain.png b/vertical-tabs-02/assets/brain.png
new file mode 100644
index 0000000000000000000000000000000000000000..3e254fd04b06c230dfd42b39e3e30e4442e7e83d
Binary files /dev/null and b/vertical-tabs-02/assets/brain.png differ
diff --git a/vertical-tabs-02/assets/engineer.png b/vertical-tabs-02/assets/engineer.png
new file mode 100644
index 0000000000000000000000000000000000000000..bf185c6d3a8e8a14438f610205955b5ba2141504
Binary files /dev/null and b/vertical-tabs-02/assets/engineer.png differ
diff --git a/vertical-tabs-02/assets/idea.png b/vertical-tabs-02/assets/idea.png
new file mode 100644
index 0000000000000000000000000000000000000000..0833bbf228b2c5a4b22850a31145ab1ea8bacd95
Binary files /dev/null and b/vertical-tabs-02/assets/idea.png differ
diff --git a/vertical-tabs-02/assets/product.png b/vertical-tabs-02/assets/product.png
new file mode 100644
index 0000000000000000000000000000000000000000..159826bf605e9f52a80535ab30863745245ce994
Binary files /dev/null and b/vertical-tabs-02/assets/product.png differ
diff --git a/vertical-tabs-02/assets/release.png b/vertical-tabs-02/assets/release.png
new file mode 100644
index 0000000000000000000000000000000000000000..ba0a024358bb045cd4d460316b38ba98027f7ded
Binary files /dev/null and b/vertical-tabs-02/assets/release.png differ
diff --git a/vertical-tabs-02/assets/ui.png b/vertical-tabs-02/assets/ui.png
new file mode 100644
index 0000000000000000000000000000000000000000..e996158ed05c7d0082c9018bed7c24f3794cac83
Binary files /dev/null and b/vertical-tabs-02/assets/ui.png differ
diff --git a/vertical-tabs-02/index.html b/vertical-tabs-02/index.html
new file mode 100644
index 0000000000000000000000000000000000000000..360eb91e77c66242985d1edff0e9056b7fc3a127
--- /dev/null
+++ b/vertical-tabs-02/index.html
@@ -0,0 +1,141 @@
+
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8">
+ <title>Vertical Tabs</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <link rel="preconnect" href="https://fonts.googleapis.com">
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+ <link
+ href="https://fonts.googleapis.com/css2?family=Poppins&display=swap"
+ rel="stylesheet"
+ type='text/css'
+ >
+ <link rel="stylesheet" type="text/css" href="style.css">
+ </head>
+ <body>
+ <div class="tabs-container">
+ <ul class="tabs">
+ <li>
+ <a id="tab1" title="Your Idea & Vision" href="#tab1">
+ <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-bulb" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+ <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+ <path d="M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7"></path>
+ <path d="M9 16a5 5 0 1 1 6 0a3.5 3.5 0 0 0 -1 3a2 2 0 0 1 -4 0a3.5 3.5 0 0 0 -1 -3"></path>
+ <path d="M9.7 17l4.6 0"></path>
+ </svg>
+ Your Idea & Vision
+ </a>
+ </li>
+ <li>
+ <a id="tab2" title="Product Specification" href="#tab2">
+ <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-file-description" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+ <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+ <path d="M14 3v4a1 1 0 0 0 1 1h4"></path>
+ <path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z"></path>
+ <path d="M9 17h6"></path>
+ <path d="M9 13h6"></path>
+ </svg>
+ Product Specification
+ </a>
+ </li>
+ <li>
+ <a id="tab3" title="UX/UI Design" href="#tab3">
+ <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brush" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+ <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+ <path d="M3 21v-4a4 4 0 1 1 4 4h-4"></path>
+ <path d="M21 3a16 16 0 0 0 -12.8 10.2"></path>
+ <path d="M21 3a16 16 0 0 1 -10.2 12.8"></path>
+ <path d="M10.6 9a9 9 0 0 1 4.4 4.4"></path>
+ </svg>
+ UX/UI Design Prototype
+ </a>
+ </li>
+ <li>
+ <a id="tab4" title="Software Development" href="#tab4">
+ <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-robot" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+ <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+ <path d="M7 7h10a2 2 0 0 1 2 2v1l1 1v3l-1 1v3a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-3l-1 -1v-3l1 -1v-1a2 2 0 0 1 2 -2z"></path>
+ <path d="M10 16h4"></path>
+ <circle cx="8.5" cy="11.5" r=".5" fill="currentColor"></circle>
+ <circle cx="15.5" cy="11.5" r=".5" fill="currentColor"></circle>
+ <path d="M9 7l-1 -4"></path>
+ <path d="M15 7l1 -4"></path>
+ </svg>
+ AI & Machine Learning
+ </a>
+ </li>
+ <li>
+ <a id="tab5" title="Architecture & Engineering" href="#tab5">
+ <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-settings" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+ <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+ <path d="M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z"></path>
+ <path d="M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0"></path>
+ </svg>
+ Architecture & Engineering
+ </a>
+ </li>
+ <li>
+ <a id="tab6" title="MVP Release & Iterations" href="#tab6">
+ <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-rocket" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+ <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+ <path d="M4 13a8 8 0 0 1 7 7a6 6 0 0 0 3 -5a9 9 0 0 0 6 -8a3 3 0 0 0 -3 -3a9 9 0 0 0 -8 6a6 6 0 0 0 -5 3"></path>
+ <path d="M7 14a6 6 0 0 0 -3 6a6 6 0 0 0 6 -3"></path>
+ <path d="M15 9m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path>
+ </svg>
+ MVP Release & Iterations
+ </a>
+ </li>
+ </ul>
+ <div class="tab-content-wrapper">
+ <section id="tab1-content" class="tab-content">
+ <h2>Your Idea & Vision</h2>
+ <p>
+ Maybe you have an idea and a vision of changing the world, your company want to execute new product or you just have a unique dataset, but you do not have the knowledge to get the most from your data.Our team is here to execute your vision and bring the product to life.
+ </p>
+ <img src="assets/idea.png" alt="idea">
+ </section>
+ <section id="tab2-content" class="tab-content">
+ <h2>Product Specification</h2>
+ <p>
+ In this phase, we will remove vagueness and draft our minimum viable product in as much detail as we can. We will also evaluate the current capabilities of AI and how we can maximise the power of your data. This is the key phase and foundation for the future success of your product.
+ </p>
+ <img src="assets/product.png" alt="product">
+ </section>
+ <section id="tab3-content" class="tab-content">
+ <h2>UX/UI Design</h2>
+ <p>
+ We will start to design UX & UI for already approved features. Our design process includes user research and accessibility as well as usability testing. The end goal of this phase is a smooth design and an easy-to-use product. We continually iterate over our design features.
+ </p>
+ <img src="assets/ui.png" alt="ui">
+
+ </section>
+ <section id="tab4-content" class="tab-content">
+ <h2>AI & Machine Learning</h2>
+ <p>
+ The application of AI & machine learning is the key focus for every modern product. So many new market opportunities emerge every day.
+ </p>
+ <img src="assets/brain.png" alt="brain">
+
+ </section>
+ <section id="tab5-content" class="tab-content">
+ <h2>Architecture & Engineering</h2>
+ <p>
+ Software architecture and engineering includes designing the database, backend, and frontend engineering, as well as preparing the infrastructure and automating your business processes.
+ </p>
+ <img src="assets/engineer.png" alt="engineer">
+ </section>
+ <section id="tab6-content" class="tab-content">
+ <h2>MVP Release & Iterations</h2>
+ <p>
+ Now the product is finalized and ready for users. The product will continue to be extended in an agile way based on customers’ feedback.
+ </p>
+ <img src="assets/release.png" alt="release">
+ </section>
+ </div>
+ </div>
+ <script src="script.js"></script>
+ </body>
+</html>
+
\ No newline at end of file
diff --git a/vertical-tabs-02/script.js b/vertical-tabs-02/script.js
new file mode 100644
index 0000000000000000000000000000000000000000..da1ab543ad5dbfeb11663eb3a5df36438873de53
--- /dev/null
+++ b/vertical-tabs-02/script.js
@@ -0,0 +1,52 @@
+
+const allLinks = document.querySelectorAll(".tabs a");
+const allTabs = document.querySelectorAll(".tab-content")
+const tabContentWrapper = document.querySelector(".tab-content-wrapper");
+
+const shiftTabs = (linkId) => {
+ allTabs.forEach((tab, i) => {
+
+ if (tab.id.includes(linkId)) {
+ allTabs.forEach((tabItem) => {
+ tabItem.style = `transform: translateY(-${i*540}px);`;
+ });
+ }
+ });
+}
+
+allLinks.forEach((elem) => {
+ elem.addEventListener('click', function() {
+ const linkId = elem.id;
+ const hrefLinkClick = elem.href;
+
+ allLinks.forEach((link, i) => {
+ if (link.href == hrefLinkClick){
+ link.classList.add("active");
+ } else {
+ link.classList.remove('active');
+ }
+ });
+
+ shiftTabs(linkId);
+ });
+});
+
+//? handle proper selection for initial load
+const currentHash = window.location.hash;
+
+let activeLink = document.querySelector(`.tabs a`);
+
+if (currentHash) {
+ const visibleHash = document.getElementById(
+ `${currentHash.replace('#', '')}`
+ );
+
+ if (visibleHash) {
+ activeLink = visibleHash;
+ }
+}
+
+activeLink.classList.toggle('active');
+
+shiftTabs(activeLink.id);
+
diff --git a/vertical-tabs-02/style.css b/vertical-tabs-02/style.css
new file mode 100644
index 0000000000000000000000000000000000000000..9c08da67d6c8a554517375a0992b35e5a3bec3d2
--- /dev/null
+++ b/vertical-tabs-02/style.css
@@ -0,0 +1,118 @@
+
+
+:root {
+ --white: #FFF;
+ --primary: #645DFF;
+ --secondary: #2A2649;
+ --secondary-light: #777777;
+ --body-background: #efeefa;
+ --border: #E6E8F0;
+}
+
+body {
+ font-family: 'Poppins';
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 100vh;
+ padding: 16px;
+ background-color: var(--body-background);
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+.tabs-container {
+ width: 100%;
+ max-width: 800px;
+ display: flex;
+ margin: 10px;
+ overflow: hidden;
+ border-radius: 16px;
+ background-color: var(--white);
+ box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
+}
+
+.tab-content-wrapper {
+ overflow-y: hidden;
+ overflow-x: auto;
+ height: 540px;
+ min-width: 300px;
+ color: var(--secondary);
+ transition: all 0.45s ease-in-out;
+ padding: 12px 24px;
+}
+
+.tab-content h2 {
+ color: var(--secondary);
+ font-size: 1.3rem;
+ font-weight: 600;
+ margin-top: 0px;
+ margin-bottom: 8px;
+}
+
+.tab-content {
+ display: block;
+ font-size: 1rem;
+ padding: 24px 8px;
+ width: 400px;
+ height: 540px;
+ transition: all 0.45s ease-in-out;
+}
+
+.tab-content img {
+ max-width: 300px;
+ width: 80%;
+ flex-grow: 1;
+}
+
+.tabs {
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ list-style-type: none;
+}
+
+.tabs a {
+ position: relative;
+ display: flex;
+ text-decoration: none;
+ width: 100%;
+ font-size: 18px;
+ font-weight: 600;
+ color: var(--secondary-light);
+ overflow: hidden;
+ text-align: left;
+ justify-content: start;
+ height: 90px;
+ padding: 0px 24px;
+ width: 350px;
+ align-items: center;
+ gap: 16px;
+}
+
+.tabs a img {
+ height: 20px;
+ width: 20px;
+}
+
+.tabs .active, .tabs a:hover {
+ font-weight: 700;
+ outline: none;
+ color: var(--primary);
+ border-right: 3px solid var(--primary);
+}
+
+
+.tabs a svg {
+ width: 36px;
+ height: 36px;
+ stroke: var(--secondary-light);
+}
+
+.tabs .active svg, .tabs a:hover svg {
+ stroke: var(--primary);
+}
