redesign the site

static/css/style.css

@@ -0,0 +1,372 @@
+/*=== Header area start ===*/
+
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700;800&display=swap');
+
+body {	
+    font-family: 'Poppins', sans-serif;
+    font-size: 16px;
+    font-weight: 400;    
+	background: #1F2E3D;
+	color: #333333;	
+}
+
+a:hover {
+    text-decoration: none;
+}
+
+ul {
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+}
+
+img {
+    max-width: 100%;
+}
+
+input:focus,
+textarea:focus,
+button:focus {
+    outline: none;
+}
+
+::selection {
+    color: white; 
+    background: #ff7675;
+}
+
+::-webkit-selection {
+    color: white; 
+    background: #ff7675;
+}
+
+::-moz-selection {
+    color: white; 
+    background: #ff7675;
+}
+
+.scrolltotop {
+    width: 40px;
+    height: 40px;
+    border-radius: 20px 20px 0 0;
+    background: rgba(0,0,0,.5);   
+    text-align: center;
+    padding-top: 8px;
+    font-size: 22px;
+    color: #ffffff;
+    position: fixed;
+    right: 5px;
+    bottom: 5px;
+    display: none;
+    transition: 0.2s all ease;
+    -webkit-transition: 0.2s all ease;
+    -moz-transition: 0.2s all ease;
+}
+
+.scrolltotop:hover {   
+    background: #000;
+    color: #fff;
+    box-shadow: 0px 0px 5px rgba(0,0,0,.5);
+    -webkit-box-shadow: 0px 0px 5px rgba(0,0,0,.5);
+    -moz-box-shadow: 0px 0px 5px rgba(0,0,0,.5);   
+}
+
+.main-wrapper {
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+}
+
+.header-area {
+    padding: 23px 0 24px;
+    background: #222831;
+    border-bottom: 1px solid #FFD018;
+}
+
+.header-item a {
+    font-weight: 800;
+    font-size: 26px;
+    letter-spacing: 0.75px;
+    text-transform: uppercase;
+    color: #F7FCFF;
+    display: inline-block;
+    transition: 0.2s all ease;
+    -webkit-transition: 0.2s all ease;
+    -moz-transition: 0.2s all ease;
+}
+
+.header-item a:hover {
+    opacity: .8;
+}
+
+.content-area {
+    padding-top: 20px;
+    background: #1f2e3d;
+    padding-bottom: 30px;
+    min-height: 60vh;
+}
+
+.content-item-inner select {
+    font-weight: 400;
+    font-size: 20px;
+    letter-spacing: 0.75px;
+    color: #E8E8E8;
+    background: #222831;
+    border: 1px solid #FFD018;
+    box-sizing: border-box;
+    border-radius: 8px;
+    width: 258px;
+    height: 56px;
+    line-height: 56px;
+    appearance: none;
+    background-image: url(images/01.png);
+    background-repeat: no-repeat;
+    background-size: 16px;
+    background-position: calc(100% - 13px) 50%;
+    padding-left: 10px;
+}
+
+.content-item-inner2 {
+    margin-top: 20px;
+}
+
+.content-item-inner3 {
+    display: flex;
+    align-items: center;
+    border-bottom: 2px solid #ffd018;
+    border-radius: 8px 8px 0px 0px;
+    background: #222831;
+}
+
+.content-item-inner3 h2 {
+    font-weight: 700;
+    font-size: 20px;
+    letter-spacing: 0.75px;
+    color: #FFD018;
+    margin: 0;
+}
+
+.content-item-inner4 {
+    width: 760px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding-right: 10px;
+    border-right: 2px solid #ffd018;
+    height: 60px;
+    padding-left: 86px;
+}
+
+.content-item-inner4 div {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.content-item-inner5 {
+    width: 320px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 10px;
+    border-right: 2px solid #ffd018;
+    height: 60px;
+}
+
+.content-item-inner5 div {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.content-item-inner6 {
+    width: 120px;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    padding-right: 10px;
+    height: 60px;
+}
+
+.content-item-inner2 ul li {
+    display: flex;
+    align-items: center;
+    padding-left: 17px;
+    padding-right: 10px;
+    height: 60px;
+}
+
+.content-item-inner2 ul li a {
+    font-weight: 400;
+    font-size: 20px;
+    display: inline-block;
+    letter-spacing: 0.75px;
+    color: #FFFFFF;
+}
+
+.content-item-inner2 ul li p {
+    font-weight: 400;
+    font-size: 20px;
+    display: inline-block;
+    letter-spacing: 0.75px;
+    color: #FFFFFF;
+}
+
+.content-item-inner2 ul li:nth-child(even) {
+    background: #222831;
+}
+
+.content-item-inner2 ul li div:nth-of-type(1) {
+    width: 760px;
+}
+
+.content-item-inner2 ul li div:nth-of-type(1) img {
+    max-width: 32px;
+    margin-right: 37px;
+    margin-top: -5px;
+}
+
+.content-item-inner2 ul li div:nth-of-type(2) {
+    width: 320px;
+    padding-left: 10px;
+}
+
+.content-item-inner2 ul li div:nth-of-type(3) {
+    width: 120px;
+    padding-right: 10px;
+    text-align: right;
+}
+
+.footer-area {
+    padding: 20px 0;
+    background: #222831;
+    margin-top: auto;
+}
+
+.footer-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.footer-item ul {
+    display: flex;
+    align-items: center;
+}
+
+.footer-item ul li a {
+    font-weight: 400;
+    font-size: 16px;
+    letter-spacing: 0.75px;
+    color: #FFFFFF;
+    display: block;
+    margin-right: 20px;
+    transition: 0.2s all ease;
+    -webkit-transition: 0.2s all ease;
+    -moz-transition: 0.2s all ease;
+}
+
+.footer-item ul li a:hover {
+    opacity: .8;
+}
+
+.footer-item p {
+    font-weight: 400;
+    font-size: 16px;
+    letter-spacing: 0.75px;
+    color: #FFFFFF;
+    margin: 0;
+}
+
+/*
+====================================
+Small Screen - Tablate
+====================================
+*/
+@media screen and (min-width: 768px) and (max-width: 991px) {
+
+
+    .content-item-inner4 {
+        padding-left: 76px;
+    }
+
+    .content-item-inner2 ul li a {
+        font-size: 16px;
+    }
+
+    .content-item-inner2 ul li p {
+        font-size: 16px;
+    }
+
+    .content-item-inner2 ul li a:nth-of-type(1) img {
+        margin-right: 27px;
+    }
+
+    .footer-item ul li a {
+        font-size: 15px;
+        margin-right: 15px;
+    }
+
+    .footer-item p {
+        font-size: 15px;
+    }
+
+
+
+
+
+}
+
+/*
+====================================
+Small Screen - Mobile
+====================================
+*/
+@media screen and (max-width: 767px) {  
+
+
+    .header-item {
+        text-align: center;
+    }
+
+    .content-item-inner select {
+        width: 100%;
+    }
+
+    .content-item-inner2 {
+        overflow-y: hidden;
+        overflow-x: scroll;
+        width: 650px;
+    }
+
+    .content-item-inner4 {
+        width: 267px;
+        padding-left: 77px;
+    }
+
+    .content-item-inner2 ul li div:nth-of-type(1) {
+        width: 267px;
+    }
+
+    .content-item-inner2 ul li div:nth-of-type(1) img {
+        margin-right: 28px;
+    }
+
+    .footer-item {
+        flex-direction: column;
+    }
+
+
+    .footer-item ul {
+        flex-direction: column;
+    }
+
+
+    .footer-item ul li a {
+        margin-right: 0;
+        margin-bottom: 15px;
+    }
+
+
+
+}

templates/home.html

@@ -1,72 +1,91 @@
-{{define "title" -}}
+{{define "title"}}
 <title>Serverlist :: {{.Region}}</title>
-{{- end}}
+{{end}}
 
-{{define "content" -}}
+{{define "content"}}
 {{ $gamemodes := .Gamemodes}}
 {{ $servers := .Servers}}
 {{ $flags := .Flags}}
-<div class="container mx-auto px-4 sm:px-8">
-    <div class="py-8">
-        <div>
-            <h2 class="text-2xl font-semibold leading-tight text-white">{{.Region}}</h2>
+{{range $gamemode := $gamemodes -}}
+<div class="content-item-inner2 d-none d-md-block">
+    <div class="content-item-inner3">
+        <div class="content-item-inner4">
+            <h2>{{$gamemode.Name}}</h2>
         </div>
-        {{range $gamemode := $gamemodes -}}
-        <div class="-mx-4 sm:-mx-8 px-4 sm:px-8 py-4 overflow-x-auto">
-            <div class="inline-block min-w-full shadow rounded-lg overflow-hidden">
-                <table class="min-w-full leading-normal">
-                    <thead>
-                        <tr>
-                            <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
-                                
-                            </th>
-                            <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
-                                {{$gamemode.Name}}
-                            </th>
-                            <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
-                                Map
-                            </th>
-                            <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
-                                Players
-                            </th>
-                            
-                        </tr>
-                    </thead>
-                    <tbody>
-                      {{range $server := $servers -}}
-                        {{if eq $gamemode.ID $server.GamemodeID -}}
-                        {{if ne $server.Map "Server didn't reply." -}}
-                        <tr id="content">
-                            <td class="px-5 border-b border-gray-200 bg-white" id="flag">
-                                  {{range $flag := $flags -}}
-                                    {{if eq $server.ServerIP $flag.ServerIP -}}
-                                    <img src="https://flagcdn.com/16x12/{{$flag.Flag}}.png" srcset="https://flagcdn.com/32x24/{{$flag.Flag}}.png 2x, https://flagcdn.com/48x36/{{$flag.Flag}}.png 3x" width="16" height="12">
-                                    {{- end}}
-                                  {{- end}}
-                            </td>
-                            <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm" id="name">
-                                <div class="flex items-center">
-                                    <div class="ml-3">
-                                        <a href="steam://connect/{{$server.ServerIP}}" class="text-gray-900 whitespace-no-wrap">{{$server.Name}}</a>
-                                    </div>
-                                </div>
-                            </td>
-                            <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
-                                <p class="text-gray-900 whitespace-no-wrap">{{$server.Map}}</p>
-                            </td>
-                            <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
-                                <p class="text-gray-900 whitespace-no-wrap">{{$server.Players}}/{{$server.MaxPlayers}}</p>
-                            </td>
-                        </tr>
-                        {{- end}}
-                        {{- end}}
-                      {{- end}}
-                    </tbody>
-                </table>
+        <div class="content-item-inner5">
+            <h2>Map</h2>
+        </div>
+        <div class="content-item-inner6">
+            <h2>Players</h2>
+        </div>
+    </div>
+	<ul>
+   {{range $server := $servers -}}
+    {{if eq $gamemode.ID $server.GamemodeID -}}
+     {{if ne $server.Map "Server didn't reply." -}}
+		<li>
+			<div class="text-truncate">
+				<a href="steam://connect/{{$server.ServerIP}}">
+			   {{range $flag := $flags -}}
+				{{if eq $server.ServerIP $flag.ServerIP -}}
+				<img src="https://flagcdn.com/w40/{{$flag.Flag}}.png" srcset="https://flagcdn.com/w80/{{$flag.Flag}}.png" 2x>
+				{{- end}}
+			   {{- end}}
+				{{$server.Name}}</a>
+			</div>
+			<div>
+				<p>{{$server.Map}}</a>
+			</div>
+			<div>
+				<p>{{$server.Players}}/{{$server.MaxPlayers}}</a>
+			</div>
+		</li>
+	 {{- end}}
+    {{- end}}
+   {{- end}}
+	</ul>
+	</div>
+	<!-- for mobile -->
+	<div class="table-responsive">
+	<div class="content-item-inner2 d-md-none">
+		<div class="content-item-inner3">
+			<div class="content-item-inner4">
+				<h2>{{$gamemode.Name}}</h2>
+			</div>
+			<div class="content-item-inner5">
+				<h2>Map</h2>
+			</div>
+			<div class="content-item-inner6">
+				<h2>Players</h2>
+			</div>
+		</div>
+    {{range $server := $servers -}}
+     {{if eq $gamemode.ID $server.GamemodeID -}}
+      {{if ne $server.Map "Server didn't reply." -}}
+	<ul>
+		<li>
+			<div>
+				<a href="steam://connect/{{$server.ServerIP}}">
+			   {{range $flag := $flags -}}
+				{{if eq $server.ServerIP $flag.ServerIP -}}
+				<img src="https://flagcdn.com/w40/{{$flag.Flag}}.png" srcset="https://flagcdn.com/w80/{{$flag.Flag}}.png" 2x>
+				{{- end}}
+			   {{- end}}
+                {{$server.Name}}</a>
             </div>
-        </div>
-        {{- end}}
+            <div>
+                <a href="">{{$server.Map}}</a>
+            </div>
+            <div>
+                <a href="">{{$server.Players}}/{{$server.MaxPlayers}}</a>
+            </div>
+        </li>
+    </ul>
+     {{- end}}
+    {{- end}}
+   {{- end}}
     </div>
 </div>
-</section>
 {{- end}}
+{{end}}
+

templates/layout.html

@@ -1,103 +1,83 @@
 <!DOCTYPE html>
-<html class="bg-gray-800" lang="en"><head>
-    {{block "title" . -}}{{- end}}
-    <meta http-equiv="content-Type" content="text/html; utf-8" />
-    <meta http-equiv="Pragma" content="no-cache" />
-    <meta name="robots" content="INDEX,FOLLOW" />
-    <meta http-equiv="content-Language" content="en" />
-    <meta name="description" content="Serverlist for competitive Team Fortress 2 players" />
-    <meta name="keywords" content="tf2, tf, serverlist, team, fortress, 2" />
-    <meta name="page-type" content="Game" />
-    <meta name="page-topic" content="Team Fortress 2" />
-    <meta http-equiv="Reply-to" content="" />
-    <meta name="expires" content="" />
-    <meta name="revisit-after" content="2 days" />
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico"/>
-    <link href="https://unpkg.com/tailwindcss@1.0.4/dist/tailwind.min.css" rel="stylesheet">
-    <script async defer data-website-id="084ca01d-5337-4f12-8932-3033addbc175" src="https://a.v0v.de/t.js"></script>
-    <script defer data-domain="serverlist.tf" src="https://t.v0v.de/js/t.js"></script>
-    <style>
-        tr#content {
-            line-height: 0;
-        }
-        td#flag {
-            padding-right: 0;
-        }
-        td#name {
-            padding-left: 0;
-        }
-    </style>
-</head>
-<body class="max-w-screen-xl px-4 py-12 mx-auto space-y-8 sm:px-6 lg:px-8 bg-gray-800">
-    <section class="container mx-auto px-8 my-1 flex flex-wrap -m-4">
-    <div class="p-2 md:w-40">
-        <a href="/" class="flex items-center p-4 bg-blue-200 rounded-lg shadow-xs cursor-pointer hover:bg-blue-500 hover:text-gray-100">
-            <div>
-              <p class=" text-xs font-medium ">All Regions</p>
-            </div>
-        </a>
-    </div>
-    <div class="p-2 md:w-40">
-        <a href="/america" class="flex items-center p-4 bg-blue-200 rounded-lg shadow-xs cursor-pointer hover:bg-blue-500 hover:text-gray-100">
-            <div>
-              <p class=" text-xs font-medium ">North America</p>
-            </div>
-        </a>
-    </div>
-    <div class="p-2 md:w-40">
-        <a href="/europe" class="flex items-center p-4 bg-blue-200 rounded-lg shadow-xs cursor-pointer hover:bg-blue-500 hover:text-gray-100">
-            <div>
-              <p class=" text-xs font-medium ">Europe</p>
-            </div>
-        </a>
-    </div>
-    <div class="p-2 md:w-40">
-        <a href="/australia" class="flex items-center p-4 bg-blue-200 rounded-lg shadow-xs cursor-pointer hover:bg-blue-500 hover:text-gray-100">
-            <div>
-              <p class=" text-xs font-medium ">Australia</p>
-            </div>
-        </a>
-    </div>
-    <div class="p-2 md:w-40">
-        <a href="/asia" class="flex items-center p-4 bg-blue-200 rounded-lg shadow-xs cursor-pointer hover:bg-blue-500 hover:text-gray-100">
-            <div>
-              <p class=" text-xs font-medium ">Asia</p>
-            </div>
-        </a>
-    </div>
-    {{block "content" . -}}{{- end}}
-</body>
-<!-- Foooter -->
-<section class="bg-white rounded-lg">
-    <div class="max-w-screen-xl px-4 py-12 mx-auto space-y-8 overflow-hidden sm:px-6 lg:px-8">
-        <nav class="flex flex-wrap justify-center -mx-5 -my-2">
-			<div class="px-5 py-2">
-                <a href="https://discord.gg/MfeXJkWg5m" class="text-base leading-6 text-gray-500 hover:text-gray-900">
-                    Add server
-                </a>
-            </div>
-            <div class="px-5 py-2">
-                <a href="https://spenny.tf/discord" class="text-base leading-6 text-gray-500 hover:text-gray-900">
-                    Discord
-                </a>
-            </div>
-            <div class="px-5 py-2">
-                <a href="https://spenny.tf" class="text-base leading-6 text-gray-500 hover:text-gray-900">
-                    spenny.tf
-                </a>
-            </div>
-            <div class="px-5 py-2">
-                <a href="https://www.teamfortress.tv/60348" class="text-base leading-6 text-gray-500 hover:text-gray-900">
-                    teamfortress.tv
-                </a>
-            </div>
-        </nav>
-        <p class="mt-8 text-base leading-6 text-center text-gray-400">
-            © 2021 Serverlist.tf
-        </p>
-    </div>
-	</section>
+<html lang="en-US">
+	<head>
+		<!-- Meta setup -->
+		{{block "title" . -}}{{- end}}
+		<meta charset="UTF-8">
+		<meta http-equiv="X-UA-Compatible" content="IE=edge">
+		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+		<meta http-equiv="content-Type" content="text/html; utf-8" />
+		<meta name="robots" content="INDEX,FOLLOW" />
+		<meta http-equiv="content-Language" content="en" />
+		<meta name="description" content="Serverlist for competitive Team Fortress 2 players" />
+		<meta name="keywords" content="tf2, tf, serverlist, team, fortress, 2" />
+		<meta name="page-type" content="Game" />
+		<meta name="page-topic" content="Team Fortress 2" />
+		<meta http-equiv="Reply-to" content="" />
+		<meta name="expires" content="" />
+		<meta name="revisit-after" content="2 days" />
+		<script async defer data-website-id="084ca01d-5337-4f12-8932-3033addbc175" src="https://a.v0v.de/t.js"></script>
+		<script defer data-domain="serverlist.tf" src="https://t.v0v.de/js/t.js"></script>
+		
+		{{block "title" . -}}{{- end}}
+		<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico"/>
+		<link rel="stylesheet" href="css/bootstrap.css" />
+		<link rel="stylesheet" href="style.css" />	
+	</head>
+	
+		<body>
+
+		<!--[if lte IE 9]>
+            <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
+        <![endif]-->
+
+		<main class="main-wrapper">
+			<!-- header-area start -->	
+			<header class="header-area">
+				<div class="container">
+					<div class="header-item">
+						<a href="//serverlist.tf">Serverlist.tf</a>
+					</div>				
+				</div>
+			</header>	
+			<!-- header-area end -->
+
+			<!-- content-area start -->	
+			<div class="content-area">
+				<div class="container">
+					<div class="content-item">
+						<div class="content-item-inner">
+							<select onchange="location = this.value;">
+                                <option>{{.Region}}</option>
+								<option value="/">All Regions</option>
+								<option value="/america">North America</option>
+								<option value="/europe">Europe</option>
+								<option value="/asia">Asia</option>
+								<option value="/australia">Australia</option>
+							</select>
+						</div>
+						{{block "content" . -}}{{- end}}
+					</div>
+				</div>
+			</div>	
+			<!-- content-area end -->
+
+			<!-- footer-area start -->
+			<footer class="footer-area">
+				<div class="container">
+					<div class="footer-item">
+						<ul>
+							<li><a href="#">Imprint</a></li>
+							<li><a href="#">Add Server</a></li>
+							<li><a href="#">Discord</a></li>
+							<li><a href="#">spenny.tf</a></li>
+							<li><a href="#">teamfortress.tv</a></li>
+						</ul>
+						<p>© 2021 Serverlist.tf</p>
+					</div>
+				</div>
+			</footer>
+			<!-- footer-area end -->
+		</main>	
+	</body>
 </html>

