mirror of
https://github.com/codewithsadee/gamics.git
synced 2026-11-03 02:28:14 +09:00
1165 lines
32 KiB
HTML
1165 lines
32 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Gamics - Create Manage Matches</title>
|
|
|
|
<!--
|
|
- favicon
|
|
-->
|
|
<link rel="shortcut icon" href="./favicon.svg" type="image/svg+xml">
|
|
|
|
<!--
|
|
- custom css link
|
|
-->
|
|
<link rel="stylesheet" href="./assets/css/style.css">
|
|
|
|
<!--
|
|
- google font link
|
|
-->
|
|
<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">
|
|
|
|
<!--
|
|
- preload images
|
|
-->
|
|
</head>
|
|
|
|
<body id="top">
|
|
|
|
<!--
|
|
- #HEADER
|
|
-->
|
|
|
|
<header class="header">
|
|
|
|
<div class="header-top">
|
|
<div class="container">
|
|
|
|
<div class="countdown-text">
|
|
Exclusive Black Friday ! Offer <span class="span skewBg">10</span> Days
|
|
</div>
|
|
|
|
<div class="social-wrapper">
|
|
|
|
<p class="social-title">Follow us on :</p>
|
|
|
|
<ul class="social-list">
|
|
|
|
<li>
|
|
<a href="#" class="social-link">
|
|
<ion-icon name="logo-facebook"></ion-icon>
|
|
</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="#" class="social-link">
|
|
<ion-icon name="logo-twitter"></ion-icon>
|
|
</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="#" class="social-link">
|
|
<ion-icon name="logo-pinterest"></ion-icon>
|
|
</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="#" class="social-link">
|
|
<ion-icon name="logo-linkedin"></ion-icon>
|
|
</a>
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="header-bottom skewBg" data-header>
|
|
<div class="container">
|
|
|
|
<a href="#" class="logo">Gamics</a>
|
|
|
|
<nav class="navbar" data-navbar>
|
|
<ul class="navbar-list">
|
|
|
|
<li class="navbar-item">
|
|
<a href="#home" class="navbar-link skewBg" data-nav-link>Home</a>
|
|
</li>
|
|
|
|
<li class="navbar-item">
|
|
<a href="#live" class="navbar-link skewBg" data-nav-link>Live</a>
|
|
</li>
|
|
|
|
<li class="navbar-item">
|
|
<a href="#features" class="navbar-link skewBg" data-nav-link>Features</a>
|
|
</li>
|
|
|
|
<li class="navbar-item">
|
|
<a href="#shop" class="navbar-link skewBg" data-nav-link>Shop</a>
|
|
</li>
|
|
|
|
<li class="navbar-item">
|
|
<a href="#blog" class="navbar-link skewBg" data-nav-link>Blog</a>
|
|
</li>
|
|
|
|
<li class="navbar-item">
|
|
<a href="#" class="navbar-link skewBg" data-nav-link>Contact</a>
|
|
</li>
|
|
|
|
</ul>
|
|
</nav>
|
|
|
|
<div class="header-actions">
|
|
|
|
<button class="cart-btn" aria-label="cart">
|
|
<ion-icon name="cart"></ion-icon>
|
|
|
|
<span class="cart-badge">0</span>
|
|
</button>
|
|
|
|
<button class="search-btn" aria-label="open search" data-search-toggler>
|
|
<ion-icon name="search-outline"></ion-icon>
|
|
</button>
|
|
|
|
<button class="nav-toggle-btn" aria-label="toggle menu" data-nav-toggler>
|
|
<ion-icon name="menu-outline" class="menu"></ion-icon>
|
|
<ion-icon name="close-outline" class="close"></ion-icon>
|
|
</button>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</header>
|
|
|
|
|
|
|
|
|
|
|
|
<!--
|
|
- #SEARCH BOX
|
|
-->
|
|
|
|
<div class="search-container" data-search-box>
|
|
|
|
<div class="input-wrapper">
|
|
<input type="search" name="search" aria-label="search" placeholder="Search here..." class="search-field">
|
|
|
|
<button class="search-submit" aria-label="submit search" data-search-toggler>
|
|
<ion-icon name="search-outline"></ion-icon>
|
|
</button>
|
|
|
|
<button class="search-close" aria-label="close search" data-search-toggler></button>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<main>
|
|
<article>
|
|
|
|
<!--
|
|
- #HERO
|
|
-->
|
|
|
|
<section class="section hero" id="home" aria-label="home"
|
|
style="background-image: url('./assets/images/hero-bg.jpg')">
|
|
<div class="container">
|
|
|
|
<div class="hero-content">
|
|
|
|
<p class="hero-subtitle">World Gaming</p>
|
|
|
|
<h1 class="h1 hero-title">
|
|
Create <span class="span">Manage</span> Matches
|
|
</h1>
|
|
|
|
<p class="hero-text">
|
|
Find technology or people for digital projects in public sector and Find an individual specialist develope
|
|
researcher.
|
|
</p>
|
|
|
|
<button class="btn skewBg">Read More</button>
|
|
|
|
</div>
|
|
|
|
<figure class="hero-banner img-holder" style="--width: 700; --height: 700;">
|
|
<img src="./assets/images/hero-banner.png" width="700" height="700" alt="hero banner" class="w-100">
|
|
</figure>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
|
|
|
|
|
|
|
|
<!--
|
|
- #BRAND
|
|
-->
|
|
|
|
<section class="section brand" aria-label="brand">
|
|
<div class="container">
|
|
|
|
<ul class="has-scrollbar">
|
|
|
|
<li class="brand-item">
|
|
<img src="./assets/images/brand-1.png" width="90" height="90" loading="lazy" alt="brand logo">
|
|
</li>
|
|
|
|
<li class="brand-item">
|
|
<img src="./assets/images/brand-2.png" width="90" height="90" loading="lazy" alt="brand logo">
|
|
</li>
|
|
|
|
<li class="brand-item">
|
|
<img src="./assets/images/brand-3.png" width="90" height="90" loading="lazy" alt="brand logo">
|
|
</li>
|
|
|
|
<li class="brand-item">
|
|
<img src="./assets/images/brand-4.png" width="90" height="90" loading="lazy" alt="brand logo">
|
|
</li>
|
|
|
|
<li class="brand-item">
|
|
<img src="./assets/images/brand-5.png" width="90" height="90" loading="lazy" alt="brand logo">
|
|
</li>
|
|
|
|
<li class="brand-item">
|
|
<img src="./assets/images/brand-6.png" width="90" height="90" loading="lazy" alt="brand logo">
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="section-wrapper">
|
|
|
|
<!--
|
|
- #LATEST GAME
|
|
-->
|
|
|
|
<section class="section latest-game" aria-label="latest game">
|
|
<div class="container">
|
|
|
|
<p class="section-subtitle">Latest Releases</p>
|
|
|
|
<h2 class="h2 section-title">
|
|
Create & <span class="span">Manage</span>
|
|
</h2>
|
|
|
|
<ul class="has-scrollbar">
|
|
|
|
<li class="scrollbar-item">
|
|
<div class="latest-game-card">
|
|
|
|
<figure class="card-banner img-holder" style="--width: 400; --height: 470;">
|
|
<img src="./assets/images/latest-game-1.jpg" width="400" height="470" loading="lazy"
|
|
alt="White Walker Daily" class="img-cover">
|
|
</figure>
|
|
|
|
<div class="card-content">
|
|
|
|
<a href="#" class="card-badge skewBg">Zombie</a>
|
|
|
|
<h3 class="h3">
|
|
<a href="#" class="card-title">White Walker <span class="span">Daily</span></a>
|
|
</h3>
|
|
|
|
<p class="card-price">
|
|
Entry Fee : <span class="span">Free</span>
|
|
</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</li>
|
|
|
|
<li class="scrollbar-item">
|
|
<div class="latest-game-card">
|
|
|
|
<figure class="card-banner img-holder" style="--width: 400; --height: 470;">
|
|
<img src="./assets/images/latest-game-2.jpg" width="400" height="470" loading="lazy"
|
|
alt="Hunter Killer II" class="img-cover">
|
|
</figure>
|
|
|
|
<div class="card-content">
|
|
|
|
<a href="#" class="card-badge skewBg">Adventure</a>
|
|
|
|
<h3 class="h3">
|
|
<a href="#" class="card-title">Hunter Killer <span class="span">II</span></a>
|
|
</h3>
|
|
|
|
<p class="card-price">
|
|
Entry Fee : <span class="span">$25.00</span>
|
|
</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</li>
|
|
|
|
<li class="scrollbar-item">
|
|
<div class="latest-game-card">
|
|
|
|
<figure class="card-banner img-holder" style="--width: 400; --height: 470;">
|
|
<img src="./assets/images/latest-game-3.jpg" width="400" height="470" loading="lazy"
|
|
alt="Cyberpunk Daily" class="img-cover">
|
|
</figure>
|
|
|
|
<div class="card-content">
|
|
|
|
<a href="#" class="card-badge skewBg">Action</a>
|
|
|
|
<h3 class="h3">
|
|
<a href="#" class="card-title">Cyberpunk <span class="span">Daily</span></a>
|
|
</h3>
|
|
|
|
<p class="card-price">
|
|
Entry Fee : <span class="span">$25.00</span>
|
|
</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
|
|
|
|
|
|
|
|
<!--
|
|
- #LIVE MATCH
|
|
-->
|
|
|
|
<section class="section live-match" id="live" aria-label="live match">
|
|
<div class="container">
|
|
|
|
<h2 class="h2 section-title">
|
|
Watch Live <span class="span">Match</span>
|
|
</h2>
|
|
|
|
<figure class="live-match-banner img-holder" style="--width: 800; --height: 470;">
|
|
|
|
<img src="./assets/images/live-match-banner.jpg" width="800" height="470" loading="lazy"
|
|
alt="Live Match Video" class="img-cover">
|
|
|
|
<button class="play-btn" aria-label="play video">
|
|
<ion-icon name="play"></ion-icon>
|
|
</button>
|
|
|
|
</figure>
|
|
|
|
<div class="live-match-player">
|
|
|
|
<figure class="player player-1 img-holder" style="--width: 406; --height: 277;">
|
|
<img src="./assets/images/live-match-player-1.png" width="406" height="277" loading="lazy"
|
|
alt="tokyo eagle" class="w-100">
|
|
</figure>
|
|
|
|
<div class="live-match-detail">
|
|
|
|
<p class="live-match-subtitle">Upcoming Live Matches</p>
|
|
|
|
<time class="live-match-time" datetime="08:30">08:30</time>
|
|
|
|
</div>
|
|
|
|
<figure class="player player-2 img-holder" style="--width: 400; --height: 305;">
|
|
<img src="./assets/images/live-match-player-2.png" width="400" height="305" loading="lazy"
|
|
alt="new york hunter7" class="w-100">
|
|
</figure>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!--
|
|
- #FEATURED GAME
|
|
-->
|
|
|
|
<section class="section featured-game" id="features" aria-label="featured game">
|
|
<div class="container">
|
|
|
|
<h2 class="h2 section-title">
|
|
All Released <span class="span">Games</span>
|
|
</h2>
|
|
|
|
<ul class="has-scrollbar">
|
|
|
|
<li class="scrollbar-item">
|
|
<div class="featured-game-card">
|
|
|
|
<figure class="card-banner img-holder" style="--width: 450; --height: 600;">
|
|
<img src="./assets/images/featured-game-1.jpg" width="450" height="600" loading="lazy"
|
|
alt="Just for Gamers" class="img-cover">
|
|
</figure>
|
|
|
|
<div class="card-content">
|
|
|
|
<h3 class="h3">
|
|
<a href="#" class="card-title" tabindex="-1">
|
|
Just for <span class="span">Gamers</span>
|
|
</a>
|
|
</h3>
|
|
|
|
<span class="card-meta">
|
|
<ion-icon name="notifications"></ion-icon>
|
|
|
|
<span class="span">Playstation 5, Xbox</span>
|
|
</span>
|
|
|
|
</div>
|
|
|
|
<div class="card-content-overlay">
|
|
|
|
<img src="./assets/images/featured-game-icon.png" width="36" height="61" loading="lazy" alt=""
|
|
class="card-icon">
|
|
|
|
<h3 class="h3">
|
|
<a href="#" class="card-title">
|
|
Just for <span class="span">Gamers</span>
|
|
</a>
|
|
</h3>
|
|
|
|
<span class="card-meta">
|
|
<ion-icon name="notifications"></ion-icon>
|
|
|
|
<span class="span">Playstation 5, Xbox</span>
|
|
</span>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</li>
|
|
|
|
<li class="scrollbar-item">
|
|
<div class="featured-game-card">
|
|
|
|
<figure class="card-banner img-holder" style="--width: 450; --height: 600;">
|
|
<img src="./assets/images/featured-game-2.jpg" width="450" height="600" loading="lazy"
|
|
alt="Need for Speed" class="img-cover">
|
|
</figure>
|
|
|
|
<div class="card-content">
|
|
|
|
<h3 class="h3">
|
|
<a href="#" class="card-title" tabindex="-1">
|
|
Need for <span class="span">Speed</span>
|
|
</a>
|
|
</h3>
|
|
|
|
<span class="card-meta">
|
|
<ion-icon name="notifications"></ion-icon>
|
|
|
|
<span class="span">Playstation 5, Xbox</span>
|
|
</span>
|
|
|
|
</div>
|
|
|
|
<div class="card-content-overlay">
|
|
|
|
<img src="./assets/images/featured-game-icon.png" width="36" height="61" loading="lazy" alt=""
|
|
class="card-icon">
|
|
|
|
<h3 class="h3">
|
|
<a href="#" class="card-title">
|
|
Need for <span class="span">Speed</span>
|
|
</a>
|
|
</h3>
|
|
|
|
<span class="card-meta">
|
|
<ion-icon name="notifications"></ion-icon>
|
|
|
|
<span class="span">Playstation 5, Xbox</span>
|
|
</span>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</li>
|
|
|
|
<li class="scrollbar-item">
|
|
<div class="featured-game-card">
|
|
|
|
<figure class="card-banner img-holder" style="--width: 450; --height: 600;">
|
|
<img src="./assets/images/featured-game-3.jpg" width="450" height="600" loading="lazy"
|
|
alt="Egypt Hunting Gamers" class="img-cover">
|
|
</figure>
|
|
|
|
<div class="card-content">
|
|
|
|
<h3 class="h3">
|
|
<a href="#" class="card-title" tabindex="-1">
|
|
Egypt Hunting <span class="span">Gamers</span>
|
|
</a>
|
|
</h3>
|
|
|
|
<span class="card-meta">
|
|
<ion-icon name="notifications"></ion-icon>
|
|
|
|
<span class="span">Playstation 5, Xbox</span>
|
|
</span>
|
|
|
|
</div>
|
|
|
|
<div class="card-content-overlay">
|
|
|
|
<img src="./assets/images/featured-game-icon.png" width="36" height="61" loading="lazy" alt=""
|
|
class="card-icon">
|
|
|
|
<h3 class="h3">
|
|
<a href="#" class="card-title">
|
|
Egypt Hunting <span class="span">Gamers</span>
|
|
</a>
|
|
</h3>
|
|
|
|
<span class="card-meta">
|
|
<ion-icon name="notifications"></ion-icon>
|
|
|
|
<span class="span">Playstation 5, Xbox</span>
|
|
</span>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</li>
|
|
|
|
<li class="scrollbar-item">
|
|
<div class="featured-game-card">
|
|
|
|
<figure class="card-banner img-holder" style="--width: 450; --height: 600;">
|
|
<img src="./assets/images/featured-game-4.jpg" width="450" height="600" loading="lazy"
|
|
alt="Just for Gamers" class="img-cover">
|
|
</figure>
|
|
|
|
<div class="card-content">
|
|
|
|
<h3 class="h3">
|
|
<a href="#" class="card-title" tabindex="-1">
|
|
Just for <span class="span">Gamers</span>
|
|
</a>
|
|
</h3>
|
|
|
|
<span class="card-meta">
|
|
<ion-icon name="notifications"></ion-icon>
|
|
|
|
<span class="span">Playstation 5, Xbox</span>
|
|
</span>
|
|
|
|
</div>
|
|
|
|
<div class="card-content-overlay">
|
|
|
|
<img src="./assets/images/featured-game-icon.png" width="36" height="61" loading="lazy" alt=""
|
|
class="card-icon">
|
|
|
|
<h3 class="h3">
|
|
<a href="#" class="card-title">
|
|
Just for <span class="span">Gamers</span>
|
|
</a>
|
|
</h3>
|
|
|
|
<span class="card-meta">
|
|
<ion-icon name="notifications"></ion-icon>
|
|
|
|
<span class="span">Playstation 5, Xbox</span>
|
|
</span>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
|
|
|
|
|
|
|
|
<!--
|
|
- #SHOP
|
|
-->
|
|
|
|
<section class="section shop" id="shop" aria-label="shop"
|
|
style="background-image: url('./assets/images/shop-bg.jpg')">
|
|
<div class="container">
|
|
|
|
<h2 class="h2 section-title">
|
|
Gaming Product <span class="span">Corner</span>
|
|
</h2>
|
|
|
|
<p class="section-text">
|
|
Compete with 100 players on a remote island for winner takes showdown known issue where certain skin
|
|
strategic
|
|
</p>
|
|
|
|
<ul class="has-scrollbar">
|
|
|
|
<li class="scrollbar-item">
|
|
<div class="shop-card">
|
|
|
|
<figure class="card-banner img-holder" style="--width: 300; --height: 260;">
|
|
<img src="./assets/images/shop-img-1.jpg" width="300" height="260" loading="lazy"
|
|
alt="Women Black T-Shirt" class="img-cover">
|
|
</figure>
|
|
|
|
<div class="card-content">
|
|
|
|
<a href="#" class="card-badge skewBg">t-shirt</a>
|
|
|
|
<h3 class="h3">
|
|
<a href="#" class="card-title">Women Black T-Shirt</a>
|
|
</h3>
|
|
|
|
<div class="card-wrapper">
|
|
<p class="card-price">$29.00</p>
|
|
|
|
<button class="card-btn">
|
|
<ion-icon name="basket"></ion-icon>
|
|
</button>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</li>
|
|
|
|
<li class="scrollbar-item">
|
|
<div class="shop-card">
|
|
|
|
<figure class="card-banner img-holder" style="--width: 300; --height: 260;">
|
|
<img src="./assets/images/shop-img-2.jpg" width="300" height="260" loading="lazy"
|
|
alt="Gears 5 Xbox Controller" class="img-cover">
|
|
</figure>
|
|
|
|
<div class="card-content">
|
|
|
|
<a href="#" class="card-badge skewBg">x-box</a>
|
|
|
|
<h3 class="h3">
|
|
<a href="#" class="card-title">Gears 5 Xbox Controller</a>
|
|
</h3>
|
|
|
|
<div class="card-wrapper">
|
|
<p class="card-price">$29.00</p>
|
|
|
|
<button class="card-btn">
|
|
<ion-icon name="basket"></ion-icon>
|
|
</button>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</li>
|
|
|
|
<li class="scrollbar-item">
|
|
<div class="shop-card">
|
|
|
|
<figure class="card-banner img-holder" style="--width: 300; --height: 260;">
|
|
<img src="./assets/images/shop-img-3.jpg" width="300" height="260" loading="lazy"
|
|
alt="GeForce RTX 2070" class="img-cover">
|
|
</figure>
|
|
|
|
<div class="card-content">
|
|
|
|
<a href="#" class="card-badge skewBg">Graphics</a>
|
|
|
|
<h3 class="h3">
|
|
<a href="#" class="card-title">GeForce RTX 2070</a>
|
|
</h3>
|
|
|
|
<div class="card-wrapper">
|
|
<p class="card-price">$29.00</p>
|
|
|
|
<button class="card-btn">
|
|
<ion-icon name="basket"></ion-icon>
|
|
</button>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</li>
|
|
|
|
<li class="scrollbar-item">
|
|
<div class="shop-card">
|
|
|
|
<figure class="card-banner img-holder" style="--width: 300; --height: 260;">
|
|
<img src="./assets/images/shop-img-4.jpg" width="300" height="260" loading="lazy"
|
|
alt="Virtual Reality Smiled" class="img-cover">
|
|
</figure>
|
|
|
|
<div class="card-content">
|
|
|
|
<a href="#" class="card-badge skewBg">VR-Box</a>
|
|
|
|
<h3 class="h3">
|
|
<a href="#" class="card-title">Virtual Reality Smiled</a>
|
|
</h3>
|
|
|
|
<div class="card-wrapper">
|
|
<p class="card-price">$29.00</p>
|
|
|
|
<button class="card-btn">
|
|
<ion-icon name="basket"></ion-icon>
|
|
</button>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
|
|
|
|
|
|
|
|
<!--
|
|
- #BLOG
|
|
-->
|
|
|
|
<section class="section blog" id="blog" aria-label="blog">
|
|
<div class="container">
|
|
|
|
<h2 class="h2 section-title">
|
|
Latest News & <span class="span">Articles</span>
|
|
</h2>
|
|
|
|
<p class="section-text">
|
|
Compete With 100 Players On A Remote Island For Winner Takes Showdown Known Issue Where Certain Skin
|
|
Strategic
|
|
</p>
|
|
|
|
<ul class="blog-list">
|
|
|
|
<li>
|
|
<div class="blog-card">
|
|
|
|
<figure class="card-banner img-holder" style="--width: 400; --height: 290;">
|
|
<img src="./assets/images/blog-1.jpg" width="400" height="290" loading="lazy"
|
|
alt="Shooter Action Video" class="img-cover">
|
|
</figure>
|
|
|
|
<div class="card-content">
|
|
|
|
<ul class="card-meta-list">
|
|
|
|
<li class="card-meta-item">
|
|
<ion-icon name="person-outline"></ion-icon>
|
|
|
|
<a href="#" class="item-text">Admin</a>
|
|
</li>
|
|
|
|
<li class="card-meta-item">
|
|
<ion-icon name="calendar-outline"></ion-icon>
|
|
|
|
<time datetime="2022-09-19" class="item-text">September 19, 2022</time>
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
<h3>
|
|
<a href="#" class="card-title">Shooter Action Video</a>
|
|
</h3>
|
|
|
|
<p class="card-text">
|
|
Compete With 100 Players On A Remote Island Thats Winner Takes Showdown Known Issue.
|
|
</p>
|
|
|
|
<a href="#" class="card-link">
|
|
<span class="span">Read More</span>
|
|
|
|
<ion-icon name="caret-forward"></ion-icon>
|
|
</a>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</li>
|
|
|
|
<li>
|
|
<div class="blog-card">
|
|
|
|
<figure class="card-banner img-holder" style="--width: 400; --height: 290;">
|
|
<img src="./assets/images/blog-2.jpg" width="400" height="290" loading="lazy" alt="The Walking Dead"
|
|
class="img-cover">
|
|
</figure>
|
|
|
|
<div class="card-content">
|
|
|
|
<ul class="card-meta-list">
|
|
|
|
<li class="card-meta-item">
|
|
<ion-icon name="person-outline"></ion-icon>
|
|
|
|
<a href="#" class="item-text">Admin</a>
|
|
</li>
|
|
|
|
<li class="card-meta-item">
|
|
<ion-icon name="calendar-outline"></ion-icon>
|
|
|
|
<time datetime="2022-09-19" class="item-text">September 19, 2022</time>
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
<h3>
|
|
<a href="#" class="card-title">The Walking Dead</a>
|
|
</h3>
|
|
|
|
<p class="card-text">
|
|
Compete With 100 Players On A Remote Island Thats Winner Takes Showdown Known Issue.
|
|
</p>
|
|
|
|
<a href="#" class="card-link">
|
|
<span class="span">Read More</span>
|
|
|
|
<ion-icon name="caret-forward"></ion-icon>
|
|
</a>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</li>
|
|
|
|
<li>
|
|
<div class="blog-card">
|
|
|
|
<figure class="card-banner img-holder" style="--width: 400; --height: 290;">
|
|
<img src="./assets/images/blog-3.jpg" width="400" height="290" loading="lazy"
|
|
alt="Defense Of The Ancients" class="img-cover">
|
|
</figure>
|
|
|
|
<div class="card-content">
|
|
|
|
<ul class="card-meta-list">
|
|
|
|
<li class="card-meta-item">
|
|
<ion-icon name="person-outline"></ion-icon>
|
|
|
|
<a href="#" class="item-text">Admin</a>
|
|
</li>
|
|
|
|
<li class="card-meta-item">
|
|
<ion-icon name="calendar-outline"></ion-icon>
|
|
|
|
<time datetime="2022-09-19" class="item-text">September 19, 2022</time>
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
<h3>
|
|
<a href="#" class="card-title">Defense Of The Ancients</a>
|
|
</h3>
|
|
|
|
<p class="card-text">
|
|
Compete With 100 Players On A Remote Island Thats Winner Takes Showdown Known Issue.
|
|
</p>
|
|
|
|
<a href="#" class="card-link">
|
|
<span class="span">Read More</span>
|
|
|
|
<ion-icon name="caret-forward"></ion-icon>
|
|
</a>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
|
|
|
|
|
|
|
|
<!--
|
|
- #NEWSLETTER
|
|
-->
|
|
|
|
<section class="newsletter" aria-label="newsletter">
|
|
<div class="container">
|
|
|
|
<div class="newsletter-card">
|
|
|
|
<h2 class="h2">
|
|
Our <span class="span">Newsletter</span>
|
|
</h2>
|
|
|
|
<form action="" class="newsletter-form">
|
|
|
|
<div class="input-wrapper skewBg">
|
|
<input type="email" name="email_address" aria-label="email" placeholder="Enter your email..." required
|
|
class="email-field">
|
|
|
|
<ion-icon name="mail-outline"></ion-icon>
|
|
</div>
|
|
|
|
<button type="submit" class="btn newsletter-btn skewBg">
|
|
<span class="span">Subscribe</span>
|
|
|
|
<ion-icon name="paper-plane" aria-hidden="true"></ion-icon>
|
|
</button>
|
|
|
|
</form>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
</article>
|
|
</main>
|
|
|
|
|
|
|
|
|
|
|
|
<!--
|
|
- #FOOTER
|
|
-->
|
|
|
|
<footer class="footer">
|
|
|
|
<div class="footer-top">
|
|
<div class="container">
|
|
|
|
<div class="footer-brand">
|
|
|
|
<a href="#" class="logo">Gamics</a>
|
|
|
|
<p class="footer-text">
|
|
Gamics marketplace the relase etras thats sheets continig passag.
|
|
</p>
|
|
|
|
<ul class="contact-list">
|
|
|
|
<li class="contact-item">
|
|
<div class="contact-icon">
|
|
<ion-icon name="location"></ion-icon>
|
|
</div>
|
|
|
|
<address class="item-text">
|
|
Address : PO Box W75 Street lan West new queens
|
|
</address>
|
|
</li>
|
|
|
|
<li class="contact-item">
|
|
<div class="contact-icon">
|
|
<ion-icon name="headset"></ion-icon>
|
|
</div>
|
|
|
|
<a href="tel:+241245654235" class="item-text">Phone : +24 1245 654 235</a>
|
|
</li>
|
|
|
|
<li class="contact-item">
|
|
<div class="contact-icon">
|
|
<ion-icon name="mail-open"></ion-icon>
|
|
</div>
|
|
|
|
<a href="mailto:info@exemple.com" class="item-text">Email : info@exemple.com</a>
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
<ul class="footer-list">
|
|
|
|
<li>
|
|
<p class="footer-list-title">Products</p>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="#" class="footer-link">Graphics (26)</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="#" class="footer-link">Backgrounds (11)</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="#" class="footer-link">Fonts (9)</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="#" class="footer-link">Music (3)</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="#" class="footer-link">Photography (3)</a>
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
<ul class="footer-list">
|
|
|
|
<li>
|
|
<p class="footer-list-title">Need Help?</p>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="#" class="footer-link">Terms & Conditions</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="#" class="footer-link">Privacy Policy</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="#" class="footer-link">Refund Policy</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="#" class="footer-link">Affiliate</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="#" class="footer-link">Use Cases</a>
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
<div class="footer-wrapper">
|
|
|
|
<div class="social-wrapper">
|
|
|
|
<p class="footer-list-title">Follow Us</p>
|
|
|
|
<ul class="social-list">
|
|
|
|
<li>
|
|
<a href="#" class="social-link" style="background-color: #3b5998">
|
|
<ion-icon name="logo-facebook"></ion-icon>
|
|
</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="#" class="social-link" style="background-color: #55acee">
|
|
<ion-icon name="logo-twitter"></ion-icon>
|
|
</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="#" class="social-link" style="background-color: #d71e18">
|
|
<ion-icon name="logo-pinterest"></ion-icon>
|
|
</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="#" class="social-link" style="background-color: #1565c0">
|
|
<ion-icon name="logo-linkedin"></ion-icon>
|
|
</a>
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
<div class="footer-newsletter">
|
|
|
|
<p class="footer-list-title">Newsletter Sign Up</p>
|
|
|
|
<form action="" class="footer-newsletter">
|
|
<input type="email" name="email_address" aria-label="email" placeholder="Enter your email" required
|
|
class="email-field">
|
|
|
|
<button type="submit" class="footer-btn" aria-label="submit">
|
|
<ion-icon name="rocket"></ion-icon>
|
|
</button>
|
|
</form>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="footer-bottom">
|
|
<div class="container">
|
|
|
|
<p class="copyright">
|
|
© 2022 Gamics. All Right Reserved by <a href="#" class="copyright-link">codewithsadee</a>
|
|
</p>
|
|
|
|
<img src="./assets/images/footer-bottom-img.png" width="340" height="21" loading="lazy" alt=""
|
|
class="footer-bottom-img">
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</footer>
|
|
|
|
|
|
|
|
|
|
|
|
<!--
|
|
- #BACK TO TOP
|
|
-->
|
|
|
|
<a href="#top" class="back-top-btn" aria-label="back to top" data-back-top-btn>
|
|
<ion-icon name="caret-up"></ion-icon>
|
|
</a>
|
|
|
|
|
|
|
|
|
|
|
|
<!--
|
|
- custom js link
|
|
-->
|
|
<script src="./assets/js/script.js" defer></script>
|
|
|
|
<!--
|
|
- ionicon link
|
|
-->
|
|
<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>
|
|
|
|
</body>
|
|
|
|
</html> |