├── images
    ├── logo.png
    ├── top-game-01.jpg
    ├── top-game-02.jpg
    ├── top-game-03.jpg
    ├── top-game-04.jpg
    ├── top-game-05.jpg
    ├── top-game-06.jpg
    ├── trending-01.jpg
    ├── trending-02.jpg
    ├── trending-03.jpg
    ├── trending-04.jpg
    ├── banner-image.jpg
    ├── categories-01.jpg
    ├── categories-02.jpg
    ├── categories-03.jpg
    ├── categories-04.jpg
    ├── categories-05.jpg
    └── online-shopping.png
├── style.css
└── test.html


/images/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yaya1426/html/HEAD/images/logo.png


--------------------------------------------------------------------------------
/images/top-game-01.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yaya1426/html/HEAD/images/top-game-01.jpg


--------------------------------------------------------------------------------
/images/top-game-02.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yaya1426/html/HEAD/images/top-game-02.jpg


--------------------------------------------------------------------------------
/images/top-game-03.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yaya1426/html/HEAD/images/top-game-03.jpg


--------------------------------------------------------------------------------
/images/top-game-04.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yaya1426/html/HEAD/images/top-game-04.jpg


--------------------------------------------------------------------------------
/images/top-game-05.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yaya1426/html/HEAD/images/top-game-05.jpg


--------------------------------------------------------------------------------
/images/top-game-06.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yaya1426/html/HEAD/images/top-game-06.jpg


--------------------------------------------------------------------------------
/images/trending-01.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yaya1426/html/HEAD/images/trending-01.jpg


--------------------------------------------------------------------------------
/images/trending-02.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yaya1426/html/HEAD/images/trending-02.jpg


--------------------------------------------------------------------------------
/images/trending-03.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yaya1426/html/HEAD/images/trending-03.jpg


--------------------------------------------------------------------------------
/images/trending-04.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yaya1426/html/HEAD/images/trending-04.jpg


--------------------------------------------------------------------------------
/images/banner-image.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yaya1426/html/HEAD/images/banner-image.jpg


--------------------------------------------------------------------------------
/images/categories-01.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yaya1426/html/HEAD/images/categories-01.jpg


--------------------------------------------------------------------------------
/images/categories-02.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yaya1426/html/HEAD/images/categories-02.jpg


--------------------------------------------------------------------------------
/images/categories-03.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yaya1426/html/HEAD/images/categories-03.jpg


--------------------------------------------------------------------------------
/images/categories-04.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yaya1426/html/HEAD/images/categories-04.jpg


--------------------------------------------------------------------------------
/images/categories-05.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yaya1426/html/HEAD/images/categories-05.jpg


--------------------------------------------------------------------------------
/images/online-shopping.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yaya1426/html/HEAD/images/online-shopping.png


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
  1 | body {
  2 |   margin: 0;
  3 |   font-family: "Roboto", sans-serif;
  4 | }
  5 | .header {
  6 |   background-color: #0171f9;
  7 |   display: flex;
  8 |   justify-content: space-between;
  9 |   align-items: center;
 10 |   padding: 10px 50px;
 11 | }
 12 | .logo {
 13 |   width: 100px;
 14 | }
 15 | .btn {
 16 |   background-color: #ee626b;
 17 |   border-radius: 15px;
 18 |   padding: 5px 15px;
 19 |   color: #ffffff;
 20 |   border: none;
 21 | }
 22 | 
 23 | .btn:hover {
 24 |   background-color: #f2858c;
 25 | }
 26 | 
 27 | .header-links a {
 28 |   color: white;
 29 |   padding: 5px 15px;
 30 |   text-decoration: none;
 31 |   border-radius: 15px;
 32 | }
 33 | 
 34 | .header-links a:hover {
 35 |   background-color: #2386fe;
 36 | }
 37 | 
 38 | .landing-page {
 39 |   background-color: #0171f9;
 40 |   display: flex;
 41 |   justify-content: space-between;
 42 |   align-items: center;
 43 |   padding: 25px 50px;
 44 |   color: #ffffff;
 45 |   border-radius: 0 0 50px 50px;
 46 | }
 47 | 
 48 | .landing-page-left-section {
 49 |   width: 500px;
 50 | }
 51 | 
 52 | .landing-page-search input {
 53 |   border-radius: 50px;
 54 |   border: none;
 55 |   outline: none;
 56 |   height: 30px;
 57 |   padding: 0 10px;
 58 | }
 59 | 
 60 | .landing-page-search button {
 61 |   position: absolute;
 62 |   left: 200px;
 63 |   height: 30px;
 64 | }
 65 | 
 66 | .landing-page-image-container img {
 67 |   border-radius: 20px;
 68 |   width: 250px;
 69 | }
 70 | 
 71 | .trending-container {
 72 |   padding: 25px 50px;
 73 | }
 74 | 
 75 | .trending-container span {
 76 |     color: #ee626b;
 77 |     text-transform: uppercase;
 78 |     font-size: 14px;
 79 | }
 80 | 
 81 | .trending-header {
 82 |     display: flex;
 83 |     justify-content: space-between;
 84 |     align-items: center;
 85 | }
 86 | 
 87 | .trending-header h1 {
 88 |     margin-top: 0;
 89 | }
 90 | 
 91 | .trending-cards {
 92 |     display: flex;
 93 |     gap: 12px;
 94 | }
 95 | 
 96 | .card {
 97 |     width: 300px;
 98 |     background-color: #EEEEEE;
 99 |     border-radius: 20px;
100 | }
101 | 
102 | .card .thumb {
103 |     border-radius: 20px 20px 0 0;
104 | }
105 | 
106 | .card-info {
107 |     display: flex;
108 |     justify-content: space-between;
109 |     align-items: center;
110 |     padding: 5px 25px;
111 | }
112 | 
113 | .card-info img {
114 |     width: 50px;
115 | }