templates/region.html

@@ -7,71 +7,90 @@
 {{ $gamemodesCount := .GamemodeCount}}
 {{ $servers := .Servers}}
 {{ $flags := .Flags}}
-<div class="container mx-auto px-4 sm:px-8">
-    <div class="py-8">
-        <div>
-            <h2 class="text-2xl font-semibold leading-tight text-white">{{.Region}}</h2>
+{{range $gamemode := $gamemodes -}}
+ {{range $gamemodeCount := $gamemodesCount -}}
+  {{if eq $gamemode.ID $gamemodeCount.ID -}}
+<div class="content-item-inner2 d-none d-md-block">
+    <div class="content-item-inner3">
+        <div class="content-item-inner4">
+            <h2>{{$gamemode.Name}}</h2>
         </div>
-      {{range $gamemode := $gamemodes -}}
-       {{range $gamemodeCount := $gamemodesCount -}}
-        {{if eq $gamemode.ID $gamemodeCount.ID -}}
-        <div class="-mx-4 sm:-mx-8 px-4 sm:px-8 py-4 overflow-x-auto">
-            <div class="inline-block min-w-full shadow rounded-lg overflow-hidden">
-                <table class="min-w-full leading-normal">
-                    <thead>
-                        <tr>
-                            <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
-                                
-                            </th>
-                            <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
-                                {{$gamemode.Name}}
-                            </th>
-                            <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
-                                Map
-                            </th>
-                            <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
-                                Players
-                            </th>
-                            
-                        </tr>
-                    </thead>
-                    <tbody>
-                      {{range $server := $servers -}}
-                        {{if eq $gamemode.ID $server.GamemodeID -}}
-                        {{if ne $server.Map "Server didn't reply." -}}
-                        <tr id="content">
-                            <td class="px-5 border-b border-gray-200 bg-white" id="flag">
-                                  {{range $flag := $flags -}}
-                                    {{if eq $server.ServerIP $flag.ServerIP -}}
-                                    <img src="https://flagcdn.com/16x12/{{$flag.Flag}}.png" srcset="https://flagcdn.com/32x24/{{$flag.Flag}}.png 2x, https://flagcdn.com/48x36/{{$flag.Flag}}.png 3x" width="16" height="12">
-                                    {{- end}}
-                                  {{- end}}
-                            </td>
-                            <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm" id="name">
-                                <div class="flex items-center">
-                                    <div class="ml-3">
-                                        <a href="steam://connect/{{$server.ServerIP}}" class="text-gray-900 whitespace-no-wrap">{{$server.Name}}</a>
-                                    </div>
-                                </div>
-                            </td>
-                            <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
-                                <p class="text-gray-900 whitespace-no-wrap">{{$server.Map}}</p>
-                            </td>
-                            <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
-                                <p class="text-gray-900 whitespace-no-wrap">{{$server.Players}}/{{$server.MaxPlayers}}</p>
-                            </td>
-                        </tr>
-                        {{- end}}
-                        {{- end}}
-                      {{- end}}
-                    </tbody>
-                </table>
+        <div class="content-item-inner5">
+            <h2>Map</h2>
+        </div>
+        <div class="content-item-inner6">
+            <h2>Players</h2>
+        </div>
+    </div>
+	<ul>
+   {{range $server := $servers -}}
+    {{if eq $gamemode.ID $server.GamemodeID -}}
+     {{if ne $server.Map "Server didn't reply." -}}
+		<li>
+			<div class="text-truncate">
+				<a href="steam://connect/{{$server.ServerIP}}">
+			   {{range $flag := $flags -}}
+				{{if eq $server.ServerIP $flag.ServerIP -}}
+				<img src="https://flagcdn.com/w40/{{$flag.Flag}}.png" srcset="https://flagcdn.com/w80/{{$flag.Flag}}.png" 2x>
+				{{- end}}
+			   {{- end}}
+				{{$server.Name}}</a>
+			</div>
+			<div>
+				<p>{{$server.Map}}</a>
+			</div>
+			<div>
+				<p>{{$server.Players}}/{{$server.MaxPlayers}}</a>
+			</div>
+		</li>
+	 {{- end}}
+    {{- end}}
+   {{- end}}
+	</ul>
+	</div>
+	<!-- for mobile -->
+	<div class="table-responsive">
+	<div class="content-item-inner2 d-md-none">
+		<div class="content-item-inner3">
+			<div class="content-item-inner4">
+				<h2>{{$gamemode.Name}}</h2>
+			</div>
+			<div class="content-item-inner5">
+				<h2>Map</h2>
+			</div>
+			<div class="content-item-inner6">
+				<h2>Players</h2>
+			</div>
+		</div>
+    {{range $server := $servers -}}
+     {{if eq $gamemode.ID $server.GamemodeID -}}
+      {{if ne $server.Map "Server didn't reply." -}}
+	<ul>
+		<li>
+			<div>
+				<a href="steam://connect/{{$server.ServerIP}}">
+			   {{range $flag := $flags -}}
+				{{if eq $server.ServerIP $flag.ServerIP -}}
+				<img src="https://flagcdn.com/w40/{{$flag.Flag}}.png" srcset="https://flagcdn.com/w80/{{$flag.Flag}}.png" 2x>
+				{{- end}}
+			   {{- end}}
+                {{$server.Name}}</a>
             </div>
