initial

2026-10-23 03:27:30 +09:00 · 2022-07-02 09:10:12 +06:00
commit 6f0e63ca42
@@ -0,0 +1,54 @@
+<div align="center">
+  
+  ![GitHub repo size](https://img.shields.io/github/repo-size/codewithsadee/gamics)
+  ![GitHub stars](https://img.shields.io/github/stars/codewithsadee/gamics?style=social)
+  ![GitHub forks](https://img.shields.io/github/forks/codewithsadee/gamics?style=social)
+  [![Twitter Follow](https://img.shields.io/twitter/follow/codewithsadee?style=social)](https://twitter.com/intent/follow?screen_name=codewithsadee)
+  [![YouTube Video Views](https://img.shields.io/youtube/views/VJKx9uLEpaU?style=social)](https://youtu.be/VJKx9uLEpaU)
+
+  <br />
+  <br />
+
+  <h2 align="center">Gamics - Gaming website</h2>
+
+  Gamics is a fully responsive gaming website, <br />Responsive for all devices, build using HTML, CSS, and JavaScript.
+
+  <a href="https://codewithsadee.github.io/gamics/"><strong>➥ Live Demo</strong></a>
+
+</div>
+
+<br />
+
+### Demo Screeshots
+
+![Gamics Desktop Demo](./readme-images/desktop.png "Desktop Demo")
+
+### Prerequisites
+
+Before you begin, ensure you have met the following requirements:
+
+* [Git](https://git-scm.com/downloads "Download Git") must be installed on your operating system.
+
+### Run Locally
+
+To run **Gamics** locally, run this command on your git bash:
+
+Linux and macOS:
+
+```bash
+sudo git clone https://github.com/codewithsadee/gamics.git
+```
+
+Windows:
+
+```bash
+git clone https://github.com/codewithsadee/gamics.git
+```
+
+### Contact
+
+If you want to contact with me you can reach me at [Twitter](https://www.twitter.com/codewithsadee).
+
+### License
+
+This project is **free to use** and does not contains any license.
@@ -0,0 +1,53 @@
+'use strict';
+
+
+
+const navbar = document.querySelector("[data-navbar]");
+const navbarLinks = document.querySelectorAll("[data-nav-link]");
+const navbarToggler = document.querySelector("[data-nav-toggler]");
+
+navbarToggler.addEventListener("click", function () {
+  navbar.classList.toggle("active");
+  this.classList.toggle("active");
+});
+
+for (let i = 0; i < navbarLinks.length; i++) {
+  navbarLinks[i].addEventListener("click", function () {
+    navbar.classList.remove("active");
+    navbarToggler.classList.remove("active");
+  });
+}
+
+
+
+/**
+ * search toggle
+ */
+
+const searchTogglers = document.querySelectorAll("[data-search-toggler]");
+const searchBox = document.querySelector("[data-search-box]");
+
+for (let i = 0; i < searchTogglers.length; i++) {
+  searchTogglers[i].addEventListener("click", function () {
+    searchBox.classList.toggle("active");
+  });
+}
+
+
+
+/**
+ * header
+ */
+
+const header = document.querySelector("[data-header]");
+const backTopBtn = document.querySelector("[data-back-top-btn]");
+
+window.addEventListener("scroll", function () {
+  if (window.scrollY >= 200) {
+    header.classList.add("active");
+    backTopBtn.classList.add("active");
+  } else {
+    header.classList.remove("active");
+    backTopBtn.classList.remove("active");
+  }
+});
@@ -0,0 +1,4 @@
+<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="50" height="50" rx="10" fill="#1D1E33"/>
+<path d="M44.8732 23.6232C43.0172 15.7243 40.2241 11.5084 36.0807 10.3568C35.2098 10.1163 34.3063 9.99613 33.3987 10.0001C32.199 10.0001 31.1542 10.2752 30.049 10.5668C28.7172 10.9186 27.2042 11.3181 24.9982 11.3181C22.7922 11.3181 21.2784 10.9194 19.9439 10.5677C18.8378 10.2752 17.7939 10.0001 16.5977 10.0001C15.6592 9.99703 14.7247 10.1168 13.8212 10.356C9.69969 11.5026 6.90828 15.7169 5.02517 23.6182C3.00031 32.1209 3.99699 37.4893 7.82008 38.7348C8.34414 38.9086 8.89553 38.9983 9.45118 39C12.0702 39 14.1703 36.9464 15.6054 35.2651C17.2269 33.3623 19.1249 32.3969 24.9982 32.3969C30.2441 32.3969 32.4151 33.0666 34.2904 35.2651C35.4691 36.6474 36.583 37.6145 37.6943 38.2232C39.1723 39.0321 40.6493 39.2117 42.0836 38.7479C44.3429 38.0222 45.638 36.1037 45.9338 33.0443C46.1587 30.6983 45.8121 27.6167 44.8732 23.6232ZM20.798 23.18H17.9978V25.816C17.9978 26.1655 17.8503 26.5008 17.5877 26.7479C17.3252 26.9951 16.969 27.134 16.5977 27.134C16.2264 27.134 15.8703 26.9951 15.6077 26.7479C15.3451 26.5008 15.1976 26.1655 15.1976 25.816V23.18H12.3975C12.0261 23.18 11.67 23.0411 11.4075 22.794C11.1449 22.5468 10.9974 22.2116 10.9974 21.862C10.9974 21.5125 11.1449 21.1772 11.4075 20.93C11.67 20.6829 12.0261 20.544 12.3975 20.544H15.1976V17.908C15.1976 17.5585 15.3451 17.2232 15.6077 16.9761C15.8703 16.7289 16.2264 16.59 16.5977 16.59C16.969 16.59 17.3252 16.7289 17.5877 16.9761C17.8503 17.2232 17.9978 17.5585 17.9978 17.908V20.544H20.798C21.1693 20.544 21.5254 20.6829 21.788 20.93C22.0505 21.1772 22.198 21.5125 22.198 21.862C22.198 22.2116 22.0505 22.5468 21.788 22.794C21.5254 23.0411 21.1693 23.18 20.798 23.18ZM28.1484 23.5095C27.8022 23.5095 27.4639 23.4129 27.1761 23.2318C26.8883 23.0508 26.664 22.7935 26.5315 22.4925C26.399 22.1914 26.3644 21.8602 26.4319 21.5406C26.4994 21.221 26.6661 20.9275 26.9109 20.6971C27.1556 20.4667 27.4675 20.3097 27.807 20.2462C28.1464 20.1826 28.4983 20.2152 28.8181 20.3399C29.1379 20.4646 29.4112 20.6758 29.6035 20.9467C29.7958 21.2176 29.8985 21.5362 29.8985 21.862C29.8985 22.2989 29.7141 22.718 29.3859 23.027C29.0577 23.3359 28.6125 23.5095 28.1484 23.5095V23.5095ZM31.9986 27.134C31.6523 27.134 31.3137 27.0372 31.0258 26.856C30.7379 26.6748 30.5136 26.4173 30.3813 26.116C30.249 25.8147 30.2146 25.4832 30.2825 25.1636C30.3503 24.8439 30.5175 24.5503 30.7626 24.3201C31.0078 24.0898 31.3201 23.9333 31.6599 23.8701C31.9996 23.807 32.3517 23.8403 32.6714 23.9656C32.9911 24.0909 33.2641 24.3027 33.4559 24.5742C33.6477 24.8457 33.7496 25.1646 33.7487 25.4906C33.7475 25.9268 33.5626 26.3448 33.2346 26.6529C32.9065 26.961 32.462 27.134 31.9986 27.134V27.134ZM31.9986 19.885C31.6525 19.885 31.3141 19.7884 31.0263 19.6074C30.7385 19.4263 30.5142 19.169 30.3817 18.868C30.2493 18.567 30.2146 18.2357 30.2821 17.9161C30.3497 17.5965 30.5163 17.303 30.7611 17.0726C31.0058 16.8422 31.3177 16.6853 31.6572 16.6217C31.9967 16.5581 32.3485 16.5908 32.6683 16.7155C32.9881 16.8401 33.2615 17.0513 33.4538 17.3222C33.6461 17.5932 33.7487 17.9117 33.7487 18.2375C33.7487 18.6745 33.5643 19.0935 33.2361 19.4025C32.9079 19.7114 32.4628 19.885 31.9986 19.885ZM35.8488 23.5095C35.5027 23.5095 35.1643 23.4129 34.8765 23.2318C34.5887 23.0508 34.3644 22.7935 34.2319 22.4925C34.0995 22.1914 34.0648 21.8602 34.1324 21.5406C34.1999 21.221 34.3666 20.9275 34.6113 20.6971C34.8561 20.4667 35.1679 20.3097 35.5074 20.2462C35.8469 20.1826 36.1988 20.2152 36.5186 20.3399C36.8383 20.4646 37.1117 20.6758 37.304 20.9467C37.4963 21.2176 37.5989 21.5362 37.5989 21.862C37.5989 22.2989 37.4145 22.718 37.0863 23.027C36.7581 23.3359 36.313 23.5095 35.8488 23.5095V23.5095Z" fill="#FFB800"/>
+</svg>
@@ -0,0 +1,297 @@
+Gamics - Create Manage Matches
+
+
+
+#---------- HEDER ----------#
+
+Exclusive Black Friday ! Offer 
+10 
+Days
+
+Follow us on :
+
+<ion-icon name="logo-facebook"></ion-icon>
+<ion-icon name="logo-twitter"></ion-icon>
+<ion-icon name="logo-pinterest"></ion-icon>
+<ion-icon name="logo-linkedin"></ion-icon>
+
+Gamics
+
+Home
+Live
+Features
+Shop
+Blog
+Contact
+
+aria-label = cart
+
+<ion-icon name="cart"></ion-icon>
+0
+
+aria-label = open search
+
+<ion-icon name="search-outline"></ion-icon>
+
+aria-label = toggle menu
+<ion-icon name="menu-outline" class="menu"></ion-icon>
+<ion-icon name="close-outline" class="close"></ion-icon>
+
+
+
+#---------- SEARCH BOX ----------#
+
+aria-label = search
+
+placeholder = Search here...
+
+aria-label = submit search
+<ion-icon name="search-outline"></ion-icon>
+
+aria-label = close search
+
+
+
+#---------- HERO ----------#
+
+World Gaming
+
+Create Manage Matches
+
+Find technology or people for digital projects in public sector and Find an individual specialist develope researcher.
+
+Read More
+
+alt = hero banner
+
+
+
+#---------- BRAND ----------#
+
+alt = brand logo
+
+
+
+#---------- LATEST GAME ----------#
+
+Latest Releases
+
+Create & Manage
+
+alt = White Walker Daily
+
+Zombie
+
+White Walker
+Daily
+
+Entry Fee :
+Free
+
+alt = Hunter Killer II
+
+Adventure
+
+Hunter Killer
+II
+
+Entry Fee : 
+$25.00
+
+alt = Cyberpunk Daily
+
+Action
+
+Cyberpunk
+Daily
+
+
+
+#---------- LIVE MATCH ----------#
+
+Watch Live 
+Match
+
+alt = Live Match Video
+
+aria-label = play video
+<ion-icon name="play"></ion-icon>
+
+alt = tokyo eagle
+
+Upcoming Live Matches
+
+08:30
+
+alt = new york hunter7
+
+
+
+#---------- FEATURED GAME ----------#
+
+All Released
+Games
+
+alt = Just for Gamers
+
+Just for
+Gamers
+
+<ion-icon name="notifications"></ion-icon>
+
+Playstation 5, Xbox
+
+alt = Need for Speed
+
+Need for
+Speed
+
+alt = Egypt Hunting Gamers
+
+Egypt Hunting
+Gamers
+
+alt = Just for Gamers
+
+Just for
+Gamers
+
+
+
+#---------- SHOP ----------#
+
+Gaming Product 
+Corner
+
+Compete with 100 players on a remote island for winner takes showdown known issue where certain skin strategic
+
+alt = Women Black T-Shirt
+
+t-shirt
+
+Women Black T-Shirt
+
+$29.00
+
+<ion-icon name="basket"></ion-icon>
+
+
+alt = Gears 5 Xbox Controller
+
+x-box
+
+Gears 5 Xbox Controller
+
+
+alt = GeForce RTX 2070
+
+Graphics
+
+GeForce RTX 2070
+
+
+alt = Virtual Reality Smiled
+
+VR-Box
+
+Virtual Reality Smiled
+
+
+
+#---------- BLOG ----------#
+
+Latest News &
+Articles
+
+Compete With 100 Players On A Remote Island For Winner Takes Showdown Known Issue Where Certain Skin Strategic
+
+alt = Shooter Action Video
+
+<ion-icon name="person-outline"></ion-icon>
+Admin
+
+<ion-icon name="calendar-outline"></ion-icon>
+September 19, 2022
+
+Shooter Action Video
+
+Compete With 100 Players On A Remote Island Thats Winner Takes Showdown Known Issue.
+
+Read More
+
+<ion-icon name="caret-forward"></ion-icon>
+
+alt = The Walking Dead
+
+alt = Defense Of The Ancients
+
+
+
+#---------- NEWSLETTER ----------#
+
+Our
+Newsletter
+
+placeholder = Enter your email...
+
+<ion-icon name="mail-outline"></ion-icon>
+
+Subscribe
+<ion-icon name="paper-plane" aria-hidden="true"></ion-icon>
+
+
+
+#---------- FOOTER ----------#
+
+Gamics
+
+Gamics marketplace the relase etras thats sheets continig passag.
+
+<ion-icon name="location"></ion-icon>
+Address : PO Box W75 Street lan West new queens
+
+<ion-icon name="headset"></ion-icon>
+Phone : +24 1245 654 235
+
+<ion-icon name="mail-open"></ion-icon>
+Email : info@exemple.com
+
+Products
+
+Graphics (26)
+Backgrounds (11)
+Fonts (9)
+Music (3)
+Photography (3)
+
+Need Help?
+
+Terms & Conditions
+Privacy Policy
+Refund Policy
+Affiliate
+Use Cases
+
+Follow Us
+
+<ion-icon name="logo-facebook"></ion-icon>
+<ion-icon name="logo-twitter"></ion-icon>
+<ion-icon name="logo-pinterest"></ion-icon>
+<ion-icon name="logo-linkedin"></ion-icon>
+
+Newsletter Sign Up
+
+placeholder = Enter your email
+
+aria-label = submit
+<ion-icon name="rocket"></ion-icon>
+
+&copy; 2022 Gamics. All Right Reserved by codewithsadee
+
+
+
+#---------- BACK TO TOP ----------#
+
+aria-label = back to top
+
+<ion-icon name="caret-up"></ion-icon>
@@ -0,0 +1,104 @@
+# Essential Stuff
+
+## Html import links
+
+Google font
+
+``` html
+<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=Oxanium:wght@600;700;800&family=Poppins:wght@400;500;600;700;800;900&display=swap"
+  rel="stylesheet">
+```
+
+Ionicon
+
+``` html
+<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
+<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
+```
+
+---
+
+## Colors
+
+``` css
+--rich-black-fogra-29_95: hsla(222, 18%, 11%, 0.95);
+--raisin-black-1: hsl(0, 0%, 16%);
+--raisin-black-2: hsl(236, 17%, 17%);
+--raisin-black-3: hsl(280, 11%, 11%);
+--raisin-black-4: hsl(280, 8%, 15%);
+--english-violet: hsl(274, 21%, 23%);
+--eerie-black-1: hsl(277, 25%, 10%);
+--eerie-black-2: hsl(280, 7%, 8%);
+--roman-silver: hsl(220, 6%, 59%);
+--quick-silver: hsl(0, 1%, 65%);
+--light-gray-1: hsl(0, 0%, 80%);
+--light-gray-2: hsl(0, 2%, 82%);
+--marigold_75: hsla(42, 99%, 46%, 0.75);
+--xiketic_90: hsla(280, 37%, 8%, 0.9);
+--cultured-2: hsl(0, 0%, 97%);
+--marigold: hsl(42, 99%, 46%);
+--platinum: hsl(0, 0%, 89%);
+--dim-gray: hsl(0, 0%, 42%);
+--white_15: hsla(0, 0%, 100%, 0.15);
+--white_10: hsla(0, 0%, 100%, 0.1);
+--xiketic: hsl(277, 25%, 10%);
+--silver: hsl(0, 0%, 78%);
+--white: hsl(0, 0%, 100%);
+--jet: hsl(236, 13%, 23%);
+```
+
+## Typography
+
+``` css
+--ff-oxanium: 'Oxanium', cursive;
+--ff-poppins: 'Poppins', sans-serif;
+
+--fs-1: 7rem;
+--fs-2: 4.5rem;
+--fs-3: 3.6rem;
+--fs-4: 2.4rem;
+--fs-5: 2.2rem;
+--fs-6: 2rem;
+--fs-7: 1.6rem;
+--fs-8: 1.5rem;
+--fs-9: 1.4rem;
+--fs-10: 1.3rem;
+--fs-11: 1.2rem;
+
+--fw-500: 500;
+--fw-600: 600;
+--fw-700: 700;
+--fw-800: 800;
+```
+
+## Spacing
+
+``` css
+--section-padding: 120px;
+```
+
+## Gradient
+
+``` css
+--gradient: radial-gradient(circle, hsl(250, 7%, 17%), hsl(250, 11%, 11%));
+```
+
+## Shadow
+
+``` css
+--shadow-1: 0px 2px 8px 0px hsla(0, 0%, 0%, 0.2),
+            inset 0px 2px 8px 0px hsla(0, 0%, 0%, 0.4);
+--shadow-2: 0px 5px 10px 1px hsla(0, 0%, 0%, 0.4);
+--shadow-3: 0px 5px 10px 1px hsla(219, 98%, 17%, 0.2);
+--shadow-4: 0px 5px 10px 1px hsla(0, 0%, 0%, 0.15);
+```
+
+## Transition
+
+``` css
+--transition: 0.25s ease;
+--cubic-out: cubic-bezier(0.33, 0.85, 0.4, 0.96);
+```