feat: static mobile main page template
This commit is contained in:
efim
parent
4b2c6e4f62
commit
73804a0ed4
|
|
@ -522,34 +522,20 @@ video {
|
||||||
--tw-backdrop-sepia: ;
|
--tw-backdrop-sepia: ;
|
||||||
}
|
}
|
||||||
|
|
||||||
.absolute {
|
.my-8 {
|
||||||
position: absolute;
|
margin-top: 2rem;
|
||||||
|
margin-bottom: 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.relative {
|
.my-4 {
|
||||||
position: relative;
|
margin-top: 1rem;
|
||||||
}
|
margin-bottom: 1rem;
|
||||||
|
|
||||||
.z-\[1000\] {
|
|
||||||
z-index: 1000;
|
|
||||||
}
|
|
||||||
|
|
||||||
.float-left {
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.m-0 {
|
|
||||||
margin: 0px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.mr-2 {
|
.mr-2 {
|
||||||
margin-right: 0.5rem;
|
margin-right: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ml-2 {
|
|
||||||
margin-left: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mt-1 {
|
.mt-1 {
|
||||||
margin-top: 0.25rem;
|
margin-top: 0.25rem;
|
||||||
}
|
}
|
||||||
|
|
@ -566,99 +552,50 @@ video {
|
||||||
display: grid;
|
display: grid;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hidden {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.h-10 {
|
|
||||||
height: 2.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.h-20 {
|
|
||||||
height: 5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.h-32 {
|
|
||||||
height: 8rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.h-12 {
|
.h-12 {
|
||||||
height: 3rem;
|
height: 3rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.h-36 {
|
|
||||||
height: 9rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.h-14 {
|
.h-14 {
|
||||||
height: 3.5rem;
|
height: 3.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.h-5 {
|
.h-20 {
|
||||||
height: 1.25rem;
|
height: 5rem;
|
||||||
}
|
|
||||||
|
|
||||||
.h-8 {
|
|
||||||
height: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.h-16 {
|
|
||||||
height: 4rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.h-44 {
|
|
||||||
height: 11rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.h-48 {
|
.h-48 {
|
||||||
height: 12rem;
|
height: 12rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.h-60 {
|
.h-\[375px\] {
|
||||||
height: 15rem;
|
height: 375px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.h-52 {
|
.h-\[350px\] {
|
||||||
height: 13rem;
|
height: 350px;
|
||||||
}
|
|
||||||
|
|
||||||
.w-10 {
|
|
||||||
width: 2.5rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.w-16 {
|
.w-16 {
|
||||||
width: 4rem;
|
width: 4rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.w-2 {
|
.w-64 {
|
||||||
width: 0.5rem;
|
width: 16rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.w-5 {
|
.w-\[275px\] {
|
||||||
width: 1.25rem;
|
width: 275px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.w-full {
|
.w-full {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.w-64 {
|
|
||||||
width: 16rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.min-w-max {
|
|
||||||
min-width: -moz-max-content;
|
|
||||||
min-width: max-content;
|
|
||||||
}
|
|
||||||
|
|
||||||
.flex-grow {
|
.flex-grow {
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.list-none {
|
|
||||||
list-style-type: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.appearance-none {
|
.appearance-none {
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
-moz-appearance: none;
|
-moz-appearance: none;
|
||||||
|
|
@ -689,16 +626,30 @@ video {
|
||||||
justify-content: space-around;
|
justify-content: space-around;
|
||||||
}
|
}
|
||||||
|
|
||||||
.overflow-hidden {
|
.gap-8 {
|
||||||
overflow: hidden;
|
gap: 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.whitespace-nowrap {
|
.gap-10 {
|
||||||
white-space: nowrap;
|
gap: 2.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.rounded {
|
.space-y-1 > :not([hidden]) ~ :not([hidden]) {
|
||||||
border-radius: 0.25rem;
|
--tw-space-y-reverse: 0;
|
||||||
|
margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
|
||||||
|
margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
|
||||||
|
}
|
||||||
|
|
||||||
|
.space-y-5 > :not([hidden]) ~ :not([hidden]) {
|
||||||
|
--tw-space-y-reverse: 0;
|
||||||
|
margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
|
||||||
|
margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
|
||||||
|
}
|
||||||
|
|
||||||
|
.space-y-3 > :not([hidden]) ~ :not([hidden]) {
|
||||||
|
--tw-space-y-reverse: 0;
|
||||||
|
margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
|
||||||
|
margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
|
||||||
}
|
}
|
||||||
|
|
||||||
.rounded-lg {
|
.rounded-lg {
|
||||||
|
|
@ -709,24 +660,15 @@ video {
|
||||||
border-radius: 0.375rem;
|
border-radius: 0.375rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.rounded-t-lg {
|
||||||
|
border-top-left-radius: 0.5rem;
|
||||||
|
border-top-right-radius: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
.border {
|
.border {
|
||||||
border-width: 1px;
|
border-width: 1px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.border-none {
|
|
||||||
border-style: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.border-gray-300 {
|
|
||||||
--tw-border-opacity: 1;
|
|
||||||
border-color: rgb(209 213 219 / var(--tw-border-opacity));
|
|
||||||
}
|
|
||||||
|
|
||||||
.bg-cyan-300 {
|
|
||||||
--tw-bg-opacity: 1;
|
|
||||||
background-color: rgb(103 232 249 / var(--tw-bg-opacity));
|
|
||||||
}
|
|
||||||
|
|
||||||
.bg-very-light-gray {
|
.bg-very-light-gray {
|
||||||
--tw-bg-opacity: 1;
|
--tw-bg-opacity: 1;
|
||||||
background-color: hsl(0 0% 98% / var(--tw-bg-opacity));
|
background-color: hsl(0 0% 98% / var(--tw-bg-opacity));
|
||||||
|
|
@ -737,20 +679,8 @@ video {
|
||||||
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
|
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
|
||||||
}
|
}
|
||||||
|
|
||||||
.bg-transparent {
|
.p-8 {
|
||||||
background-color: transparent;
|
padding: 2rem;
|
||||||
}
|
|
||||||
|
|
||||||
.bg-clip-padding {
|
|
||||||
background-clip: padding-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-6 {
|
|
||||||
padding: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-4 {
|
|
||||||
padding: 1rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.px-4 {
|
.px-4 {
|
||||||
|
|
@ -758,87 +688,29 @@ video {
|
||||||
padding-right: 1rem;
|
padding-right: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.px-8 {
|
||||||
|
padding-left: 2rem;
|
||||||
|
padding-right: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
.px-6 {
|
.px-6 {
|
||||||
padding-left: 1.5rem;
|
padding-left: 1.5rem;
|
||||||
padding-right: 1.5rem;
|
padding-right: 1.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.py-2 {
|
.pb-8 {
|
||||||
padding-top: 0.5rem;
|
padding-bottom: 2rem;
|
||||||
padding-bottom: 0.5rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.pb-2 {
|
.text-2xl {
|
||||||
padding-bottom: 0.5rem;
|
font-size: 1.5rem;
|
||||||
}
|
line-height: 2rem;
|
||||||
|
|
||||||
.pt-2 {
|
|
||||||
padding-top: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pt-2\.5 {
|
|
||||||
padding-top: 0.625rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-left {
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-3xl {
|
|
||||||
font-size: 1.875rem;
|
|
||||||
line-height: 2.25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-lg {
|
|
||||||
font-size: 1.125rem;
|
|
||||||
line-height: 1.75rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-base {
|
|
||||||
font-size: 1rem;
|
|
||||||
line-height: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-sm {
|
|
||||||
font-size: 0.875rem;
|
|
||||||
line-height: 1.25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-xs {
|
|
||||||
font-size: 0.75rem;
|
|
||||||
line-height: 1rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.font-bold {
|
.font-bold {
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
|
|
||||||
.font-medium {
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
.font-normal {
|
|
||||||
font-weight: 400;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uppercase {
|
|
||||||
text-transform: uppercase;
|
|
||||||
}
|
|
||||||
|
|
||||||
.leading-normal {
|
|
||||||
line-height: 1.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-neutral-700 {
|
|
||||||
--tw-text-opacity: 1;
|
|
||||||
color: rgb(64 64 64 / var(--tw-text-opacity));
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-white {
|
|
||||||
--tw-text-opacity: 1;
|
|
||||||
color: rgb(255 255 255 / var(--tw-text-opacity));
|
|
||||||
}
|
|
||||||
|
|
||||||
.shadow {
|
.shadow {
|
||||||
--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
|
--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
|
||||||
--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
|
--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
|
||||||
|
|
@ -857,34 +729,12 @@ video {
|
||||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
||||||
}
|
}
|
||||||
|
|
||||||
.shadow-\[0_4px_9px_-4px_\#3b71ca\] {
|
|
||||||
--tw-shadow: 0 4px 9px -4px #3b71ca;
|
|
||||||
--tw-shadow-colored: 0 4px 9px -4px var(--tw-shadow-color);
|
|
||||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
|
||||||
}
|
|
||||||
|
|
||||||
.shadow-sm {
|
.shadow-sm {
|
||||||
--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
||||||
--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
|
--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
|
||||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
||||||
}
|
}
|
||||||
|
|
||||||
.transition {
|
|
||||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
|
|
||||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
|
|
||||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
|
|
||||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
||||||
transition-duration: 150ms;
|
|
||||||
}
|
|
||||||
|
|
||||||
.duration-150 {
|
|
||||||
transition-duration: 150ms;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ease-in-out {
|
|
||||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
html {
|
html {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
|
|
@ -925,125 +775,7 @@ html {
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hover\:bg-neutral-100:hover {
|
|
||||||
--tw-bg-opacity: 1;
|
|
||||||
background-color: rgb(245 245 245 / var(--tw-bg-opacity));
|
|
||||||
}
|
|
||||||
|
|
||||||
.hover\:shadow-\[0_8px_9px_-4px_rgba\(59\2c 113\2c 202\2c 0\.3\)\2c 0_4px_18px_0_rgba\(59\2c 113\2c 202\2c 0\.2\)\]:hover {
|
|
||||||
--tw-shadow: 0 8px 9px -4px rgba(59,113,202,0.3),0 4px 18px 0 rgba(59,113,202,0.2);
|
|
||||||
--tw-shadow-colored: 0 8px 9px -4px var(--tw-shadow-color), 0 4px 18px 0 var(--tw-shadow-color);
|
|
||||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
|
||||||
}
|
|
||||||
|
|
||||||
.focus\:border-indigo-500:focus {
|
|
||||||
--tw-border-opacity: 1;
|
|
||||||
border-color: rgb(99 102 241 / var(--tw-border-opacity));
|
|
||||||
}
|
|
||||||
|
|
||||||
.focus\:shadow-\[0_8px_9px_-4px_rgba\(59\2c 113\2c 202\2c 0\.3\)\2c 0_4px_18px_0_rgba\(59\2c 113\2c 202\2c 0\.2\)\]:focus {
|
|
||||||
--tw-shadow: 0 8px 9px -4px rgba(59,113,202,0.3),0 4px 18px 0 rgba(59,113,202,0.2);
|
|
||||||
--tw-shadow-colored: 0 8px 9px -4px var(--tw-shadow-color), 0 4px 18px 0 var(--tw-shadow-color);
|
|
||||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
|
||||||
}
|
|
||||||
|
|
||||||
.focus\:outline-none:focus {
|
.focus\:outline-none:focus {
|
||||||
outline: 2px solid transparent;
|
outline: 2px solid transparent;
|
||||||
outline-offset: 2px;
|
outline-offset: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.focus\:ring-0:focus {
|
|
||||||
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
|
|
||||||
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
|
|
||||||
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
|
|
||||||
}
|
|
||||||
|
|
||||||
.focus\:ring:focus {
|
|
||||||
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
|
|
||||||
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
|
|
||||||
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
|
|
||||||
}
|
|
||||||
|
|
||||||
.focus\:ring-indigo-200:focus {
|
|
||||||
--tw-ring-opacity: 1;
|
|
||||||
--tw-ring-color: rgb(199 210 254 / var(--tw-ring-opacity));
|
|
||||||
}
|
|
||||||
|
|
||||||
.active\:text-neutral-800:active {
|
|
||||||
--tw-text-opacity: 1;
|
|
||||||
color: rgb(38 38 38 / var(--tw-text-opacity));
|
|
||||||
}
|
|
||||||
|
|
||||||
.active\:no-underline:active {
|
|
||||||
text-decoration-line: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.active\:shadow-\[0_8px_9px_-4px_rgba\(59\2c 113\2c 202\2c 0\.3\)\2c 0_4px_18px_0_rgba\(59\2c 113\2c 202\2c 0\.2\)\]:active {
|
|
||||||
--tw-shadow: 0 8px 9px -4px rgba(59,113,202,0.3),0 4px 18px 0 rgba(59,113,202,0.2);
|
|
||||||
--tw-shadow-colored: 0 8px 9px -4px var(--tw-shadow-color), 0 4px 18px 0 var(--tw-shadow-color);
|
|
||||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
|
||||||
}
|
|
||||||
|
|
||||||
.disabled\:pointer-events-none:disabled {
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.disabled\:bg-transparent:disabled {
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.disabled\:text-neutral-400:disabled {
|
|
||||||
--tw-text-opacity: 1;
|
|
||||||
color: rgb(163 163 163 / var(--tw-text-opacity));
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (prefers-reduced-motion: reduce) {
|
|
||||||
.motion-reduce\:transition-none {
|
|
||||||
transition-property: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
|
||||||
.dark\:bg-neutral-700 {
|
|
||||||
--tw-bg-opacity: 1;
|
|
||||||
background-color: rgb(64 64 64 / var(--tw-bg-opacity));
|
|
||||||
}
|
|
||||||
|
|
||||||
.dark\:text-neutral-200 {
|
|
||||||
--tw-text-opacity: 1;
|
|
||||||
color: rgb(229 229 229 / var(--tw-text-opacity));
|
|
||||||
}
|
|
||||||
|
|
||||||
.dark\:shadow-\[0_4px_9px_-4px_rgba\(59\2c 113\2c 202\2c 0\.5\)\] {
|
|
||||||
--tw-shadow: 0 4px 9px -4px rgba(59,113,202,0.5);
|
|
||||||
--tw-shadow-colored: 0 4px 9px -4px var(--tw-shadow-color);
|
|
||||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
|
||||||
}
|
|
||||||
|
|
||||||
.dark\:hover\:bg-neutral-600:hover {
|
|
||||||
--tw-bg-opacity: 1;
|
|
||||||
background-color: rgb(82 82 82 / var(--tw-bg-opacity));
|
|
||||||
}
|
|
||||||
|
|
||||||
.dark\:hover\:shadow-\[0_8px_9px_-4px_rgba\(59\2c 113\2c 202\2c 0\.2\)\2c 0_4px_18px_0_rgba\(59\2c 113\2c 202\2c 0\.1\)\]:hover {
|
|
||||||
--tw-shadow: 0 8px 9px -4px rgba(59,113,202,0.2),0 4px 18px 0 rgba(59,113,202,0.1);
|
|
||||||
--tw-shadow-colored: 0 8px 9px -4px var(--tw-shadow-color), 0 4px 18px 0 var(--tw-shadow-color);
|
|
||||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
|
||||||
}
|
|
||||||
|
|
||||||
.dark\:focus\:shadow-\[0_8px_9px_-4px_rgba\(59\2c 113\2c 202\2c 0\.2\)\2c 0_4px_18px_0_rgba\(59\2c 113\2c 202\2c 0\.1\)\]:focus {
|
|
||||||
--tw-shadow: 0 8px 9px -4px rgba(59,113,202,0.2),0 4px 18px 0 rgba(59,113,202,0.1);
|
|
||||||
--tw-shadow-colored: 0 8px 9px -4px var(--tw-shadow-color), 0 4px 18px 0 var(--tw-shadow-color);
|
|
||||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
|
||||||
}
|
|
||||||
|
|
||||||
.dark\:active\:shadow-\[0_8px_9px_-4px_rgba\(59\2c 113\2c 202\2c 0\.2\)\2c 0_4px_18px_0_rgba\(59\2c 113\2c 202\2c 0\.1\)\]:active {
|
|
||||||
--tw-shadow: 0 8px 9px -4px rgba(59,113,202,0.2),0 4px 18px 0 rgba(59,113,202,0.1);
|
|
||||||
--tw-shadow-colored: 0 8px 9px -4px var(--tw-shadow-color), 0 4px 18px 0 var(--tw-shadow-color);
|
|
||||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.\[\&\[data-te-dropdown-show\]\]\:block[data-te-dropdown-show] {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
|
||||||
|
|
@ -19,39 +19,122 @@
|
||||||
your experience.
|
your experience.
|
||||||
</p>
|
</p>
|
||||||
<![endif]-->
|
<![endif]-->
|
||||||
<main>
|
<header
|
||||||
<header
|
class="bg-white h-20 flex flex-row justify-between items-center px-4 shadow-md"
|
||||||
class="bg-white h-20 flex flex-row justify-between items-center px-4 shadow-md"
|
>
|
||||||
|
<h1 class="font-bold">Where in the world?</h1>
|
||||||
|
<p>Dark Mode</p>
|
||||||
|
</header>
|
||||||
|
<nav class="flex flex-col px-6 my-4 justify-around h-48">
|
||||||
|
<form method="post" id="search-country" action="">
|
||||||
|
<div class="flex flex-row bg-white shadow-md h-14 rounded-lg">
|
||||||
|
<p class="w-16 grid place-content-center">IC</p>
|
||||||
|
<input
|
||||||
|
class="appearance-none flex-grow focus:outline-none mr-2"
|
||||||
|
type="text"
|
||||||
|
name="country-name"
|
||||||
|
placeholder="Search for a country..."
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
<form>
|
||||||
|
<select
|
||||||
|
class="block w-62 mt-1 h-12 w-64 bg-white shadow-md rounded-md shadow-sm focus:outline-none"
|
||||||
|
>
|
||||||
|
<option value="" selected disabled>Filter by Region</option>
|
||||||
|
<option value="Africa">Africa</option>
|
||||||
|
<option value="Americas">Americas</option>
|
||||||
|
<option value="Asia">Asia</option>
|
||||||
|
<option value="Europe">Europe</option>
|
||||||
|
<option value="Oceania">Oceania</option>
|
||||||
|
</select>
|
||||||
|
</form>
|
||||||
|
</nav>
|
||||||
|
<main class="flex flex-col items-center gap-10 pb-8">
|
||||||
|
<article
|
||||||
|
id="germany"
|
||||||
|
class="bg-white h-[350px] w-[275px] border flex flex-col rounded-lg shadow-lg"
|
||||||
>
|
>
|
||||||
<h1 class="font-bold">Where in the world?</h1>
|
<img
|
||||||
<p>Dark Mode</p>
|
src="https://flagcdn.com/de.svg"
|
||||||
</header>
|
alt="flag of Germany"
|
||||||
<nav class="flex flex-col px-4 justify-around h-48">
|
class="rounded-t-lg"
|
||||||
<form method="post" id="search-country" action="">
|
/>
|
||||||
<div class="flex flex-row bg-white shadow-md h-14 rounded-lg">
|
<section class="p-8 space-y-3">
|
||||||
<p class="w-16 grid place-content-center">IC</p>
|
<h2 class="text-2xl font-bold">Germany</h2>
|
||||||
<input
|
<dl class="space-y-1">
|
||||||
class="appearance-none flex-grow focus:outline-none mr-2"
|
<div class="flex">
|
||||||
type="text"
|
<dt class="font-bold mr-2">Population:</dt>
|
||||||
name="country-name"
|
<dd>81,771,900</dd>
|
||||||
placeholder="Search for a country..."
|
</div>
|
||||||
/>
|
<div class="flex">
|
||||||
</div>
|
<dt class="font-bold mr-2">Region:</dt>
|
||||||
</form>
|
<dd>Europe</dd>
|
||||||
<form>
|
</div>
|
||||||
<select
|
<div class="flex">
|
||||||
class="block w-full mt-1 h-12 w-64 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none"
|
<dt class="font-bold mr-2">Capital:</dt>
|
||||||
>
|
<dd>Berlin</dd>
|
||||||
<option value="" selected disabled>Filter by Region</option>
|
</div>
|
||||||
<option value="option1">Option 1</option>
|
</dl>
|
||||||
<option value="option2">Option 2</option>
|
</section>
|
||||||
<option value="option3">Option 3</option>
|
|
||||||
</select>
|
|
||||||
</form>
|
|
||||||
</nav>
|
|
||||||
<article>
|
|
||||||
<h1 class="text-3xl">Hello!</h1>
|
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
|
<article
|
||||||
|
id="usa"
|
||||||
|
class="bg-white h-[350px] w-[275px] border flex flex-col rounded-lg shadow-lg"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
src="https://flagcdn.com/us.svg"
|
||||||
|
alt="flag of the USA"
|
||||||
|
class="rounded-t-lg"
|
||||||
|
/>
|
||||||
|
<section class="p-8 space-y-3">
|
||||||
|
<h2 class="text-2xl font-bold">United States of America</h2>
|
||||||
|
<dl class="space-y-1">
|
||||||
|
<div class="flex">
|
||||||
|
<dt class="font-bold mr-2">Population:</dt>
|
||||||
|
<dd>329,484,123</dd>
|
||||||
|
</div>
|
||||||
|
<div class="flex">
|
||||||
|
<dt class="font-bold mr-2">Region:</dt>
|
||||||
|
<dd>Americas</dd>
|
||||||
|
</div>
|
||||||
|
<div class="flex">
|
||||||
|
<dt class="font-bold mr-2">Capital:</dt>
|
||||||
|
<dd>Washington, D.C.</dd>
|
||||||
|
</div>
|
||||||
|
</dl>
|
||||||
|
</section>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article
|
||||||
|
id="Brazil"
|
||||||
|
class="bg-white h-[350px] w-[275px] border flex flex-col rounded-lg shadow-lg"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
src="https://flagcdn.com/br.svg"
|
||||||
|
alt="flag of Germany"
|
||||||
|
class="rounded-t-lg"
|
||||||
|
/>
|
||||||
|
<section class="p-8 space-y-3">
|
||||||
|
<h2 class="text-2xl font-bold">Brazil</h2>
|
||||||
|
<dl class="space-y-1">
|
||||||
|
<div class="flex">
|
||||||
|
<dt class="font-bold mr-2">Population:</dt>
|
||||||
|
<dd>212,559,409</dd>
|
||||||
|
</div>
|
||||||
|
<div class="flex">
|
||||||
|
<dt class="font-bold mr-2">Region:</dt>
|
||||||
|
<dd>Americas</dd>
|
||||||
|
</div>
|
||||||
|
<div class="flex">
|
||||||
|
<dt class="font-bold mr-2">Capital:</dt>
|
||||||
|
<dd>Brasília</dd>
|
||||||
|
</div>
|
||||||
|
</dl>
|
||||||
|
</section>
|
||||||
|
</article>
|
||||||
|
|
||||||
</main>
|
</main>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue