366 lines
14 KiB
HTML
366 lines
14 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8" />
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
|
|
<title>Moraine lake sunset - Google Search</title>
|
||
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
||
|
|
<style>
|
||
|
|
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap");
|
||
|
|
body {
|
||
|
|
font-family: "Roboto", sans-serif;
|
||
|
|
}
|
||
|
|
.mountain-bg {
|
||
|
|
background: linear-gradient(
|
||
|
|
135deg,
|
||
|
|
#4fc3f7 0%,
|
||
|
|
#29b6f6 25%,
|
||
|
|
#0277bd 50%,
|
||
|
|
#01579b 75%,
|
||
|
|
#263238 100%
|
||
|
|
);
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body class="bg-white">
|
||
|
|
<!-- Header with mountain background -->
|
||
|
|
<div class="mountain-bg relative h-48 overflow-hidden">
|
||
|
|
<!-- Mountain silhouettes -->
|
||
|
|
<div class="absolute inset-0">
|
||
|
|
<svg viewBox="0 0 1200 200" class="w-full h-full">
|
||
|
|
<!-- Background mountains -->
|
||
|
|
<polygon
|
||
|
|
points="0,200 0,100 100,80 200,120 300,90 400,110 500,85 600,105 700,95 800,115 900,100 1000,120 1100,110 1200,130 1200,200"
|
||
|
|
fill="rgba(69,90,100,0.4)"
|
||
|
|
/>
|
||
|
|
<!-- Mid mountains -->
|
||
|
|
<polygon
|
||
|
|
points="0,200 0,120 80,100 180,140 280,110 380,130 480,105 580,125 680,115 780,135 880,125 980,145 1080,135 1200,155 1200,200"
|
||
|
|
fill="rgba(38,50,56,0.6)"
|
||
|
|
/>
|
||
|
|
<!-- Front mountains -->
|
||
|
|
<polygon
|
||
|
|
points="0,200 0,140 60,120 160,160 260,130 360,150 460,125 560,145 660,135 760,155 860,145 960,165 1060,155 1200,175 1200,200"
|
||
|
|
fill="rgba(38,50,56,0.8)"
|
||
|
|
/>
|
||
|
|
<!-- Snow caps -->
|
||
|
|
<polygon points="50,130 80,100 110,130" fill="white" opacity="0.9" />
|
||
|
|
<polygon
|
||
|
|
points="150,150 180,140 210,150"
|
||
|
|
fill="white"
|
||
|
|
opacity="0.9"
|
||
|
|
/>
|
||
|
|
<polygon
|
||
|
|
points="250,140 280,110 310,140"
|
||
|
|
fill="white"
|
||
|
|
opacity="0.9"
|
||
|
|
/>
|
||
|
|
<polygon
|
||
|
|
points="450,135 480,105 510,135"
|
||
|
|
fill="white"
|
||
|
|
opacity="0.9"
|
||
|
|
/>
|
||
|
|
<polygon
|
||
|
|
points="650,145 680,115 710,145"
|
||
|
|
fill="white"
|
||
|
|
opacity="0.9"
|
||
|
|
/>
|
||
|
|
<polygon
|
||
|
|
points="850,155 880,125 910,155"
|
||
|
|
fill="white"
|
||
|
|
opacity="0.9"
|
||
|
|
/>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Google logo and search bar -->
|
||
|
|
<div class="relative z-10 pt-8 px-4">
|
||
|
|
<div class="max-w-2xl mx-auto">
|
||
|
|
<!-- Google logo -->
|
||
|
|
<div class="mb-8">
|
||
|
|
<h1 class="text-white text-6xl font-normal tracking-tight">
|
||
|
|
Google
|
||
|
|
</h1>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Search bar -->
|
||
|
|
<div class="relative">
|
||
|
|
<div
|
||
|
|
class="bg-white rounded-full shadow-lg flex items-center px-4 py-3"
|
||
|
|
>
|
||
|
|
<input
|
||
|
|
type="text"
|
||
|
|
value="Moraine lake sunset"
|
||
|
|
class="flex-1 text-gray-900 text-lg outline-none px-2"
|
||
|
|
/>
|
||
|
|
<button class="p-2 hover:bg-gray-100 rounded-full">
|
||
|
|
<svg
|
||
|
|
class="w-6 h-6 text-gray-400"
|
||
|
|
fill="none"
|
||
|
|
stroke="currentColor"
|
||
|
|
viewBox="0 0 24 24"
|
||
|
|
>
|
||
|
|
<path
|
||
|
|
stroke-linecap="round"
|
||
|
|
stroke-linejoin="round"
|
||
|
|
stroke-width="2"
|
||
|
|
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
|
||
|
|
></path>
|
||
|
|
</svg>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- User info -->
|
||
|
|
<div class="absolute top-4 right-4 flex items-center space-x-4">
|
||
|
|
<svg
|
||
|
|
class="w-6 h-6 text-white opacity-70"
|
||
|
|
fill="currentColor"
|
||
|
|
viewBox="0 0 20 20"
|
||
|
|
>
|
||
|
|
<path
|
||
|
|
fill-rule="evenodd"
|
||
|
|
d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z"
|
||
|
|
clip-rule="evenodd"
|
||
|
|
></path>
|
||
|
|
</svg>
|
||
|
|
<div
|
||
|
|
class="w-6 h-6 bg-white bg-opacity-20 rounded grid grid-cols-3 gap-0.5 p-1"
|
||
|
|
>
|
||
|
|
<div class="bg-white bg-opacity-60 rounded-sm"></div>
|
||
|
|
<div class="bg-white bg-opacity-60 rounded-sm"></div>
|
||
|
|
<div class="bg-white bg-opacity-60 rounded-sm"></div>
|
||
|
|
<div class="bg-white bg-opacity-60 rounded-sm"></div>
|
||
|
|
<div class="bg-white bg-opacity-60 rounded-sm"></div>
|
||
|
|
<div class="bg-white bg-opacity-60 rounded-sm"></div>
|
||
|
|
<div class="bg-white bg-opacity-60 rounded-sm"></div>
|
||
|
|
<div class="bg-white bg-opacity-60 rounded-sm"></div>
|
||
|
|
<div class="bg-white bg-opacity-60 rounded-sm"></div>
|
||
|
|
</div>
|
||
|
|
<span class="text-white text-sm">aurelien.salomon@gmail.com</span>
|
||
|
|
<svg class="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 20 20">
|
||
|
|
<path
|
||
|
|
fill-rule="evenodd"
|
||
|
|
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
|
||
|
|
clip-rule="evenodd"
|
||
|
|
></path>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Navigation -->
|
||
|
|
<div class="bg-gray-700 border-b border-gray-600">
|
||
|
|
<div class="max-w-6xl mx-auto px-4">
|
||
|
|
<div class="flex items-center justify-between">
|
||
|
|
<div class="flex space-x-8">
|
||
|
|
<a
|
||
|
|
href="#"
|
||
|
|
class="text-blue-300 border-b-2 border-blue-300 py-3 px-1 text-sm font-medium"
|
||
|
|
>WEB</a
|
||
|
|
>
|
||
|
|
<a href="#" class="text-gray-300 hover:text-white py-3 px-1 text-sm"
|
||
|
|
>MAPS</a
|
||
|
|
>
|
||
|
|
<a href="#" class="text-gray-300 hover:text-white py-3 px-1 text-sm"
|
||
|
|
>IMAGES</a
|
||
|
|
>
|
||
|
|
<a href="#" class="text-gray-300 hover:text-white py-3 px-1 text-sm"
|
||
|
|
>VIDEOS</a
|
||
|
|
>
|
||
|
|
<div class="relative">
|
||
|
|
<a
|
||
|
|
href="#"
|
||
|
|
class="text-gray-300 hover:text-white py-3 px-1 text-sm flex items-center"
|
||
|
|
>
|
||
|
|
MORE
|
||
|
|
<svg
|
||
|
|
class="w-4 h-4 ml-1"
|
||
|
|
fill="currentColor"
|
||
|
|
viewBox="0 0 20 20"
|
||
|
|
>
|
||
|
|
<path
|
||
|
|
fill-rule="evenodd"
|
||
|
|
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
|
||
|
|
clip-rule="evenodd"
|
||
|
|
></path>
|
||
|
|
</svg>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
<a href="#" class="text-gray-300 hover:text-white py-3 px-1 text-sm"
|
||
|
|
>SEARCH TOOLS</a
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
<div class="text-gray-400 text-sm">
|
||
|
|
About 7,920,200 Results 0.18 seconds
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Main content -->
|
||
|
|
<div class="max-w-6xl mx-auto px-4 py-4 flex">
|
||
|
|
<!-- Left column - Search results -->
|
||
|
|
<div class="flex-1 max-w-2xl">
|
||
|
|
<!-- Result 1 -->
|
||
|
|
<div class="mb-6">
|
||
|
|
<div class="text-sm text-green-600 mb-1">
|
||
|
|
wikipedia.com/morainelake
|
||
|
|
</div>
|
||
|
|
<h3 class="text-xl text-blue-600 hover:underline cursor-pointer mb-2">
|
||
|
|
Moraine lake - Wikipedia
|
||
|
|
</h3>
|
||
|
|
<p class="text-sm text-gray-600 leading-relaxed">
|
||
|
|
Moraine Lake is a glacially-fed lake in Banff National Park, 14
|
||
|
|
kilometres outside the Village of Lake Louise, Alberta, Canada. It
|
||
|
|
is situated in the Valley of the Ten Peaks, at an elevation of
|
||
|
|
approximately 6,183 feet. The lake has a surface area of 5 square
|
||
|
|
kilometres. The lake, being glacially fed, does not reach its crest
|
||
|
|
until mid to ...
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Result 2 -->
|
||
|
|
<div class="mb-6">
|
||
|
|
<div class="text-sm text-green-600 mb-1">rockies.com</div>
|
||
|
|
<h3 class="text-xl text-blue-600 hover:underline cursor-pointer mb-2">
|
||
|
|
Best places to photograph rockies
|
||
|
|
</h3>
|
||
|
|
<p class="text-sm text-gray-600 leading-relaxed">
|
||
|
|
The light is usually best around sunrise and sunset, but interesting
|
||
|
|
photographs. Moraine Lake is about a 20 minute drive from Lake
|
||
|
|
Louise which is something ...
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Images section -->
|
||
|
|
<div class="mb-8">
|
||
|
|
<h3 class="text-xl text-gray-900 mb-4">
|
||
|
|
Images for Moraine lake sunset
|
||
|
|
</h3>
|
||
|
|
<div class="grid grid-cols-4 gap-2">
|
||
|
|
<div
|
||
|
|
class="aspect-square bg-gradient-to-br from-blue-400 to-orange-400 rounded overflow-hidden"
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
class="w-full h-full bg-gradient-to-t from-blue-900 via-blue-400 to-orange-300 relative"
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
class="absolute bottom-0 w-full h-1/3 bg-gradient-to-r from-gray-800 to-gray-600"
|
||
|
|
></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
class="aspect-square bg-gradient-to-br from-orange-500 to-red-600 rounded overflow-hidden"
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
class="w-full h-full bg-gradient-to-t from-gray-900 via-orange-500 to-yellow-400 relative"
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
class="absolute bottom-0 w-full h-1/3 bg-gradient-to-r from-gray-900 to-gray-700"
|
||
|
|
></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
class="aspect-square bg-gradient-to-br from-yellow-400 to-orange-500 rounded overflow-hidden"
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
class="w-full h-full bg-gradient-to-t from-blue-800 via-yellow-400 to-orange-300 relative"
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
class="absolute bottom-0 w-full h-1/3 bg-gradient-to-r from-gray-800 to-gray-600"
|
||
|
|
></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
class="aspect-square bg-gradient-to-br from-green-400 to-blue-500 rounded overflow-hidden"
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
class="w-full h-full bg-gradient-to-t from-green-800 via-blue-400 to-orange-200 relative"
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
class="absolute bottom-0 w-full h-1/3 bg-gradient-to-r from-gray-900 to-gray-700"
|
||
|
|
></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Result 3 -->
|
||
|
|
<div class="mb-6">
|
||
|
|
<div class="text-sm text-green-600 mb-1">estravel.com</div>
|
||
|
|
<h3 class="text-xl text-blue-600 hover:underline cursor-pointer mb-2">
|
||
|
|
Best point for sunset in Alberta
|
||
|
|
</h3>
|
||
|
|
<p class="text-sm text-gray-600 leading-relaxed">
|
||
|
|
Moraine Lake is only half the size of its nearby neighbour Lake
|
||
|
|
Louise, but perhaps even more scenic. It's a glacier-fed lake
|
||
|
|
situated in the beautiful valley of the ten ...
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Result 4 -->
|
||
|
|
<div class="mb-6">
|
||
|
|
<div class="text-sm text-green-600 mb-1">sunset.com</div>
|
||
|
|
<h3 class="text-xl text-blue-600 hover:underline cursor-pointer mb-2">
|
||
|
|
Sunset in the canada rocks
|
||
|
|
</h3>
|
||
|
|
<p class="text-sm text-gray-600 leading-relaxed">
|
||
|
|
Moraine Lake is only half the size of its nearby neighbour Lake
|
||
|
|
Louise, but perhaps even more scenic. It's a glacier-fed lake
|
||
|
|
situated in the beautiful valley of the ten ...
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Right column - Weather widget -->
|
||
|
|
<div class="ml-8 w-80">
|
||
|
|
<div class="bg-white rounded-lg shadow-sm border border-gray-200 p-4">
|
||
|
|
<div class="mb-4">
|
||
|
|
<h3 class="text-lg font-medium text-gray-900">Moraine lake</h3>
|
||
|
|
<p class="text-sm text-gray-500">Sunshine</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Weather chart -->
|
||
|
|
<div class="mb-4">
|
||
|
|
<div
|
||
|
|
class="relative h-32 bg-gradient-to-t from-yellow-300 via-yellow-400 to-blue-400 rounded-lg overflow-hidden"
|
||
|
|
>
|
||
|
|
<!-- Sun -->
|
||
|
|
<div
|
||
|
|
class="absolute top-4 right-8 w-8 h-8 bg-yellow-400 rounded-full border-4 border-yellow-300"
|
||
|
|
></div>
|
||
|
|
|
||
|
|
<!-- Time indicator -->
|
||
|
|
<div
|
||
|
|
class="absolute top-2 right-2 text-xs font-medium text-gray-700"
|
||
|
|
>
|
||
|
|
6:35 PM<br />
|
||
|
|
<span class="text-blue-600">Sunset</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Time markers -->
|
||
|
|
<div
|
||
|
|
class="absolute bottom-2 left-0 right-0 flex justify-between text-xs text-gray-600 px-2"
|
||
|
|
>
|
||
|
|
<span>6:00 AM</span>
|
||
|
|
<span>1:00 PM</span>
|
||
|
|
<span>8:00 PM</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Days -->
|
||
|
|
<div class="grid grid-cols-4 gap-2 text-center text-sm">
|
||
|
|
<div class="text-gray-900 font-medium">TODAY</div>
|
||
|
|
<div class="text-gray-500">THURSDAY</div>
|
||
|
|
<div class="text-gray-500">FRIDAY</div>
|
||
|
|
<div class="text-gray-500">SATURDAY</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|