--------------------------------------------------------------------------------
/test.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <head>
 3 |   <link rel="preconnect" href="https://fonts.googleapis.com" />
 4 |   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
 5 |   <link
 6 |     href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;700;900&display=swap"
 7 |     rel="stylesheet"
 8 |   />
 9 |   <link rel="stylesheet" href="style.css" />
10 |   <title>LUGX Store</title>
11 | </head>
12 | <body>
13 |   <!-- HEADER -->
14 |   <div class="header">
15 |     <img class="logo" src="images/logo.png" />
16 |     <div class="header-links">
17 |       <a href="test.html">Home</a>
18 |       <a href="#">Our shop</a>
19 |       <a href="#">Contact</a>
20 |       <a href="#">About</a>
21 |       <button class="btn">Sign in</button>
22 |     </div>
23 |   </div>
24 | 
25 |   <!-- Landing Page -->
26 |   <div class="landing-page">
27 |     <div class="landing-page-left-section">
28 |       <span>Welcome To Lugx!</span>
29 |       <h1>Best Gaming Site ever!</h1>
30 |       <p>
31 |         LUGX Gaming is free Bootstrap 5 HTML CSS website template for your
32 |         gaming websites. You can download and use this layout for commercial
33 |         purposes. Please tell your friends about TemplateMo.
34 |       </p>
35 |       <div class="landing-page-search">
36 |         <input placeholder="Start typing..." />
37 |         <button class="btn">SEARCH</button>
38 |       </div>
39 |     </div>
40 |     <div class="landing-page-image-container">
41 |       <img src="images/banner-image.jpg" />
42 |     </div>
43 |   </div>
44 | 
45 |   <!-- Trending Games -->
46 |   <div class="trending-container">
47 |     <span>Trending</span>
48 |     <div class="trending-header">
49 |       <h1>Trending Games</h1>
50 |       <button class="btn">view all</button>
51 |     </div>
52 |     <div class="trending-cards">
53 |       <div class="card">
54 |         <img class="thumb" src="images/trending-01.jpg" />
55 |         <div class="card-info">
56 |           <div class="card-name">
57 |             <p>Action</p>
58 |             <h3>Assasins creed</h3>
59 |           </div>
60 |           <a>
61 |             <img src="images/online-shopping.png" />
62 |           </a>
63 |         </div>
64 |       </div>
65 | 
66 |       <div class="card">
67 |         <img class="thumb" src="images/trending-01.jpg" />
68 |         <div class="card-info">
69 |           <div class="card-name">
70 |             <p>Action</p>
71 |             <h3>Assasins creed</h3>
72 |           </div>
73 |           <a>
74 |             <img src="images/online-shopping.png" />
75 |           </a>
76 |         </div>
77 |       </div>
78 | 
79 |       <div class="card">
80 |         <img class="thumb" src="images/trending-01.jpg" />
81 |         <div class="card-info">
82 |           <div class="card-name">
83 |             <p>Action</p>
84 |             <h3>Assasins creed</h3>
85 |           </div>
86 |           <a>
87 |             <img src="images/online-shopping.png" />
88 |           </a>
89 |         </div>
90 |       </div>
91 |     </div>
92 |   </div>
93 | </body>
94 | 


--------------------------------------------------------------------------------