317 lines
12 KiB
PHP
317 lines
12 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
<title>Karudhaas | Preview</title>
|
|
<meta name="description" content="Discover Stories,Daily news and inspiration for maldivian readers." />
|
|
<meta name=" twitter:title" content="Karudhaas" />
|
|
<meta name="twitter:description" content="Discover Stories,Daily news and inspiration for maldivian readers." />
|
|
<meta name="twitter:site" content="https://karudhaas.net" />
|
|
<meta name="twitter:image" content="/images/ogi.jpg">
|
|
<meta property="og:locale" content="mv" />
|
|
<meta property="og:type" content="website" />
|
|
<meta property="og:title" content="Karudhaas">
|
|
<meta property="og:description" content="Discover Stories,Daily news and inspiration for maldivian readers." />
|
|
<meta property="og:url" content="https://karudhaas.net" />
|
|
<meta property="og:site_name" content="karudhaas.net" />
|
|
<meta property="og:image" content="/images/og.jpg">
|
|
|
|
<link rel="stylesheet" href="https://unpkg.com/tailwindcss/dist/tailwind.min.css">
|
|
|
|
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700" rel="stylesheet">
|
|
<link href="/css/styles.css" rel="stylesheet">
|
|
<style>
|
|
.slide-in-bottom {
|
|
-webkit-animation: slide-in-bottom .5s cubic-bezier(.25, .46, .45, .94) both;
|
|
animation: slide-in-bottom .5s cubic-bezier(.25, .46, .45, .94) both
|
|
}
|
|
|
|
.slide-in-bottom-h1 {
|
|
-webkit-animation: slide-in-bottom .5s cubic-bezier(.25, .46, .45, .94) .5s both;
|
|
animation: slide-in-bottom .5s cubic-bezier(.25, .46, .45, .94) .5s both
|
|
}
|
|
|
|
.slide-in-bottom-subtitle {
|
|
-webkit-animation: slide-in-bottom .5s cubic-bezier(.25, .46, .45, .94) .75s both;
|
|
animation: slide-in-bottom .5s cubic-bezier(.25, .46, .45, .94) .75s both
|
|
}
|
|
|
|
.fade-in {
|
|
-webkit-animation: fade-in 1.2s cubic-bezier(.39, .575, .565, 1.000) 1s both;
|
|
animation: fade-in 1.2s cubic-bezier(.39, .575, .565, 1.000) 1s both
|
|
}
|
|
|
|
.bounce-top-icons {
|
|
-webkit-animation: bounce-top .9s 1s both;
|
|
animation: bounce-top .9s 1s both
|
|
}
|
|
|
|
@-webkit-keyframes slide-in-bottom {
|
|
0% {
|
|
-webkit-transform: translateY(1000px);
|
|
transform: translateY(1000px);
|
|
opacity: 0
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: translateY(0);
|
|
transform: translateY(0);
|
|
opacity: 1
|
|
}
|
|
}
|
|
|
|
@keyframes slide-in-bottom {
|
|
0% {
|
|
-webkit-transform: translateY(1000px);
|
|
transform: translateY(1000px);
|
|
opacity: 0
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: translateY(0);
|
|
transform: translateY(0);
|
|
opacity: 1
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes bounce-top {
|
|
0% {
|
|
-webkit-transform: translateY(-45px);
|
|
transform: translateY(-45px);
|
|
-webkit-animation-timing-function: ease-in;
|
|
animation-timing-function: ease-in;
|
|
opacity: 1
|
|
}
|
|
|
|
24% {
|
|
opacity: 1
|
|
}
|
|
|
|
40% {
|
|
-webkit-transform: translateY(-24px);
|
|
transform: translateY(-24px);
|
|
-webkit-animation-timing-function: ease-in;
|
|
animation-timing-function: ease-in
|
|
}
|
|
|
|
65% {
|
|
-webkit-transform: translateY(-12px);
|
|
transform: translateY(-12px);
|
|
-webkit-animation-timing-function: ease-in;
|
|
animation-timing-function: ease-in
|
|
}
|
|
|
|
82% {
|
|
-webkit-transform: translateY(-6px);
|
|
transform: translateY(-6px);
|
|
-webkit-animation-timing-function: ease-in;
|
|
animation-timing-function: ease-in
|
|
}
|
|
|
|
93% {
|
|
-webkit-transform: translateY(-4px);
|
|
transform: translateY(-4px);
|
|
-webkit-animation-timing-function: ease-in;
|
|
animation-timing-function: ease-in
|
|
}
|
|
|
|
25%,
|
|
55%,
|
|
75%,
|
|
87% {
|
|
-webkit-transform: translateY(0);
|
|
transform: translateY(0);
|
|
-webkit-animation-timing-function: ease-out;
|
|
animation-timing-function: ease-out
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: translateY(0);
|
|
transform: translateY(0);
|
|
-webkit-animation-timing-function: ease-out;
|
|
animation-timing-function: ease-out;
|
|
opacity: 1
|
|
}
|
|
}
|
|
|
|
@keyframes bounce-top {
|
|
0% {
|
|
-webkit-transform: translateY(-45px);
|
|
transform: translateY(-45px);
|
|
-webkit-animation-timing-function: ease-in;
|
|
animation-timing-function: ease-in;
|
|
opacity: 1
|
|
}
|
|
|
|
24% {
|
|
opacity: 1
|
|
}
|
|
|
|
40% {
|
|
-webkit-transform: translateY(-24px);
|
|
transform: translateY(-24px);
|
|
-webkit-animation-timing-function: ease-in;
|
|
animation-timing-function: ease-in
|
|
}
|
|
|
|
65% {
|
|
-webkit-transform: translateY(-12px);
|
|
transform: translateY(-12px);
|
|
-webkit-animation-timing-function: ease-in;
|
|
animation-timing-function: ease-in
|
|
}
|
|
|
|
82% {
|
|
-webkit-transform: translateY(-6px);
|
|
transform: translateY(-6px);
|
|
-webkit-animation-timing-function: ease-in;
|
|
animation-timing-function: ease-in
|
|
}
|
|
|
|
93% {
|
|
-webkit-transform: translateY(-4px);
|
|
transform: translateY(-4px);
|
|
-webkit-animation-timing-function: ease-in;
|
|
animation-timing-function: ease-in
|
|
}
|
|
|
|
25%,
|
|
55%,
|
|
75%,
|
|
87% {
|
|
-webkit-transform: translateY(0);
|
|
transform: translateY(0);
|
|
-webkit-animation-timing-function: ease-out;
|
|
animation-timing-function: ease-out
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: translateY(0);
|
|
transform: translateY(0);
|
|
-webkit-animation-timing-function: ease-out;
|
|
animation-timing-function: ease-out;
|
|
opacity: 1
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes fade-in {
|
|
0% {
|
|
opacity: 0
|
|
}
|
|
|
|
100% {
|
|
opacity: 1
|
|
}
|
|
}
|
|
|
|
@keyframes fade-in {
|
|
0% {
|
|
opacity: 0
|
|
}
|
|
|
|
100% {
|
|
opacity: 1
|
|
}
|
|
}
|
|
</style>
|
|
|
|
</head>
|
|
|
|
|
|
<body class="leading-normal tracking-normal text-gray-900" style="font-family: 'Source Sans Pro', sans-serif;">
|
|
|
|
|
|
|
|
<div class="h-screen pb-14 bg-right bg-cover">
|
|
<!--Nav-->
|
|
<div class="w-full container mx-auto p-6">
|
|
|
|
<div class="w-full flex items-center justify-between">
|
|
<a class="flex items-center text-indigo-400 no-underline hover:no-underline font-bold text-2xl lg:text-4xl"
|
|
href="/">
|
|
<img src="/images/logo.png" class="w-24">
|
|
</a>
|
|
|
|
<div class="flex w-1/2 justify-end content-center">
|
|
<a class="inline-block text-gray-300 no-underline hover:text-gray-800 hover:text-underline text-center h-10 p-2 md:h-auto md:p-4"
|
|
data-tippy-content="@twitter_handle"
|
|
href="https://twitter.com/intent/tweet?url=https://karudhaas.net">
|
|
<svg class="fill-current h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
|
|
<path
|
|
d="M30.063 7.313c-.813 1.125-1.75 2.125-2.875 2.938v.75c0 1.563-.188 3.125-.688 4.625a15.088 15.088 0 0 1-2.063 4.438c-.875 1.438-2 2.688-3.25 3.813a15.015 15.015 0 0 1-4.625 2.563c-1.813.688-3.75 1-5.75 1-3.25 0-6.188-.875-8.875-2.625.438.063.875.125 1.375.125 2.688 0 5.063-.875 7.188-2.5-1.25 0-2.375-.375-3.375-1.125s-1.688-1.688-2.063-2.875c.438.063.813.125 1.125.125.5 0 1-.063 1.5-.25-1.313-.25-2.438-.938-3.313-1.938a5.673 5.673 0 0 1-1.313-3.688v-.063c.813.438 1.688.688 2.625.688a5.228 5.228 0 0 1-1.875-2c-.5-.875-.688-1.813-.688-2.75 0-1.063.25-2.063.75-2.938 1.438 1.75 3.188 3.188 5.25 4.25s4.313 1.688 6.688 1.813a5.579 5.579 0 0 1 1.5-5.438c1.125-1.125 2.5-1.688 4.125-1.688s3.063.625 4.188 1.813a11.48 11.48 0 0 0 3.688-1.375c-.438 1.375-1.313 2.438-2.563 3.188 1.125-.125 2.188-.438 3.313-.875z">
|
|
</path>
|
|
</svg>
|
|
</a>
|
|
<a class="inline-block text-gray-300 no-underline hover:text-gray-800 hover:text-underline text-center h-10 p-2 md:h-auto md:p-4 "
|
|
data-tippy-content="#facebook_id"
|
|
href="https://www.facebook.com/sharer/sharer.php?u=https://karudhaas.net">
|
|
<svg class="fill-current h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
|
|
<path d="M19 6h5V0h-5c-3.86 0-7 3.14-7 7v3H8v6h4v16h6V16h5l1-6h-6V7c0-.542.458-1 1-1z">
|
|
</path>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!--Main-->
|
|
<div
|
|
class="container pt-24 md:pt-48 px-6 mx-auto flex flex-wrap flex-row-reverse flex-col md:flex-row items-center">
|
|
|
|
<!--Left Col-->
|
|
<div class="flex flex-col w-full xl:w-2/5 justify-center lg:items-start overflow-y-hidden">
|
|
|
|
<div class="w-16 bg-red-600 rounded-full py-1 px-4 font-bold text-white">
|
|
Beta
|
|
</div>
|
|
|
|
<div class="my-4 slide-in-bottom-h1 flex justify-center">
|
|
<img src="/images/karudhaas.png" class="w-64">
|
|
</div>
|
|
<p class="leading-normal text-base md:text-2xl mb-8 text-right md:text-right slide-in-bottom-subtitle MvTyper"
|
|
style="direction: rtl;">
|
|
ދުވަހުގެ ޚަބަރު، ތަފާތު ވާހަކަތައް އަދި އެކިމަޢުލޫތަށް އެއްތަނަކުން
|
|
</p>
|
|
|
|
<p class="text-gray-400 font-bold pb-8 lg:pb-6 text-center md:text-left fade-in">Download our app:</p>
|
|
<p class="text-gray-600">Please note that the app is only currently available for android. and the
|
|
application is on beta.</p>
|
|
<div class="flex w-full justify-center md:justify-start pb-24 lg:pb-0 fade-in">
|
|
<a href="/download/android" class="bg-gray-800 p-4 rounded hover:bg-gray-700 cursor-pointer mt-3">
|
|
<h2 class="text-white font-bold">Download</h2>
|
|
</a>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!--Right Col-->
|
|
<div class="w-full xl:w-3/5 py-6 overflow-y-hidden">
|
|
<img class="w-full mx-auto lg:mr-0 slide-in-bottom" src="/images/cover.png">
|
|
</div>
|
|
|
|
<!--Footer-->
|
|
<div class="w-full pt-16 pb-6 text-sm text-center md:text-left fade-in">
|
|
<a class="text-gray-500 no-underline hover:no-underline" href="#">© Karudhaas 2020</a>
|
|
|
|
<p class="text-gray-600">Made with ❤️ in Maldives. By <span><a href="https://github.com/jinas123"
|
|
class="text-blue-600 hover:underline">@jinas123</a>, <a href="https://github.com/Dharisd"
|
|
class="text-blue-600 hover:underline">@dharisd</a>
|
|
</span></p>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</body>
|
|
|
|
</html> |