3 new layouts

DisclosedCode · Nov 3, 2023 · 2989ca0 · 2989ca0
1 parent e9094a0
commit 2989ca0
Show file tree

Hide file tree

Showing 51 changed files with 3,028 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -23,5 +23,8 @@ Adopting this approach not only streamlined my development process, but also ens
 - Navigation bars [(navbars)](https://github.com/DisclosedCode/corelayout.com/tree/main/navbars)
 - Footers [(footers)](https://github.com/DisclosedCode/corelayout.com/tree/main/footers)
 - Flyout menus [(flyout-menus)](https://github.com/DisclosedCode/corelayout.com/tree/main/flyout-menus)
+- Breadcrumbs [(breadcrumbs)](https://github.com/DisclosedCode/corelayout.com/tree/main/breadcrumbs)
+- Accordions [(accordions)](https://github.com/DisclosedCode/corelayout.com/tree/main/accordions)
+- Tabs [(tabs)](https://github.com/DisclosedCode/corelayout.com/tree/main/tabs)
 
 Stay in the loop and **star**/**watch** the repository for the upcoming layouts and components.
diff --git a/accordions/always-open/assets/css/main.css b/accordions/always-open/assets/css/main.css
@@ -0,0 +1,181 @@
+/* Importing static fonts */
+
+@font-face {
+    font-family: "Poppins";
+    src: url(../fonts/Poppins-Regular.ttf) format("truetype");
+}
+
+@font-face {
+    font-family: "Poppins Medium";
+    src: url(../fonts/Poppins-Medium.ttf) format("truetype");
+}
+
+/* END */
+
+/* Minimal CSS reset for browser compatibility */
+
+body {
+    scroll-behavior: smooth;
+}
+
+*, *::before, *::after {
+    box-sizing: border-box;
+}
+
+* {
+    margin: 0;
+    padding: 0;
+}
+
+ul[class], ol[class] {
+    list-style: none;
+}
+
+input, button, textarea, select {
+    font: inherit;
+}
+
+img {
+    max-width: 100%;
+    display: block;
+}
+
+a {
+    text-decoration: none;
+    background: transparent;
+    cursor: pointer;
+}
+
+/* END */
+
+/* Declaring global custom CSS properties */
+
+:root {
+
+    --main-width: 1280px;
+    --main-side-margin: 1rem;
+    --main-side-padding: 1rem;
+
+}
+
+body {
+    font-family: 'Poppins', sans-serif;
+    background-color: #f3f4f6;
+    font-size: .90rem;
+    color: #69699b;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+.main_container {
+    width: 100%;
+    max-width: var(--main-width);
+    padding: var(--main-side-padding);
+    margin: 0 auto;
+}
+
+/* Accordion */
+
+.accordions_header {
+    font-family: 'Poppins Medium', sans-serif;
+    font-size: 1.75rem;
+    font-weight: unset;
+    margin-top: 2rem;
+    margin-bottom: 3rem;
+    text-align: center;
+}
+
+.accordion {
+    display: block;
+    width: 80%;
+    margin-left: auto;
+    margin-right: auto;
+    color: #69699b;
+}
+
+.accordion_label {
+    font-family: 'Poppins Medium', sans-serif;
+    font-size: 0.90rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background-color: #FFFFFF;
+    padding: 0.8rem;
+    width: 100%;
+    border: 1px solid #e0e0e0;
+}
+
+.accordion_label:hover {
+    background-color: #f8faff;
+}
+
+.accordion:not(:first-child) .accordion_label {
+    border-top: 0;
+}
+
+.accordion:first-child .accordion_label {
+    border-top-left-radius: 5px;
+    border-top-right-radius: 5px;
+}
+
+.accordion:last-child .accordion_label {
+    border-bottom-left-radius: 5px;
+    border-bottom-right-radius: 5px;
+}
+
+.accordion:last-child .accordion_input:checked + .accordion_label {
+    border-radius: 0;
+}
+
+.accordion_input:checked + .accordion_label {
+    border-bottom: 0;
+    background-color: #f8faff;
+}
+
+.accordion_content {
+    font-size: 0.85rem;
+    background-color: #f8faff;
+    border-style: solid;
+    border-color: rgb(229, 231, 235);
+    border-width: 1px;
+    border-top-width: 0;
+    padding: 0.8rem;
+}
+
+.accordion [type="checkbox"]:checked,
+.accordion [type="checkbox"]:not(:checked) {
+    position: absolute;
+    display: none;
+    opacity: 0;
+    pointer-events: none;
+}
+
+
+.accordion_input:not(:checked) ~ .accordion_content {
+    display: none;
+}
+
+.accordion_input:checked ~ .accordion_content {
+    display: flex;
+}
+
+.accordion_label:after {
+    flex-shrink: 0;
+    width: 1.25rem;
+    height: 1.25rem;
+    margin-left: auto;
+    content: "";
+    background-repeat: no-repeat;
+    background-size: contain;
+}
+
+.accordion_input:not(:checked) ~ .accordion_label:after {
+    /* SVG Plus (+) */
+    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='%2369699b' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round' ><polyline points='6 9 12 15 18 9'></polyline></svg>");
+
+}
+
+.accordion_input:checked ~ .accordion_label:after {
+    /* SVG Minus (-) */
+    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='%2369699b' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round' ><polyline points='18 15 12 9 6 15'></polyline></svg>");
+}
diff --git a/accordions/always-open/assets/fonts/Poppins-Medium.ttf b/accordions/always-open/assets/fonts/Poppins-Medium.ttf
diff --git a/accordions/always-open/assets/fonts/Poppins-Regular.ttf b/accordions/always-open/assets/fonts/Poppins-Regular.ttf
diff --git a/accordions/always-open/assets/fonts/Poppins_Licence.txt b/accordions/always-open/assets/fonts/Poppins_Licence.txt
@@ -0,0 +1,93 @@
+Copyright 2020 The Poppins Project Authors (https://github.com/itfoundry/Poppins)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.
diff --git a/accordions/always-open/main.html b/accordions/always-open/main.html
@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Always open</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1"/>
+    <link href="assets/css/main.css" type="text/css" rel="stylesheet"/>
+</head>
+<body>
+
+<div class="main_container">
+
+    <h1 class="accordions_header">
+        General Account Questions
+    </h1>
+    <section class="accordion_container">
+        <label class="accordion">
+            <input type="checkbox" class="accordion_input">
+            <a class="accordion_label">
+                How do I create an account?
+            </a>
+            <div class="accordion_content">
+                To create an account, click on the "Sign Up" or "Register" button on our website. You will be prompted
+                to provide some basic information, including your name, email address, and a password?
+            </div>
+        </label>
+
+        <label class="accordion">
+            <input type="checkbox" class="accordion_input">
+            <a class="accordion_label">
+                I forgot my password. How can I reset it?
+            </a>
+            <div class="accordion_content">
+                If you forget your password, click on the "Forgot Password" or "Reset Password" link on the login page.
+                You'll be asked to enter your email address, and we will send you instructions on how to reset your
+                password.
+            </div>
+        </label>
+
+        <label class="accordion">
+            <input type="checkbox" class="accordion_input">
+            <a class="accordion_label">
+                Can I use the same email address for multiple accounts?
+            </a>
+            <div class="accordion_content">
+                No, each email address can only be associated with one account on our platform. If you need to create
+                multiple accounts, you will need separate email addresses for each.
+            </div>
+        </label>
+
+        <label class="accordion">
+            <input type="checkbox" class="accordion_input">
+            <a class="accordion_label">
+                How do I delete my account?
+            </a>
+            <div class="accordion_content">
+                To delete your account, please contact our support team. They will guide you through the account
+                deletion process. Keep in mind that this action is usually irreversible, and you will lose all data
+                associated with your account.
+            </div>
+        </label>
+
+        <label class="accordion">
+            <input type="checkbox" class="accordion_input">
+            <a class="accordion_label">
+                What should I do if my account is locked or suspended?
+            </a>
+            <div class="accordion_content">
+                If your account is locked or suspended, it may be due to a violation of our terms and policies. Please
+                contact our support team to discuss the issue and resolve it.
+            </div>
+        </label>
+
+        <label class="accordion">
+            <input type="checkbox" class="accordion_input">
+            <a class="accordion_label">
+                Can I change my username?
+            </a>
+            <div class="accordion_content">
+                The ability to change your username may vary depending on our platform. Please check your account
+                settings to see if this feature is available.
+            </div>
+        </label>
+
+        <label class="accordion">
+            <input type="checkbox" class="accordion_input">
+            <a class="accordion_label">
+                Can I reactivate a deactivated account?
+            </a>
+            <div class="accordion_content">
+                The possibility of reactivating a deactivated account may vary. Contact our customer support for information and assistance.
+            </div>
+        </label>
+
+    </section>
+</div>
+
+</body>
+</html>