Skip to content

Commit

Permalink
Style the Index Page with Tailwind CSS
Browse files Browse the repository at this point in the history
  • Loading branch information
@abrahamfast
abrahamfast committed Aug 3, 2020
1 parent 059e336 commit 7b56c98
Show file tree
Hide file tree
Showing 5 changed files with 160 additions and 1 deletion.
5 changes: 5 additions & 0 deletions public/css/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18033,6 +18033,11 @@ video {
animation: bounce 1s infinite;
}

.progress-list-item {
right: -20px;
bottom: -20px
}

@media (min-width: 640px) {
.sm\:container {
width: 100%;
Expand Down
Binary file added public/img/gg1.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 5 additions & 0 deletions resources/css/main.css
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,8 @@
@tailwind base;
@tailwind components;
@tailwind utilities;

.progress-list-item {
right: -20px;
bottom: -20px
}
135 changes: 135 additions & 0 deletions resources/views/index.blade.php
View file
Original file line number Diff line number Diff line change
@@ -1 +1,136 @@
@extends('layouts.app')

@section('content')

<div class="container mx-auto px-4">
<h2 class="text-blue-500 uppercase tracking-wide font-semibold">Popular GAMES</h2>
<div class="popular-games text-sm grid grid-cols-6 gap-12 border-t border-gray-800 pb-16">
<div class="game mt-8">
<div class="relative inline-block">
<a href="#">
<img src="/img/gg1.jpg" alt="game cover" class="hover:opacity-75 transition ease-in-out duration-150">
</a>
<div class="absolute bottom-0 right-0 w-16 h-16 bg-gray-800 rounded-full progress-list-item">
<div class="font-semibold text-xs flex justify-center items-center h-full">
800%
</div>
</div>
</div>
<a href="#" class="block text-base font-semibold leading-tight hover:text-gray-400 mt-8">Final Fantasy & remak</a>
<div class="text-gray-400 mt-1">Playstation4</div>
</div>
<div class="game mt-8">
<div class="relative inline-block">
<a href="#">
<img src="/img/gg1.jpg" alt="game cover" class="hover:opacity-75 transition ease-in-out duration-150">
</a>
<div class="absolute bottom-0 right-0 w-16 h-16 bg-gray-800 rounded-full progress-list-item">
<div class="font-semibold text-xs flex justify-center items-center h-full">
800%
</div>
</div>
</div>
<a href="#" class="block text-base font-semibold leading-tight hover:text-gray-400 mt-8">Final Fantasy & remak</a>
<div class="text-gray-400 mt-1">Playstation4</div>
</div>
<div class="game mt-8">
<div class="relative inline-block">
<a href="#">
<img src="/img/gg1.jpg" alt="game cover" class="hover:opacity-75 transition ease-in-out duration-150">
</a>
<div class="absolute bottom-0 right-0 w-16 h-16 bg-gray-800 rounded-full progress-list-item">
<div class="font-semibold text-xs flex justify-center items-center h-full">
800%
</div>
</div>
</div>
<a href="#" class="block text-base font-semibold leading-tight hover:text-gray-400 mt-8">Final Fantasy & remak</a>
<div class="text-gray-400 mt-1">Playstation4</div>
</div>
<div class="game mt-8">
<div class="relative inline-block">
<a href="#">
<img src="/img/gg1.jpg" alt="game cover" class="hover:opacity-75 transition ease-in-out duration-150">
</a>
<div class="absolute bottom-0 right-0 w-16 h-16 bg-gray-800 rounded-full progress-list-item">
<div class="font-semibold text-xs flex justify-center items-center h-full">
800%
</div>
</div>
</div>
<a href="#" class="block text-base font-semibold leading-tight hover:text-gray-400 mt-8">Final Fantasy & remak</a>
<div class="text-gray-400 mt-1">Playstation4</div>
</div>
<div class="game mt-8">
<div class="relative inline-block">
<a href="#">
<img src="/img/gg1.jpg" alt="game cover" class="hover:opacity-75 transition ease-in-out duration-150">
</a>
<div class="absolute bottom-0 right-0 w-16 h-16 bg-gray-800 rounded-full progress-list-item">
<div class="font-semibold text-xs flex justify-center items-center h-full">
800%
</div>
</div>
</div>
<a href="#" class="block text-base font-semibold leading-tight hover:text-gray-400 mt-8">Final Fantasy & remak</a>
<div class="text-gray-400 mt-1">Playstation4</div>
</div>
<div class="game mt-8">
<div class="relative inline-block">
<a href="#">
<img src="/img/gg1.jpg" alt="game cover" class="hover:opacity-75 transition ease-in-out duration-150">
</a>
<div class="absolute bottom-0 right-0 w-16 h-16 bg-gray-800 rounded-full progress-list-item">
<div class="font-semibold text-xs flex justify-center items-center h-full">
800%
</div>
</div>
</div>
<a href="#" class="block text-base font-semibold leading-tight hover:text-gray-400 mt-8">Final Fantasy & remak</a>
<div class="text-gray-400 mt-1">Playstation4</div>
</div>
</div>

<div class="flex my-10">
<div class="recently-reviewed w-3/4 mr-32">
<h2 class="text-blue-500 uppercase tracking-wide font-semibold">Recently Reviewed</h2>
<div class="recently-reviewd-container space-y-12 mt-8">
<div class="game bg-gray-800 rounded-lg shadow-md flex px-6 py-6">
<div class="relative inline-none">
<a href="#">
<img src="/img/gg1.jpg" alt="game cover" class="hover:opacity-75 transition ease-in-out duration-150">
</a>
<div class="absolute bottom-0 right-0 w-16 h-16 bg-gray-800 rounded-full progress-list-item">
<div class="font-semibold text-xs flex justify-center items-center h-full">
80%
</div>
</div>
</div>
<div class="ml-12">
<a href="#" class="block text-lg font-semibold leading-tight hover:text-gray-400 mt-4">Final Fantasy & remak</a>
<div class="text-gray-400 mt-1">Playstation 4</div>
<p class="mt-6 text-gray-400">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam dignissimos repellendus sit voluptatum, aliquam praesentium amet cupiditate, quis id perferendis iusto libero eligendi repellat, facere provident placeat. Repellat numquam nobis voluptatem quasi vel mollitia corrupti a, illum incidunt eaque pariatur.
</p>
</div>
</div>
</div>
</div>
<div class="most-anticipated w-1/4">
<h2 class="text-blue-500 uppercase tracking-wide font-semibold">Recently Reviewed</h2>
<div class="most-anticipated-container space-y-10 mt-8">
<div class="game flex">
<a href="#">
<img src="/img/gg1.jpg" alt="game cover" class="w-16 hover:opacity-75 transition ease-in-out duration-150">
</a>

<div class="ml-4">
<a href="" class="hover:text-gray-300">Cyberpunk 2077</a>
<div class="text-gray-400 text-sm 1">Sept 16, 2020</div>
</div>
</div>
</div>
</div>
</div>
</div>
@endsection
16 changes: 15 additions & 1 deletion resources/views/layouts/app.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,10 @@
</div>
<div class="flex items-center">
<div class="relative">
<input type="text" class="bg-gray-800 text-sm rounded-full px-3 py-1" placeholder="Search">
<input type="text" class="bg-gray-800 text-sm rounded-full w-64 px-3 pl-8 py-1 focus:outline-none focus:shadow" placeholder="Search">
<div class="absolute top-0 flex items-center h-full ml-2">
<svg class="fill-current text-gray-400 w-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0016 9.5 6.5 6.5 0 109.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
</div>
</div>
<div class="ml-6">
<a href="/">
Expand All @@ -31,6 +34,17 @@
</div>
</nav>
</header>


<main class="py-8">
@yield('content')

<footer class="border-t border-gray-800">
<div class="container m1-auto px-4 py-6">
Powerb By <a href="#" class="underline hover:text-gray-400"></a>
</div>
</footer>
</main>

</body>
</html>

0 comments on commit 7b56c98

Please sign in to comment.