Skip to content

Commit

Permalink
Layout changed
Browse files Browse the repository at this point in the history 
Changed the layout to fit more content
  • Loading branch information
@Fyrestrap
Fyrestrap committed Jun 3, 2023
1 parent 20f690e commit c199ac1
Showing 1 changed file with 67 additions and 72 deletions.
139 changes: 67 additions & 72 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,84 +36,79 @@


<!-- Header -->
<header class="w-full h-screen bg-[url('assets/img/leaves.jpg')] bg-cover bg-bottom">
<div class="h-full">
<div class="flex h-full">
<div class="w-full md:w-1/2 bg-gradient-to-b from-gray-900/90 to-gray-900/95 p-10 flex">
<div class="w-full text-center my-auto">
<h1 class="font-bold text-5xl font-Comforter-Brush text-amber-500 my-10 md:text-right">Launcher.</h1>
<h6 class="font-Montserrat font-bold uppercase text-4xl md:text-5xl lg:text-6xl mb-14 md:-mr-20 text-white md:text-right">Coming <span class="text-white/70 md:-mr-20">soon</span></h6>


<!-- Count down -->
<div class="w-full text-left flex mb-10">
<ul class="w-full flex place-content-center md:place-content-end gap-5 mx-auto text-gray-50">
<li>
<div class="font-bold text-white rounded-full border-dotted border-gray-700 border-4 flex items-center justify-center text-2xl lg:text-4xl h-16 lg:h-24 w-16 lg:w-24" id="cdD">00</div>
<p class="text-center text-xs mt-2">Days</p>
</li>

<li>
<div class="font-bold text-white rounded-full border-dotted border-gray-700 border-4 flex items-center justify-center text-2xl lg:text-4xl h-16 lg:h-24 w-16 lg:w-24" id="cdH">00</div>
<p class="text-center text-xs mt-2">Hours</p>
</li>

<li>
<div class="font-bold text-white rounded-full border-dotted border-gray-700 border-4 flex items-center justify-center text-2xl lg:text-4xl h-16 lg:h-24 w-16 lg:w-24" id="cdM">00</div>
<p class="text-center text-xs mt-2">Minutes</p>
</li>

<li>
<div class="font-bold text-white rounded-full border-dotted border-gray-700 border-4 flex items-center justify-center text-2xl lg:text-4xl h-16 lg:h-24 w-16 lg:w-24" id="cdS">00</div>
<p class="text-center text-xs mt-2">Seconds</p>
</li>

</ul>
</div>


<p class="text-base mb-14 text-gray-200 md:text-right">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta reprehenderit delectus quasi eligendi maiores consectetur repellat necessitatibus libero deleniti quaerat debitis, odit earum modi. Magni porro iste dolores.</p>

<!-- Social media -->
<div class="w-full text-left flex mb-5">
<ul class="w-full flex place-content-center md:place-content-end gap-10 mx-auto text-gray-500">
<li>
<a href="#" class="text-lg hover:text-amber-500">
<i class="fab fa-facebook-f"></i>
</a>
</li>

<li>
<a href="#" class="text-lg hover:text-amber-500">
<i class="fab fa-twitter"></i>
</a>
</li>

<li>
<a href="#" class="text-lg hover:text-amber-500">
<i class="fab fa-youtube"></i>
</a>
</li>

<li>
<a href="#" class="text-lg hover:text-amber-500">
<i class="fab fa-instagram"></i>
</a>
</li>

</ul>
</div>

</div>
<header class="w-full bg-[url('assets/img/leaves.jpg')] bg-cover bg-bottom">
<div class="w-full min-h-screen md:w-1/2 bg-gradient-to-b from-gray-900/90 to-gray-900/95 p-10 flex">
<div class="w-full text-center my-auto">
<h1 class="font-bold text-5xl font-Comforter-Brush text-amber-500 mb-10 md:text-right">Launcher.</h1>
<h6 class="font-Montserrat font-bold uppercase text-4xl md:text-5xl lg:text-6xl mb-14 md:-mr-20 text-white md:text-right">Coming <span class="text-white/70 md:-mr-20">soon</span></h6>


<!-- Count down -->
<div class="w-full text-left flex mb-10">
<ul class="w-full flex place-content-center md:place-content-end gap-5 mx-auto text-gray-50">
<li>
<div class="font-bold text-white rounded-full border-dotted border-gray-700 border-4 flex items-center justify-center text-2xl lg:text-4xl h-16 lg:h-24 w-16 lg:w-24" id="cdD">00</div>
<p class="text-center text-xs mt-2">Days</p>
</li>

<li>
<div class="font-bold text-white rounded-full border-dotted border-gray-700 border-4 flex items-center justify-center text-2xl lg:text-4xl h-16 lg:h-24 w-16 lg:w-24" id="cdH">00</div>
<p class="text-center text-xs mt-2">Hours</p>
</li>

<li>
<div class="font-bold text-white rounded-full border-dotted border-gray-700 border-4 flex items-center justify-center text-2xl lg:text-4xl h-16 lg:h-24 w-16 lg:w-24" id="cdM">00</div>
<p class="text-center text-xs mt-2">Minutes</p>
</li>

<li>
<div class="font-bold text-white rounded-full border-dotted border-gray-700 border-4 flex items-center justify-center text-2xl lg:text-4xl h-16 lg:h-24 w-16 lg:w-24" id="cdS">00</div>
<p class="text-center text-xs mt-2">Seconds</p>
</li>

</ul>
</div>
<div class="w-0 md:w-5/12 lg:w-1/2"></div>

<!-- Content -->
<p class="text-base mb-10 text-gray-200 md:text-right">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta reprehenderit delectus quasi eligendi maiores consectetur repellat necessitatibus libero deleniti quaerat debitis, odit earum modi. Magni porro iste dolores. </p>

<!-- Social media -->
<div class="w-full text-left flex">
<ul class="w-full flex place-content-center md:place-content-end gap-10 mx-auto text-gray-500">
<li>
<a href="#" class="text-lg hover:text-amber-500">
<i class="fab fa-facebook-f"></i>
</a>
</li>

<li>
<a href="#" class="text-lg hover:text-amber-500">
<i class="fab fa-twitter"></i>
</a>
</li>

<li>
<a href="#" class="text-lg hover:text-amber-500">
<i class="fab fa-youtube"></i>
</a>
</li>

<li>
<a href="#" class="text-lg hover:text-amber-500">
<i class="fab fa-instagram"></i>
</a>
</li>

</ul>
</div>

</div>
</div>
</div>
</header>

<script>
// Change the value of countDownEndDate to the day you want to end the count down
var countDownEndDate = "August 5, 2022 09:00:00";
var countDownEndDate = "August 5, 2024 09:00:00";

var endDate = new Date(countDownEndDate).getTime();

Expand Down

0 comments on commit c199ac1

Please sign in to comment.