-        </div>
-        {{- end}}
-       {{- end}}
-      {{- end}}
+            <div>
+                <a href="">{{$server.Map}}</a>
+            </div>
+            <div>
+                <a href="">{{$server.Players}}/{{$server.MaxPlayers}}</a>
+            </div>
+        </li>
+    </ul>
+     {{- end}}
+    {{- end}}
+   {{- end}}
     </div>
 </div>
-</section>
+  {{- end}}
+ {{- end}}
+{{- end}}
 {{end}}
+

web/handler.go

@@ -18,6 +18,10 @@ func NewHandler(store steamServer.Store) *Handler {
     h.Use(middleware.Logger)
 
     h.Get("/favicon.ico", faviconHandler)
+    h.Get("/style.css", maincssHandler)
+    h.Get("/css/bootstrap.css", bootstrapHandler)
+    h.Get("/images/01.png", arrowHandler)
+
     h.Get("/", h.Home())
     h.Get("/europe", h.Europe())
     h.Get("/america", h.America())
@@ -37,6 +41,18 @@ func faviconHandler(w http.ResponseWriter, r *http.Request) {
     http.ServeFile(w, r, "static/favicon.ico")
 }
 
+func maincssHandler(w http.ResponseWriter, r *http.Request) {
+    http.ServeFile(w, r, "static/css/style.css")
+}
+
+func bootstrapHandler(w http.ResponseWriter, r *http.Request) {
+    http.ServeFile(w, r, "static/css/bootstrap.css")
+}
+
+func arrowHandler(w http.ResponseWriter, r *http.Request) {
+    http.ServeFile(w, r, "static/images/01.png")
+}
+
 func (h *Handler) Home() http.HandlerFunc {
     type data struct {
         Region string