+
+
+
+
\ No newline at end of file
diff --git a/Html components/ratings.html b/Html components/ratings.html
new file mode 100644
index 0000000..085b40d
--- /dev/null
+++ b/Html components/ratings.html
@@ -0,0 +1,105 @@
+
+
+
+
+
+
+
Ratings
+
Ratings provides insights regarding end user's opinion and feedback with a product.
+
+
+
+
Rating with Hover Effect
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/Html components/text-util.html b/Html components/text-util.html
new file mode 100644
index 0000000..3db1650
--- /dev/null
+++ b/Html components/text-util.html
@@ -0,0 +1,173 @@
+
+
+
+
+
+
+
Text-utilities
+
Text-utilities component includes headings, text, paragraphs of different sizes..
+
+
+
+
Heading Variants
+
+
+
(h1) - This is Largest Heading
+ (h2) - This is Second Largest Heading
+ (h3) - This is Third Largest Heading
+ (h4) - This is Fourth Largest Heading
+ (h5) - This is Fifth Largest Heading
+ (h6) - This is SixthLargest Heading
+
+
+
+
+
+
+
Text-Alignment
+
+
+
Left Aligned Text
+
Center Aligned Text
+
Right Aligned Text
+
+
+
+
+
+
+
Text-Transform
+
+
+
LowerCase
+
uppercase
+
i am caApitalized text
+
+
+
+
+
+
+
Font Sizes
+
+
+
2.5rem text
+
2rem text
+
1.75rem text
+
1.5rem text
+
1.25rem text
+
1rem text
+
+
+
+
+
+
+
Font weight and italics
+
+
+
Bold text
+
Bolder text
+
Normal text
+
Light text
+
Lighter text
+
Italic text
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/Html components/toast.html b/Html components/toast.html
new file mode 100644
index 0000000..908de15
--- /dev/null
+++ b/Html components/toast.html
@@ -0,0 +1,106 @@
+
+
+
+
+
+
+
Toast/Notify
+
Toast / snackbar is used to to display alerts on top of an overlay. The following three are the most commonly used toasts in applications.
+
+
+
+
Simple Toast
+
+
Click Here
+
+
+
Facebook
+
11mins ago
+
X
+
+
+
Hello , You have a Friend Request
+
+
+
+
+
+
+
+
Many Types Of Toasts Yet To Be Updated...
+
+
+
+
+
\ No newline at end of file
diff --git a/Js components/ham.js b/Js components/ham.js
new file mode 100644
index 0000000..286cb9a
--- /dev/null
+++ b/Js components/ham.js
@@ -0,0 +1,10 @@
+let ham=document.getElementById('ham');
+let menu=document.getElementById('menuItems');
+let close=document.getElementById('cl');
+
+ham.addEventListener('click',function(){
+ menu.style.display='grid';
+})
+close.addEventListener('click',function(){
+ menu.style.display='none';
+})
\ No newline at end of file
diff --git a/Js components/modal.js b/Js components/modal.js
new file mode 100644
index 0000000..4ce37ad
--- /dev/null
+++ b/Js components/modal.js
@@ -0,0 +1,14 @@
+let modalBox=document.getElementById('my-modal');
+let btnModal=document.getElementById('btn');
+let closeX=document.getElementById('close');
+
+
+btnModal.addEventListener('click',clickBtn);
+function clickBtn(){
+ modalBox.style.display='block';
+}
+
+closeX.addEventListener('click',closeBox);
+function closeBox(){
+ modalBox.style.display='none';
+}
diff --git a/Js components/toast.js b/Js components/toast.js
new file mode 100644
index 0000000..2c76b28
--- /dev/null
+++ b/Js components/toast.js
@@ -0,0 +1,10 @@
+let btn=document.getElementById('btn');
+let toast=document.getElementById('toast-container');
+let closeToast=document.getElementById('closeToast');
+
+btn.addEventListener('click',function(){
+ toast.style.display='block';
+});
+closeToast.addEventListener('click',function(){
+ toast.style.display='none';
+})
\ No newline at end of file
diff --git a/images/Badges images/Cart48px.png b/images/Badges images/Cart48px.png
new file mode 100644
index 0000000..d8459d9
Binary files /dev/null and b/images/Badges images/Cart48px.png differ
diff --git a/images/Badges images/Offer48px.png b/images/Badges images/Offer48px.png
new file mode 100644
index 0000000..92edb37
Binary files /dev/null and b/images/Badges images/Offer48px.png differ
diff --git a/images/Badges images/chat48px.png b/images/Badges images/chat48px.png
new file mode 100644
index 0000000..6226a16
Binary files /dev/null and b/images/Badges images/chat48px.png differ
diff --git a/images/Badges images/freq48px.png b/images/Badges images/freq48px.png
new file mode 100644
index 0000000..a7905f1
Binary files /dev/null and b/images/Badges images/freq48px.png differ
diff --git a/images/Badges images/gitCard48px.png b/images/Badges images/gitCard48px.png
new file mode 100644
index 0000000..3a7fdf9
Binary files /dev/null and b/images/Badges images/gitCard48px.png differ
diff --git a/images/Badges images/like48px.png b/images/Badges images/like48px.png
new file mode 100644
index 0000000..f254137
Binary files /dev/null and b/images/Badges images/like48px.png differ
diff --git a/images/Badges images/logout48px.png b/images/Badges images/logout48px.png
new file mode 100644
index 0000000..def8305
Binary files /dev/null and b/images/Badges images/logout48px.png differ
diff --git a/images/Badges images/notify48px.png b/images/Badges images/notify48px.png
new file mode 100644
index 0000000..c77d3a6
Binary files /dev/null and b/images/Badges images/notify48px.png differ
diff --git a/images/Basic/GitHub-Mark-32px.png b/images/Basic/GitHub-Mark-32px.png
new file mode 100644
index 0000000..8b25551
Binary files /dev/null and b/images/Basic/GitHub-Mark-32px.png differ
diff --git a/images/Basic/LI-In-Bug.png b/images/Basic/LI-In-Bug.png
new file mode 100644
index 0000000..8bc2d53
Binary files /dev/null and b/images/Basic/LI-In-Bug.png differ
diff --git a/images/Basic/favicon-16x16.png b/images/Basic/favicon-16x16.png
new file mode 100644
index 0000000..a4de6ba
Binary files /dev/null and b/images/Basic/favicon-16x16.png differ
diff --git a/images/Basic/ham.png b/images/Basic/ham.png
new file mode 100644
index 0000000..7596da7
Binary files /dev/null and b/images/Basic/ham.png differ
diff --git a/images/Basic/hamburg.zip b/images/Basic/hamburg.zip
new file mode 100644
index 0000000..15cb0ec
Binary files /dev/null and b/images/Basic/hamburg.zip differ
diff --git a/images/Basic/myntra-seeklogo.com.svg b/images/Basic/myntra-seeklogo.com.svg
new file mode 100644
index 0000000..1312116
--- /dev/null
+++ b/images/Basic/myntra-seeklogo.com.svg
@@ -0,0 +1,53 @@
+
+
+
+
+
diff --git a/images/Btn Images/heart.png b/images/Btn Images/heart.png
new file mode 100644
index 0000000..04ee48b
Binary files /dev/null and b/images/Btn Images/heart.png differ
diff --git a/images/Btn Images/home.png b/images/Btn Images/home.png
new file mode 100644
index 0000000..3ec5a2f
Binary files /dev/null and b/images/Btn Images/home.png differ
diff --git a/images/Btn Images/pencil.png b/images/Btn Images/pencil.png
new file mode 100644
index 0000000..81d906c
Binary files /dev/null and b/images/Btn Images/pencil.png differ
diff --git a/images/card Images/menShirt.webp b/images/card Images/menShirt.webp
new file mode 100644
index 0000000..4701e1e
Binary files /dev/null and b/images/card Images/menShirt.webp differ
diff --git a/images/card Images/menshirt2.webp b/images/card Images/menshirt2.webp
new file mode 100644
index 0000000..ee5a58a
Binary files /dev/null and b/images/card Images/menshirt2.webp differ
diff --git a/images/card Images/new1.png b/images/card Images/new1.png
new file mode 100644
index 0000000..ad415d0
Binary files /dev/null and b/images/card Images/new1.png differ
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..9d4ad77
--- /dev/null
+++ b/index.html
@@ -0,0 +1,107 @@
+
+
+
+
+
+
+
+
Introduction . MAGIC UI
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Welcome to MAGIC UI
+
Build Fast , Responsive Web Apps
+ by doing some MAGIC...
+
MAGIC UI is a simple, modular and accessible
+ component library that gives you the building blocks
+ you need to build your Web Apps quickly.
+
Get
+ Started
+
Github
+
Linkedin
+
+
+
Installation
+
Anybody can easily install or import MAGIC UI , it's just take few minutes and you be
+ all set to go.You need to include CSS link to your HTML Code and access the components you need.
+
+
+
An example code snippet is embeded below :
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/main.css b/main.css
new file mode 100644
index 0000000..7093720
--- /dev/null
+++ b/main.css
@@ -0,0 +1,665 @@
+:root{
+ --primary:#1e8be4;
+ --secondary:#778899;
+ --success:#198754;
+ --danger:#dc3545;
+ --warning:#ffc107;
+ --info:#4b0082;
+ --light:#f8f9fa;
+ --dark:#212529;
+ --link:#0d6efd;
+ --primary-hover:#106fbd;
+ --secondary-hover:#697683;
+ --success-hover:#017201;
+ --danger-hover:#b32922;
+ --warning-hover:#f3ca27;
+ --info-hover:#37025e;
+ --light-hover:#c9c0c0;
+ --dark-hover:#000000;
+ --disable-primary-btn:#77afdd;
+ --disable-secondary-btn:#888a8b;
+ --bg-color:#333333;
+ --font-color:#818181;
+ --btn-icon-color:#ffffff;
+ --font-family-rubik:@import url('https://fonts.googleapis.com/css2?family=Rubik&display=swap');
+ --font-family-roboto:@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@1,300&display=swap');
+}
+
+/* fontImport */
+
+/* body */
+body{
+ margin:0px;
+ padding:0px;
+ box-sizing: border-box;
+ /* font-family: 'Roboto', sans-serif; */
+ font-family: 'Rubik', sans-serif;
+ background-color: var(--bg-color);
+ color:var(--light);
+}
+.mobileMenu{
+ display: none;
+}
+.menuItems{
+ display: none;
+}
+
+/* Buttons */
+.btn{
+ color:var(--light);
+ padding:0.5rem;
+ text-align: center;
+ border-radius: 0.3rem;
+ font-size: 1.1rem;
+ cursor:pointer;
+ margin:0.5rem;
+}
+
+/* simple Buttons */
+.simple-btn{
+ background-color: var(--link);
+}
+
+/* contained buttons */
+.btn-primary{
+ background-color: var(--primary);
+}
+.btn-secondary{
+ background-color: var(--secondary);
+}
+.btn-success{
+ background-color: var(--success);
+}
+.btn-danger{
+ background-color: var(--danger);
+}
+.btn-warning{
+ background-color: var(--warning);
+}
+.btn-info{
+ background-color: var(--info);
+}
+.btn-light{
+ background-color: var(--light);
+ color:var(--dark);
+}
+.btn-dark{
+ background-color: var(--dark);
+ color:var(--light);
+}
+.btn-link{
+ background-color: var(--bg-color); text-decoration: underline;
+ color:var(--link);
+}
+.btn-primary:hover{
+ background-color: var(--primary-hover);
+ color:white;
+}
+.btn-secondary:hover{
+ background-color: var(--secondary-hover);
+ color:white;
+}
+.btn-success:hover{
+ background-color: var(--success-hover);
+ color:white;
+}
+.btn-danger:hover{
+ background-color: var(--danger-hover);
+ color:white;
+}
+.btn-warning:hover{
+ background-color: var(--warning-hover);
+ color:white;
+}
+.btn-info:hover{
+ background-color: var(--info-hover);
+ color:white;
+}
+.btn-light:hover{
+ background-color: var(--light-hover);
+ color:white;
+}
+.btn-dark:hover{
+ background-color:var(--dark-hover);
+ color:white;
+}
+
+/* outline buttons */
+.btn-outline-primary{
+ color:var(--primary);
+ border-color: var(--primary);
+}
+.btn-outline-primary:hover{
+ background-color: var(--primary);
+ color:var(--light);
+}
+.btn-outline-secondary{
+ color:var(--secondary);
+ border-color: var(--secondary);
+}
+.btn-outline-secondary:hover{
+ background-color: var(--secondary);
+ color:var(--light);
+}
+.btn-outline-success{
+ color:var(--success);
+ border-color: var(--success);
+}
+.btn-outline-success:hover{
+ background-color: var(--success);
+ color:var(--light);
+}
+.btn-outline-danger{
+ color:var(--danger);
+ border-color: var(--danger);
+}
+.btn-outline-danger:hover{
+ background-color: var(--danger);
+ color:var(--light);
+}
+.btn-outline-warning{
+ color:var(--warning);
+ border-color: var(--warning);
+}
+.btn-outline-warning:hover{
+ background-color: var(--warning);
+ color:var(--light);
+}
+.btn-outline-info{
+ color:var(--info);
+ border-color: var(--info);
+}
+.btn-outline-info:hover{
+ background-color: var(--info);
+ color:var(--light);
+}
+.btn-outline-light{
+ color:var(--light);
+ border-color: var(--light);
+}
+.btn-outline-light:hover{
+ background-color: var(--light);
+ color:var(--dark);
+}
+.btn-outline-dark{
+ color:var(--dark);
+ border-color: var(--dark);
+}
+.btn-outline-dark:hover{
+ background-color: var(--dark);
+ color:var(--light);
+}
+/* Floating Action Buttons */
+.icon-btn-round{
+ width:3rem;
+ height:3rem;
+ border-radius: 100%;
+ background-color: var(--bg-color);
+ cursor:pointer;
+}
+.icon{
+ color: var(--btn-icon-color);
+ height:2em;
+ cursor:pointer;
+}
+.icon-plus{
+ color:var(--btn-icon-color);
+ font-size: 2.1rem;
+}
+
+/* Button Sizes */
+.btn-lg{
+ font-size: 1.20rem;
+ padding: 0.5rem;
+ width: 9rem;
+}
+.btn-sm{
+ font-size: 0.7rem;
+ padding:0.35rem;
+ width:5rem;
+}
+
+/* Disables state Buttons */
+
+.btn-primary:disabled{
+ color:white;
+ background-color:var(--disable-primary-btn) ;
+ border-color: var(--disable-primary-btn);
+ pointer-events: none;
+}
+.btn-secondary:disabled{
+ color:white;
+ background-color:var(--disable-secondary-btn) ;
+ border-color: var(--disable-secondary-btn);
+ pointer-events: none;
+}
+
+/* alerts */
+.alert{
+ padding:0.8rem;
+ margin:0.5rem;
+ width:95%;
+ border-radius:0.4rem;
+ cursor:pointer;
+}
+.simple-alert{
+ border:1px solid var(--dark-hover);
+ background-color: var(--light);
+ color:var(--dark);
+}
+
+/* Alert Examples */
+.alert-primary{
+ background-color: var(--primary);
+}
+.alert-secondary{
+ background-color: var(--secondary);
+}
+.alert-success{
+ background-color: var(--success);
+}
+.alert-danger{
+ background-color: var(--danger);
+}
+.alert-warning{
+ background-color: var(--warning);
+}
+.alert-info{
+ background-color: var(--info);
+}
+.alert-light{
+ background-color: var(--light);
+ color:var(--dark);
+}
+.alert-dark{
+ background-color: var(--dark);
+ color:var(--light);
+}
+
+/* Outline Alerts */
+.alert-outline-primary{
+ border:1px solid var(--primary);
+ color:var(--primary);
+ border-color: var(--primary);
+}
+
+.alert-outline-secondary{
+ border:1px solid var(--secondary);
+ color:var(--secondary);
+ border-color: var(--secondary);
+}
+
+.alert-outline-success{
+ border:1px solid var(--success);
+ color:var(--success);
+ border-color: var(--success);
+}
+
+.alert-outline-danger{
+ border:1px solid var(--danger);
+ color:var(--danger);
+ border-color: var(--danger);
+}
+
+.alert-outline-warning{
+ border:1px solid var(--warning);
+ color:var(--warning);
+ border-color: var(--warning);
+}
+
+.alert-outline-info{
+ border:1px solid var(--info);
+ color:var(--info);
+ border-color: var(--info);
+}
+
+.alert-outline-light{
+ border:1px solid var(--light);
+ color:var(--light);
+ border-color: var(--light);
+}
+
+.alert-outline-dark{
+ border:1px solid var(--dark);
+ color:var(--dark);
+ border-color: var(--dark);
+}
+
+/* Profile Badge */
+.badge{
+ display: flex;
+ justify-content: space-evenly;
+ align-items: center;
+ flex-wrap: wrap;
+}
+.profile-container{
+ padding: 0.4rem;
+ /* border:1px solid red; */
+ position:relative;
+}
+.avatar{
+ width:120px;
+ height:120px;
+ border-radius:50%;
+}
+.dot-icon{
+ width:25px;
+ height:25px;
+ border-radius: 50%;
+ position:absolute;
+ margin:0px;
+ right:1rem;
+ bottom: 1rem;;
+}
+.online-dot-color{
+ background-color: var(--success-hover);
+}
+.offline-dot-color{
+ background-color: var(--secondary)
+}
+.busy-dot-color{
+ background-color: var(--danger-hover);
+}
+.quantity{
+ position: absolute;
+ bottom: 45px;
+ left: 50px;
+ font-size: 1.3rem;
+}
+
+/* Avatar */
+.avatar-sm{
+ height:80px;
+ width:80px;
+ border-radius: 50%;
+}
+.avatar-md{
+ height:120px;
+ width:120px;
+ border-radius: 50%;
+}
+.avatar-lg{
+height:150px;
+width:150px;
+border-radius: 50%;
+}
+.avatar-sq{
+ border-radius: 10px !important;
+}
+/* Input */
+.input-container{
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ margin:0.2rem;
+}
+.form-control{
+ width:12rem;
+ padding:0.5rem;
+ margin:0.5rem;
+ font-size: 1rem;
+ border-radius: 10px;
+ border:none;
+ outline:var(--primary);
+ border:none;
+}
+.checkbox{
+ display: flex;
+ justify-content: space-evenly;
+ cursor:pointer;
+}
+.tick-box,label{
+ cursor:pointer;
+}
+/* Modals */
+.modal-container{
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+}
+.modal{
+ display: none;
+ width:80%;
+ text-align: center;
+ position: relative;
+ z-index: 1;
+ background-color: var(--light);
+ color: var(--dark-hover);
+ border-radius: 10px;
+
+}
+.modal-content{
+ margin:1rem;
+ width:90%;
+}
+.close{
+ position: absolute;
+ top: 1px;
+ right: 3px;
+ font-size: 1.8rem;
+ cursor: pointer;
+ border-radius: 10px;
+ padding: 0.2rem;
+}
+.close:hover{
+ background-color: var(--secondary);
+}
+
+/* Text Utilities */
+.text-align-container{
+ margin:1rem;
+}
+/* text-alignment */
+.text-left{
+ text-align: left !important;
+}
+.text-right{
+ text-align: right !important;
+}
+/* text-transform */
+.text-lowercase{
+ text-transform: lowercase;
+}
+.text-uppercase{
+ text-transform: uppercase;
+}
+.text-capitalize{
+ text-transform: capitalize;
+}
+/* font-sizes */
+.fs-1{
+ font-size: 2.5rem;
+}
+.fs-2{
+ font-size: 2rem;
+}
+.fs-3{
+ font-size: 1.75rem;
+}
+.fs-4{
+ font-size: 1.5rem;
+}
+.fs-5{
+ font-size: 1.25rem;
+}
+.fs-6{
+ font-size:1rem;
+}
+/* Font weight and italics*/
+.fw-bold{
+ font-weight: 700;
+}
+.fw-bolder{
+ font-weight: bolder;
+}
+.fw-light{
+ font-weight: 300;
+}
+.fw-lighter{
+ font-weight: lighter;
+}
+.fw-italic{
+ font-style: italic;
+}
+
+/* Cards */
+.card{
+ position: relative;
+ width:18rem;
+ height: 350px;
+ margin:1rem;
+}
+.card-container{
+ flex-direction: row !important;
+ justify-content: space-around;
+}
+.card-top{
+ position: absolute;
+ width: 100%;
+ height: 190px;
+ top: 0px;
+ left: 0px;
+ border-top-left-radius: 10px;
+ border-top-right-radius: 10px;
+}
+.card-body{
+ height: 165px;
+ background-color: var(--light);
+ color:var(--dark-hover);
+ position: absolute;
+ bottom: 0;
+ width: 100%;
+ border-bottom-left-radius: 10px;
+ border-bottom-right-radius: 10px;
+}
+.card-title{
+ margin:0.5rem;
+}
+.card-text{
+ font-size: 1rem;
+ padding:0.3rem;
+}
+/* shopping-card */
+.shop-card{
+ width:210px;
+ height:360px;
+ overflow: hidden;
+ position: relative;
+ text-align: left;
+}
+.new-tag{
+ width: 32%;
+ height: 15%;
+ position: absolute;
+ top: -2px;
+ left: 0px;
+ cursor: pointer;
+}
+.shop-card-img{
+ width:210px;
+ height:260px;
+ border-radius: 10px;
+}
+.shop-card-body{
+ position: absolute;
+ background-color: var(--light);
+ width:100%;
+ height:100px;
+ bottom:0px;
+ left:0px;
+ color:var(--dark-hover);
+ font-size: 0.85rem;
+ padding:0.2rem;
+ border-bottom-left-radius: 10px;
+ border-bottom-right-radius: 10px;
+}
+.prod-brand{
+ margin: 0.5rem 0rem;
+}
+.prod-desc{
+ margin:0px;
+ margin-top: 0.5rem;
+}
+.prod-price{
+ margin: 0.5rem 0rem;
+ font-size: 1.1rem;
+}
+.strike-price{
+ text-decoration: line-through;
+ font-size: 0.8rem;
+ color:var(--secondary-hover)
+}
+.discount{
+ font-size: 0.8rem;
+ color:var(--danger)
+
+}
+
+/* Ratings */
+.box{
+ font-size: 2.5rem;
+ cursor:pointer;
+ direction: rtl;
+}
+.st{
+ text-decoration: none;
+ color:black;
+}
+.box a:hover{
+ color: var(--warning-hover);
+}
+.b1:hover ~ a{
+ color: var(--warning-hover);
+}
+.b2:hover ~ a{
+ color: var(--warning-hover);
+}
+.b3:hover ~ a{
+ color:var(--warning-hover);
+}
+.b4:hover ~ a{
+ color: var(--warning-hover);
+}
+.b5:hover ~ .a{
+ color: var(--warning-hover);
+}
+
+/* Toast */
+.toast-container{
+ display: none;
+ position: fixed;
+ width:300px;
+ height:100px;
+ top: 600px;
+ right: 10px;
+ border-radius: 10px;
+ z-index:10;
+ background-color: var(--light);
+ color:var(--dark-hover);
+ font-size: 1rem;
+}
+.make-flex{
+ display:flex;
+ flex-direction: row;
+}
+.toast-heading{
+ position: relative;
+ left:10px;
+ top: 1;
+}
+.close-toast{
+ position: relative;
+ left: 137px;
+ padding: 6px;
+ top: 1;
+ font-size: 1rem;
+ cursor:pointer;
+}
+.min{
+ font-size: 0.75rem;
+ position: relative;
+ left: 122px;
+ top: 1;
+}
\ No newline at end of file
diff --git a/responsive/index.css b/responsive/index.css
new file mode 100644
index 0000000..8bcae11
--- /dev/null
+++ b/responsive/index.css
@@ -0,0 +1,60 @@
+
+@media screen and (min-width:360px) and (max-width:640px){
+ .side-bar{
+ display: none;
+ }
+ .content-box{
+ margin:0px;
+ overflow:hidden;
+ }
+ iframe{
+ width:280px !important;
+
+ }
+ .index-heading{
+ font-size: 1.8rem;
+ }
+ .index-para{
+ font-size: 1rem;
+ }
+ .index-para2{
+ font-size: 1rem;
+ }
+ .mobileMenu{
+ display: flex !important;
+ height: 35px;
+ position: relative;
+ }
+ .brandName{
+ color:white;
+ border-radius: 5px;
+ margin-bottom: 0.1rem;
+ margin-top: 0.5rem;
+ background-image: linear-gradient(rgb(82, 40, 40),rgb(160, 216, 28));
+ font-size: 1.4rem;
+ }
+ .hamburgerMenu{
+ position: absolute;
+ top: -6px;
+ right: 13px;
+ cursor:pointer;
+ }
+ .menuItems{
+ justify-content: center;
+ font-size: 1.2rem;
+ }
+ .menuItems a{
+ text-decoration: none;
+ color:white;
+ padding:0.2rem;
+ }
+ .close{
+
+ position: absolute;
+ top: 36px;
+ right: 6px !important;
+ }
+ .alert{
+ padding:0.1rem;
+ }
+}
\ No newline at end of file
+ 
+ 
+ 
+ 4
+ 
+ 8
+ 
+ 4
+ 
+ 4
+ 
+ 4
+ 
+ 
+ 2
+ 
+ 
+ 
+ 
+ 
+