Opacity CSS Framework version 1.0
First of all, Thank you so much for purchasing this template and for
being my loyal customer.
You are awesome!
You are entitled to get free lifetime updates to this product +
exceptional support from the author directly.
This documentation is to help you regarding each step of customization. Please go through the documentation carefully to understand how this template is made and how to edit this properly. Basic HTML and CSS knowledge is required to customize this template. You may learn basics here, here and here.
You will need the following sofwares to customize this template.
Be careful while editing
the template. If not edited properly, the design layout may break
completely.
No support is provided for faulty customization.
Lorem the It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.
/*==================controll=================*/ :root{ --text: #6c757d; --gap:2rem; --col:1; --colwidth:1fr; --p: 16px; } :root{ --black:#000000; --white:#ffffff; --dark:#212121; --gray:#313131; --smoke:#9c9696; --shadow:#ada2a2ad; --crimson:#dc143c; --skyblue:#00bffffb; --deepblue: #4054B2; /*custom*/ --o-primary: #6EC1E4; --o-secondary: #54595F; --o-accent: #61CE70; --o-violet: #8040FF; --o-coral: #FF6276; --o-bluish: #313656; --o-cyan: #37C2CC; --o-darkblue: #031D3C; --o-sky: #4A63ED; --o-gray: #586982; --o-roboto: "Roboto"; --o-h-font-weight: 600; --o-p-roboto: "Roboto Slab"; --o-p-font-weight: 400; --ff: "Roboto"; } /*color end;*/ /*=================new==================*/ .fixed-top{ position: fixed; top: 0; left: 0; right: 0; } .h100{ height: 100vh; } .center{ display: grid; place-items: center; } .tt{ text-transform: uppercase; } .tl{ text-transform: lowercase; } .tc{ text-transform: capitalize; } .dnone{ display: none; } .m0{ margin: -0.45rem!important; } .w80{ width: 80%; } /*===============================reset===============================*/ /*reset*/ *,::after,::before{ margin: 0; padding: 0; box-sizing: border-box; } html{ scroll-behavior: smooth; } body{ font-family: sans-serif; overflow-x: hidden!important; line-height: 1.5; } li,ul{ list-style-type: none; } a{ text-decoration: none; color: inherit; } button{ border: 0; outline: none; } h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{ font-weight: 350; margin-top: 0; margin-bottom: 0.5rem; } p{ color: var(--text); font-size: var(--p); } h1, .h1 { font-size: 2.47rem; } h2, .h2 { font-size: 2rem; } h3, .h3 { font-size: 1.8rem; } h4, .h4 { font-size: 1.5rem; } h5, .h5 { font-size: 1.25rem; } h6, .h6 { font-size: 1rem; } p, .p{ font-weight: 300; } /*reset*/ /*=======================end reset=================================*/ /*===========================main==================================*/ /*container*/ .container{ width: 100%; padding: 0 15px; margin: 0 auto; } @media (min-width: 576px) { .container { max-width: 540px; } } @media (min-width: 768px) { .container { max-width: 720px; } } @media (min-width: 990px) { .container { max-width: 960px; } } @media (min-width: 1200px) { .container { max-width: 1160px; } } /*end here*/ /*img*/ .img,.max{ max-width: 100%; height: auto; vertical-align: middle; } /*position*/ .p-r{ position: relative; } .p-a{ position: absolute; } .p-f{ position: fixed; } .p-s{ position: sticky; } /*z-index*/ .z-top{ z-index: 100; } .z-nav{ z-index: 1000; } .z-back{ z-index: -1; } .z-tooltip{ z-index: 900; } /*end*/ /*coloring*/ .bg-dark{ background: #000000; color: #f5f5f5; } .bg-light{ background: #f5f5f5; color: #181818; } .o50{ opacity: .7; } /*font*/ .text-1 { font-size: 6rem; } .text-2 { font-size: 5.5rem; } .text-3 { font-size: 4.5rem; } .text-4 { font-size: 3.5rem; } .text-5{ font-size: 2.5rem; } /*font weight*/ .bold{ font-weight: 700; } .semi-bold{ font-weight: 500; } .normal{ font-weight: 400; } .thin{ font-weight: 200; } /*===width===*/ .w25{ width: 25%; } .w33{ width: 33%; } .w50{ width: 50%; } .w75{ width: 75%; } .w100{ width: 100%; } /*width end*/ /*margin*/ .auto{ margin: auto; } .m-1{ margin: 0.5rem; } .m-2{ margin: 1rem; } .m-3{ margin: 1.5rem; } .m-4{ margin: 2rem; } .m-5{ margin: 2.5rem; } .m-6{ margin: 3rem; } /*====margin top & bottom====*/ .my-1{ margin: 0.5rem 0; } .my-2{ margin: 1rem 0; } .my-3{ margin: 1.5rem 0; } .my-4{ margin: 2rem 0; } .my-5{ margin: 2.5rem 0; } .my-6{ margin: 3rem 0; } .my-7{ margin: 4rem 0; } /*====padding====*/ .p-1{ padding: 0.5rem; } .p-2{ padding: 1rem; } .p-3{ padding: 1.5rem; } .p-4{ padding: 2rem; } .p-5{ padding: 2.5rem; } .p-6{ padding: 3rem; } /*====padding top & bottom====*/ .py-1{ padding: 0.5rem 0; } .py-2{ padding: 1rem 0; } .py-3{ padding: 1.5rem 0; } .py-4{ padding: 2rem 0; } .py-5{ padding: 2.5rem 0; } .py-6{ padding: 3rem 0; } .py-7{ padding: 4rem 0; } /*======padding ends======*/ /*=========================---end main---==========================-*/ /*------------------------------------------------------grid-------------------------------------------------*/ /*==============grid system===================*/ .grid{ display: grid; grid-template-columns: repeat(var(--col),var(--colwidth)); } .grid-2{ grid-template-columns: repeat(2,1fr); } .grid-3{ grid-template-columns: repeat(3,1fr); } .grid-4{ grid-template-columns: repeat(4,1fr); } .grid-5{ grid-template-columns: repeat(5,1fr); } .grid,.grid-2,.grid-3,.grid-4,.grid-5{ display: grid; align-items: center; justify-content: center; gap: var(--gap); } /*media*/ @media screen and (max-width:768px){ .grid,.grid-2,.grid-3{ grid-template-columns: 1fr; justify-content: center; align-items:center; } } @media screen and (max-width:768px){ .grid-3,.grid-4,.grid-5{ grid-template-columns: repeat(2,1fr); justify-content: center; align-items:center; } } @media screen and (max-width: 576px){ .grid,.grid-2,.grid-3,.grid-4,.grid-5{ grid-template-columns: 1fr; justify-content: center; align-items:center; } } /*grid system ends*/ /*flex-box*/ .dflex{ display: flex; } .flex{ display: flex; flex-direction: row; align-items: center; justify-content: center; } .flex-c{ display: flex; flex-direction: column; } .wrap{ flex-wrap: wrap; } /*==============order=============*/ .order-1{ order: -1; } .order-2{ order: 2; } .order-3{ order: 3; } .order-4{ order: 4; } .order-5{ order: 5; } .order-6{ order: 6; } /*===============align================*/ .aic{ align-items: center; } .aifs{ align-items: flex-start; } .aife{ align-items: flex-end; } .ais{ align-items: stretch!important; } .asfe{ align-self: flex-end; } .asc{ align-self: center; } .ass{ align-self: stretch; } .asfs{ align-self: flex-start; } /*align ends*/ /*text alignment*/ .tac{ text-align: center; } .tar{ text-align: right; } .taj{ text-align: justify; } .tal{ text-align: left; } /*end text align*/ /*======justify======*/ .jcc{ justify-content: center; } .jcsb{ justify-content: space-between; } .jcfe{ justify-content: flex-end; } .jcfs{ justify-content: flex-start; } .jsc{ justify-self: center!important; } .jsfe{ justify-self: flex-end; } /*end justify*/ /*=====================End grid===========================-*/ /*-----------------------------------------------------components------------------------------------------------*/ /*end here*/ /*card*/ .card{ border-radius: 2px; } /*btn*/ .btn-b { display: inline-block; font-weight: 400; line-height: 1.5; color: #212529; text-align: center; text-decoration: none; vertical-align: middle; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none; background-color: transparent; border: 1px solid transparent; padding: 0.75rem 1.75rem; font-size: 1rem; border-radius: 0.25rem; margin-top: 1rem; transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } .btn-primary { color: #fff; background-color: #0d6efd; border-color: #0d6efd; } .btn-primary:hover { color: #fff; background-color: #0b5ed7; border-color: #0a58ca; } .btn-check:focus + .btn-primary, .btn-primary:focus { color: #fff; background-color: #0b5ed7; border-color: #0a58ca; box-shadow: 0 0 0 0.25rem rgba(49, 132, 253, 0.5); } .btn-secondary { color: #fff; background-color: #6c757d; border-color: #6c757d; } .btn-secondary:hover { color: #fff; background-color: #5c636a; border-color: #565e64; } .btn-check:focus + .btn-secondary, .btn-secondary:focus { color: #fff; background-color: #5c636a; border-color: #565e64; box-shadow: 0 0 0 0.25rem rgba(130, 138, 145, 0.5); } /*form*/ .form-controll{ width: 100%; display: block; padding: 1rem; background: rgb(226, 225, 225); outline: none; border: none; margin-bottom: .75rem; resize: vertical; } ::placeholder,textarea::placeholder{ font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; font-size: .8rem!important; } /*---------------------------------------------------end components------------------------------------------------*/ @media screen and (max-width: 576px){ .flex{ flex-wrap: wrap; flex-direction: column; text-align: center; } }
Opacity Grid System
Our you can use the grid system with 3 columns like this;
YOUR CODES GOES HEREYOUR CODES GOES HEREYOUR CODES GOES HERE
Lorem the It is a long established fact that a reader
will be distracted..
Please read more about WordPress here. Opacity Installation.
Opacity Document
Lorem the It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.
Download/*=================new==================*/ .fixed-top{ position: fixed; top: 0; left: 0; right: 0; } .h100{ height: 100vh; } .center{ display: grid; place-items: center; } .tt{ text-transform: uppercase; } .tl{ text-transform: lowercase; } .tc{ text-transform: capitalize; } .dnone{ display: none; } .m0{ margin: -0.45rem!important; } .w80{ width: 80%; }
/*===========================main==================================*/ /*container*/ .container{ width: 100%; padding: 0 15px; margin: 0 auto; } @media (min-width: 576px) { .container { max-width: 540px; } } @media (min-width: 768px) { .container { max-width: 720px; } } @media (min-width: 990px) { .container { max-width: 960px; } } @media (min-width: 1200px) { .container { max-width: 1160px; } } /*end here*/ /*img*/ .img,.max{ max-width: 100%; height: auto; vertical-align: middle; } /*position*/ .p-r{ position: relative; } .p-a{ position: absolute; } .p-f{ position: fixed; } .p-s{ position: sticky; } /*z-index*/ .z-top{ z-index: 100; } .z-nav{ z-index: 1000; } .z-back{ z-index: -1; } .z-tooltip{ z-index: 900; } /*end*/ /*coloring*/ .bg-dark{ background: #000000; color: #f5f5f5; } .bg-light{ background: #f5f5f5; color: #181818; } .o50{ opacity: .7; }
/*==============grid system===================*/ :root{ --text: #6c757d; --gap:2rem; --col:1; --colwidth:1fr; --p: 16px; } .grid{ display: grid; grid-template-columns: repeat(var(--col),var(--colwidth)); } .grid-2{ grid-template-columns: repeat(2,1fr); } .grid-3{ grid-template-columns: repeat(3,1fr); } .grid-4{ grid-template-columns: repeat(4,1fr); } .grid-5{ grid-template-columns: repeat(5,1fr); } .grid,.grid-2,.grid-3,.grid-4,.grid-5{ display: grid; align-items: center; justify-content: center; gap: var(--gap); } /*media*/ @media screen and (max-width:768px){ .grid,.grid-2,.grid-3{ grid-template-columns: 1fr; justify-content: center; align-items:center; } } @media screen and (max-width:768px){ .grid-3,.grid-4,.grid-5{ grid-template-columns: repeat(2,1fr); justify-content: center; align-items:center; } } @media screen and (max-width: 576px){ .grid,.grid-2,.grid-3,.grid-4,.grid-5{ grid-template-columns: 1fr; justify-content: center; align-items:center; } } /*grid system ends*/
.text-1 { font-size: 6rem; } .text-2 { font-size: 5.5rem; } .text-3 { font-size: 4.5rem; } .text-4 { font-size: 3.5rem; } .text-5{ font-size: 2.5rem; } /*---------font weight--------*/ .bold{ font-weight: 700; } .semi-bold{ font-weight: 500; } .normal{ font-weight: 400; } .thin{ font-weight: 200; } li,ul{ list-style-type: none; } a{ text-decoration: none; color: inherit; } button{ border: 0; outline: none; } h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{ font-weight: 350; margin-top: 0; margin-bottom: 0.5rem; } p{ color: var(--text); font-size: var(--p); } h1, .h1 { font-size: 2.47rem; } h2, .h2 { font-size: 2rem; } h3, .h3 { font-size: 1.8rem; } h4, .h4 { font-size: 1.5rem; } h5, .h5 { font-size: 1.25rem; } h6, .h6 { font-size: 1rem; } p, .p{ font-weight: 300; }
/*flex-box*/ .dflex{ display: flex; } .flex{ display: flex; flex-direction: row; align-items: center; justify-content: center; flex-wrap: wrap; } .flex-c{ display: flex; flex-direction: column; } .wrap{ flex-wrap: wrap; } /*==============order=============*/ .order-1{ order: -1; } .order-2{ order: 2; } .order-3{ order: 3; } .order-4{ order: 4; } .order-5{ order: 5; } .order-6{ order: 6; } @media screen and (max-width: 576px){ .flex{ flex-wrap: wrap; flex-direction: column; text-align: center; } }
/*===============align================*/ .aic{ align-items: center; } .aifs{ align-items: flex-start; } .aife{ align-items: flex-end; } .ais{ align-items: stretch!important; } .asfe{ align-self: flex-end; } .asc{ align-self: center; } .ass{ align-self: stretch; } .asfs{ align-self: flex-start; } /*align ends*/ /*text alignment*/ .tac{ text-align: center; } .tar{ text-align: right; } .taj{ text-align: justify; } .tal{ text-align: left; } /*end text align*/ /*======justify======*/ .jcc{ justify-content: center; } .jcsb{ justify-content: space-between; } .jcfe{ justify-content: flex-end; } .jcfs{ justify-content: flex-start; } .jsc{ justify-self: center!important; } .jsfe{ justify-self: flex-end; } /*end justify*/
/*margin*/ .auto{ margin: auto; } .m-1{ margin: 0.5rem; } .m-2{ margin: 1rem; } .m-3{ margin: 1.5rem; } .m-4{ margin: 2rem; } .m-5{ margin: 2.5rem; } .m-6{ margin: 3rem; } /*====margin top & bottom====*/ .my-1{ margin: 0.5rem 0; } .my-2{ margin: 1rem 0; } .my-3{ margin: 1.5rem 0; } .my-4{ margin: 2rem 0; } .my-5{ margin: 2.5rem 0; } .my-6{ margin: 3rem 0; } .my-7{ margin: 4rem 0; } /*====padding====*/ .p-1{ padding: 0.5rem; } .p-2{ padding: 1rem; } .p-3{ padding: 1.5rem; } .p-4{ padding: 2rem; } .p-5{ padding: 2.5rem; } .p-6{ padding: 3rem; } /*====padding top & bottom====*/ .py-1{ padding: 0.5rem 0; } .py-2{ padding: 1rem 0; } .py-3{ padding: 1.5rem 0; } .py-4{ padding: 2rem 0; } .py-5{ padding: 2.5rem 0; } .py-6{ padding: 3rem 0; } .py-7{ padding: 4rem 0; } /*======padding ends======*/
*,::after,::before{ margin: 0; padding: 0; box-sizing: border-box; } html{ scroll-behavior: smooth; } body{ font-family: sans-serif; overflow-x: hidden!important; line-height: 1.5; } li,ul{ list-style-type: none; } a{ text-decoration: none; color: inherit; } button{ border: 0; outline: none; } h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{ font-weight: 350; margin-top: 0; margin-bottom: 0.5rem; } p{ color: var(--text); font-size: var(--p); } h1, .h1 { font-size: 2.47rem; } h2, .h2 { font-size: 2rem; } h3, .h3 { font-size: 1.8rem; } h4, .h4 { font-size: 1.5rem; } h5, .h5 { font-size: 1.25rem; } h6, .h6 { font-size: 1rem; } p, .p{ font-weight: 300; } /*reset*/
:root{ --black:#000000; --white:#ffffff; --dark:#212121; --gray:#313131; --smoke:#9c9696; --shadow:#ada2a2ad; --crimson:#dc143c; --skyblue:#00bffffb; --deepblue: #4054B2; /*custom*/ --o-primary: #6EC1E4; --o-secondary: #54595F; --o-accent: #61CE70; --o-violet: #8040FF; --o-coral: #FF6276; --o-bluish: #313656; --o-cyan: #37C2CC; --o-darkblue: #031D3C; --o-sky: #4A63ED; --o-gray: #586982; --o-roboto: "Roboto"; --o-h-font-weight: 600; --o-p-roboto: "Roboto Slab"; --o-p-font-weight: 400; --ff: "Roboto"; }
Please remember you have purchased a very affordable theme and you have not paid for a full-time web design agency. Occasionally we will help with small tweaks, but these requests will be put on a lower priority due to their nature. Support is also 100% optional and we provide it for your connivence, so please be patient, polite and respectful.
Please visit our profile page or ask question @yourusername
Support for my items includes:These are the primary CSS files used for general front-end styling. Use these to customize your theme even further. All included JavaScript codes under yourthemename/css/
These are the various attribution inks to the Javascript files included or modified to work with in this theme. All included JavaScript codes under yourthemename/js/
You can find the version history (changelog.txt) file on yourthemename-full.zip folder or you can check changelog on theme sale page.
Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.
----------------------------------------------------------------------------------------- Version 1.0.3 - ----------------------------------------------------------------------------------------- - ----------------------------------------------------------------------------------------- Version 1.0.2 - ----------------------------------------------------------------------------------------- - ----------------------------------------------------------------------------------------- Version 1.0.0 - November 28th, 2020 ----------------------------------------------------------------------------------------- - Initial releases
Code released under the Mit License License.
For more information about copyright and license check code-opacity.