frontend

static/css/style.css

@@ -0,0 +1,170 @@
+header {
+  position: fixed;
+  width: 100%;
+  transition: top 0.3s ease-in-out; 
+  background-color: #5763AB;
+  width: 100%;
+  z-index: 9999;
+}
+
+.saburly-menu {
+  z-index: 9999;
+  margin-left: 10%;
+  margin-right: 10%;
+}
+
+.side-menu {
+  position: fixed; 
+  top: 0;
+  right: 0;
+  width: 256px; 
+  min-height: 100vh;
+  overflow-y: scroll;
+  -webkit-overflow-scrolling: touch;
+  background-color: #5763ab;
+  z-index: 0; 
+  display: none; 
+  transition: all 0.25s ease;
+}
+
+
+.slideout-open .side-menu {
+  transform: translateX(0); 
+}
+
+.side-menu .social-icons {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  z-index: 10001; 
+}
+
+.menu_icon [class*='menu_bar-'] {
+  background: #ffffff;
+  transform: rotate(0deg);
+  transition: 0.2s ease all;
+  height: 0.18rem;
+  display: block;
+  margin-bottom: 0.3rem;
+}
+
+.menu_icon [class*='menu_bar-']:last-child {
+  margin-bottom: 0rem;
+}
+
+.menu_icon:focus {
+  outline: 0;
+}
+
+.menu_bar-top {
+  width: 25px;
+}
+
+.menu_bar-mid {
+  width: 20px;
+}
+
+.menu_bar-bot {
+  width: 25px;
+}
+
+.menu-opened .menu_bar-top {
+  transform: rotate(45deg);
+  transform-origin: 15% 15%;
+}
+
+.menu-opened .menu_bar-mid {
+  opacity: 0;
+}
+
+.menu-opened .menu_bar-bot {
+  transform: rotate(-45deg);
+  transform-origin: 15% 95%;
+}
+
+.side-toggle {
+  cursor: pointer;
+  z-index: 10001;
+}
+
+.side-toggle:hover {
+  opacity: 0.7;
+}
+
+.side-navigation li {
+  list-style: none;
+}
+
+.side-navigation a {
+  text-decoration: none;
+}
+
+.saburly-footer,
+.content{
+  margin-left: 10%;
+  margin-right: 10%;
+}
+
+footer {
+  background-color: #5763AB;
+  width: 100%;
+}
+
+.saburly-footer {
+  padding-bottom: 1%;
+}
+
+.connect {
+  background-color: #4A5699;
+}
+
+.btn {
+  background-color: #5dcdd4;
+}
+
+.btn:hover {
+  background-color: #51b5bb;
+}
+
+.rqbtn:hover {
+  background-color: #51b5bb;
+  border: 1px solid #51b5bb;
+}
+
+.main-color {
+  background-color: #5763AB;
+  color: white;
+}
+
+/* Hide side menu on large screens */
+@media (min-width: 1024px) {
+  .side-menu {
+      display: none;
+  }
+}
+
+/* Show side menu on smaller screens */
+@media (max-width: 1023px) {
+  .side-menu {
+      display: block;
+  }
+}
+
+.side-menu {
+  display: none;
+}
+
+.side-menu.active {
+  display: block; 
+  transform: translateX(0); 
+}
+
+.header-hidden { 
+  transform: translateY(-100%); 
+  transition: transform 0.3s ease; 
+} 
+ 
+.header-visible { 
+  transform: translateY(0); 
+  transition: transform 0.3s ease; 
+}