added sevice ,portfolio , layer,slider component's and added some more template not much tho, fixed some responsive issue's in header component's
This commit is contained in:
merajjahir
376
dist/tailshape.css
vendored
376
dist/tailshape.css
vendored
@@ -668,6 +668,10 @@ Ensure the default browser behavior of the `hidden` attribute.
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
.-right-7 {
|
||||
right: -1.75rem;
|
||||
}
|
||||
|
||||
.-bottom-5 {
|
||||
bottom: -1.25rem;
|
||||
}
|
||||
@@ -696,88 +700,16 @@ Ensure the default browser behavior of the `hidden` attribute.
|
||||
left: -0.25rem;
|
||||
}
|
||||
|
||||
.-top-2 {
|
||||
top: -0.5rem;
|
||||
.top-5 {
|
||||
top: 1.25rem;
|
||||
}
|
||||
|
||||
.-top-20 {
|
||||
top: -5rem;
|
||||
.right-5 {
|
||||
right: 1.25rem;
|
||||
}
|
||||
|
||||
.top-20 {
|
||||
top: 5rem;
|
||||
}
|
||||
|
||||
.left-10 {
|
||||
left: 2.5rem;
|
||||
}
|
||||
|
||||
.right-10 {
|
||||
right: 2.5rem;
|
||||
}
|
||||
|
||||
.left-2 {
|
||||
left: 0.5rem;
|
||||
}
|
||||
|
||||
.left-1 {
|
||||
left: 0.25rem;
|
||||
}
|
||||
|
||||
.left-20 {
|
||||
left: 5rem;
|
||||
}
|
||||
|
||||
.right-20 {
|
||||
right: 5rem;
|
||||
}
|
||||
|
||||
.right-3 {
|
||||
right: 0.75rem;
|
||||
}
|
||||
|
||||
.right-32 {
|
||||
right: 8rem;
|
||||
}
|
||||
|
||||
.right-2\/4 {
|
||||
right: 50%;
|
||||
}
|
||||
|
||||
.right-1\/4 {
|
||||
right: 25%;
|
||||
}
|
||||
|
||||
.right-3\/4 {
|
||||
right: 75%;
|
||||
}
|
||||
|
||||
.left-3\/4 {
|
||||
left: 75%;
|
||||
}
|
||||
|
||||
.right-\[\] {
|
||||
right: ;
|
||||
}
|
||||
|
||||
.right-\[20\] {
|
||||
right: 20;
|
||||
}
|
||||
|
||||
.right-\[20px\] {
|
||||
right: 20px;
|
||||
}
|
||||
|
||||
.right-\[200px\] {
|
||||
right: 200px;
|
||||
}
|
||||
|
||||
.right-\[250px\] {
|
||||
right: 250px;
|
||||
}
|
||||
|
||||
.top-10 {
|
||||
top: 2.5rem;
|
||||
.left-5 {
|
||||
left: 1.25rem;
|
||||
}
|
||||
|
||||
.z-20 {
|
||||
@@ -920,6 +852,10 @@ Ensure the default browser behavior of the `hidden` attribute.
|
||||
margin: -1rem;
|
||||
}
|
||||
|
||||
.m-5 {
|
||||
margin: 1.25rem;
|
||||
}
|
||||
|
||||
.mx-20 {
|
||||
margin-left: 5rem;
|
||||
margin-right: 5rem;
|
||||
@@ -1030,11 +966,6 @@ Ensure the default browser behavior of the `hidden` attribute.
|
||||
margin-right: 4rem;
|
||||
}
|
||||
|
||||
.mx-8 {
|
||||
margin-left: 2rem;
|
||||
margin-right: 2rem;
|
||||
}
|
||||
|
||||
.mx-0 {
|
||||
margin-left: 0px;
|
||||
margin-right: 0px;
|
||||
@@ -1070,6 +1001,11 @@ Ensure the default browser behavior of the `hidden` attribute.
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.mx-8 {
|
||||
margin-left: 2rem;
|
||||
margin-right: 2rem;
|
||||
}
|
||||
|
||||
.my-20 {
|
||||
margin-top: 5rem;
|
||||
margin-bottom: 5rem;
|
||||
@@ -1427,6 +1363,10 @@ Ensure the default browser behavior of the `hidden` attribute.
|
||||
margin-right: -0px;
|
||||
}
|
||||
|
||||
.-mt-12 {
|
||||
margin-top: -3rem;
|
||||
}
|
||||
|
||||
.block {
|
||||
display: block;
|
||||
}
|
||||
@@ -1615,10 +1555,22 @@ Ensure the default browser behavior of the `hidden` attribute.
|
||||
height: 0.375rem;
|
||||
}
|
||||
|
||||
.h-5\/6 {
|
||||
height: 83.333333%;
|
||||
}
|
||||
|
||||
.h-4\/5 {
|
||||
height: 80%;
|
||||
}
|
||||
|
||||
.max-h-0 {
|
||||
max-height: 0px;
|
||||
}
|
||||
|
||||
.max-h-96 {
|
||||
max-height: 24rem;
|
||||
}
|
||||
|
||||
.max-h-full {
|
||||
max-height: 100%;
|
||||
}
|
||||
@@ -1849,6 +1801,18 @@ Ensure the default browser behavior of the `hidden` attribute.
|
||||
width: 0.375rem;
|
||||
}
|
||||
|
||||
.w-11 {
|
||||
width: 2.75rem;
|
||||
}
|
||||
|
||||
.w-4\/6 {
|
||||
width: 66.666667%;
|
||||
}
|
||||
|
||||
.w-1\/6 {
|
||||
width: 16.666667%;
|
||||
}
|
||||
|
||||
.min-w-full {
|
||||
min-width: 100%;
|
||||
}
|
||||
@@ -1945,6 +1909,12 @@ Ensure the default browser behavior of the `hidden` attribute.
|
||||
max-width: 1340px;
|
||||
}
|
||||
|
||||
.max-w-fit {
|
||||
max-width: -webkit-fit-content;
|
||||
max-width: -moz-fit-content;
|
||||
max-width: fit-content;
|
||||
}
|
||||
|
||||
.flex-1 {
|
||||
flex: 1 1 0%;
|
||||
}
|
||||
@@ -2041,6 +2011,26 @@ Ensure the default browser behavior of the `hidden` attribute.
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
|
||||
.-translate-x-1\/4 {
|
||||
--tw-translate-x: -25%;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
|
||||
.translate-x-1\/4 {
|
||||
--tw-translate-x: 25%;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
|
||||
.translate-x-6 {
|
||||
--tw-translate-x: 1.5rem;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
|
||||
.-translate-y-6 {
|
||||
--tw-translate-y: -1.5rem;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
|
||||
.rotate-180 {
|
||||
--tw-rotate: 180deg;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
@@ -2076,6 +2066,16 @@ Ensure the default browser behavior of the `hidden` attribute.
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
|
||||
.-rotate-2 {
|
||||
--tw-rotate: -2deg;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
|
||||
.rotate-2 {
|
||||
--tw-rotate: 2deg;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
|
||||
.-skew-x-3 {
|
||||
--tw-skew-x: -3deg;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
@@ -2131,6 +2131,16 @@ Ensure the default browser behavior of the `hidden` attribute.
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
|
||||
.scale-x-105 {
|
||||
--tw-scale-x: 1.05;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
|
||||
.scale-y-95 {
|
||||
--tw-scale-y: .95;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
|
||||
.transform {
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
@@ -2212,6 +2222,11 @@ Ensure the default browser behavior of the `hidden` attribute.
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.cursor-grab {
|
||||
cursor: -webkit-grab;
|
||||
cursor: grab;
|
||||
}
|
||||
|
||||
.select-none {
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
@@ -2759,6 +2774,11 @@ Ensure the default browser behavior of the `hidden` attribute.
|
||||
border-bottom-right-radius: 9999px;
|
||||
}
|
||||
|
||||
.rounded-t-none {
|
||||
border-top-left-radius: 0px;
|
||||
border-top-right-radius: 0px;
|
||||
}
|
||||
|
||||
.rounded-tl {
|
||||
border-top-left-radius: 0.25rem;
|
||||
}
|
||||
@@ -2855,6 +2875,14 @@ Ensure the default browser behavior of the `hidden` attribute.
|
||||
border-right-width: 0px;
|
||||
}
|
||||
|
||||
.border-t-4 {
|
||||
border-top-width: 4px;
|
||||
}
|
||||
|
||||
.border-b-8 {
|
||||
border-bottom-width: 8px;
|
||||
}
|
||||
|
||||
.border-solid {
|
||||
border-style: solid;
|
||||
}
|
||||
@@ -3043,6 +3071,16 @@ Ensure the default browser behavior of the `hidden` attribute.
|
||||
border-color: rgb(20 184 166 / var(--tw-border-opacity));
|
||||
}
|
||||
|
||||
.border-indigo-600 {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(79 70 229 / var(--tw-border-opacity));
|
||||
}
|
||||
|
||||
.border-teal-400 {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(45 212 191 / var(--tw-border-opacity));
|
||||
}
|
||||
|
||||
.border-r-gray-200 {
|
||||
--tw-border-opacity: 1;
|
||||
border-right-color: rgb(229 231 235 / var(--tw-border-opacity));
|
||||
@@ -3603,6 +3641,10 @@ Ensure the default browser behavior of the `hidden` attribute.
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.bg-top {
|
||||
background-position: top;
|
||||
}
|
||||
|
||||
.bg-no-repeat {
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
@@ -3631,6 +3673,10 @@ Ensure the default browser behavior of the `hidden` attribute.
|
||||
fill: #1f2937;
|
||||
}
|
||||
|
||||
.fill-red-500 {
|
||||
fill: #ef4444;
|
||||
}
|
||||
|
||||
.stroke-gray-500 {
|
||||
stroke: #6b7280;
|
||||
}
|
||||
@@ -3639,6 +3685,10 @@ Ensure the default browser behavior of the `hidden` attribute.
|
||||
stroke: currentColor;
|
||||
}
|
||||
|
||||
.stroke-gray-300 {
|
||||
stroke: #d1d5db;
|
||||
}
|
||||
|
||||
.stroke-2 {
|
||||
stroke-width: 2;
|
||||
}
|
||||
@@ -3648,6 +3698,11 @@ Ensure the default browser behavior of the `hidden` attribute.
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.object-fill {
|
||||
-o-object-fit: fill;
|
||||
object-fit: fill;
|
||||
}
|
||||
|
||||
.object-center {
|
||||
-o-object-position: center;
|
||||
object-position: center;
|
||||
@@ -3702,6 +3757,10 @@ Ensure the default browser behavior of the `hidden` attribute.
|
||||
padding: 7rem;
|
||||
}
|
||||
|
||||
.p-24 {
|
||||
padding: 6rem;
|
||||
}
|
||||
|
||||
.p-2\.5 {
|
||||
padding: 0.625rem;
|
||||
}
|
||||
@@ -3718,10 +3777,6 @@ Ensure the default browser behavior of the `hidden` attribute.
|
||||
padding: 3rem;
|
||||
}
|
||||
|
||||
.p-24 {
|
||||
padding: 6rem;
|
||||
}
|
||||
|
||||
.px-4 {
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
@@ -3912,6 +3967,11 @@ Ensure the default browser behavior of the `hidden` attribute.
|
||||
padding-right: 0.875rem;
|
||||
}
|
||||
|
||||
.px-14 {
|
||||
padding-left: 3.5rem;
|
||||
padding-right: 3.5rem;
|
||||
}
|
||||
|
||||
.pt-20 {
|
||||
padding-top: 5rem;
|
||||
}
|
||||
@@ -4700,6 +4760,11 @@ Ensure the default browser behavior of the `hidden` attribute.
|
||||
color: rgb(185 28 28 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.text-purple-900 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(88 28 135 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.text-opacity-50 {
|
||||
--tw-text-opacity: 0.5;
|
||||
}
|
||||
@@ -4904,6 +4969,16 @@ Ensure the default browser behavior of the `hidden` attribute.
|
||||
--tw-shadow: var(--tw-shadow-colored);
|
||||
}
|
||||
|
||||
.shadow-white {
|
||||
--tw-shadow-color: #fff;
|
||||
--tw-shadow: var(--tw-shadow-colored);
|
||||
}
|
||||
|
||||
.shadow-emerald-300 {
|
||||
--tw-shadow-color: #6ee7b7;
|
||||
--tw-shadow: var(--tw-shadow-colored);
|
||||
}
|
||||
|
||||
.outline-none {
|
||||
outline: 2px solid transparent;
|
||||
outline-offset: 2px;
|
||||
@@ -4964,6 +5039,26 @@ Ensure the default browser behavior of the `hidden` attribute.
|
||||
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
||||
}
|
||||
|
||||
.drop-shadow-sm {
|
||||
--tw-drop-shadow: drop-shadow(0 1px 1px rgb(0 0 0 / 0.05));
|
||||
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
||||
}
|
||||
|
||||
.drop-shadow-md {
|
||||
--tw-drop-shadow: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));
|
||||
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
||||
}
|
||||
|
||||
.drop-shadow-lg {
|
||||
--tw-drop-shadow: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1));
|
||||
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
||||
}
|
||||
|
||||
.drop-shadow-xl {
|
||||
--tw-drop-shadow: drop-shadow(0 20px 13px rgb(0 0 0 / 0.03)) drop-shadow(0 8px 5px rgb(0 0 0 / 0.08));
|
||||
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
||||
}
|
||||
|
||||
.grayscale {
|
||||
--tw-grayscale: grayscale(100%);
|
||||
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
||||
@@ -5164,6 +5259,11 @@ Ensure the default browser behavior of the `hidden` attribute.
|
||||
display: block;
|
||||
}
|
||||
|
||||
.before\:hidden::before {
|
||||
content: var(--tw-content);
|
||||
display: none;
|
||||
}
|
||||
|
||||
.before\:h-3::before {
|
||||
content: var(--tw-content);
|
||||
height: 0.75rem;
|
||||
@@ -5228,12 +5328,28 @@ Ensure the default browser behavior of the `hidden` attribute.
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
|
||||
.hover\:-translate-y-1:hover {
|
||||
--tw-translate-y: -0.25rem;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
|
||||
.hover\:rotate-12:hover {
|
||||
--tw-rotate: 12deg;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
|
||||
.hover\:scale-105:hover {
|
||||
--tw-scale-x: 1.05;
|
||||
--tw-scale-y: 1.05;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
|
||||
.hover\:scale-110:hover {
|
||||
--tw-scale-x: 1.1;
|
||||
--tw-scale-y: 1.1;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
|
||||
.hover\:cursor-pointer:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -5292,6 +5408,11 @@ Ensure the default browser behavior of the `hidden` attribute.
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.hover\:border-teal-500:hover {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(20 184 166 / var(--tw-border-opacity));
|
||||
}
|
||||
|
||||
.hover\:border-b-blue-300:hover {
|
||||
--tw-border-opacity: 1;
|
||||
border-bottom-color: rgb(147 197 253 / var(--tw-border-opacity));
|
||||
@@ -5717,6 +5838,11 @@ Ensure the default browser behavior of the `hidden` attribute.
|
||||
color: rgb(126 34 206 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.hover\:text-gray-200:hover {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(229 231 235 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.hover\:text-opacity-75:hover {
|
||||
--tw-text-opacity: 0.75;
|
||||
}
|
||||
@@ -5765,6 +5891,11 @@ Ensure the default browser behavior of the `hidden` attribute.
|
||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
||||
}
|
||||
|
||||
.hover\:outline-none:hover {
|
||||
outline: 2px solid transparent;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.hover\:ring:hover {
|
||||
--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);
|
||||
@@ -7217,6 +7348,16 @@ Ensure the default browser behavior of the `hidden` attribute.
|
||||
--tw-ring-color: rgb(17 24 39 / var(--tw-ring-opacity));
|
||||
}
|
||||
|
||||
.dark .dark\:ring-emerald-300 {
|
||||
--tw-ring-opacity: 1;
|
||||
--tw-ring-color: rgb(110 231 183 / var(--tw-ring-opacity));
|
||||
}
|
||||
|
||||
.dark .dark\:ring-emerald-900 {
|
||||
--tw-ring-opacity: 1;
|
||||
--tw-ring-color: rgb(6 78 59 / var(--tw-ring-opacity));
|
||||
}
|
||||
|
||||
.dark .dark\:placeholder\:text-emerald-300::-moz-placeholder {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(110 231 183 / var(--tw-text-opacity));
|
||||
@@ -7647,6 +7788,10 @@ Ensure the default browser behavior of the `hidden` attribute.
|
||||
grid-column: span 8 / span 8;
|
||||
}
|
||||
|
||||
.sm\:-m-4 {
|
||||
margin: -1rem;
|
||||
}
|
||||
|
||||
.sm\:mx-12 {
|
||||
margin-left: 3rem;
|
||||
margin-right: 3rem;
|
||||
@@ -7707,6 +7852,11 @@ Ensure the default browser behavior of the `hidden` attribute.
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.sm\:my-4 {
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.sm\:mr-6 {
|
||||
margin-right: 1.5rem;
|
||||
}
|
||||
@@ -7807,6 +7957,10 @@ Ensure the default browser behavior of the `hidden` attribute.
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.sm\:-mt-6 {
|
||||
margin-top: -1.5rem;
|
||||
}
|
||||
|
||||
.sm\:block {
|
||||
display: block;
|
||||
}
|
||||
@@ -7859,6 +8013,10 @@ Ensure the default browser behavior of the `hidden` attribute.
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.sm\:h-6 {
|
||||
height: 1.5rem;
|
||||
}
|
||||
|
||||
.sm\:w-10\/12 {
|
||||
width: 83.333333%;
|
||||
}
|
||||
@@ -7951,6 +8109,10 @@ Ensure the default browser behavior of the `hidden` attribute.
|
||||
width: 83.333333%;
|
||||
}
|
||||
|
||||
.sm\:w-6 {
|
||||
width: 1.5rem;
|
||||
}
|
||||
|
||||
.sm\:max-w-full {
|
||||
max-width: 100%;
|
||||
}
|
||||
@@ -8124,6 +8286,10 @@ Ensure the default browser behavior of the `hidden` attribute.
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
.sm\:border {
|
||||
border-width: 1px;
|
||||
}
|
||||
|
||||
.sm\:border-none {
|
||||
border-style: none;
|
||||
}
|
||||
@@ -8235,6 +8401,11 @@ Ensure the default browser behavior of the `hidden` attribute.
|
||||
padding-right: 4rem;
|
||||
}
|
||||
|
||||
.sm\:py-4 {
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.sm\:py-24 {
|
||||
padding-top: 6rem;
|
||||
padding-bottom: 6rem;
|
||||
@@ -8777,6 +8948,10 @@ Ensure the default browser behavior of the `hidden` attribute.
|
||||
height: 12rem;
|
||||
}
|
||||
|
||||
.md\:h-screen {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.md\:h-36 {
|
||||
height: 9rem;
|
||||
}
|
||||
@@ -9858,6 +10033,10 @@ Ensure the default browser behavior of the `hidden` attribute.
|
||||
margin-right: 8rem;
|
||||
}
|
||||
|
||||
.lg\:-mt-24 {
|
||||
margin-top: -6rem;
|
||||
}
|
||||
|
||||
.lg\:block {
|
||||
display: block;
|
||||
}
|
||||
@@ -10215,6 +10394,12 @@ Ensure the default browser behavior of the `hidden` attribute.
|
||||
margin-bottom: calc(1rem * var(--tw-space-y-reverse));
|
||||
}
|
||||
|
||||
.lg\:space-x-5 > :not([hidden]) ~ :not([hidden]) {
|
||||
--tw-space-x-reverse: 0;
|
||||
margin-right: calc(1.25rem * var(--tw-space-x-reverse));
|
||||
margin-left: calc(1.25rem * calc(1 - var(--tw-space-x-reverse)));
|
||||
}
|
||||
|
||||
.lg\:space-x-reverse > :not([hidden]) ~ :not([hidden]) {
|
||||
--tw-space-x-reverse: 1;
|
||||
}
|
||||
@@ -10227,6 +10412,11 @@ Ensure the default browser behavior of the `hidden` attribute.
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
.lg\:rounded-l-lg {
|
||||
border-top-left-radius: 0.5rem;
|
||||
border-bottom-left-radius: 0.5rem;
|
||||
}
|
||||
|
||||
.lg\:border-none {
|
||||
border-style: none;
|
||||
}
|
||||
@@ -10245,6 +10435,10 @@ Ensure the default browser behavior of the `hidden` attribute.
|
||||
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.lg\:bg-transparent {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.lg\:p-10 {
|
||||
padding: 2.5rem;
|
||||
}
|
||||
@@ -10682,6 +10876,10 @@ Ensure the default browser behavior of the `hidden` attribute.
|
||||
height: 6rem;
|
||||
}
|
||||
|
||||
.xl\:min-h-0 {
|
||||
min-height: 0px;
|
||||
}
|
||||
|
||||
.xl\:w-2\/5 {
|
||||
width: 40%;
|
||||
}
|
||||
@@ -10734,6 +10932,10 @@ Ensure the default browser behavior of the `hidden` attribute.
|
||||
width: 6rem;
|
||||
}
|
||||
|
||||
.xl\:min-w-0 {
|
||||
min-width: 0px;
|
||||
}
|
||||
|
||||
.xl\:max-w-screen-xl {
|
||||
max-width: 1280px;
|
||||
}
|
||||
|
||||
@@ -21,9 +21,9 @@
|
||||
<div>Contact 8</div>
|
||||
</section>
|
||||
|
||||
<section class="bg-white dark:bg-gray-800 pl-20 lg:py-[120px] overflow-hidden relative z-10 ">
|
||||
<div class="container">
|
||||
<div class="flex flex-wrap lg:justify-between -mx-4">
|
||||
<section class="bg-white dark:bg-gray-800 lg:py-[120px] overflow-hidden relative z-10 ">
|
||||
<div class="container mx-auto">
|
||||
<div class="flex flex-wrap justify-center lg:justify-between ">
|
||||
<div class="w-full lg:w-1/2 xl:w-6/12 px-4">
|
||||
<div class="max-w-[570px] mb-12 lg:mb-0">
|
||||
<span class="block mb-4 text-base dark:text-cyan-300 font-semibold">
|
||||
|
||||
@@ -16,11 +16,11 @@
|
||||
<div>Footer 10</div>
|
||||
</section>
|
||||
|
||||
<footer class="text-center dark:bg-emerald-900">
|
||||
<footer class="text-center dark:bg-gray-800">
|
||||
<div class="max-w-screen-xl px-4 py-12 mx-auto sm:px-6 lg:px-8">
|
||||
<div class="max-w-3xl mx-auto space-y-6">
|
||||
<div class="flex justify-center space-x-6">
|
||||
<a class="text-blue-500 hover:text-opacity-75 dark:ring-green-300 dark:ring-2 dark:rounded-2xl" href="" target="_blank" rel="noreferrer">
|
||||
<a class="text-blue-500 hover:text-opacity-75 dark:ring-emerald-300 dark:ring-2 dark:rounded-2xl" href="" target="_blank" rel="noreferrer">
|
||||
<span class="sr-only"> Twitter </span>
|
||||
|
||||
<svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
|
||||
@@ -28,15 +28,15 @@
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<a class="text-gray-900 hover:text-opacity-75 dark:ring-2 dark:ring-green-300 dark:rounded-2xl" href="" target="_blank" rel="noreferrer">
|
||||
<a class="text-gray-900 hover:text-opacity-75 dark:ring-2 dark:ring-emerald-300 dark:rounded-2xl" href="" target="_blank" rel="noreferrer">
|
||||
<span class="sr-only"> GitHub </span>
|
||||
|
||||
<svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<svg class="w-8 h-8 " fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<a class="text-pink-600 hover:text-opacity-75 dark:ring-2 dark:ring-green-300 dark:rounded-2xl" href="" target="_blank" rel="noreferrer">
|
||||
<a class="text-pink-600 hover:text-opacity-75 dark:ring-2 dark:ring-emerald-300 dark:rounded-2xl" href="" target="_blank" rel="noreferrer">
|
||||
<span class="sr-only"> Dribbble </span>
|
||||
|
||||
<svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
|
||||
|
||||
@@ -18,6 +18,59 @@
|
||||
</button>
|
||||
|
||||
|
||||
<section class="bg-body text-body font-body">
|
||||
<div class="container mx-auto px-4">
|
||||
<section class="py-12 px-4 text-center">
|
||||
<div class="w-full max-w-2xl mx-auto">
|
||||
<h1 class="text-5xl leading-tight font-heading"> <a href="https://tailwindcss.com/">Tailwind CSS</a></h1>
|
||||
<h3 class="mt-6 mb-8 text-gray-500 leading-relaxed">Portfolio Components - <a href="https://github.com/app-generator/tailwind-css-components">Source Code</a></h3>
|
||||
</div>
|
||||
</section>
|
||||
<hr>
|
||||
<section class="py-12 px-4 text-center">
|
||||
<h2 class="text-4xl mb-8 font-heading">Portfolio</h2>
|
||||
<div class="max-w-2xl mx-auto"><img class="rounded shadow-md" src="https://tailwind-css-components.appseed.us/placeholders/pictures/office.jpg" alt="">
|
||||
<div class="text-center mt-8 mb-6">
|
||||
<button class="inline-flex items-center justify-center h-3 w-3 mr-2 bg-gray-800 rounded-full"></button>
|
||||
<button class="inline-flex items-center justify-center h-3 w-3 mr-2 bg-gray-600 rounded-full"></button>
|
||||
<button class="inline-flex items-center justify-center h-3 w-3 mr-2 bg-gray-600 rounded-full"></button>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-2xl mb-4 font-heading">Client: Realweb</h3>
|
||||
<p class="text-gray-500 leading-relaxed">Great offer, competitive prices, professional service. That’s how I’d remember the Dunder Mifflin. Although I had to switch paper provider, sometimes I really miss Dunder family. I also got gift basket from the team!</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<hr>
|
||||
<section class="py-12 px-4">
|
||||
<div class="flex flex-wrap -mx-4">
|
||||
<div class="w-full lg:w-1/2 px-4 mb-8 lg:mb-0">
|
||||
<div class="flex flex-col h-full p-8 bg-gray-200 rounded">
|
||||
<h2 class="text-3xl font-heading">Dunder Friends, a.k.a Companies Who Work With Us</h2>
|
||||
<p class="max-w-sm mt-auto mb-8 text-gray-500 leading-relaxed">We don’t believe in paperless future - so do our Customers.</p><a class="text-right text-blue-700 hover:underline" href="#">View all Dunder Mifflin customers</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lg:w-1/2 px-4">
|
||||
<div class="flex flex-wrap -m-2">
|
||||
<div class="w-1/2 p-2"><img class="rounded shadow-md" src="https://tailwind-css-components.appseed.us/placeholders/pictures/office.jpg" alt=""></div>
|
||||
<div class="w-1/2 p-2"><img class="rounded shadow-md" src="https://tailwind-css-components.appseed.us/placeholders/pictures/work.jpg" alt=""></div>
|
||||
<div class="w-1/2 p-2"><img class="rounded shadow-md" src="https://tailwind-css-components.appseed.us/placeholders/pictures/work.jpg" alt=""></div>
|
||||
<div class="w-1/2 p-2"><img class="rounded shadow-md" src="https://tailwind-css-components.appseed.us/placeholders/pictures/office.jpg" alt=""></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<hr>
|
||||
<footer class="p-4">
|
||||
<div class="flex flex-col lg:flex-row items-center">
|
||||
<div class="w-full lg:w-auto lg:mr-auto text-center lg:text-left">© <a href="https://appseed.us">AppSeed </a><span>(MIT License) - </span><a href="https://github.com/app-generator/tailwind-css-components">Tailwind CSS Components</a></div>
|
||||
<div class="flex justify-center items-center mt-4 lg:mt-0"><img class="w-6 h-6" src="https://tailwind-css-components.appseed.us/placeholders/icons/message.svg" alt=""><img class="w-6 h-6 mx-6" src="https://tailwind-css-components.appseed.us/placeholders/icons/share.svg" alt=""><img class="w-6 h-6" src="https://tailwind-css-components.appseed.us/placeholders/icons/star.svg" alt=""></div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<!-- start of script section -->
|
||||
<script type="text/javascript">
|
||||
let toogler = document.getElementById("dark_mood_toogler");
|
||||
|
||||
277
public/componets/layout/2_layout.html
Normal file
277
public/componets/layout/2_layout.html
Normal file
@@ -0,0 +1,277 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="./../../../dist/tailshape.css">
|
||||
<link rel="stylesheet" href="https://demos.creative-tim.com/notus-js/assets/vendor/@fortawesome/fontawesome-free/css/all.min.css">
|
||||
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
|
||||
<title>layout </title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
|
||||
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||
d
|
||||
</button>
|
||||
|
||||
<main class="font-sans bg-white">
|
||||
<div>
|
||||
<header class="bg-white shadow border-t-4 border-indigo-600">
|
||||
<div class="container mx-auto px-6 py-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<a class="flex items-center text-gray-800 hover:text-indigo-600" href="#">
|
||||
<svg class="h-6 w-6 sm:h-6 sm:w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
|
||||
</svg>
|
||||
|
||||
<span class="mx-3 font-medium text-sm md:text-base">Example Brand</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="flex items-center -mx-2">
|
||||
<a class="flex items-center mx-2 text-gray-800 hover:text-indigo-600" href="#">
|
||||
<svg class="h-5 w-5 sm:h-6 sm:w-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M19 11H5M19 11C20.1046 11 21 11.8954 21 13V19C21 20.1046 20.1046 21 19 21H5C3.89543 21 3 20.1046 3 19V13C3 11.8954 3.89543 11 5 11M19 11V9C19 7.89543 18.1046 7 17 7M5 11V9C5 7.89543 5.89543 7 7 7M7 7V5C7 3.89543 7.89543 3 9 3H15C16.1046 3 17 3.89543 17 5V7M7 7H17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
|
||||
<a class="flex items-center mx-2 text-gray-800 hover:text-indigo-600" href="#">
|
||||
<!-- twitter svg -->
|
||||
<svg class="h-5 w-5 sm:h-6 sm:w-6 fill-current" xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'>
|
||||
<path d='M496,109.5a201.8,201.8,0,0,1-56.55,15.3,97.51,97.51,0,0,0,43.33-53.6,197.74,197.74,0,0,1-62.56,23.5A99.14,99.14,0,0,0,348.31,64c-54.42,0-98.46,43.4-98.46,96.9a93.21,93.21,0,0,0,2.54,22.1,280.7,280.7,0,0,1-203-101.3A95.69,95.69,0,0,0,36,130.4C36,164,53.53,193.7,80,211.1A97.5,97.5,0,0,1,35.22,199v1.2c0,47,34,86.1,79,95a100.76,100.76,0,0,1-25.94,3.4,94.38,94.38,0,0,1-18.51-1.8c12.51,38.5,48.92,66.5,92.05,67.3A199.59,199.59,0,0,1,39.5,405.6,203,203,0,0,1,16,404.2,278.68,278.68,0,0,0,166.74,448c181.36,0,280.44-147.7,280.44-275.8,0-4.2-.11-8.4-.31-12.5A198.48,198.48,0,0,0,496,109.5Z'/>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<a class="flex items-center mx-2 text-gray-800 hover:text-indigo-600" href="#">
|
||||
<!-- github svg -->
|
||||
<svg class="h-5 w-5 sm:h-6 sm:w-6 fill-current" xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'>
|
||||
<path d='M256,32C132.3,32,32,134.9,32,261.7c0,101.5,64.2,187.5,153.2,217.9a17.56,17.56,0,0,0,3.8.4c8.3,0,11.5-6.1,11.5-11.4,0-5.5-.2-19.9-.3-39.1a102.4,102.4,0,0,1-22.6,2.7c-43.1,0-52.9-33.5-52.9-33.5-10.2-26.5-24.9-33.6-24.9-33.6-19.5-13.7-.1-14.1,1.4-14.1h.1c22.5,2,34.3,23.8,34.3,23.8,11.2,19.6,26.2,25.1,39.6,25.1a63,63,0,0,0,25.6-6c2-14.8,7.8-24.9,14.2-30.7-49.7-5.8-102-25.5-102-113.5,0-25.1,8.7-45.6,23-61.6-2.3-5.8-10-29.2,2.2-60.8a18.64,18.64,0,0,1,5-.5c8.1,0,26.4,3.1,56.6,24.1a208.21,208.21,0,0,1,112.2,0c30.2-21,48.5-24.1,56.6-24.1a18.64,18.64,0,0,1,5,.5c12.2,31.6,4.5,55,2.2,60.8,14.3,16.1,23,36.6,23,61.6,0,88.2-52.4,107.6-102.3,113.3,8,7.1,15.2,21.1,15.2,42.5,0,30.7-.3,55.5-.3,63,0,5.4,3.1,11.5,11.4,11.5a19.35,19.35,0,0,0,4-.4C415.9,449.2,480,363.1,480,261.7,480,134.9,379.7,32,256,32Z'/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section class="bg-white mt-20">
|
||||
<div class="max-w-2xl px-6 text-center mx-auto">
|
||||
<h2 class="text-3xl font-semibold text-gray-800">Hi, <span class="bg-indigo-600 text-white rounded px-1">We're Brand name</span> . Nice to meet you.</h2>
|
||||
<p class="text-gray-600 mt-4">Lorem ipsum dolor, sit amet consectetur adipisicing elit. A aliquam veniam suscipit eaque iure, eligendi harum expedita cupiditate sequi, culpa autem! Quaerat ex fugit iste suscipit reiciendis, accusamus ipsum quae.</p>
|
||||
|
||||
<div class="flex items-end justify-center mt-16">
|
||||
<!-- man with a glass -->
|
||||
<svg width="189" height="188" viewBox="0 0 189 188" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0)">
|
||||
<path d="M94.074 188.148C146.03 188.148 188.148 146.03 188.148 94.074C188.148 42.1184 146.03 0 94.074 0C42.1184 0 0 42.1184 0 94.074C0 146.03 42.1184 188.148 94.074 188.148Z" fill="#2D3748"/>
|
||||
<path d="M135.938 52.784V84.05C135.938 84.503 135.927 84.955 135.917 85.407C135.897 86.343 135.845 87.278 135.763 88.203C135.743 88.522 135.711 88.84 135.67 89.159C135.536 90.485 135.352 91.791 135.115 93.087C135.032 93.519 134.95 93.94 134.857 94.362C134.847 94.454 134.827 94.537 134.806 94.619C134.723 95.051 134.62 95.473 134.518 95.894C134.477 96.12 134.415 96.346 134.364 96.573C134.312 96.768 134.261 96.964 134.2 97.159C133.983 98.002 133.737 98.825 133.479 99.647C133.356 100.038 133.233 100.418 133.099 100.809C133.088 100.85 133.068 100.891 133.058 100.932C132.934 101.281 132.811 101.631 132.688 101.98C132.647 102.083 132.606 102.185 132.564 102.299C132.441 102.628 132.318 102.957 132.184 103.286C132.03 103.687 131.866 104.078 131.701 104.469C131.557 104.819 131.403 105.168 131.249 105.518C131.229 105.58 131.197 105.631 131.177 105.692C131.002 106.062 130.838 106.433 130.663 106.792C130.488 107.172 130.303 107.553 130.107 107.934C129.737 108.684 129.336 109.435 128.935 110.165C128.75 110.494 128.565 110.823 128.379 111.152C126.796 113.877 125.038 116.437 123.126 118.801C122.868 119.14 122.602 119.469 122.324 119.788C121.943 120.25 121.552 120.703 121.162 121.145C120.812 121.536 120.463 121.926 120.103 122.307C119.116 123.366 118.108 124.374 117.08 125.32C116.875 125.526 116.658 125.711 116.442 125.906C116.093 126.225 115.744 126.533 115.383 126.831C115.106 127.078 114.818 127.314 114.529 127.551C113.789 128.157 113.049 128.743 112.299 129.288C111.99 129.525 111.671 129.751 111.353 129.967C110.839 130.337 110.315 130.687 109.79 131.026C109.502 131.221 109.204 131.406 108.905 131.581C107.856 132.229 106.798 132.825 105.749 133.339C105.492 133.472 105.235 133.596 104.978 133.719C104.72 133.842 104.454 133.966 104.176 134.089C103.836 134.243 103.497 134.387 103.158 134.521C103.024 134.583 102.89 134.634 102.757 134.675C102.357 134.84 101.945 134.994 101.544 135.127C101.04 135.312 100.526 135.466 100.023 135.61C99.673 135.713 99.314 135.805 98.964 135.887C98.943 135.898 98.923 135.908 98.892 135.908C98.542 135.99 98.193 136.073 97.843 136.134C97.75 136.155 97.659 136.175 97.566 136.185C97.278 136.236 96.99 136.288 96.702 136.319C96.291 136.381 95.88 136.432 95.469 136.453C95.326 136.473 95.192 136.484 95.047 136.484C94.719 136.505 94.39 136.515 94.07 136.515H94.04C93.721 136.515 93.402 136.505 93.084 136.484C92.96 136.484 92.837 136.474 92.713 136.453C92.426 136.443 92.127 136.411 91.819 136.37C91.757 136.37 91.685 136.36 91.624 136.35C91.243 136.299 90.863 136.237 90.472 136.165C90.144 136.114 89.815 136.041 89.475 135.959C87.717 135.558 85.908 134.952 84.078 134.139C82.515 133.45 80.932 132.618 79.359 131.651C78.567 131.168 77.775 130.654 76.994 130.109C76.603 129.831 76.213 129.554 75.822 129.266C74.598 128.371 73.385 127.395 72.192 126.346C71.864 126.048 71.535 125.75 71.206 125.441C70.877 125.143 70.548 124.835 70.229 124.537C69.426 123.766 68.645 122.964 67.884 122.131C67.586 121.813 67.288 121.484 66.989 121.144C66.167 120.219 65.365 119.263 64.604 118.265C64.305 117.905 64.028 117.535 63.75 117.165C62.712 115.788 61.725 114.348 60.799 112.857C60.553 112.456 60.306 112.044 60.07 111.644C59.782 111.161 59.505 110.668 59.227 110.174C58.199 108.323 57.252 106.401 56.43 104.416C56.307 104.128 56.183 103.84 56.08 103.553C55.915 103.183 55.771 102.802 55.638 102.432C55.433 101.887 55.238 101.342 55.052 100.797C54.867 100.252 54.693 99.697 54.518 99.142C54.353 98.607 54.199 98.073 54.055 97.528C53.89 96.952 53.737 96.366 53.603 95.77C53.592 95.708 53.572 95.647 53.562 95.585C53.367 94.763 53.192 93.93 53.038 93.087C52.832 91.976 52.668 90.845 52.544 89.704C52.493 89.344 52.462 88.984 52.431 88.624C52.39 88.244 52.36 87.873 52.339 87.493C52.287 86.804 52.256 86.105 52.235 85.406C52.225 84.953 52.214 84.501 52.214 84.049V52.784C52.214 29.682 70.937 10.95 94.039 10.929H94.08C97.268 10.929 100.372 11.288 103.353 11.957C106.078 12.574 108.7 13.458 111.188 14.579C114.581 16.101 117.737 18.054 120.575 20.388C122.96 22.342 125.13 24.542 127.021 26.968C132.607 34.083 135.938 43.038 135.938 52.784Z" fill="#ECC19C"/>
|
||||
<path d="M148.613 200.741V200.751H39.538V200.741C39.538 194.583 40.556 188.65 42.448 183.129C42.787 182.132 43.157 181.145 43.558 180.168V180.158C43.958 179.181 44.38 178.225 44.832 177.279C46.632 173.485 48.873 169.938 51.474 166.689C52.132 165.877 52.8 165.085 53.49 164.324C53.829 163.933 54.189 163.553 54.549 163.173C54.909 162.803 55.269 162.433 55.639 162.063C57.48 160.223 59.453 158.537 61.531 156.984C62.569 156.213 63.618 155.493 64.708 154.794C65.798 154.105 66.908 153.447 68.039 152.83C68.06 152.81 68.08 152.81 68.08 152.81C68.522 152.574 68.954 152.317 69.386 152.049C70.24 151.535 71.082 150.98 71.885 150.384C72.296 150.096 72.687 149.798 73.077 149.479C74.002 148.739 74.896 147.947 75.75 147.114C76.027 146.837 76.306 146.559 76.583 146.271C77.158 145.674 77.703 145.047 78.228 144.41C78.486 144.102 78.743 143.783 78.979 143.464C79.226 143.146 79.462 142.817 79.699 142.487C81.529 139.937 82.999 137.131 84.079 134.138C85.385 130.498 86.094 126.581 86.094 122.489L94.042 122.53L102.215 122.571C102.215 126.611 102.904 130.487 104.179 134.086C105.239 137.088 106.708 139.895 108.508 142.445C110.379 145.097 112.61 147.462 115.139 149.487C115.52 149.796 115.9 150.094 116.281 150.371C116.651 150.649 117.031 150.916 117.422 151.173C117.505 151.235 117.576 151.286 117.659 151.338C118.029 151.585 118.399 151.832 118.79 152.058C119.211 152.315 119.644 152.572 120.075 152.809C120.146 152.829 120.209 152.86 120.26 152.902C121.165 153.406 122.06 153.93 122.934 154.475C123.355 154.732 123.777 154.999 124.188 155.298C125.042 155.853 125.875 156.439 126.686 157.056C126.686 157.067 126.697 157.067 126.697 157.067H126.707C128.784 158.619 130.748 160.315 132.588 162.146C142.496 172.015 148.613 185.648 148.613 200.741Z" fill="#ECC19C"/>
|
||||
<path d="M148.614 200.743H39.539C39.539 194.584 40.558 188.652 42.449 183.131C42.788 182.133 43.158 181.147 43.559 180.17C43.548 180.159 43.559 180.159 43.559 180.159C43.95 179.182 44.381 178.226 44.833 177.281C46.633 173.487 48.874 169.94 51.475 166.691C52.133 165.878 52.802 165.087 53.491 164.326C53.83 163.935 54.19 163.555 54.55 163.175C54.91 162.805 55.27 162.435 55.64 162.065C57.481 160.225 59.454 158.538 61.532 156.986C62.57 156.215 63.619 155.495 64.709 154.796C65.799 154.097 66.909 153.439 68.04 152.822C68.061 152.802 68.081 152.812 68.081 152.812V152.802C68.523 152.555 68.955 152.308 69.387 152.051C70.672 151.27 71.907 150.406 73.058 149.46C73.068 149.47 73.068 149.47 73.079 149.48C78.404 154.929 85.817 158.311 94.043 158.332H94.125C102.35 158.332 109.794 154.939 115.14 149.49L115.151 149.48C115.88 150.086 116.641 150.652 117.423 151.176C117.505 151.237 117.577 151.289 117.659 151.34C118.029 151.587 118.409 151.823 118.79 152.06C119.212 152.317 119.644 152.564 120.075 152.8C120.147 152.82 120.198 152.861 120.26 152.892C121.165 153.396 122.06 153.92 122.934 154.475C123.355 154.732 123.777 154.999 124.188 155.298C125.042 155.843 125.875 156.439 126.686 157.056H126.707C128.795 158.619 130.758 160.315 132.588 162.145C142.497 172.017 148.614 185.65 148.614 200.743Z" fill="#C7D4E2"/>
|
||||
<path d="M135.938 84.05C135.938 84.503 135.927 84.955 135.917 85.407C135.897 86.343 135.845 87.278 135.763 88.203C135.743 88.522 135.711 88.84 135.67 89.159C135.536 90.485 135.352 91.791 135.115 93.087C135.032 93.519 134.95 93.94 134.857 94.362C134.847 94.454 134.827 94.537 134.806 94.619C134.723 95.051 134.62 95.473 134.518 95.894C134.466 96.141 134.405 96.377 134.332 96.614C134.302 96.799 134.25 96.984 134.199 97.159C133.982 98.002 133.736 98.825 133.478 99.647C133.355 100.038 133.232 100.418 133.098 100.809C133.087 100.85 133.067 100.891 133.057 100.932C132.933 101.281 132.81 101.631 132.687 101.98C132.646 102.083 132.605 102.185 132.563 102.299C132.44 102.628 132.317 102.957 132.183 103.286C132.029 103.687 131.865 104.078 131.7 104.469C131.556 104.819 131.402 105.168 131.248 105.518C131.228 105.58 131.196 105.631 131.176 105.692C131.001 106.062 130.837 106.433 130.662 106.792C130.487 107.172 130.302 107.553 130.106 107.934C129.736 108.684 129.335 109.435 128.934 110.165C128.749 110.494 128.564 110.823 128.378 111.152C126.795 113.877 125.037 116.437 123.125 118.801C122.867 119.14 122.601 119.469 122.323 119.788C121.942 120.25 121.551 120.703 121.161 121.145C120.811 121.536 120.462 121.926 120.102 122.307C119.115 123.366 118.107 124.374 117.079 125.32C116.874 125.526 116.657 125.711 116.441 125.906C116.092 126.225 115.743 126.533 115.382 126.831C115.105 127.078 114.817 127.314 114.528 127.551C113.788 128.157 113.048 128.743 112.298 129.288C111.989 129.525 111.67 129.751 111.352 129.967C110.838 130.337 110.314 130.687 109.789 131.026C109.501 131.221 109.203 131.406 108.904 131.581C107.855 132.229 106.797 132.825 105.748 133.339C105.491 133.472 105.234 133.596 104.977 133.719C104.719 133.842 104.453 133.966 104.175 134.089C103.835 134.243 103.496 134.387 103.157 134.521C103.023 134.583 102.889 134.634 102.756 134.675C102.356 134.84 101.944 134.994 101.543 135.127C101.039 135.312 100.525 135.466 100.022 135.61C99.672 135.713 99.313 135.805 98.963 135.887C98.942 135.898 98.922 135.908 98.891 135.908C98.541 135.99 98.192 136.073 97.842 136.134C97.749 136.155 97.658 136.175 97.565 136.185C97.277 136.236 96.989 136.288 96.701 136.319C96.29 136.381 95.879 136.432 95.468 136.453C95.325 136.473 95.191 136.484 95.046 136.484C94.718 136.505 94.389 136.515 94.069 136.515H94.039C93.72 136.515 93.401 136.505 93.083 136.484C92.959 136.484 92.836 136.474 92.712 136.453C92.425 136.443 92.126 136.411 91.818 136.37C91.756 136.37 91.684 136.36 91.623 136.35C91.242 136.299 90.862 136.237 90.471 136.165C90.143 136.114 89.814 136.041 89.474 135.959C87.716 135.558 85.907 134.952 84.077 134.139C82.514 133.45 80.931 132.618 79.358 131.651C78.566 131.178 77.785 130.664 76.993 130.109C76.602 129.831 76.212 129.554 75.821 129.266C74.597 128.371 73.384 127.395 72.191 126.346C71.863 126.048 71.534 125.75 71.205 125.441C70.876 125.143 70.547 124.835 70.228 124.537C69.425 123.766 68.644 122.964 67.883 122.131C67.585 121.813 67.287 121.484 66.988 121.144C66.166 120.219 65.364 119.263 64.603 118.265C64.304 117.905 64.027 117.535 63.749 117.165C62.711 115.788 61.724 114.348 60.798 112.857C60.552 112.456 60.305 112.044 60.069 111.644C59.781 111.161 59.504 110.668 59.226 110.174C58.198 108.323 57.251 106.401 56.429 104.416C56.306 104.128 56.182 103.84 56.079 103.553C55.914 103.183 55.77 102.802 55.637 102.432C55.432 101.887 55.237 101.342 55.051 100.797C54.866 100.252 54.692 99.697 54.517 99.142C54.352 98.607 54.198 98.073 54.054 97.528C53.889 96.952 53.736 96.366 53.602 95.77C53.591 95.708 53.571 95.647 53.561 95.585C53.366 94.763 53.191 93.93 53.037 93.087C52.831 91.976 52.667 90.845 52.543 89.704C52.492 89.344 52.461 88.984 52.43 88.624C52.389 88.244 52.359 87.873 52.338 87.493C52.286 86.804 52.255 86.105 52.234 85.406C52.224 84.953 52.213 84.501 52.213 84.049L58.897 97.189L70.381 102.196L83.962 103.42L94.038 104.335H94.1L103.528 105.189L124.533 107.081L135.938 84.05Z" fill="#543E36"/>
|
||||
<path d="M127.023 26.968C124.977 31.605 122.314 35.913 119.168 39.82C118.983 40.047 118.798 40.273 118.603 40.499C112.157 48.261 103.706 54.297 94.041 57.823C91.501 58.759 88.88 59.519 86.186 60.085C84.387 60.465 82.557 60.764 80.696 60.98C78.557 61.216 76.378 61.34 74.168 61.34C71.639 61.34 69.161 61.175 66.725 60.857C64.339 60.559 62.005 60.117 59.723 59.521C58.417 59.192 57.142 58.812 55.877 58.39C54.633 57.979 53.42 57.526 52.217 57.033V52.787C52.217 29.685 70.94 10.953 94.042 10.932H94.083C97.271 10.932 100.375 11.291 103.356 11.96C106.081 12.577 108.703 13.461 111.191 14.582C114.584 16.104 117.74 18.057 120.578 20.391C122.962 22.341 125.132 24.542 127.023 26.968Z" fill="#543E36"/>
|
||||
<path d="M135.938 52.784V61.019C128.802 55.498 122.891 48.517 118.624 40.539C118.614 40.529 118.614 40.508 118.603 40.498C114.409 32.664 111.807 23.873 111.191 14.578C114.584 16.1 117.74 18.053 120.578 20.387C122.963 22.341 125.133 24.541 127.024 26.967C132.607 34.083 135.938 43.038 135.938 52.784Z" fill="#543E36"/>
|
||||
<path d="M57.12 56.013C56.679 56.784 56.277 57.576 55.876 58.388C55.723 58.706 55.568 59.046 55.414 59.375C53.389 63.878 52.37 68.299 52.226 72.289C52.226 72.402 52.215 72.525 52.215 72.639V56.517C52.215 55.941 52.236 55.375 52.236 54.82C53.861 55.242 55.485 55.653 57.12 56.013Z" fill="#543E36"/>
|
||||
<path d="M131.054 56.013C131.676 57.106 132.231 58.226 132.764 59.374C134.852 64.017 135.874 68.552 135.962 72.642V56.512C135.962 55.945 135.941 55.378 135.941 54.824C134.318 55.243 132.697 55.648 131.054 56.013Z" fill="#543E36"/>
|
||||
<path d="M135.909 63.71C135.909 63.5094 135.757 63.3329 135.558 63.3088C133.877 63.0498 126.307 62 118.167 62C108.927 62 97.0025 64.9225 94.9236 64.9225H93.0787C92.1085 64.9225 89.0026 64.2864 85.0311 63.6148C80.4643 62.8366 74.7648 62 69.8356 62C63.8794 62 58.2254 62.5662 54.9673 62.9662C53.7756 63.1083 52.8997 63.2366 52.4442 63.3077C52.2454 63.3318 52.0932 63.5083 52.0932 63.7088L52 68.7161C52 68.8926 52.1057 69.0462 52.2681 69.1172L52.8282 69.3178C53.6575 69.6364 53.5882 84.7304 58.0493 88.501C60.7008 90.7278 63.0603 92 72.9994 92C78.7579 92 82.3785 90.4333 85.8127 85.755C88.2892 82.3969 90.484 74.4545 90.484 74.4545C91.1497 71.179 93.5672 70.92 93.9534 70.8959C93.9773 70.8959 94 70.8959 94 70.8959C94.0807 70.8959 96.8037 70.9429 97.516 74.4545C97.516 74.4545 99.7119 82.3969 102.187 85.755C105.62 90.4333 109.242 92 114.999 92C124.94 92 127.298 90.7278 129.95 88.501C134.412 84.7304 134.341 69.6364 135.171 69.3178L135.732 69.1172C135.894 69.0462 136 68.8937 136 68.7161L135.909 63.71ZM85.8138 81.5729C84.354 85.0604 80.5813 89.5623 75.2669 89.8328C59.324 90.6453 58.5878 86.1561 57.5597 82.5975C56.5202 79.0389 56.2521 75.9158 56.66 72.3572C57.0803 68.7986 57.9687 66.7127 59.5693 65.664C60.2578 65.2045 61.0064 64.7919 62.9217 64.4973C64.6383 64.2383 67.2898 64.0847 71.7044 64.0847C74.2616 64.0847 76.6563 64.2853 78.7932 64.6383C84.4699 65.5575 88.3006 67.5024 88.3006 69.4221C88.3006 70.732 87.9734 76.4109 85.8138 81.5729ZM130.441 82.5975C129.414 86.1561 128.678 90.6453 112.735 89.8328C107.421 89.5623 103.648 85.0604 102.188 81.5729C100.028 76.4121 99.7017 70.732 99.7017 69.4244C99.7017 66.7849 106.967 64.0859 116.298 64.0859C125.63 64.0859 127.124 64.793 128.434 65.6652C130.034 66.7139 130.921 68.7997 131.342 72.3583C131.751 75.9169 131.482 79.04 130.441 82.5975Z" fill="#2D3748"/>
|
||||
<path d="M94.123 90.65L94.112 100.788L94.102 104.335V107.121L94.091 116.374V116.384L94.081 116.374H94.07L94.04 116.353L53.604 95.771C53.593 95.709 53.573 95.648 53.563 95.586C53.368 94.764 53.193 93.931 53.039 93.088C52.833 91.977 52.669 90.846 52.545 89.705C52.494 89.345 52.463 88.985 52.432 88.625C52.391 88.245 52.361 87.874 52.34 87.494C52.288 86.805 52.257 86.106 52.236 85.407C52.226 84.954 52.215 84.502 52.215 84.05V71.764C52.215 71.939 52.226 72.114 52.226 72.288C52.308 75.259 52.781 78.529 53.696 81.87C54.406 84.44 55.29 86.815 56.318 88.933V88.943C59.012 94.547 62.621 98.35 65.941 98.967C66.147 98.998 66.363 99.018 66.569 99.039C67.854 99.183 69.201 99.265 70.589 99.265C75.832 99.265 80.49 95.05 83.42 93.343C83.441 93.333 83.461 93.322 83.482 93.312C83.636 93.219 83.791 93.127 83.924 93.034C83.965 93.003 84.006 92.983 84.047 92.962C86.515 91.553 90.072 90.659 94.041 90.649H94.123V90.65Z" fill="#543E36"/>
|
||||
<path d="M135.947 71.764L135.937 84.05C135.937 87.135 135.649 90.157 135.115 93.088C134.898 94.26 134.652 95.421 134.364 96.573L124.874 110.278L94.092 116.375H94.082L94.071 116.385V116.375L94.041 90.648H94.123C98.092 90.658 101.659 91.553 104.127 92.961C104.168 92.982 104.198 93.002 104.24 93.033C104.384 93.126 104.538 93.218 104.692 93.311C104.702 93.321 104.722 93.332 104.743 93.342C107.684 95.049 112.331 99.267 117.575 99.267C118.963 99.267 120.309 99.185 121.594 99.041C121.81 99.02 122.016 99 122.232 98.969C125.543 98.352 129.162 94.548 131.845 88.945V88.935C132.872 86.817 133.757 84.442 134.466 81.872C135.392 78.479 135.875 75.169 135.937 72.156C135.947 72.021 135.947 71.897 135.947 71.764Z" fill="#543E36"/>
|
||||
<path d="M94.074 107.125C99.7377 107.125 104.329 105.706 104.329 103.955C104.329 102.204 99.7377 100.785 94.074 100.785C88.4103 100.785 83.819 102.204 83.819 103.955C83.819 105.706 88.4103 107.125 94.074 107.125Z" fill="#ECC19C"/>
|
||||
<path d="M64.131 155.174V211.732H59.762V158.362C60.348 157.889 60.934 157.426 61.531 156.984C62.384 156.347 63.247 155.75 64.131 155.174Z" fill="#435363"/>
|
||||
<path d="M124.021 155.185V200.741V211.732H128.39V200.741V158.372L124.021 155.185Z" fill="#435363"/>
|
||||
<path d="M82.113 151.713L94.074 166.049L106.036 151.713H82.113Z" fill="#1A202C"/>
|
||||
<path d="M94.074 225.437H87.001L92.111 159.637C92.326 160.474 95.823 160.474 96.038 159.637L101.148 225.437H94.074Z" fill="#1A202C"/>
|
||||
<path d="M94.07 151.638L94.04 151.689L94.029 151.71L89.063 160.048L84.426 167.82L71.872 150.373C72.273 150.085 72.674 149.777 73.055 149.458C73.065 149.468 73.065 149.468 73.076 149.479C75.594 147.474 77.836 145.12 79.697 142.488L94.04 151.618L94.07 151.638Z" fill="#E7ECF2"/>
|
||||
<path d="M116.278 150.373L103.724 167.82L99.087 160.048L94.11 151.71L94.069 151.638L108.505 142.447C110.376 145.099 112.607 147.464 115.136 149.489C115.518 149.797 115.897 150.096 116.278 150.373Z" fill="#E7ECF2"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0">
|
||||
<rect width="188.148" height="188.148" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="bg-gray-800 pattern py-20">
|
||||
<div class="max-w-5xl px-6 mx-auto text-center">
|
||||
<h2 class="text-2xl font-semibold text-white">About Us</h2>
|
||||
|
||||
<p class="text-gray-400 mt-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ullamcorper nulla nunc quis molestie volutpat elementum at. Ultrices ipsum, enim cursus lorem ac. Orci maecenas praesent arcu eget orci est orci nullam. Leo purus est pellentesque massa at tortor, est. Aliquet pulvinar a mattis sagittis. Suspendisse porta id elementum, massa.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="bg-white py-20">
|
||||
<div class="max-w-5xl px-6 mx-auto text-center">
|
||||
<h2 class="text-2xl font-semibold text-gray-800">Latest Posts</h2>
|
||||
|
||||
<div class="flex flex-col items-center justify-center mt-6">
|
||||
<a class="max-w-2xl w-full block bg-white shadow-md rounded-md border-t-4 border-indigo-600 transition duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-110" href="#">
|
||||
<div class="flex items-center justify-between px-4 py-2">
|
||||
<h3 class="text-lg font-medium text-gray-700">Easy, Free Laravel CI Using GitHub Actions</h3>
|
||||
<span class="block text-gray-600 font-light text-sm">20 Jan 2020</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="mt-8 max-w-2xl w-full block bg-white shadow-md rounded-md border-t-4 border-indigo-600 transition duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-110" href="#">
|
||||
<div class="flex items-center justify-between px-4 py-2">
|
||||
<h3 class="text-lg font-medium text-gray-700">Pest: a delightful PHP Testing Framework</h3>
|
||||
<span class="block text-gray-600 font-light text-sm">29 Oct 2019</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="mt-8 max-w-2xl w-full block bg-white shadow-md rounded-md border-t-4 border-indigo-600 transition duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-110" href="#">
|
||||
<div class="flex items-center justify-between px-4 py-2">
|
||||
<h3 class="text-lg font-medium text-gray-700">Using inline SVGs in Vue components</h3>
|
||||
<span class="block text-gray-600 font-light text-sm">15 Oct 2019</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="mt-8 max-w-2xl w-full block bg-white shadow-md rounded-md border-t-4 border-indigo-600 transition duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-110" href="#">
|
||||
<div class="flex items-center justify-between px-4 py-2">
|
||||
<h3 class="text-lg font-medium text-gray-700">Acceptance Testing Laravel & VueJs Apps with Codeception</h3>
|
||||
<span class="block text-gray-600 font-light text-sm">3 Oct 2019</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-center mt-12">
|
||||
<a class="flex items-center text-gray-600 hover:underline hover:text-gray-500" href="#">
|
||||
<span>View More</span>
|
||||
|
||||
<svg class="h-5 w-5 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="bg-gray-800 pattern py-20">
|
||||
<div class="max-w-5xl px-6 mx-auto text-center">
|
||||
<h2 class="text-2xl font-semibold text-white">Projects</h2>
|
||||
|
||||
<div class="flex items-center justify-center mt-10">
|
||||
<div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
|
||||
<div class="max-w-xs w-full">
|
||||
<div class="flex items-center justify-center h-56 bg-white border-b-8 border-teal-400 rounded-md overflow-hidden">
|
||||
<img class="object-cover h-8" src="https://premium-tailwindcomponents.netlify.app/assets/svg/tailwindcomponent-dark.svg" alt="">
|
||||
</div>
|
||||
|
||||
<a href="#" class="block bg-gray-700 mt-5 rounded-md overflow-hidden transition duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-110">
|
||||
<div class="py-2 px-3 text-center text-sm">
|
||||
<p class="text-gray-300">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
|
||||
|
||||
<span class="block text-gray-500 mt-2">tailwindcomponents.com</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="max-w-xs w-full">
|
||||
<div class="flex items-center justify-center h-56 bg-white border-b-8 border-teal-400 rounded-md overflow-hidden">
|
||||
<img class="object-cover h-8" src="https://premium-tailwindcomponents.netlify.app/assets/svg/tailwindcomponent-dark.svg" alt="">
|
||||
</div>
|
||||
|
||||
<a href="#" class="block bg-gray-700 mt-5 rounded-md overflow-hidden transition duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-110">
|
||||
<div class="py-2 px-3 text-center text-sm">
|
||||
<p class="text-gray-300">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
|
||||
|
||||
<span class="block text-gray-500 mt-2">tailwindcomponents</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="max-w-xs w-full">
|
||||
<div class="flex items-center justify-center h-56 bg-white border-b-8 border-teal-400 rounded-md overflow-hidden">
|
||||
<img class="object-cover h-8" src="https://premium-tailwindcomponents.netlify.app/assets/svg/tailwindcomponent-dark.svg" alt="">
|
||||
</div>
|
||||
|
||||
<a href="#" class="block bg-gray-700 mt-5 rounded-md overflow-hidden transition duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-110">
|
||||
<div class="py-2 px-3 text-center text-sm">
|
||||
<p class="text-gray-300">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
|
||||
|
||||
<span class="block text-gray-500 mt-2">tailwindcomponents</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-center mt-12">
|
||||
<a class="flex items-center text-white hover:underline hover:text-gray-200" href="#">
|
||||
<span>View More On Github</span>
|
||||
|
||||
<svg class="h-5 w-5 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer class="bg-white">
|
||||
<div class="container mx-auto px-6 py-4">
|
||||
<div class="flex justify-between items-center">
|
||||
<div>
|
||||
<div class="text-gray-600">© Brand Name</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center -mx-2">
|
||||
<a class="flex items-center mx-2 text-gray-600 hover:text-indigo-600" href="#">
|
||||
<svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M19 11H5M19 11C20.1046 11 21 11.8954 21 13V19C21 20.1046 20.1046 21 19 21H5C3.89543 21 3 20.1046 3 19V13C3 11.8954 3.89543 11 5 11M19 11V9C19 7.89543 18.1046 7 17 7M5 11V9C5 7.89543 5.89543 7 7 7M7 7V5C7 3.89543 7.89543 3 9 3H15C16.1046 3 17 3.89543 17 5V7M7 7H17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<a class="flex items-center mx-2 text-gray-600 hover:text-indigo-600" href="#">
|
||||
<svg class="h-5 w-5 fill-current" xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'>
|
||||
<path d='M496,109.5a201.8,201.8,0,0,1-56.55,15.3,97.51,97.51,0,0,0,43.33-53.6,197.74,197.74,0,0,1-62.56,23.5A99.14,99.14,0,0,0,348.31,64c-54.42,0-98.46,43.4-98.46,96.9a93.21,93.21,0,0,0,2.54,22.1,280.7,280.7,0,0,1-203-101.3A95.69,95.69,0,0,0,36,130.4C36,164,53.53,193.7,80,211.1A97.5,97.5,0,0,1,35.22,199v1.2c0,47,34,86.1,79,95a100.76,100.76,0,0,1-25.94,3.4,94.38,94.38,0,0,1-18.51-1.8c12.51,38.5,48.92,66.5,92.05,67.3A199.59,199.59,0,0,1,39.5,405.6,203,203,0,0,1,16,404.2,278.68,278.68,0,0,0,166.74,448c181.36,0,280.44-147.7,280.44-275.8,0-4.2-.11-8.4-.31-12.5A198.48,198.48,0,0,0,496,109.5Z'/>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<a class="flex items-center mx-2 text-gray-600 hover:text-indigo-600" href="#">
|
||||
<svg class="h-5 w-5 fill-current" xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'>
|
||||
<path d='M256,32C132.3,32,32,134.9,32,261.7c0,101.5,64.2,187.5,153.2,217.9a17.56,17.56,0,0,0,3.8.4c8.3,0,11.5-6.1,11.5-11.4,0-5.5-.2-19.9-.3-39.1a102.4,102.4,0,0,1-22.6,2.7c-43.1,0-52.9-33.5-52.9-33.5-10.2-26.5-24.9-33.6-24.9-33.6-19.5-13.7-.1-14.1,1.4-14.1h.1c22.5,2,34.3,23.8,34.3,23.8,11.2,19.6,26.2,25.1,39.6,25.1a63,63,0,0,0,25.6-6c2-14.8,7.8-24.9,14.2-30.7-49.7-5.8-102-25.5-102-113.5,0-25.1,8.7-45.6,23-61.6-2.3-5.8-10-29.2,2.2-60.8a18.64,18.64,0,0,1,5-.5c8.1,0,26.4,3.1,56.6,24.1a208.21,208.21,0,0,1,112.2,0c30.2-21,48.5-24.1,56.6-24.1a18.64,18.64,0,0,1,5,.5c12.2,31.6,4.5,55,2.2,60.8,14.3,16.1,23,36.6,23,61.6,0,88.2-52.4,107.6-102.3,113.3,8,7.1,15.2,21.1,15.2,42.5,0,30.7-.3,55.5-.3,63,0,5.4,3.1,11.5,11.4,11.5a19.35,19.35,0,0,0,4-.4C415.9,449.2,480,363.1,480,261.7,480,134.9,379.7,32,256,32Z'/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- start of script section -->
|
||||
<script type="text/javascript">
|
||||
let toogler = document.getElementById("dark_mood_toogler");
|
||||
let doc_html_el = document.getElementsByTagName('html')[0];
|
||||
|
||||
doc_html_el.addEventListener('keyup',(e)=>{
|
||||
// key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
|
||||
if(e.ctrlKey && e.keyCode =='220'){
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
|
||||
}
|
||||
})
|
||||
doc_html_el.addEventListener('keyup',(e)=>{
|
||||
// key 191 is the forward slash , need to press ctrl+ / to show or hide the darkmode button
|
||||
if(e.ctrlKey && e.keyCode =='191'){
|
||||
toogler.style.display =='block'? toogler.style.display = 'none':toogler.style.display ='block';
|
||||
|
||||
}
|
||||
})
|
||||
toogler.addEventListener('click',()=>{
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
console.log(doc_html_el.className);
|
||||
})
|
||||
</script>
|
||||
<!-- end of script section -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -14,10 +14,7 @@
|
||||
|
||||
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||
d
|
||||
</button>
|
||||
|
||||
|
||||
|
||||
</button>
|
||||
|
||||
|
||||
<!-- header 10 start -->
|
||||
@@ -272,8 +269,11 @@
|
||||
})
|
||||
toogler.addEventListener('click',()=>{
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
console.log(doc_html_el.className);
|
||||
})
|
||||
</script>
|
||||
<!-- end of script section -->
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -74,3 +74,5 @@
|
||||
</script>
|
||||
<!-- end of script section -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -24,44 +24,45 @@
|
||||
<div>Header 12</div>
|
||||
</section>
|
||||
|
||||
<nav class="bg-white shadow dark:bg-gray-800">
|
||||
<div class="container px-6 py-4 mx-auto md:flex md:justify-between md:items-center">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<a class="text-2xl font-bold text-gray-800 transition-colors duration-200 transform dark:text-white lg:text-3xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
|
||||
</div>
|
||||
|
||||
<!-- Mobile menu button -->
|
||||
<div class="flex md:hidden">
|
||||
<button type="button" class="text-gray-500 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 focus:outline-none focus:text-gray-600 dark:focus:text-gray-400" aria-label="toggle menu">
|
||||
<svg viewBox="0 0 24 24" class="w-6 h-6 fill-current">
|
||||
<path fill-rule="evenodd" d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<nav x-data="{mobile_nav_status:false}" class="bg-white shadow dark:bg-gray-800">
|
||||
<div class="container px-6 py-4 mx-auto md:flex md:justify-between md:items-center">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<a class="text-2xl font-bold text-gray-800 transition-colors duration-200 transform dark:text-white lg:text-3xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
|
||||
</div>
|
||||
|
||||
<!-- Mobile Menu open: "block", Menu closed: "hidden" -->
|
||||
<div class="items-center md:flex">
|
||||
<div class="flex flex-col md:flex-row md:mx-6">
|
||||
<a class="my-1 text-sm font-medium text-gray-700 transition-colors duration-200 transform dark:text-gray-200 hover:text-blue-500 dark:hover:text-blue-400 md:mx-4 md:my-0" href="#">Home</a>
|
||||
<a class="my-1 text-sm font-medium text-gray-700 transition-colors duration-200 transform dark:text-gray-200 hover:text-blue-500 dark:hover:text-blue-400 md:mx-4 md:my-0" href="#">Shop</a>
|
||||
<a class="my-1 text-sm font-medium text-gray-700 transition-colors duration-200 transform dark:text-gray-200 hover:text-blue-500 dark:hover:text-blue-400 md:mx-4 md:my-0" href="#">Contact</a>
|
||||
<a class="my-1 text-sm font-medium text-gray-700 transition-colors duration-200 transform dark:text-gray-200 hover:text-blue-500 dark:hover:text-blue-400 md:mx-4 md:my-0" href="#">About</a>
|
||||
</div>
|
||||
<!-- Mobile menu button -->
|
||||
<div class="flex md:hidden ">
|
||||
<button @click="mobile_nav_status=!mobile_nav_status" type="button" class="text-gray-500 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 focus:outline-none focus:text-gray-600 dark:focus:text-gray-400" aria-label="toggle menu">
|
||||
<svg viewBox="0 0 24 24" class="w-6 h-6 fill-current">
|
||||
<path fill-rule="evenodd" d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-center md:block">
|
||||
<a class="relative text-gray-700 transition-colors duration-200 transform dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-300" href="#">
|
||||
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M3 3H5L5.4 5M7 13H17L21 5H5.4M7 13L5.4 5M7 13L4.70711 15.2929C4.07714 15.9229 4.52331 17 5.41421 17H17M17 17C15.8954 17 15 17.8954 15 19C15 20.1046 15.8954 21 17 21C18.1046 21 19 20.1046 19 19C19 17.8954 18.1046 17 17 17ZM9 19C9 20.1046 8.10457 21 7 21C5.89543 21 5 20.1046 5 19C5 17.8954 5.89543 17 7 17C8.10457 17 9 17.8954 9 19Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<!-- Mobile Menu open: "block", Menu closed: "hidden" -->
|
||||
<div :class="mobile_nav_status ? 'block items-center md:flex ' : 'hidden items-center md:flex '" >
|
||||
<div class="flex flex-col md:flex-row md:mx-6">
|
||||
<a class="my-1 text-sm font-medium text-gray-700 transition-colors duration-200 transform dark:text-gray-200 hover:text-blue-500 dark:hover:text-blue-400 md:mx-4 md:my-0" href="#">Home</a>
|
||||
<a class="my-1 text-sm font-medium text-gray-700 transition-colors duration-200 transform dark:text-gray-200 hover:text-blue-500 dark:hover:text-blue-400 md:mx-4 md:my-0" href="#">Shop</a>
|
||||
<a class="my-1 text-sm font-medium text-gray-700 transition-colors duration-200 transform dark:text-gray-200 hover:text-blue-500 dark:hover:text-blue-400 md:mx-4 md:my-0" href="#">Contact</a>
|
||||
<a class="my-1 text-sm font-medium text-gray-700 transition-colors duration-200 transform dark:text-gray-200 hover:text-blue-500 dark:hover:text-blue-400 md:mx-4 md:my-0" href="#">About</a>
|
||||
</div>
|
||||
|
||||
<span class="absolute top-3 left-0 p-1 text-xs text-white bg-blue-500 rounded-full"></span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="flex justify-center md:block border p-2 rounded mt-3 md:mt-0 md:rounded-none md:border-none">
|
||||
<a class="relative text-gray-700 transition-colors duration-200 transform dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-300" href="#">
|
||||
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M3 3H5L5.4 5M7 13H17L21 5H5.4M7 13L5.4 5M7 13L4.70711 15.2929C4.07714 15.9229 4.52331 17 5.41421 17H17M17 17C15.8954 17 15 17.8954 15 19C15 20.1046 15.8954 21 17 21C18.1046 21 19 20.1046 19 19C19 17.8954 18.1046 17 17 17ZM9 19C9 20.1046 8.10457 21 7 21C5.89543 21 5 20.1046 5 19C5 17.8954 5.89543 17 7 17C8.10457 17 9 17.8954 9 19Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
||||
<span class="absolute top-3 left-0 p-1 text-xs text-white bg-blue-500 rounded-full"></span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- header 12 end -->
|
||||
|
||||
@@ -94,3 +95,5 @@
|
||||
</script>
|
||||
<!-- end of script section -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -7,7 +7,7 @@
|
||||
<link rel="stylesheet" href="../../../dist/tailshape.css">
|
||||
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer>
|
||||
</script><script defer src="https://unpkg.com/alpinejs@3.4.2/dist/cdn.min.js"></script>
|
||||
<title>Header 8</title>
|
||||
<title>Header 13</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
@@ -18,6 +18,52 @@
|
||||
|
||||
|
||||
|
||||
<!-- header 13 start -->
|
||||
|
||||
<section class="section_divider">
|
||||
<div>Header 13</div>
|
||||
</section>
|
||||
|
||||
|
||||
<nav x-data="{mobile_nav_status:false}" class="bg-white shadow dark:bg-gray-800">
|
||||
<div class="container px-6 py-3 mx-auto md:flex">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<a class="text-2xl font-bold text-gray-800 transition-colors duration-200 transform dark:text-white lg:text-3xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
|
||||
</div>
|
||||
|
||||
<!-- Mobile menu button -->
|
||||
<div class="flex md:hidden">
|
||||
<button @click="mobile_nav_status=!mobile_nav_status" type="button" class="text-gray-500 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 focus:outline-none focus:text-gray-600 dark:focus:text-gray-400" aria-label="toggle menu">
|
||||
<svg viewBox="0 0 24 24" class="w-6 h-6 fill-current">
|
||||
<path fill-rule="evenodd" d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mobile Menu open: "block", Menu closed: "hidden" -->
|
||||
<div :class="mobile_nav_status ? 'block w-full md:flex md:items-center md:justify-between' : 'hidden w-full md:flex md:items-center md:justify-between '" >
|
||||
<div class="flex flex-col px-2 py-3 -mx-4 md:flex-row md:mx-0 md:py-0">
|
||||
<a href="#" class="px-2 py-1 text-sm font-medium text-gray-700 transition-colors duration-200 transform rounded dark:text-gray-200 hover:bg-gray-900 hover:text-gray-100 md:mx-2">Home</a>
|
||||
<a href="#" class="px-2 py-1 text-sm font-medium text-gray-700 transition-colors duration-200 transform rounded dark:text-gray-200 hover:bg-gray-900 hover:text-gray-100 md:mx-2">About</a>
|
||||
<a href="#" class="px-2 py-1 text-sm font-medium text-gray-700 transition-colors duration-200 transform rounded dark:text-gray-200 hover:bg-gray-900 hover:text-gray-100 md:mx-2">Contact</a>
|
||||
</div>
|
||||
|
||||
<div class="relative">
|
||||
<span class="absolute inset-y-0 left-0 flex items-center pl-3">
|
||||
<svg class="w-5 h-5 text-gray-400" viewBox="0 0 24 24" fill="none">
|
||||
<path d="M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
|
||||
</svg>
|
||||
</span>
|
||||
|
||||
<input type="text" class="w-full py-2 pl-10 pr-4 text-gray-700 bg-white border rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 dark:focus:border-blue-300 focus:outline-none focus:ring focus:ring-opacity-40 focus:ring-blue-300" placeholder="Search">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- header 13 end -->
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -47,3 +93,5 @@
|
||||
</script>
|
||||
<!-- end of script section -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
103
public/componets/navs_headers/14_header.html
Normal file
103
public/componets/navs_headers/14_header.html
Normal file
@@ -0,0 +1,103 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="../../../dist/tailshape.css">
|
||||
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer>
|
||||
</script><script defer src="https://unpkg.com/alpinejs@3.4.2/dist/cdn.min.js"></script>
|
||||
<title>Header 14</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||
d
|
||||
</button>
|
||||
|
||||
|
||||
|
||||
<!-- header 14 start -->
|
||||
<section class="section_divider">
|
||||
<div>Header 14</div>
|
||||
</section>
|
||||
|
||||
<nav x-data="{mobile_nav_status:false}" class="bg-white shadow dark:bg-gray-800">
|
||||
<div class="container px-6 py-4 mx-auto">
|
||||
<div class="md:flex md:items-center md:justify-between">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="text-xl font-semibold text-gray-700">
|
||||
<a class="text-2xl font-bold text-gray-800 transition-colors duration-200 transform dark:text-white lg:text-3xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
|
||||
</div>
|
||||
|
||||
<!-- Mobile menu button -->
|
||||
<div class="flex md:hidden">
|
||||
<button @click="mobile_nav_status=!mobile_nav_status" type="button" class="text-gray-500 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 focus:outline-none focus:text-gray-600 dark:focus:text-gray-400" aria-label="toggle menu">
|
||||
<svg viewBox="0 0 24 24" class="w-6 h-6 fill-current">
|
||||
<path fill-rule="evenodd" d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mobile Menu open: "block", Menu closed: "hidden" -->
|
||||
<div :class="mobile_nav_status ? 'block flex-1 md:flex md:items-center md:justify-between' : 'hidden flex-1 md:flex md:items-center md:justify-between' " >
|
||||
<div class="flex flex-col -mx-4 md:flex-row md:items-center md:mx-8">
|
||||
<a href="#" class="px-2 py-1 mx-2 mt-2 text-sm font-medium text-gray-700 transition-colors duration-200 transform rounded-md md:mt-0 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-700">Join Slack</a>
|
||||
<a href="#" class="px-2 py-1 mx-2 mt-2 text-sm font-medium text-gray-700 transition-colors duration-200 transform rounded-md md:mt-0 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-700">Browse Topics</a>
|
||||
<a href="#" class="px-2 py-1 mx-2 mt-2 text-sm font-medium text-gray-700 transition-colors duration-200 transform rounded-md md:mt-0 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-700">Random Item</a>
|
||||
<a href="#" class="px-2 py-1 mx-2 mt-2 text-sm font-medium text-gray-700 transition-colors duration-200 transform rounded-md md:mt-0 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-700">Experts</a>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center mt-4 md:mt-0">
|
||||
<button class="hidden mx-4 text-gray-600 transition-colors duration-200 transform md:block dark:text-gray-200 hover:text-gray-700 dark:hover:text-gray-400 focus:text-gray-700 dark:focus:text-gray-400 focus:outline-none" aria-label="show notifications">
|
||||
<svg class="w-6 h-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M15 17H20L18.5951 15.5951C18.2141 15.2141 18 14.6973 18 14.1585V11C18 8.38757 16.3304 6.16509 14 5.34142V5C14 3.89543 13.1046 3 12 3C10.8954 3 10 3.89543 10 5V5.34142C7.66962 6.16509 6 8.38757 6 11V14.1585C6 14.6973 5.78595 15.2141 5.40493 15.5951L4 17H9M15 17V18C15 19.6569 13.6569 21 12 21C10.3431 21 9 19.6569 9 18V17M15 17H9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<button type="button" class="flex items-center focus:outline-none" aria-label="toggle profile dropdown">
|
||||
<div class="w-8 h-8 overflow-hidden border-2 border-gray-400 rounded-full">
|
||||
<img src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" class="object-cover w-full h-full" alt="avatar">
|
||||
</div>
|
||||
|
||||
<h3 class="mx-2 text-sm font-medium text-gray-700 dark:text-gray-200 md:hidden">Khatab wedaa</h3>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- header 14 end -->
|
||||
|
||||
|
||||
<!-- start of script section -->
|
||||
<script type="text/javascript">
|
||||
let toogler = document.getElementById("dark_mood_toogler");
|
||||
let doc_html_el = document.getElementsByTagName('html')[0];
|
||||
|
||||
doc_html_el.addEventListener('keyup',(e)=>{
|
||||
// key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
|
||||
if(e.ctrlKey && e.keyCode =='220'){
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
|
||||
}
|
||||
})
|
||||
doc_html_el.addEventListener('keyup',(e)=>{
|
||||
// key 191 is the forward slash , need to press ctrl+ / to show or hide the darkmode button
|
||||
if(e.ctrlKey && e.keyCode =='191'){
|
||||
toogler.style.display =='block'? toogler.style.display = 'none':toogler.style.display ='block';
|
||||
|
||||
}
|
||||
})
|
||||
toogler.addEventListener('click',()=>{
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
console.log(doc_html_el.className);
|
||||
})
|
||||
</script>
|
||||
<!-- end of script section -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
128
public/componets/navs_headers/15_header.html
Normal file
128
public/componets/navs_headers/15_header.html
Normal file
@@ -0,0 +1,128 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="../../../dist/tailshape.css">
|
||||
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer>
|
||||
</script><script defer src="https://unpkg.com/alpinejs@3.4.2/dist/cdn.min.js"></script>
|
||||
<title>Header 15</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||
d
|
||||
</button>
|
||||
|
||||
|
||||
|
||||
<!-- header 15 start -->
|
||||
<section class="section_divider">
|
||||
<div>Header 15</div>
|
||||
</section>
|
||||
|
||||
<nav x-data="{mobile_nav_status:false}" class="bg-white shadow dark:bg-gray-800">
|
||||
<div class="container px-6 py-4 mx-auto lg:flex lg:justify-between lg:items-center">
|
||||
<div class="lg:flex lg:items-center">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<a class="text-2xl font-bold text-gray-800 transition-colors duration-200 transform dark:text-white lg:text-3xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
|
||||
</div>
|
||||
|
||||
<!-- Mobile menu button -->
|
||||
<div class="flex lg:hidden">
|
||||
<button @click="mobile_nav_status=!mobile_nav_status" type="button" class="text-gray-500 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 focus:outline-none focus:text-gray-600 dark:focus:text-gray-400" aria-label="toggle menu">
|
||||
<svg viewBox="0 0 24 24" class="w-6 h-6 fill-current">
|
||||
<path fill-rule="evenodd" d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div :class="mobile_nav_status ? 'block flex flex-col text-gray-600 capitalize dark:text-gray-300 lg:flex lg:px-16 lg:-mx-4 lg:flex-row lg:items-center ' : 'hidden flex flex-col text-gray-600 capitalize dark:text-gray-300 lg:flex lg:px-16 lg:-mx-4 lg:flex-row lg:items-center'" >
|
||||
<a href="#" class="mt-2 transition-colors duration-200 transform lg:mt-0 lg:mx-4 hover:text-gray-900 dark:hover:text-gray-200">features</a>
|
||||
<a href="#" class="mt-2 transition-colors duration-200 transform lg:mt-0 lg:mx-4 hover:text-gray-900 dark:hover:text-gray-200">downloads</a>
|
||||
<a href="#" class="mt-2 transition-colors duration-200 transform lg:mt-0 lg:mx-4 hover:text-gray-900 dark:hover:text-gray-200">docs</a>
|
||||
<a href="#" class="mt-2 transition-colors duration-200 transform lg:mt-0 lg:mx-4 hover:text-gray-900 dark:hover:text-gray-200">support</a>
|
||||
<a href="#" class="mt-2 transition-colors duration-200 transform lg:mt-0 lg:mx-4 hover:text-gray-900 dark:hover:text-gray-200">blog</a>
|
||||
|
||||
<div class="relative mt-4 lg:mt-0 lg:mx-4">
|
||||
<span class="absolute inset-y-0 left-0 flex items-center pl-3">
|
||||
<svg class="w-4 h-4 text-gray-600 dark:text-gray-300" viewBox="0 0 24 24" fill="none">
|
||||
<path d="M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
|
||||
</svg>
|
||||
</span>
|
||||
|
||||
<input type="text" class="w-full py-1 pl-10 pr-4 text-gray-700 placeholder-gray-600 bg-white border-b border-gray-600 dark:placeholder-gray-300 dark:focus:border-gray-300 lg:w-56 lg:border-transparent dark:bg-gray-800 dark:text-gray-300 focus:outline-none focus:border-gray-600" placeholder="Search">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-center mt-6 lg:flex lg:mt-0 lg:-mx-2">
|
||||
<a href="#" class="mx-2 text-gray-600 transition-colors duration-200 transform dark:text-gray-300 hover:text-gray-500 dark:hover:text-gray-300" aria-label="Reddit">
|
||||
<svg class="w-5 h-5 fill-current" viewBox="0 0 24 24" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C21.9939 17.5203 17.5203 21.9939 12 22ZM6.807 10.543C6.20862 10.5433 5.67102 10.9088 5.45054 11.465C5.23006 12.0213 5.37133 12.6558 5.807 13.066C5.92217 13.1751 6.05463 13.2643 6.199 13.33C6.18644 13.4761 6.18644 13.6229 6.199 13.769C6.199 16.009 8.814 17.831 12.028 17.831C15.242 17.831 17.858 16.009 17.858 13.769C17.8696 13.6229 17.8696 13.4761 17.858 13.33C18.4649 13.0351 18.786 12.3585 18.6305 11.7019C18.475 11.0453 17.8847 10.5844 17.21 10.593H17.157C16.7988 10.6062 16.458 10.7512 16.2 11C15.0625 10.2265 13.7252 9.79927 12.35 9.77L13 6.65L15.138 7.1C15.1931 7.60706 15.621 7.99141 16.131 7.992C16.1674 7.99196 16.2038 7.98995 16.24 7.986C16.7702 7.93278 17.1655 7.47314 17.1389 6.94094C17.1122 6.40873 16.6729 5.991 16.14 5.991C16.1022 5.99191 16.0645 5.99491 16.027 6C15.71 6.03367 15.4281 6.21641 15.268 6.492L12.82 6C12.7983 5.99535 12.7762 5.993 12.754 5.993C12.6094 5.99472 12.4851 6.09583 12.454 6.237L11.706 9.71C10.3138 9.7297 8.95795 10.157 7.806 10.939C7.53601 10.6839 7.17843 10.5422 6.807 10.543ZM12.18 16.524C12.124 16.524 12.067 16.524 12.011 16.524C11.955 16.524 11.898 16.524 11.842 16.524C11.0121 16.5208 10.2054 16.2497 9.542 15.751C9.49626 15.6958 9.47445 15.6246 9.4814 15.5533C9.48834 15.482 9.52348 15.4163 9.579 15.371C9.62737 15.3318 9.68771 15.3102 9.75 15.31C9.81233 15.31 9.87275 15.3315 9.921 15.371C10.4816 15.7818 11.159 16.0022 11.854 16C11.9027 16 11.9513 16 12 16C12.059 16 12.119 16 12.178 16C12.864 16.0011 13.5329 15.7863 14.09 15.386C14.1427 15.3322 14.2147 15.302 14.29 15.302C14.3653 15.302 14.4373 15.3322 14.49 15.386C14.5985 15.4981 14.5962 15.6767 14.485 15.786V15.746C13.8213 16.2481 13.0123 16.5208 12.18 16.523V16.524ZM14.307 14.08H14.291L14.299 14.041C13.8591 14.011 13.4994 13.6789 13.4343 13.2429C13.3691 12.8068 13.6162 12.3842 14.028 12.2269C14.4399 12.0697 14.9058 12.2202 15.1478 12.5887C15.3899 12.9572 15.3429 13.4445 15.035 13.76C14.856 13.9554 14.6059 14.0707 14.341 14.08H14.306H14.307ZM9.67 14C9.11772 14 8.67 13.5523 8.67 13C8.67 12.4477 9.11772 12 9.67 12C10.2223 12 10.67 12.4477 10.67 13C10.67 13.5523 10.2223 14 9.67 14Z">
|
||||
</path>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<a href="#" class="mx-2 text-gray-600 transition-colors duration-200 transform dark:text-gray-300 hover:text-gray-500 dark:hover:text-gray-300"
|
||||
aria-label="Facebook">
|
||||
<svg class="w-5 h-5 fill-current" viewBox="0 0 24 24" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M2.00195 12.002C2.00312 16.9214 5.58036 21.1101 10.439 21.881V14.892H7.90195V12.002H10.442V9.80204C10.3284 8.75958 10.6845 7.72064 11.4136 6.96698C12.1427 6.21332 13.1693 5.82306 14.215 5.90204C14.9655 5.91417 15.7141 5.98101 16.455 6.10205V8.56104H15.191C14.7558 8.50405 14.3183 8.64777 14.0017 8.95171C13.6851 9.25566 13.5237 9.68693 13.563 10.124V12.002H16.334L15.891 14.893H13.563V21.881C18.8174 21.0506 22.502 16.2518 21.9475 10.9611C21.3929 5.67041 16.7932 1.73997 11.4808 2.01722C6.16831 2.29447 2.0028 6.68235 2.00195 12.002Z">
|
||||
</path>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<a href="#" class="mx-2 text-gray-600 transition-colors duration-200 transform dark:text-gray-300 hover:text-gray-500 dark:hover:text-gray-300" aria-label="Github">
|
||||
<svg class="w-5 h-5 fill-current" viewBox="0 0 24 24" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M12.026 2C7.13295 1.99937 2.96183 5.54799 2.17842 10.3779C1.395 15.2079 4.23061 19.893 8.87302 21.439C9.37302 21.529 9.55202 21.222 9.55202 20.958C9.55202 20.721 9.54402 20.093 9.54102 19.258C6.76602 19.858 6.18002 17.92 6.18002 17.92C5.99733 17.317 5.60459 16.7993 5.07302 16.461C4.17302 15.842 5.14202 15.856 5.14202 15.856C5.78269 15.9438 6.34657 16.3235 6.66902 16.884C6.94195 17.3803 7.40177 17.747 7.94632 17.9026C8.49087 18.0583 9.07503 17.99 9.56902 17.713C9.61544 17.207 9.84055 16.7341 10.204 16.379C7.99002 16.128 5.66202 15.272 5.66202 11.449C5.64973 10.4602 6.01691 9.5043 6.68802 8.778C6.38437 7.91731 6.42013 6.97325 6.78802 6.138C6.78802 6.138 7.62502 5.869 9.53002 7.159C11.1639 6.71101 12.8882 6.71101 14.522 7.159C16.428 5.868 17.264 6.138 17.264 6.138C17.6336 6.97286 17.6694 7.91757 17.364 8.778C18.0376 9.50423 18.4045 10.4626 18.388 11.453C18.388 15.286 16.058 16.128 13.836 16.375C14.3153 16.8651 14.5612 17.5373 14.511 18.221C14.511 19.555 14.499 20.631 14.499 20.958C14.499 21.225 14.677 21.535 15.186 21.437C19.8265 19.8884 22.6591 15.203 21.874 10.3743C21.089 5.54565 16.9181 1.99888 12.026 2Z">
|
||||
</path>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- header 15 end -->
|
||||
|
||||
|
||||
|
||||
<!-- start of script section -->
|
||||
<script type="text/javascript">
|
||||
let toogler = document.getElementById("dark_mood_toogler");
|
||||
let doc_html_el = document.getElementsByTagName('html')[0];
|
||||
|
||||
doc_html_el.addEventListener('keyup',(e)=>{
|
||||
// key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
|
||||
if(e.ctrlKey && e.keyCode =='220'){
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
|
||||
}
|
||||
})
|
||||
doc_html_el.addEventListener('keyup',(e)=>{
|
||||
// key 191 is the forward slash , need to press ctrl+ / to show or hide the darkmode button
|
||||
if(e.ctrlKey && e.keyCode =='191'){
|
||||
toogler.style.display =='block'? toogler.style.display = 'none':toogler.style.display ='block';
|
||||
|
||||
}
|
||||
})
|
||||
toogler.addEventListener('click',()=>{
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
console.log(doc_html_el.className);
|
||||
})
|
||||
</script>
|
||||
<!-- end of script section -->
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
144
public/componets/navs_headers/16_header.html
Normal file
144
public/componets/navs_headers/16_header.html
Normal file
@@ -0,0 +1,144 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="../../../dist/tailshape.css">
|
||||
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer>
|
||||
</script><script defer src="https://unpkg.com/alpinejs@3.4.2/dist/cdn.min.js"></script>
|
||||
<title>Header 16</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||
d
|
||||
</button>
|
||||
|
||||
|
||||
|
||||
<!-- header 16 start -->
|
||||
<section class="section_divider">
|
||||
<div>Header 16</div>
|
||||
</section>
|
||||
|
||||
<nav x-data="{mobile_nav_status:false}" class="bg-white shadow dark:bg-gray-800">
|
||||
<div class="container px-6 py-3 mx-auto">
|
||||
<div class="flex flex-col md:flex-row md:justify-between md:items-center">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center">
|
||||
<a class="text-2xl font-bold text-gray-800 transition-colors duration-200 transform dark:text-white lg:text-3xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
|
||||
|
||||
<!-- Search input on desktop screen -->
|
||||
<div class="hidden mx-10 md:block">
|
||||
<div class="relative">
|
||||
<span class="absolute inset-y-0 left-0 flex items-center pl-3">
|
||||
<svg class="w-5 h-5 text-gray-400" viewBox="0 0 24 24" fill="none">
|
||||
<path d="M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
|
||||
</svg>
|
||||
</span>
|
||||
|
||||
<input type="text" class="w-full py-2 pl-10 pr-4 text-gray-700 bg-white border rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 dark:focus:border-blue-300 focus:outline-none focus:ring focus:ring-opacity-40 focus:ring-blue-300" placeholder="Search">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mobile menu button -->
|
||||
<div class="flex md:hidden">
|
||||
<button @click="mobile_nav_status=!mobile_nav_status" type="button" class="text-gray-500 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 focus:outline-none focus:text-gray-600 dark:focus:text-gray-400" aria-label="toggle menu">
|
||||
<svg viewBox="0 0 24 24" class="w-6 h-6 fill-current">
|
||||
<path fill-rule="evenodd" d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mobile Menu open: "block", Menu closed: "hidden" -->
|
||||
<div :class="mobile_nav_status ? 'block items-center md:flex' : 'hidden items-center md:flex' ">
|
||||
<div class="flex flex-col mt-2 md:flex-row md:mt-0 md:mx-1">
|
||||
<a class="my-1 text-sm leading-5 text-gray-700 transition-colors duration-200 transform dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 hover:underline md:mx-4 md:my-0" href="#">Home</a>
|
||||
<a class="my-1 text-sm leading-5 text-gray-700 transition-colors duration-200 transform dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 hover:underline md:mx-4 md:my-0" href="#">Blog</a>
|
||||
<a class="my-1 text-sm leading-5 text-gray-700 transition-colors duration-200 transform dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 hover:underline md:mx-4 md:my-0" href="#">Compoents</a>
|
||||
<a class="my-1 text-sm leading-5 text-gray-700 transition-colors duration-200 transform dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 hover:underline md:mx-4 md:my-0" href="#">Courses</a>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center py-2 -mx-1 md:mx-0">
|
||||
<a class="block w-1/2 px-3 py-2 mx-1 text-sm font-medium leading-5 text-center text-white transition-colors duration-200 transform bg-gray-500 rounded-md hover:bg-blue-600 md:mx-2 md:w-auto" href="#">Login</a>
|
||||
<a class="block w-1/2 px-3 py-2 mx-1 text-sm font-medium leading-5 text-center text-white transition-colors duration-200 transform bg-blue-500 rounded-md hover:bg-blue-600 md:mx-0 md:w-auto" href="#">Join free</a>
|
||||
</div>
|
||||
|
||||
<!-- Search input on mobile screen -->
|
||||
<div class="mt-3 md:hidden">
|
||||
<div class="relative">
|
||||
<span class="absolute inset-y-0 left-0 flex items-center pl-3">
|
||||
<svg class="w-5 h-5 text-gray-400" viewBox="0 0 24 24" fill="none">
|
||||
<path d="M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
|
||||
</svg>
|
||||
</span>
|
||||
|
||||
<input type="text" class="w-full py-2 pl-10 pr-4 text-gray-700 bg-white border rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 dark:focus:border-blue-300 focus:outline-none focus:ring focus:ring-opacity-40 focus:ring-blue-300" placeholder="Search">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="py-5 mt-3 -mx-3 overflow-y-auto whitespace-nowrap h-0 bg-transparent hidden lg:block">
|
||||
<a class="mx-4 text-sm leading-5 text-gray-700 transition-colors duration-200 transform dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 hover:underline md:my-0" href="#">News</a>
|
||||
<a class="mx-4 text-sm leading-5 text-gray-700 transition-colors duration-200 transform dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 hover:underline md:my-0" href="#">Articles</a>
|
||||
<a class="mx-4 text-sm leading-5 text-gray-700 transition-colors duration-200 transform dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 hover:underline md:my-0" href="#">Videos</a>
|
||||
<a class="mx-4 text-sm leading-5 text-gray-700 transition-colors duration-200 transform dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 hover:underline md:my-0" href="#">Tricks</a>
|
||||
<a class="mx-4 text-sm leading-5 text-gray-700 transition-colors duration-200 transform dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 hover:underline md:my-0" href="#">PHP</a>
|
||||
<a class="mx-4 text-sm leading-5 text-gray-700 transition-colors duration-200 transform dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 hover:underline md:my-0" href="#">Laravel</a>
|
||||
<a class="mx-4 text-sm leading-5 text-gray-700 transition-colors duration-200 transform dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 hover:underline md:my-0" href="#">Vue</a>
|
||||
<a class="mx-4 text-sm leading-5 text-gray-700 transition-colors duration-200 transform dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 hover:underline md:my-0" href="#">React</a>
|
||||
<a class="mx-4 text-sm leading-5 text-gray-700 transition-colors duration-200 transform dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 hover:underline md:my-0" href="#">Tailwindcss</a>
|
||||
<a class="mx-4 text-sm leading-5 text-gray-700 transition-colors duration-200 transform dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 hover:underline md:my-0" href="#">Meraki UI</a>
|
||||
<a class="mx-4 text-sm leading-5 text-gray-700 transition-colors duration-200 transform dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 hover:underline md:my-0" href="#">CPP</a>
|
||||
<a class="mx-4 text-sm leading-5 text-gray-700 transition-colors duration-200 transform dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 hover:underline md:my-0" href="#">JavaScript</a>
|
||||
<a class="mx-4 text-sm leading-5 text-gray-700 transition-colors duration-200 transform dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 hover:underline md:my-0" href="#">Ruby</a>
|
||||
<a class="mx-4 text-sm leading-5 text-gray-700 transition-colors duration-200 transform dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 hover:underline md:my-0" href="#">Mysql</a>
|
||||
<a class="mx-4 text-sm leading-5 text-gray-700 transition-colors duration-200 transform dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 hover:underline md:my-0" href="#">Pest</a>
|
||||
<a class="mx-4 text-sm leading-5 text-gray-700 transition-colors duration-200 transform dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 hover:underline md:my-0" href="#">PHPUnit</a>
|
||||
<a class="mx-4 text-sm leading-5 text-gray-700 transition-colors duration-200 transform dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 hover:underline md:my-0" href="#">Netlify</a>
|
||||
<a class="mx-4 text-sm leading-5 text-gray-700 transition-colors duration-200 transform dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 hover:underline md:my-0" href="#">VS Code</a>
|
||||
<a class="mx-4 text-sm leading-5 text-gray-700 transition-colors duration-200 transform dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 hover:underline md:my-0" href="#">PHPStorm</a>
|
||||
<a class="mx-4 text-sm leading-5 text-gray-700 transition-colors duration-200 transform dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 hover:underline md:my-0" href="#">Sublime</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- header 16 end -->
|
||||
|
||||
|
||||
|
||||
<!-- start of script section -->
|
||||
<script type="text/javascript">
|
||||
let toogler = document.getElementById("dark_mood_toogler");
|
||||
let doc_html_el = document.getElementsByTagName('html')[0];
|
||||
|
||||
doc_html_el.addEventListener('keyup',(e)=>{
|
||||
// key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
|
||||
if(e.ctrlKey && e.keyCode =='220'){
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
|
||||
}
|
||||
})
|
||||
doc_html_el.addEventListener('keyup',(e)=>{
|
||||
// key 191 is the forward slash , need to press ctrl+ / to show or hide the darkmode button
|
||||
if(e.ctrlKey && e.keyCode =='191'){
|
||||
toogler.style.display =='block'? toogler.style.display = 'none':toogler.style.display ='block';
|
||||
|
||||
}
|
||||
})
|
||||
toogler.addEventListener('click',()=>{
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
console.log(doc_html_el.className);
|
||||
})
|
||||
</script>
|
||||
<!-- end of script section -->
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
85
public/componets/navs_headers/17_header.html
Normal file
85
public/componets/navs_headers/17_header.html
Normal file
@@ -0,0 +1,85 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="../../../dist/tailshape.css">
|
||||
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer>
|
||||
</script><script defer src="https://unpkg.com/alpinejs@3.4.2/dist/cdn.min.js"></script>
|
||||
<title>Header 17</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||
d
|
||||
</button>
|
||||
|
||||
|
||||
<!-- header 17 start -->
|
||||
<section class="section_divider">
|
||||
<div>Header 17 </div>
|
||||
</section>
|
||||
<nav class=" bg-gray-100 dark:bg-gray-800">
|
||||
<div class="flex justify-between items-center bg-white dark:bg-gray-800 py-6 lg:px-40 md:px-20 px-10">
|
||||
<div class="">
|
||||
<a href="#"><img class="h-10 cursor-pointer" src="https://i.imgur.com/TMfJoK7.png" alt="" /></a>
|
||||
</div>
|
||||
<ul class="lg:flex hidden items-center space-x-10 dark:text-cyan-400">
|
||||
<li class="text-lg font-semibold hover:text-red-500 transition duration-200 cursor-pointer">Home</li>
|
||||
<li class="text-lg font-semibold hover:text-red-500 transition duration-200 cursor-pointer">Pages</li>
|
||||
<li class="text-lg font-semibold hover:text-red-500 transition duration-200 cursor-pointer">Products</li>
|
||||
<li class="text-lg font-semibold hover:text-red-500 transition duration-200 cursor-pointer">Contact</li>
|
||||
<li class="hover:text-red-500 transition duration-200 cursor-pointer">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path d="M3 1a1 1 0 000 2h1.22l.305 1.222a.997.997 0 00.01.042l1.358 5.43-.893.892C3.74 11.846 4.632 14 6.414 14H15a1 1 0 000-2H6.414l1-1H14a1 1 0 00.894-.553l3-6A1 1 0 0017 3H6.28l-.31-1.243A1 1 0 005 1H3zM16 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM6.5 18a1.5 1.5 0 100-3 1.5 1.5 0 000 3z" />
|
||||
</svg>
|
||||
</li>
|
||||
<li class="hover:text-red-500 transition duration-200 cursor-pointer">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="lg:hidden">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 cursor-pointer" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- header 17 end -->
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- start of script section -->
|
||||
<script type="text/javascript">
|
||||
let toogler = document.getElementById("dark_mood_toogler");
|
||||
let doc_html_el = document.getElementsByTagName('html')[0];
|
||||
|
||||
doc_html_el.addEventListener('keyup',(e)=>{
|
||||
// key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
|
||||
if(e.ctrlKey && e.keyCode =='220'){
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
|
||||
}
|
||||
})
|
||||
doc_html_el.addEventListener('keyup',(e)=>{
|
||||
// key 191 is the forward slash , need to press ctrl+ / to show or hide the darkmode button
|
||||
if(e.ctrlKey && e.keyCode =='191'){
|
||||
toogler.style.display =='block'? toogler.style.display = 'none':toogler.style.display ='block';
|
||||
|
||||
}
|
||||
})
|
||||
toogler.addEventListener('click',()=>{
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
console.log(doc_html_el.className);
|
||||
})
|
||||
</script>
|
||||
<!-- end of script section -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
98
public/componets/navs_headers/18_header.html
Normal file
98
public/componets/navs_headers/18_header.html
Normal file
@@ -0,0 +1,98 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="../../../dist/tailshape.css">
|
||||
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer>
|
||||
</script><script defer src="https://unpkg.com/alpinejs@3.4.2/dist/cdn.min.js"></script>
|
||||
<title>Header 18</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||
d
|
||||
</button>
|
||||
|
||||
|
||||
|
||||
<!-- header 18 start -->
|
||||
<section class="section_divider">
|
||||
<div>Header 18</div>
|
||||
</section>
|
||||
|
||||
<nav class="bg-[#242526] p-1 h-12">
|
||||
<div class="flex justify-between items-center">
|
||||
<!-- LEFT -->
|
||||
<div class="flex items-center space-x-2">
|
||||
<!-- logo -->
|
||||
<img class="h-8" src="https://freepngimg.com/thumb/facebook/62487-bluetie-icons-computer-facebook-login-icon-email.png" alt="">
|
||||
<input class="rounded-full h-6 bg-[#3A3B3C] p-4 text-xs text-gray-400 outline-none" type="text" placeholder="Search" />
|
||||
</div>
|
||||
<!-- MIDDLE -->
|
||||
<div class="relative flex justify-between w-1/5 items-center">
|
||||
<div class="relative group">
|
||||
<div class="group-hover:bg-gray-600 p-1 group-hover:rounded-lg transition-all ease-in-out duration-300">
|
||||
<img class="h-5 cursor-pointer" src="https://img.icons8.com/external-kmg-design-flat-kmg-design/32/000000/external-home-ui-essential-kmg-design-flat-kmg-design.png"/>
|
||||
</div>
|
||||
<div class="absolute group-hover:border-b-2 group-hover:cursor-pointer mt-2 border-blue-500 w-full transition-all duration-100 ease-in-out "></div>
|
||||
</div>
|
||||
<div class="relative group">
|
||||
<div class="group-hover:bg-gray-600 p-1 group-hover:rounded-lg transition-all ease-in-out duration-300">
|
||||
<img class="h-5 cursor-pointer" src="https://img.icons8.com/fluency/48/000000/conference-call.png"/>
|
||||
</div>
|
||||
<div class="absolute group-hover:border-b-2 group-hover:cursor-pointer mt-2 border-blue-500 w-full transition-all duration-100 ease-in-out"></div>
|
||||
</div>
|
||||
<div class="relative group">
|
||||
<div class="group-hover:bg-gray-600 p-1 group-hover:rounded-lg transition-all ease-in-out duration-300">
|
||||
<img class="h-5 cursor-pointer" src="https://img.icons8.com/external-bearicons-outline-color-bearicons/64/000000/external-watch-call-to-action-bearicons-outline-color-bearicons.png"/>
|
||||
</div>
|
||||
<div class="absolute group-hover:border-b-2 group-hover:cursor-pointer mt-2 border-blue-500 w-full transition-all duration-100 ease-in-out "></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- RIGHT -->
|
||||
<div class="flex justify-evenly w-1/5">
|
||||
|
||||
<img class="h-5" src="https://img.icons8.com/external-kmg-design-flat-kmg-design/32/000000/external-home-ui-essential-kmg-design-flat-kmg-design.png"/>
|
||||
<img class="h-5" src="https://img.icons8.com/fluency/48/000000/conference-call.png"/>
|
||||
<img class="h-5" src="https://img.icons8.com/external-bearicons-outline-color-bearicons/64/000000/external-watch-call-to-action-bearicons-outline-color-bearicons.png"/>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- header 18 end -->
|
||||
|
||||
|
||||
|
||||
<!-- start of script section -->
|
||||
<script type="text/javascript">
|
||||
let toogler = document.getElementById("dark_mood_toogler");
|
||||
let doc_html_el = document.getElementsByTagName('html')[0];
|
||||
|
||||
doc_html_el.addEventListener('keyup',(e)=>{
|
||||
// key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
|
||||
if(e.ctrlKey && e.keyCode =='220'){
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
|
||||
}
|
||||
})
|
||||
doc_html_el.addEventListener('keyup',(e)=>{
|
||||
// key 191 is the forward slash , need to press ctrl+ / to show or hide the darkmode button
|
||||
if(e.ctrlKey && e.keyCode =='191'){
|
||||
toogler.style.display =='block'? toogler.style.display = 'none':toogler.style.display ='block';
|
||||
|
||||
}
|
||||
})
|
||||
toogler.addEventListener('click',()=>{
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
console.log(doc_html_el.className);
|
||||
})
|
||||
</script>
|
||||
<!-- end of script section -->
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
94
public/componets/navs_headers/19_header.html
Normal file
94
public/componets/navs_headers/19_header.html
Normal file
@@ -0,0 +1,94 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="../../../dist/tailshape.css">
|
||||
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer>
|
||||
</script><script defer src="https://unpkg.com/alpinejs@3.4.2/dist/cdn.min.js"></script>
|
||||
<title>Header 19</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||
d
|
||||
</button>
|
||||
|
||||
|
||||
|
||||
<!-- header 19 start -->
|
||||
<section class="section_divider">
|
||||
<div>Header 19</div>
|
||||
</section>
|
||||
<nav class="flex justify-between px-20 py-10 items-center bg-white dark:bg-gray-800">
|
||||
<h1 class="text-xl text-gray-800 dark:text-red-400 font-bold">HotCoffee</h1>
|
||||
<div class="flex items-center">
|
||||
<div class="flex items-center ">
|
||||
<span class="absolute flex items-center ">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 pt-0.5 text-red-600 stroke-gray-500 dark:stroke-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<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" />
|
||||
</svg>
|
||||
</span>
|
||||
<input class="pl-10 py-1 w-full pr-4 outline-none bg-transparent border-b-gray-500 focus:border-b-2 dark:focus:border-b-red-400 font-bold text-gray-500 dark:placeholder:text-red-400" type="text" name="search" id="search" placeholder="Search..." />
|
||||
</div>
|
||||
</div>
|
||||
<ul class="flex items-center space-x-6">
|
||||
<li class="font-semibold text-gray-500 dark:text-cyan-400 dark:hover:text-red-400">Home</li>
|
||||
<li class="font-semibold text-gray-500 dark:text-cyan-400 dark:hover:text-red-400">Articles</li>
|
||||
<li>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 dark:stroke-red-400 dark:hover:stroke-cyan-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path d="M12 14l9-5-9-5-9 5 9 5z" />
|
||||
<path d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z" />
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222" />
|
||||
</svg>
|
||||
</li>
|
||||
<li>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 dark:stroke-red-400 dark:hover:stroke-cyan-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
|
||||
</svg>
|
||||
</li>
|
||||
<li>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 dark:stroke-red-400 dark:hover:stroke-cyan-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
|
||||
</svg>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- header 19 end -->
|
||||
|
||||
|
||||
|
||||
<!-- start of script section -->
|
||||
<script type="text/javascript">
|
||||
let toogler = document.getElementById("dark_mood_toogler");
|
||||
let doc_html_el = document.getElementsByTagName('html')[0];
|
||||
|
||||
doc_html_el.addEventListener('keyup',(e)=>{
|
||||
// key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
|
||||
if(e.ctrlKey && e.keyCode =='220'){
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
|
||||
}
|
||||
})
|
||||
doc_html_el.addEventListener('keyup',(e)=>{
|
||||
// key 191 is the forward slash , need to press ctrl+ / to show or hide the darkmode button
|
||||
if(e.ctrlKey && e.keyCode =='191'){
|
||||
toogler.style.display =='block'? toogler.style.display = 'none':toogler.style.display ='block';
|
||||
|
||||
}
|
||||
})
|
||||
toogler.addEventListener('click',()=>{
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
console.log(doc_html_el.className);
|
||||
})
|
||||
</script>
|
||||
<!-- end of script section -->
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
89
public/componets/navs_headers/20_header.html
Normal file
89
public/componets/navs_headers/20_header.html
Normal file
@@ -0,0 +1,89 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="../../../dist/tailshape.css">
|
||||
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer>
|
||||
</script><script defer src="https://unpkg.com/alpinejs@3.4.2/dist/cdn.min.js"></script>
|
||||
<title>Header 20</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||
d
|
||||
</button>
|
||||
|
||||
|
||||
|
||||
<!-- header 20 start -->
|
||||
<section class="section_divider">
|
||||
<div>Header 20 </div>
|
||||
</section>
|
||||
|
||||
<div class="bg-gray-100 dark:bg-gray-800 ">
|
||||
<nav class="bg-white dark:bg-gray-800 px-6 relative shadow-md">
|
||||
<div class="flex flex-row justify-between items-center py-2">
|
||||
<h3 class="font-semibold text-3xl text-gray-500 dark:text-cyan-300 dark:focus:text-cyan-600">Webapp</h3>
|
||||
<div class="group flex flex-col items-center">
|
||||
<button class="p-2 rounded-lg md:hidden">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="h-10 fill-current" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z" /></svg>
|
||||
</button>
|
||||
<div class="hidden group-hover:block md:block absolute md:static bg-white dark:bg-gray-800 inset-x-0 top-16 py-3 shadow-md md:shadow-none text-gray-600">
|
||||
<div class="flex flex-row justify-center items-center text-center font-semibold text-gray-500">
|
||||
<a class="px-6 py-1 flex flex-col md:flex-row md:items-center dark:text-cyan-300 dark:hover:text-cyan-600" href="#">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="fill-current h-10 md:h-5 px-2" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M2 13.5V7h1v6.5a.5.5 0 0 0 .5.5h9a.5.5 0 0 0 .5-.5V7h1v6.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 13.5zm11-11V6l-2-2V2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5z"/><path fill-rule="evenodd" d="M7.293 1.5a1 1 0 0 1 1.414 0l6.647 6.646a.5.5 0 0 1-.708.708L8 2.207 1.354 8.854a.5.5 0 1 1-.708-.708L7.293 1.5z"/></svg>
|
||||
Home
|
||||
</a>
|
||||
<a class="px-6 py-1 flex flex-col md:flex-row md:items-center dark:text-cyan-300 dark:hover:text-cyan-600" href="#">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="fill-current h-10 md:h-5 px-2" viewBox="0 0 16 16"><path d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10z"/></svg>
|
||||
Account
|
||||
</a>
|
||||
<a class="px-6 py-1 flex flex-col md:flex-row md:items-center dark:text-cyan-300 dark:hover:text-cyan-600" href="#">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="fill-current h-10 md:h-5 px-2" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M10 12.5a.5.5 0 0 1-.5.5h-8a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 .5.5v2a.5.5 0 0 0 1 0v-2A1.5 1.5 0 0 0 9.5 2h-8A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h8a1.5 1.5 0 0 0 1.5-1.5v-2a.5.5 0 0 0-1 0v2z"/><path fill-rule="evenodd" d="M15.854 8.354a.5.5 0 0 0 0-.708l-3-3a.5.5 0 0 0-.708.708L14.293 7.5H5.5a.5.5 0 0 0 0 1h8.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3z"/></svg>
|
||||
Logout
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<!-- header 20 end -->
|
||||
|
||||
|
||||
|
||||
<!-- start of script section -->
|
||||
<script type="text/javascript">
|
||||
let toogler = document.getElementById("dark_mood_toogler");
|
||||
let doc_html_el = document.getElementsByTagName('html')[0];
|
||||
|
||||
doc_html_el.addEventListener('keyup',(e)=>{
|
||||
// key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
|
||||
if(e.ctrlKey && e.keyCode =='220'){
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
|
||||
}
|
||||
})
|
||||
doc_html_el.addEventListener('keyup',(e)=>{
|
||||
// key 191 is the forward slash , need to press ctrl+ / to show or hide the darkmode button
|
||||
if(e.ctrlKey && e.keyCode =='191'){
|
||||
toogler.style.display =='block'? toogler.style.display = 'none':toogler.style.display ='block';
|
||||
|
||||
}
|
||||
})
|
||||
toogler.addEventListener('click',()=>{
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
console.log(doc_html_el.className);
|
||||
})
|
||||
</script>
|
||||
<!-- end of script section -->
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
92
public/componets/navs_headers/21_header.html
Normal file
92
public/componets/navs_headers/21_header.html
Normal file
@@ -0,0 +1,92 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="../../../dist/tailshape.css">
|
||||
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer>
|
||||
</script><script defer src="https://unpkg.com/alpinejs@3.4.2/dist/cdn.min.js"></script>
|
||||
<title>Header 21</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||
d
|
||||
</button>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- header 21 start -->
|
||||
<section class="section_divider">
|
||||
<div>Header 21</div>
|
||||
</section>
|
||||
<nav class="w-full py-6 bg-white dark:bg-gray-800 ">
|
||||
<div class="flex items-center justify-between mx-auto xl:max-w-7xl lg:max-w-5xl md:max-w-3xl md:px-2 px-4">
|
||||
<section class="flex items-center text-gray-900 dark:text-cyan-300 space-x-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M9.504 1.132a1 1 0 01.992 0l1.75 1a1 1 0 11-.992 1.736L10 3.152l-1.254.716a1 1 0 11-.992-1.736l1.75-1zM5.618 4.504a1 1 0 01-.372 1.364L5.016 6l.23.132a1 1 0 11-.992 1.736L4 7.723V8a1 1 0 01-2 0V6a.996.996 0 01.52-.878l1.734-.99a1 1 0 011.364.372zm8.764 0a1 1 0 011.364-.372l1.733.99A1.002 1.002 0 0118 6v2a1 1 0 11-2 0v-.277l-.254.145a1 1 0 11-.992-1.736l.23-.132-.23-.132a1 1 0 01-.372-1.364zm-7 4a1 1 0 011.364-.372L10 8.848l1.254-.716a1 1 0 11.992 1.736L11 10.58V12a1 1 0 11-2 0v-1.42l-1.246-.712a1 1 0 01-.372-1.364zM3 11a1 1 0 011 1v1.42l1.246.712a1 1 0 11-.992 1.736l-1.75-1A1 1 0 012 14v-2a1 1 0 011-1zm14 0a1 1 0 011 1v2a1 1 0 01-.504.868l-1.75 1a1 1 0 11-.992-1.736L16 13.42V12a1 1 0 011-1zm-9.618 5.504a1 1 0 011.364-.372l.254.145V16a1 1 0 112 0v.277l.254-.145a1 1 0 11.992 1.736l-1.735.992a.995.995 0 01-1.022 0l-1.735-.992a1 1 0 01-.372-1.364z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
<a href="#" class="font-bold text-xl focus:ring focus:ring-purple-500 focus:ring-opacity-25 outline-none rounded-lg">BRAND</a>
|
||||
</section>
|
||||
<section>
|
||||
<ul class="md:space-x-8 space-x-6 text-gray-900 dark:text-cyan-300 font-semibold hidden md:flex">
|
||||
<li class="relative group">
|
||||
<a href="#" class="group focus:ring focus:ring-purple-500 focus:ring-opacity-25 outline-none rounded-lg"> Home </a>
|
||||
<div class="w-full h-0.5 bg-transparent group-hover:bg-purple-500 transition-al absolute bottom-0" ></div>
|
||||
</li>
|
||||
<li class="relative group">
|
||||
<a href="#" class="focus:ring focus:ring-purple-500 focus:ring-opacity-25 outline-none rounded-lg">Services</a>
|
||||
<div class="w-full h-0.5 bg-transparent group-hover:bg-purple-500 transition-al absolute bottom-0"></div>
|
||||
</li>
|
||||
<li class="relative group">
|
||||
<a href="#" class="focus:ring focus:ring-purple-500 focus:ring-opacity-25 outline-none rounded-lg">About</a>
|
||||
<div class="w-full h-0.5 bg-transparent group-hover:bg-purple-500 transition-al absolute bottom-0"></div>
|
||||
</li>
|
||||
<li><a href="#" class="bg-purple-500 px-4 py-1 rounded-xl text-white hover:bg-purple-400 active:bg-purple-600 focus:ring focus:ring-purple-500 focus:ring-opacity-25 outline-none">Contact</a></li>
|
||||
</ul>
|
||||
<button class="flex md:hidden hover:bg-gray-100 p-2 rounded-full transition-all focus:ring focus:ring-purple-500 focus:ring-opacity-25 active:bg-gray-200 outline-none">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</button>
|
||||
</section>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- header 21 end -->
|
||||
|
||||
|
||||
|
||||
<!-- start of script section -->
|
||||
<script type="text/javascript">
|
||||
let toogler = document.getElementById("dark_mood_toogler");
|
||||
let doc_html_el = document.getElementsByTagName('html')[0];
|
||||
|
||||
doc_html_el.addEventListener('keyup',(e)=>{
|
||||
// key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
|
||||
if(e.ctrlKey && e.keyCode =='220'){
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
|
||||
}
|
||||
})
|
||||
doc_html_el.addEventListener('keyup',(e)=>{
|
||||
// key 191 is the forward slash , need to press ctrl+ / to show or hide the darkmode button
|
||||
if(e.ctrlKey && e.keyCode =='191'){
|
||||
toogler.style.display =='block'? toogler.style.display = 'none':toogler.style.display ='block';
|
||||
|
||||
}
|
||||
})
|
||||
toogler.addEventListener('click',()=>{
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
console.log(doc_html_el.className);
|
||||
})
|
||||
</script>
|
||||
<!-- end of script section -->
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
97
public/componets/navs_headers/22_header.html
Normal file
97
public/componets/navs_headers/22_header.html
Normal file
@@ -0,0 +1,97 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="../../../dist/tailshape.css">
|
||||
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer>
|
||||
</script><script defer src="https://unpkg.com/alpinejs@3.4.2/dist/cdn.min.js"></script>
|
||||
<title>Header 22</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||
d
|
||||
</button>
|
||||
|
||||
|
||||
|
||||
<!-- header 22 start -->
|
||||
<section class="section_divider">
|
||||
<div>Header 22</div>
|
||||
</section>
|
||||
<nav class="w-full py-6 bg-white dark:bg-gray-800">
|
||||
<div class="flex items-center justify-between mx-auto xl:max-w-7xl lg:max-w-5xl md:max-w-3xl md:px-2 px-4">
|
||||
<section class="flex items-center text-gray-900 dark:text-cyan-300 space-x-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M9.504 1.132a1 1 0 01.992 0l1.75 1a1 1 0 11-.992 1.736L10 3.152l-1.254.716a1 1 0 11-.992-1.736l1.75-1zM5.618 4.504a1 1 0 01-.372 1.364L5.016 6l.23.132a1 1 0 11-.992 1.736L4 7.723V8a1 1 0 01-2 0V6a.996.996 0 01.52-.878l1.734-.99a1 1 0 011.364.372zm8.764 0a1 1 0 011.364-.372l1.733.99A1.002 1.002 0 0118 6v2a1 1 0 11-2 0v-.277l-.254.145a1 1 0 11-.992-1.736l.23-.132-.23-.132a1 1 0 01-.372-1.364zm-7 4a1 1 0 011.364-.372L10 8.848l1.254-.716a1 1 0 11.992 1.736L11 10.58V12a1 1 0 11-2 0v-1.42l-1.246-.712a1 1 0 01-.372-1.364zM3 11a1 1 0 011 1v1.42l1.246.712a1 1 0 11-.992 1.736l-1.75-1A1 1 0 012 14v-2a1 1 0 011-1zm14 0a1 1 0 011 1v2a1 1 0 01-.504.868l-1.75 1a1 1 0 11-.992-1.736L16 13.42V12a1 1 0 011-1zm-9.618 5.504a1 1 0 011.364-.372l.254.145V16a1 1 0 112 0v.277l.254-.145a1 1 0 11.992 1.736l-1.735.992a.995.995 0 01-1.022 0l-1.735-.992a1 1 0 01-.372-1.364z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
<a href="#" class="font-bold text-xl focus:ring focus:ring-purple-500 focus:ring-opacity-25 outline-none rounded-lg">BRAND</a>
|
||||
</section>
|
||||
<section>
|
||||
<ul class="md:space-x-8 space-x-6 text-gray-900 dark:text-cyan-300 font-semibold hidden md:flex">
|
||||
<li class="relative group">
|
||||
<a href="#" class="group focus:ring focus:ring-purple-500 focus:ring-opacity-25 outline-none rounded-lg"> Home </a>
|
||||
<div class="w-full h-0.5 bg-transparent group-hover:bg-purple-500 transition-al absolute bottom-0" />
|
||||
</li>
|
||||
<li class="relative group">
|
||||
<a href="#" class="focus:ring focus:ring-purple-500 focus:ring-opacity-25 outline-none rounded-lg">Services</a>
|
||||
<div class="w-full h-0.5 bg-transparent group-hover:bg-purple-500 transition-al absolute bottom-0" />
|
||||
</li>
|
||||
<li class="relative group">
|
||||
<a href="#" class="focus:ring focus:ring-purple-500 focus:ring-opacity-25 outline-none rounded-lg">About</a>
|
||||
<div class="w-full h-0.5 bg-transparent group-hover:bg-purple-500 transition-al absolute bottom-0" />
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
<section>
|
||||
<button class="flex md:hidden hover:bg-gray-100 p-2 rounded-full transition-all focus:ring focus:ring-purple-500 focus:ring-opacity-25 active:bg-gray-200 outline-none">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</button>
|
||||
<ul class="md:flex hidden space-x-4">
|
||||
<li><a href="#" class="bg-transparent px-4 py-1 rounded-xl border-purple-500 border-2 text-purple-500 font-semibold hover:bg-gray-100 active:bg-gray-200 focus:ring focus:ring-purple-500 focus:ring-opacity-25 outline-none">Login</a></li>
|
||||
|
||||
<li><a href="#" class="bg-purple-500 px-4 py-1 rounded-xl border-purple-500 border-2 text-white hover:bg-purple-400 active:bg-purple-600 focus:ring focus:ring-purple-500 focus:ring-opacity-25 outline-none">Register</a></li>
|
||||
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- header 22 end -->
|
||||
|
||||
|
||||
|
||||
<!-- start of script section -->
|
||||
<script type="text/javascript">
|
||||
let toogler = document.getElementById("dark_mood_toogler");
|
||||
let doc_html_el = document.getElementsByTagName('html')[0];
|
||||
|
||||
doc_html_el.addEventListener('keyup',(e)=>{
|
||||
// key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
|
||||
if(e.ctrlKey && e.keyCode =='220'){
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
|
||||
}
|
||||
})
|
||||
doc_html_el.addEventListener('keyup',(e)=>{
|
||||
// key 191 is the forward slash , need to press ctrl+ / to show or hide the darkmode button
|
||||
if(e.ctrlKey && e.keyCode =='191'){
|
||||
toogler.style.display =='block'? toogler.style.display = 'none':toogler.style.display ='block';
|
||||
|
||||
}
|
||||
})
|
||||
toogler.addEventListener('click',()=>{
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
console.log(doc_html_el.className);
|
||||
})
|
||||
</script>
|
||||
<!-- end of script section -->
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
120
public/componets/navs_headers/23_header.html
Normal file
120
public/componets/navs_headers/23_header.html
Normal file
@@ -0,0 +1,120 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="../../../dist/tailshape.css">
|
||||
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer>
|
||||
</script><script defer src="https://unpkg.com/alpinejs@3.4.2/dist/cdn.min.js"></script>
|
||||
<title>Header 23</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||
d
|
||||
</button>
|
||||
|
||||
|
||||
|
||||
<!-- header 23 start -->
|
||||
<section class="section_divider">
|
||||
<div>Header 23</div>
|
||||
</section>
|
||||
|
||||
<header class="dark:bg-gray-800">
|
||||
|
||||
|
||||
<nav class="border-gray-200 px-2 mb-10 dark:bg-gray-800 py-3">
|
||||
<div class="container mx-auto flex flex-wrap items-center justify-between">
|
||||
<a href="#" class="flex">
|
||||
<svg class="h-10 mr-3" width="51" height="70" viewBox="0 0 51 70" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0)">
|
||||
<path d="M1 53H27.9022C40.6587 53 51 42.7025 51 30H24.0978C11.3412 30 1 40.2975 1 53Z" fill="#76A9FA"></path><path d="M-0.876544 32.1644L-0.876544 66.411C11.9849 66.411 22.4111 55.9847 22.4111 43.1233L22.4111 8.87674C10.1196 8.98051 0.518714 19.5571 -0.876544 32.1644Z" fill="#A4CAFE"></path><path d="M50 5H23.0978C10.3413 5 0 15.2975 0 28H26.9022C39.6588 28 50 17.7025 50 5Z" fill="#1C64F2"></path></g><defs><clipPath id="clip0"><rect width="51" height="70" fill="white"></rect></clipPath></defs></svg>
|
||||
<span class="self-center text-lg font-semibold whitespace-nowrap dark:text-gray-300">FlowBite</span>
|
||||
</a>
|
||||
<div class="flex md:order-2">
|
||||
<div class="relative mr-3 md:mr-0 hidden md:block">
|
||||
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
||||
<svg class="w-5 h-5 text-gray-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path></svg>
|
||||
</div>
|
||||
<input type="text" id="email-adress-icon" class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2" placeholder="Search...">
|
||||
</div>
|
||||
<button data-collapse-toggle="mobile-menu-3" type="button" class="md:hidden text-gray-400 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-300 rounded-lg inline-flex items-center justify-center" aria-controls="mobile-menu-3" aria-expanded="false">
|
||||
<span class="sr-only">Open main menu</span>
|
||||
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path></svg>
|
||||
<svg class="hidden w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="hidden md:flex justify-between items-center w-full md:w-auto md:order-1" id="mobile-menu-3">
|
||||
<ul class="flex-col md:flex-row flex md:space-x-8 mt-4 md:mt-0 md:text-sm md:font-medium">
|
||||
<li>
|
||||
<a href="#" class="bg-blue-700 md:bg-transparent block pl-3 pr-4 py-2 text-gray-300 active:text-gray-300 md:text-blue-700 md:p-0 rounded" aria-current="page">Home</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="text-gray-500 hover:bg-gray-50 border-b border-gray-100 md:hover:bg-transparent md:border-0 block pl-3 pr-4 py-2 md:hover:text-blue-700 md:p-0 ">About</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="text-gray-500 hover:bg-gray-50 border-b border-gray-100 md:hover:bg-transparent md:border-0 block pl-3 pr-4 py-2 md:hover:text-blue-700 md:p-0">Services</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<script type="text/javascript" class="toggle_script">
|
||||
const toggleCollapse = (elementId, show = true) => {
|
||||
const collapseEl = document.getElementById(elementId);
|
||||
|
||||
if (show) {
|
||||
collapseEl.classList.remove('hidden');
|
||||
} else {
|
||||
collapseEl.classList.add('hidden');
|
||||
}
|
||||
}; // Toggle target elements using [data-collapse-toggle]
|
||||
|
||||
|
||||
document.querySelectorAll('[data-collapse-toggle]').forEach(function (collapseToggleEl) {
|
||||
var collapseId = collapseToggleEl.getAttribute('data-collapse-toggle');
|
||||
collapseToggleEl.addEventListener('click', function () {
|
||||
toggleCollapse(collapseId, document.getElementById(collapseId).classList.contains('hidden'));
|
||||
});
|
||||
});
|
||||
window.toggleCollapse = toggleCollapse;
|
||||
</script>
|
||||
|
||||
<!-- header 23 end -->
|
||||
|
||||
|
||||
|
||||
<!-- start of script section -->
|
||||
<script type="text/javascript">
|
||||
let toogler = document.getElementById("dark_mood_toogler");
|
||||
let doc_html_el = document.getElementsByTagName('html')[0];
|
||||
|
||||
doc_html_el.addEventListener('keyup',(e)=>{
|
||||
// key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
|
||||
if(e.ctrlKey && e.keyCode =='220'){
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
|
||||
}
|
||||
})
|
||||
doc_html_el.addEventListener('keyup',(e)=>{
|
||||
// key 191 is the forward slash , need to press ctrl+ / to show or hide the darkmode button
|
||||
if(e.ctrlKey && e.keyCode =='191'){
|
||||
toogler.style.display =='block'? toogler.style.display = 'none':toogler.style.display ='block';
|
||||
|
||||
}
|
||||
})
|
||||
toogler.addEventListener('click',()=>{
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
console.log(doc_html_el.className);
|
||||
})
|
||||
</script>
|
||||
<!-- end of script section -->
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
52
public/componets/navs_headers/24_header.html
Normal file
52
public/componets/navs_headers/24_header.html
Normal file
@@ -0,0 +1,52 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="../../../dist/tailshape.css">
|
||||
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer>
|
||||
</script><script defer src="https://unpkg.com/alpinejs@3.4.2/dist/cdn.min.js"></script>
|
||||
<title>Header 13</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||
d
|
||||
</button>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- start of script section -->
|
||||
<script type="text/javascript">
|
||||
let toogler = document.getElementById("dark_mood_toogler");
|
||||
let doc_html_el = document.getElementsByTagName('html')[0];
|
||||
|
||||
doc_html_el.addEventListener('keyup',(e)=>{
|
||||
// key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
|
||||
if(e.ctrlKey && e.keyCode =='220'){
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
|
||||
}
|
||||
})
|
||||
doc_html_el.addEventListener('keyup',(e)=>{
|
||||
// key 191 is the forward slash , need to press ctrl+ / to show or hide the darkmode button
|
||||
if(e.ctrlKey && e.keyCode =='191'){
|
||||
toogler.style.display =='block'? toogler.style.display = 'none':toogler.style.display ='block';
|
||||
|
||||
}
|
||||
})
|
||||
toogler.addEventListener('click',()=>{
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
console.log(doc_html_el.className);
|
||||
})
|
||||
</script>
|
||||
<!-- end of script section -->
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
52
public/componets/navs_headers/25_header.html
Normal file
52
public/componets/navs_headers/25_header.html
Normal file
@@ -0,0 +1,52 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="../../../dist/tailshape.css">
|
||||
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer>
|
||||
</script><script defer src="https://unpkg.com/alpinejs@3.4.2/dist/cdn.min.js"></script>
|
||||
<title>Header 13</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||
d
|
||||
</button>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- start of script section -->
|
||||
<script type="text/javascript">
|
||||
let toogler = document.getElementById("dark_mood_toogler");
|
||||
let doc_html_el = document.getElementsByTagName('html')[0];
|
||||
|
||||
doc_html_el.addEventListener('keyup',(e)=>{
|
||||
// key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
|
||||
if(e.ctrlKey && e.keyCode =='220'){
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
|
||||
}
|
||||
})
|
||||
doc_html_el.addEventListener('keyup',(e)=>{
|
||||
// key 191 is the forward slash , need to press ctrl+ / to show or hide the darkmode button
|
||||
if(e.ctrlKey && e.keyCode =='191'){
|
||||
toogler.style.display =='block'? toogler.style.display = 'none':toogler.style.display ='block';
|
||||
|
||||
}
|
||||
})
|
||||
toogler.addEventListener('click',()=>{
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
console.log(doc_html_el.className);
|
||||
})
|
||||
</script>
|
||||
<!-- end of script section -->
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -88,3 +88,5 @@
|
||||
</script>
|
||||
<!-- end of script section -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -364,11 +364,11 @@
|
||||
<section class="section_divider">
|
||||
<div>Header 7</div>
|
||||
</section>
|
||||
<section class=" dark:bg-gray-800">
|
||||
<section class=" dark:bg-gray-800 ">
|
||||
|
||||
<div class="px-4 py-6 mx-auto lg:py-8 sm:max-w-xl md:max-w-full lg:max-w-screen-xl md:px-24 lg:px-8">
|
||||
<div x-data="{open_11_template_nav: false}" class="px-4 py-6 mx-auto lg:py-8 sm:max-w-xl md:max-w-full lg:max-w-screen-xl md:px-24 lg:px-8">
|
||||
<div class="relative flex items-center justify-between lg:justify-center lg:space-x-16">
|
||||
<ul class="flex items-center space-x-8 lg:flex">
|
||||
<ul class=" hidden md:block flex items-center space-x-8 lg:flex">
|
||||
<li><a href="#" aria-label="Our product" title="Our product" class="font-medium tracking-wide dark:text-cyan-500 text-gray-700 transition-colors duration-200 hover:text-purple-400">Product</a></li>
|
||||
<li><a href="#" aria-label="Our product" title="Our product" class="font-medium tracking-wide dark:text-cyan-500 text-gray-700 transition-colors duration-200 hover:text-purple-400">Features</a></li>
|
||||
<li><a href="#" aria-label="Product pricing" title="Product pricing" class="font-medium tracking-wide dark:text-cyan-500 text-gray-700 transition-colors duration-200 hover:text-purple-400">Pricing</a></li>
|
||||
@@ -382,25 +382,25 @@
|
||||
</svg>
|
||||
<span class="ml-2 text-xl font-bold tracking-wide dark:text-gray-300 text-gray-800 uppercase">Company</span>
|
||||
</a>
|
||||
<ul class="flex items-center space-x-8 lg:flex">
|
||||
<ul class=" hidden md:block flex items-center space-x-8 lg:flex">
|
||||
<li><a href="#" aria-label="About us" title="About us" class="font-medium tracking-wide dark:text-cyan-500 text-gray-700 transition-colors duration-200 hover:text-purple-400">About us</a></li>
|
||||
<li><a href="#" aria-label="Sign in" title="Sign in" class="font-medium tracking-wide dark:text-cyan-500 text-gray-700 transition-colors duration-200 hover:text-purple-400">Sign in</a></li>
|
||||
<li><a href="#" aria-label="Sign up" title="Sign up" class="font-medium tracking-wide dark:text-cyan-500 text-gray-700 transition-colors duration-200 hover:text-purple-400">Sign up</a></li>
|
||||
</ul>
|
||||
<!-- Mobile menu -->
|
||||
<div class="lg:hidden">
|
||||
<button aria-label="Open Menu" title="Open Menu" class="p-2 -mr-1 transition duration-200 rounded focus:outline-none focus:shadow-outline hover:bg-deep-purple-50 focus:bg-deep-purple-50">
|
||||
<div class="md:hidden" >
|
||||
<button @click="open_11_template_nav = ! open_11_template_nav" aria-label="Open Menu" title="Open Menu" class="p-2 -mr-1 transition duration-200 rounded focus:outline-none focus:shadow-outline hover:bg-purple-50 focus:bg-purple-50">
|
||||
<svg class="w-5 text-gray-600" viewBox="0 0 24 24">
|
||||
<path fill="currentColor" d="M23,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h22c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path>
|
||||
<path fill="currentColor" d="M23,6H1C0.4,6,0,5.6,0,5s0.4-1,1-1h22c0.6,0,1,0.4,1,1S23.6,6,23,6z"></path>
|
||||
<path fill="currentColor" d="M23,20H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h22c0.6,0,1,0.4,1,1S23.6,20,23,20z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
Mobile menu dropdown
|
||||
<div class="absolute top-0 left-0 w-full">
|
||||
<div class="p-5 bg-white border rounded shadow-sm">
|
||||
<!-- Mobile menu dropdown -->
|
||||
<div x-show="open_11_template_nav" @click.outside="open_11_template_nav = false" class="absolute top-0 left-0 w-full ">
|
||||
<div class="p-5 bg-white dark:bg-gray-800 border rounded shadow-sm">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div>
|
||||
<div >
|
||||
<a href="#" aria-label="Company" title="Company" class="inline-flex items-center">
|
||||
<svg class="w-8 text-deep-purple-accent-400" viewBox="0 0 24 24" stroke-linejoin="round" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" stroke="currentColor" fill="none">
|
||||
<rect x="3" y="1" width="7" height="12"></rect>
|
||||
@@ -412,7 +412,7 @@
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<button aria-label="Close Menu" title="Close Menu" class="p-2 -mt-2 -mr-2 transition duration-200 rounded hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline">
|
||||
<button @click="open_11_template_nav = false" aria-label="Close Menu" title="Close Menu" class="p-2 -mt-2 -mr-2 transition duration-200 rounded hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline">
|
||||
<svg class="w-5 text-gray-600" viewBox="0 0 24 24">
|
||||
<path
|
||||
fill="currentColor"
|
||||
@@ -424,11 +424,11 @@
|
||||
</div>
|
||||
<nav>
|
||||
<ul class="space-y-4">
|
||||
<li><a href="#" aria-label="Our product" title="Our product" class="font-medium tracking-wide text-gray-700 transition-colors duration-200 hover:text-purple-400">Product</a></li>
|
||||
<li><a href="#" aria-label="Our product" title="Our product" class="font-medium tracking-wide text-gray-700 transition-colors duration-200 hover:text-purple-400">Features</a></li>
|
||||
<li><a href="#" aria-label="Product pricing" title="Product pricing" class="font-medium tracking-wide text-gray-700 transition-colors duration-200 hover:text-purple-400">Pricing</a></li>
|
||||
<li><a href="#" aria-label="About us" title="About us" class="font-medium tracking-wide text-gray-700 transition-colors duration-200 hover:text-purple-400">About us</a></li>
|
||||
<li><a href="#" aria-label="Sign in" title="Sign in" class="font-medium tracking-wide text-gray-700 transition-colors duration-200 hover:text-purple-400">Sign in</a></li>
|
||||
<li><a href="#" aria-label="Our product" title="Our product" class="font-medium tracking-wide text-gray-700 dark:text-cyan-500 transition-colors duration-200 hover:text-purple-400">Product</a></li>
|
||||
<li><a href="#" aria-label="Our product" title="Our product" class="font-medium tracking-wide text-gray-700 dark:text-cyan-500 transition-colors duration-200 hover:text-purple-400">Features</a></li>
|
||||
<li><a href="#" aria-label="Product pricing" title="Product pricing" class="font-medium tracking-wide text-gray-700 dark:text-cyan-500 transition-colors duration-200 hover:text-purple-400">Pricing</a></li>
|
||||
<li><a href="#" aria-label="About us" title="About us" class="font-medium tracking-wide text-gray-700 dark:text-cyan-500 transition-colors duration-200 hover:text-purple-400">About us</a></li>
|
||||
<li><a href="#" aria-label="Sign in" title="Sign in" class="font-medium tracking-wide text-gray-700 dark:text-cyan-500 transition-colors duration-200 hover:text-purple-400">Sign in</a></li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
@@ -456,8 +456,9 @@
|
||||
<div>Header 8</div>
|
||||
</section>
|
||||
|
||||
|
||||
<div class="bg-gray-900">
|
||||
<div class="px-4 py-5 mx-auto sm:max-w-xl md:max-w-full lg:max-w-screen-xl md:px-24 lg:px-8">
|
||||
<div x-data="{open_12_template_nav: false}" class="px-4 py-5 mx-auto sm:max-w-xl md:max-w-full lg:max-w-screen-xl md:px-24 lg:px-8">
|
||||
<div class="relative flex items-center justify-between">
|
||||
<a href="#" aria-label="Company" title="Company" class="inline-flex items-center">
|
||||
<svg class="w-8 text-teal-400" viewBox="0 0 24 24" stroke-linejoin="round" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" stroke="currentColor" fill="none">
|
||||
@@ -468,7 +469,7 @@
|
||||
</svg>
|
||||
<span class="ml-2 text-xl font-bold tracking-wide text-gray-100 uppercase">Company</span>
|
||||
</a>
|
||||
<ul class="flex items-center space-x-8 lg:flex">
|
||||
<ul class="hidden md:block md:flex items-center space-x-8 lg:flex">
|
||||
<li><a href="#" aria-label="Our product" title="Our product" class="font-medium tracking-wide text-gray-100 transition-colors duration-200 hover:text-teal-400">Product</a></li>
|
||||
<li><a href="#" aria-label="Our product" title="Our product" class="font-medium tracking-wide text-gray-100 transition-colors duration-200 hover:text-teal-400">Features</a></li>
|
||||
<li><a href="#" aria-label="Product pricing" title="Product pricing" class="font-medium tracking-wide text-gray-100 transition-colors duration-200 hover:text-teal-400">Pricing</a></li>
|
||||
@@ -485,15 +486,15 @@
|
||||
</li>
|
||||
</ul>
|
||||
<!-- Mobile menu -->
|
||||
<div class="lg:hidden">
|
||||
<button aria-label="Open Menu" title="Open Menu" class="p-2 -mr-1 transition duration-200 rounded focus:outline-none focus:shadow-outline">
|
||||
<div class="md:hidden">
|
||||
<button @click="open_12_template_nav= ! open_12_template_nav" aria-label="Open Menu" title="Open Menu" class="p-2 -mr-1 transition duration-200 rounded focus:outline-none focus:shadow-outline">
|
||||
<svg class="w-5 text-gray-600" viewBox="0 0 24 24">
|
||||
<path fill="currentColor" d="M23,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h22c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path>
|
||||
<path fill="currentColor" d="M23,6H1C0.4,6,0,5.6,0,5s0.4-1,1-1h22c0.6,0,1,0.4,1,1S23.6,6,23,6z"></path>
|
||||
<path fill="currentColor" d="M23,20H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h22c0.6,0,1,0.4,1,1S23.6,20,23,20z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
<div class="absolute top-0 left-0 w-full">
|
||||
<div x-show="open_12_template_nav" class="absolute top-0 left-0 w-full ">
|
||||
<div class="p-5 bg-white border rounded shadow-sm">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div>
|
||||
@@ -508,7 +509,7 @@
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<button aria-label="Close Menu" title="Close Menu" class="p-2 -mt-2 -mr-2 transition duration-200 rounded hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline">
|
||||
<button @click="open_12_template_nav= false" aria-label="Close Menu" title="Close Menu" class="p-2 -mt-2 -mr-2 transition duration-200 rounded hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline">
|
||||
<svg class="w-5 text-gray-600" viewBox="0 0 24 24">
|
||||
<path
|
||||
fill="currentColor"
|
||||
@@ -520,10 +521,10 @@
|
||||
</div>
|
||||
<nav>
|
||||
<ul class="space-y-4">
|
||||
<li><a href="#" aria-label="Our product" title="Our product" class="font-medium tracking-wide text-gray-700 transition-colors duration-200 hover:text-purple-400">Product</a></li>
|
||||
<li><a href="#" aria-label="Our product" title="Our product" class="font-medium tracking-wide text-gray-700 transition-colors duration-200 hover:text-purple-400">Features</a></li>
|
||||
<li><a href="#" aria-label="Product pricing" title="Product pricing" class="font-medium tracking-wide text-gray-700 transition-colors duration-200 hover:text-purple-400">Pricing</a></li>
|
||||
<li><a href="#" aria-label="About us" title="About us" class="font-medium tracking-wide text-gray-700 transition-colors duration-200 hover:text-purple-400">About us</a></li>
|
||||
<li><a href="#" aria-label="Our product" title="Our product" class="font-medium tracking-wide text-gray-700 transition-colors duration-200 hover:text-teal-400">Product</a></li>
|
||||
<li><a href="#" aria-label="Our product" title="Our product" class="font-medium tracking-wide text-gray-700 transition-colors duration-200 hover:text-teal-400">Features</a></li>
|
||||
<li><a href="#" aria-label="Product pricing" title="Product pricing" class="font-medium tracking-wide text-gray-700 transition-colors duration-200 hover:text-teal-400">Pricing</a></li>
|
||||
<li><a href="#" aria-label="About us" title="About us" class="font-medium tracking-wide text-gray-700 transition-colors duration-200 hover:text-teal-400">About us</a></li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
@@ -851,53 +852,56 @@
|
||||
|
||||
<!-- header 11 end -->
|
||||
|
||||
|
||||
<!-- header 12 start -->
|
||||
|
||||
<section class="section_divider">
|
||||
<div>Header 12</div>
|
||||
</section>
|
||||
|
||||
<nav class="bg-white shadow dark:bg-gray-800">
|
||||
<div class="container px-6 py-4 mx-auto md:flex md:justify-between md:items-center">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<a class="text-2xl font-bold text-gray-800 transition-colors duration-200 transform dark:text-white lg:text-3xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
|
||||
</div>
|
||||
|
||||
<!-- Mobile menu button -->
|
||||
<div class="flex md:hidden">
|
||||
<button type="button" class="text-gray-500 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 focus:outline-none focus:text-gray-600 dark:focus:text-gray-400" aria-label="toggle menu">
|
||||
<svg viewBox="0 0 24 24" class="w-6 h-6 fill-current">
|
||||
<path fill-rule="evenodd" d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<nav x-data="{mobile_nav_status:false}" class="bg-white shadow dark:bg-gray-800">
|
||||
<div class="container px-6 py-4 mx-auto md:flex md:justify-between md:items-center">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<a class="text-2xl font-bold text-gray-800 transition-colors duration-200 transform dark:text-white lg:text-3xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
|
||||
</div>
|
||||
|
||||
<!-- Mobile Menu open: "block", Menu closed: "hidden" -->
|
||||
<div class="items-center md:flex">
|
||||
<div class="flex flex-col md:flex-row md:mx-6">
|
||||
<a class="my-1 text-sm font-medium text-gray-700 transition-colors duration-200 transform dark:text-gray-200 hover:text-blue-500 dark:hover:text-blue-400 md:mx-4 md:my-0" href="#">Home</a>
|
||||
<a class="my-1 text-sm font-medium text-gray-700 transition-colors duration-200 transform dark:text-gray-200 hover:text-blue-500 dark:hover:text-blue-400 md:mx-4 md:my-0" href="#">Shop</a>
|
||||
<a class="my-1 text-sm font-medium text-gray-700 transition-colors duration-200 transform dark:text-gray-200 hover:text-blue-500 dark:hover:text-blue-400 md:mx-4 md:my-0" href="#">Contact</a>
|
||||
<a class="my-1 text-sm font-medium text-gray-700 transition-colors duration-200 transform dark:text-gray-200 hover:text-blue-500 dark:hover:text-blue-400 md:mx-4 md:my-0" href="#">About</a>
|
||||
</div>
|
||||
<!-- Mobile menu button -->
|
||||
<div class="flex md:hidden ">
|
||||
<button @click="mobile_nav_status=!mobile_nav_status" type="button" class="text-gray-500 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 focus:outline-none focus:text-gray-600 dark:focus:text-gray-400" aria-label="toggle menu">
|
||||
<svg viewBox="0 0 24 24" class="w-6 h-6 fill-current">
|
||||
<path fill-rule="evenodd" d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-center md:block">
|
||||
<a class="relative text-gray-700 transition-colors duration-200 transform dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-300" href="#">
|
||||
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M3 3H5L5.4 5M7 13H17L21 5H5.4M7 13L5.4 5M7 13L4.70711 15.2929C4.07714 15.9229 4.52331 17 5.41421 17H17M17 17C15.8954 17 15 17.8954 15 19C15 20.1046 15.8954 21 17 21C18.1046 21 19 20.1046 19 19C19 17.8954 18.1046 17 17 17ZM9 19C9 20.1046 8.10457 21 7 21C5.89543 21 5 20.1046 5 19C5 17.8954 5.89543 17 7 17C8.10457 17 9 17.8954 9 19Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<!-- Mobile Menu open: "block", Menu closed: "hidden" -->
|
||||
<div :class="mobile_nav_status ? 'block items-center md:flex ' : 'hidden items-center md:flex '" >
|
||||
<div class="flex flex-col md:flex-row md:mx-6">
|
||||
<a class="my-1 text-sm font-medium text-gray-700 transition-colors duration-200 transform dark:text-gray-200 hover:text-blue-500 dark:hover:text-blue-400 md:mx-4 md:my-0" href="#">Home</a>
|
||||
<a class="my-1 text-sm font-medium text-gray-700 transition-colors duration-200 transform dark:text-gray-200 hover:text-blue-500 dark:hover:text-blue-400 md:mx-4 md:my-0" href="#">Shop</a>
|
||||
<a class="my-1 text-sm font-medium text-gray-700 transition-colors duration-200 transform dark:text-gray-200 hover:text-blue-500 dark:hover:text-blue-400 md:mx-4 md:my-0" href="#">Contact</a>
|
||||
<a class="my-1 text-sm font-medium text-gray-700 transition-colors duration-200 transform dark:text-gray-200 hover:text-blue-500 dark:hover:text-blue-400 md:mx-4 md:my-0" href="#">About</a>
|
||||
</div>
|
||||
|
||||
<span class="absolute top-3 left-0 p-1 text-xs text-white bg-blue-500 rounded-full"></span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-center md:block border p-2 rounded mt-3 md:mt-0 md:rounded-none md:border-none">
|
||||
<a class="relative text-gray-700 transition-colors duration-200 transform dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-300" href="#">
|
||||
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M3 3H5L5.4 5M7 13H17L21 5H5.4M7 13L5.4 5M7 13L4.70711 15.2929C4.07714 15.9229 4.52331 17 5.41421 17H17M17 17C15.8954 17 15 17.8954 15 19C15 20.1046 15.8954 21 17 21C18.1046 21 19 20.1046 19 19C19 17.8954 18.1046 17 17 17ZM9 19C9 20.1046 8.10457 21 7 21C5.89543 21 5 20.1046 5 19C5 17.8954 5.89543 17 7 17C8.10457 17 9 17.8954 9 19Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
||||
<span class="absolute top-3 left-0 p-1 text-xs text-white bg-blue-500 rounded-full"></span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- header 12 end -->
|
||||
|
||||
|
||||
<!-- header 13 start -->
|
||||
|
||||
<section class="section_divider">
|
||||
@@ -905,7 +909,7 @@
|
||||
</section>
|
||||
|
||||
|
||||
<nav class="bg-white shadow dark:bg-gray-800">
|
||||
<nav x-data="{mobile_nav_status:false}" class="bg-white shadow dark:bg-gray-800">
|
||||
<div class="container px-6 py-3 mx-auto md:flex">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
@@ -914,7 +918,7 @@
|
||||
|
||||
<!-- Mobile menu button -->
|
||||
<div class="flex md:hidden">
|
||||
<button type="button" class="text-gray-500 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 focus:outline-none focus:text-gray-600 dark:focus:text-gray-400" aria-label="toggle menu">
|
||||
<button @click="mobile_nav_status=!mobile_nav_status" type="button" class="text-gray-500 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 focus:outline-none focus:text-gray-600 dark:focus:text-gray-400" aria-label="toggle menu">
|
||||
<svg viewBox="0 0 24 24" class="w-6 h-6 fill-current">
|
||||
<path fill-rule="evenodd" d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"></path>
|
||||
</svg>
|
||||
@@ -923,7 +927,7 @@
|
||||
</div>
|
||||
|
||||
<!-- Mobile Menu open: "block", Menu closed: "hidden" -->
|
||||
<div class="w-full md:flex md:items-center md:justify-between">
|
||||
<div :class="mobile_nav_status ? 'block w-full md:flex md:items-center md:justify-between' : 'hidden w-full md:flex md:items-center md:justify-between '" >
|
||||
<div class="flex flex-col px-2 py-3 -mx-4 md:flex-row md:mx-0 md:py-0">
|
||||
<a href="#" class="px-2 py-1 text-sm font-medium text-gray-700 transition-colors duration-200 transform rounded dark:text-gray-200 hover:bg-gray-900 hover:text-gray-100 md:mx-2">Home</a>
|
||||
<a href="#" class="px-2 py-1 text-sm font-medium text-gray-700 transition-colors duration-200 transform rounded dark:text-gray-200 hover:bg-gray-900 hover:text-gray-100 md:mx-2">About</a>
|
||||
@@ -941,15 +945,17 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</nav>
|
||||
<!-- header 13 end -->
|
||||
|
||||
|
||||
|
||||
<!-- header 14 start -->
|
||||
<section class="section_divider">
|
||||
<div>Header 14</div>
|
||||
</section>
|
||||
|
||||
<nav class="bg-white shadow dark:bg-gray-800">
|
||||
<nav x-data="{mobile_nav_status:false}" class="bg-white shadow dark:bg-gray-800">
|
||||
<div class="container px-6 py-4 mx-auto">
|
||||
<div class="md:flex md:items-center md:justify-between">
|
||||
<div class="flex items-center justify-between">
|
||||
@@ -959,7 +965,7 @@
|
||||
|
||||
<!-- Mobile menu button -->
|
||||
<div class="flex md:hidden">
|
||||
<button type="button" class="text-gray-500 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 focus:outline-none focus:text-gray-600 dark:focus:text-gray-400" aria-label="toggle menu">
|
||||
<button @click="mobile_nav_status=!mobile_nav_status" type="button" class="text-gray-500 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 focus:outline-none focus:text-gray-600 dark:focus:text-gray-400" aria-label="toggle menu">
|
||||
<svg viewBox="0 0 24 24" class="w-6 h-6 fill-current">
|
||||
<path fill-rule="evenodd" d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"></path>
|
||||
</svg>
|
||||
@@ -968,7 +974,7 @@
|
||||
</div>
|
||||
|
||||
<!-- Mobile Menu open: "block", Menu closed: "hidden" -->
|
||||
<div class="flex-1 md:flex md:items-center md:justify-between">
|
||||
<div :class="mobile_nav_status ? 'block flex-1 md:flex md:items-center md:justify-between' : 'hidden flex-1 md:flex md:items-center md:justify-between' " >
|
||||
<div class="flex flex-col -mx-4 md:flex-row md:items-center md:mx-8">
|
||||
<a href="#" class="px-2 py-1 mx-2 mt-2 text-sm font-medium text-gray-700 transition-colors duration-200 transform rounded-md md:mt-0 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-700">Join Slack</a>
|
||||
<a href="#" class="px-2 py-1 mx-2 mt-2 text-sm font-medium text-gray-700 transition-colors duration-200 transform rounded-md md:mt-0 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-700">Browse Topics</a>
|
||||
@@ -998,88 +1004,90 @@
|
||||
|
||||
<!-- header 14 end -->
|
||||
|
||||
|
||||
<!-- header 15 start -->
|
||||
<section class="section_divider">
|
||||
<div>Header 15</div>
|
||||
</section>
|
||||
|
||||
<nav class="bg-white shadow dark:bg-gray-800">
|
||||
<div class="container px-6 py-4 mx-auto lg:flex lg:justify-between lg:items-center">
|
||||
<div class="lg:flex lg:items-center">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<a class="text-2xl font-bold text-gray-800 transition-colors duration-200 transform dark:text-white lg:text-3xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
|
||||
</div>
|
||||
<nav x-data="{mobile_nav_status:false}" class="bg-white shadow dark:bg-gray-800">
|
||||
<div class="container px-6 py-4 mx-auto lg:flex lg:justify-between lg:items-center">
|
||||
<div class="lg:flex lg:items-center">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<a class="text-2xl font-bold text-gray-800 transition-colors duration-200 transform dark:text-white lg:text-3xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
|
||||
</div>
|
||||
|
||||
<!-- Mobile menu button -->
|
||||
<div class="flex lg:hidden">
|
||||
<button type="button" class="text-gray-500 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 focus:outline-none focus:text-gray-600 dark:focus:text-gray-400" aria-label="toggle menu">
|
||||
<svg viewBox="0 0 24 24" class="w-6 h-6 fill-current">
|
||||
<path fill-rule="evenodd" d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Mobile menu button -->
|
||||
<div class="flex lg:hidden">
|
||||
<button @click="mobile_nav_status=!mobile_nav_status" type="button" class="text-gray-500 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 focus:outline-none focus:text-gray-600 dark:focus:text-gray-400" aria-label="toggle menu">
|
||||
<svg viewBox="0 0 24 24" class="w-6 h-6 fill-current">
|
||||
<path fill-rule="evenodd" d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col text-gray-600 capitalize dark:text-gray-300 lg:flex lg:px-16 lg:-mx-4 lg:flex-row lg:items-center">
|
||||
<a href="#" class="mt-2 transition-colors duration-200 transform lg:mt-0 lg:mx-4 hover:text-gray-900 dark:hover:text-gray-200">features</a>
|
||||
<a href="#" class="mt-2 transition-colors duration-200 transform lg:mt-0 lg:mx-4 hover:text-gray-900 dark:hover:text-gray-200">downloads</a>
|
||||
<a href="#" class="mt-2 transition-colors duration-200 transform lg:mt-0 lg:mx-4 hover:text-gray-900 dark:hover:text-gray-200">docs</a>
|
||||
<a href="#" class="mt-2 transition-colors duration-200 transform lg:mt-0 lg:mx-4 hover:text-gray-900 dark:hover:text-gray-200">support</a>
|
||||
<a href="#" class="mt-2 transition-colors duration-200 transform lg:mt-0 lg:mx-4 hover:text-gray-900 dark:hover:text-gray-200">blog</a>
|
||||
<div :class="mobile_nav_status ? 'block flex flex-col text-gray-600 capitalize dark:text-gray-300 lg:flex lg:px-16 lg:-mx-4 lg:flex-row lg:items-center ' : 'hidden flex flex-col text-gray-600 capitalize dark:text-gray-300 lg:flex lg:px-16 lg:-mx-4 lg:flex-row lg:items-center'" >
|
||||
<a href="#" class="mt-2 transition-colors duration-200 transform lg:mt-0 lg:mx-4 hover:text-gray-900 dark:hover:text-gray-200">features</a>
|
||||
<a href="#" class="mt-2 transition-colors duration-200 transform lg:mt-0 lg:mx-4 hover:text-gray-900 dark:hover:text-gray-200">downloads</a>
|
||||
<a href="#" class="mt-2 transition-colors duration-200 transform lg:mt-0 lg:mx-4 hover:text-gray-900 dark:hover:text-gray-200">docs</a>
|
||||
<a href="#" class="mt-2 transition-colors duration-200 transform lg:mt-0 lg:mx-4 hover:text-gray-900 dark:hover:text-gray-200">support</a>
|
||||
<a href="#" class="mt-2 transition-colors duration-200 transform lg:mt-0 lg:mx-4 hover:text-gray-900 dark:hover:text-gray-200">blog</a>
|
||||
|
||||
<div class="relative mt-4 lg:mt-0 lg:mx-4">
|
||||
<span class="absolute inset-y-0 left-0 flex items-center pl-3">
|
||||
<svg class="w-4 h-4 text-gray-600 dark:text-gray-300" viewBox="0 0 24 24" fill="none">
|
||||
<path d="M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
|
||||
</svg>
|
||||
</span>
|
||||
<div class="relative mt-4 lg:mt-0 lg:mx-4">
|
||||
<span class="absolute inset-y-0 left-0 flex items-center pl-3">
|
||||
<svg class="w-4 h-4 text-gray-600 dark:text-gray-300" viewBox="0 0 24 24" fill="none">
|
||||
<path d="M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
|
||||
</svg>
|
||||
</span>
|
||||
|
||||
<input type="text" class="w-full py-1 pl-10 pr-4 text-gray-700 placeholder-gray-600 bg-white border-b border-gray-600 dark:placeholder-gray-300 dark:focus:border-gray-300 lg:w-56 lg:border-transparent dark:bg-gray-800 dark:text-gray-300 focus:outline-none focus:border-gray-600" placeholder="Search">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<input type="text" class="w-full py-1 pl-10 pr-4 text-gray-700 placeholder-gray-600 bg-white border-b border-gray-600 dark:placeholder-gray-300 dark:focus:border-gray-300 lg:w-56 lg:border-transparent dark:bg-gray-800 dark:text-gray-300 focus:outline-none focus:border-gray-600" placeholder="Search">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-center mt-6 lg:flex lg:mt-0 lg:-mx-2">
|
||||
<a href="#" class="mx-2 text-gray-600 transition-colors duration-200 transform dark:text-gray-300 hover:text-gray-500 dark:hover:text-gray-300" aria-label="Reddit">
|
||||
<svg class="w-5 h-5 fill-current" viewBox="0 0 24 24" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C21.9939 17.5203 17.5203 21.9939 12 22ZM6.807 10.543C6.20862 10.5433 5.67102 10.9088 5.45054 11.465C5.23006 12.0213 5.37133 12.6558 5.807 13.066C5.92217 13.1751 6.05463 13.2643 6.199 13.33C6.18644 13.4761 6.18644 13.6229 6.199 13.769C6.199 16.009 8.814 17.831 12.028 17.831C15.242 17.831 17.858 16.009 17.858 13.769C17.8696 13.6229 17.8696 13.4761 17.858 13.33C18.4649 13.0351 18.786 12.3585 18.6305 11.7019C18.475 11.0453 17.8847 10.5844 17.21 10.593H17.157C16.7988 10.6062 16.458 10.7512 16.2 11C15.0625 10.2265 13.7252 9.79927 12.35 9.77L13 6.65L15.138 7.1C15.1931 7.60706 15.621 7.99141 16.131 7.992C16.1674 7.99196 16.2038 7.98995 16.24 7.986C16.7702 7.93278 17.1655 7.47314 17.1389 6.94094C17.1122 6.40873 16.6729 5.991 16.14 5.991C16.1022 5.99191 16.0645 5.99491 16.027 6C15.71 6.03367 15.4281 6.21641 15.268 6.492L12.82 6C12.7983 5.99535 12.7762 5.993 12.754 5.993C12.6094 5.99472 12.4851 6.09583 12.454 6.237L11.706 9.71C10.3138 9.7297 8.95795 10.157 7.806 10.939C7.53601 10.6839 7.17843 10.5422 6.807 10.543ZM12.18 16.524C12.124 16.524 12.067 16.524 12.011 16.524C11.955 16.524 11.898 16.524 11.842 16.524C11.0121 16.5208 10.2054 16.2497 9.542 15.751C9.49626 15.6958 9.47445 15.6246 9.4814 15.5533C9.48834 15.482 9.52348 15.4163 9.579 15.371C9.62737 15.3318 9.68771 15.3102 9.75 15.31C9.81233 15.31 9.87275 15.3315 9.921 15.371C10.4816 15.7818 11.159 16.0022 11.854 16C11.9027 16 11.9513 16 12 16C12.059 16 12.119 16 12.178 16C12.864 16.0011 13.5329 15.7863 14.09 15.386C14.1427 15.3322 14.2147 15.302 14.29 15.302C14.3653 15.302 14.4373 15.3322 14.49 15.386C14.5985 15.4981 14.5962 15.6767 14.485 15.786V15.746C13.8213 16.2481 13.0123 16.5208 12.18 16.523V16.524ZM14.307 14.08H14.291L14.299 14.041C13.8591 14.011 13.4994 13.6789 13.4343 13.2429C13.3691 12.8068 13.6162 12.3842 14.028 12.2269C14.4399 12.0697 14.9058 12.2202 15.1478 12.5887C15.3899 12.9572 15.3429 13.4445 15.035 13.76C14.856 13.9554 14.6059 14.0707 14.341 14.08H14.306H14.307ZM9.67 14C9.11772 14 8.67 13.5523 8.67 13C8.67 12.4477 9.11772 12 9.67 12C10.2223 12 10.67 12.4477 10.67 13C10.67 13.5523 10.2223 14 9.67 14Z">
|
||||
</path>
|
||||
</svg>
|
||||
</a>
|
||||
<div class="flex justify-center mt-6 lg:flex lg:mt-0 lg:-mx-2">
|
||||
<a href="#" class="mx-2 text-gray-600 transition-colors duration-200 transform dark:text-gray-300 hover:text-gray-500 dark:hover:text-gray-300" aria-label="Reddit">
|
||||
<svg class="w-5 h-5 fill-current" viewBox="0 0 24 24" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C21.9939 17.5203 17.5203 21.9939 12 22ZM6.807 10.543C6.20862 10.5433 5.67102 10.9088 5.45054 11.465C5.23006 12.0213 5.37133 12.6558 5.807 13.066C5.92217 13.1751 6.05463 13.2643 6.199 13.33C6.18644 13.4761 6.18644 13.6229 6.199 13.769C6.199 16.009 8.814 17.831 12.028 17.831C15.242 17.831 17.858 16.009 17.858 13.769C17.8696 13.6229 17.8696 13.4761 17.858 13.33C18.4649 13.0351 18.786 12.3585 18.6305 11.7019C18.475 11.0453 17.8847 10.5844 17.21 10.593H17.157C16.7988 10.6062 16.458 10.7512 16.2 11C15.0625 10.2265 13.7252 9.79927 12.35 9.77L13 6.65L15.138 7.1C15.1931 7.60706 15.621 7.99141 16.131 7.992C16.1674 7.99196 16.2038 7.98995 16.24 7.986C16.7702 7.93278 17.1655 7.47314 17.1389 6.94094C17.1122 6.40873 16.6729 5.991 16.14 5.991C16.1022 5.99191 16.0645 5.99491 16.027 6C15.71 6.03367 15.4281 6.21641 15.268 6.492L12.82 6C12.7983 5.99535 12.7762 5.993 12.754 5.993C12.6094 5.99472 12.4851 6.09583 12.454 6.237L11.706 9.71C10.3138 9.7297 8.95795 10.157 7.806 10.939C7.53601 10.6839 7.17843 10.5422 6.807 10.543ZM12.18 16.524C12.124 16.524 12.067 16.524 12.011 16.524C11.955 16.524 11.898 16.524 11.842 16.524C11.0121 16.5208 10.2054 16.2497 9.542 15.751C9.49626 15.6958 9.47445 15.6246 9.4814 15.5533C9.48834 15.482 9.52348 15.4163 9.579 15.371C9.62737 15.3318 9.68771 15.3102 9.75 15.31C9.81233 15.31 9.87275 15.3315 9.921 15.371C10.4816 15.7818 11.159 16.0022 11.854 16C11.9027 16 11.9513 16 12 16C12.059 16 12.119 16 12.178 16C12.864 16.0011 13.5329 15.7863 14.09 15.386C14.1427 15.3322 14.2147 15.302 14.29 15.302C14.3653 15.302 14.4373 15.3322 14.49 15.386C14.5985 15.4981 14.5962 15.6767 14.485 15.786V15.746C13.8213 16.2481 13.0123 16.5208 12.18 16.523V16.524ZM14.307 14.08H14.291L14.299 14.041C13.8591 14.011 13.4994 13.6789 13.4343 13.2429C13.3691 12.8068 13.6162 12.3842 14.028 12.2269C14.4399 12.0697 14.9058 12.2202 15.1478 12.5887C15.3899 12.9572 15.3429 13.4445 15.035 13.76C14.856 13.9554 14.6059 14.0707 14.341 14.08H14.306H14.307ZM9.67 14C9.11772 14 8.67 13.5523 8.67 13C8.67 12.4477 9.11772 12 9.67 12C10.2223 12 10.67 12.4477 10.67 13C10.67 13.5523 10.2223 14 9.67 14Z">
|
||||
</path>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<a href="#" class="mx-2 text-gray-600 transition-colors duration-200 transform dark:text-gray-300 hover:text-gray-500 dark:hover:text-gray-300"
|
||||
aria-label="Facebook">
|
||||
<svg class="w-5 h-5 fill-current" viewBox="0 0 24 24" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M2.00195 12.002C2.00312 16.9214 5.58036 21.1101 10.439 21.881V14.892H7.90195V12.002H10.442V9.80204C10.3284 8.75958 10.6845 7.72064 11.4136 6.96698C12.1427 6.21332 13.1693 5.82306 14.215 5.90204C14.9655 5.91417 15.7141 5.98101 16.455 6.10205V8.56104H15.191C14.7558 8.50405 14.3183 8.64777 14.0017 8.95171C13.6851 9.25566 13.5237 9.68693 13.563 10.124V12.002H16.334L15.891 14.893H13.563V21.881C18.8174 21.0506 22.502 16.2518 21.9475 10.9611C21.3929 5.67041 16.7932 1.73997 11.4808 2.01722C6.16831 2.29447 2.0028 6.68235 2.00195 12.002Z">
|
||||
</path>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#" class="mx-2 text-gray-600 transition-colors duration-200 transform dark:text-gray-300 hover:text-gray-500 dark:hover:text-gray-300"
|
||||
aria-label="Facebook">
|
||||
<svg class="w-5 h-5 fill-current" viewBox="0 0 24 24" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M2.00195 12.002C2.00312 16.9214 5.58036 21.1101 10.439 21.881V14.892H7.90195V12.002H10.442V9.80204C10.3284 8.75958 10.6845 7.72064 11.4136 6.96698C12.1427 6.21332 13.1693 5.82306 14.215 5.90204C14.9655 5.91417 15.7141 5.98101 16.455 6.10205V8.56104H15.191C14.7558 8.50405 14.3183 8.64777 14.0017 8.95171C13.6851 9.25566 13.5237 9.68693 13.563 10.124V12.002H16.334L15.891 14.893H13.563V21.881C18.8174 21.0506 22.502 16.2518 21.9475 10.9611C21.3929 5.67041 16.7932 1.73997 11.4808 2.01722C6.16831 2.29447 2.0028 6.68235 2.00195 12.002Z">
|
||||
</path>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<a href="#" class="mx-2 text-gray-600 transition-colors duration-200 transform dark:text-gray-300 hover:text-gray-500 dark:hover:text-gray-300" aria-label="Github">
|
||||
<svg class="w-5 h-5 fill-current" viewBox="0 0 24 24" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M12.026 2C7.13295 1.99937 2.96183 5.54799 2.17842 10.3779C1.395 15.2079 4.23061 19.893 8.87302 21.439C9.37302 21.529 9.55202 21.222 9.55202 20.958C9.55202 20.721 9.54402 20.093 9.54102 19.258C6.76602 19.858 6.18002 17.92 6.18002 17.92C5.99733 17.317 5.60459 16.7993 5.07302 16.461C4.17302 15.842 5.14202 15.856 5.14202 15.856C5.78269 15.9438 6.34657 16.3235 6.66902 16.884C6.94195 17.3803 7.40177 17.747 7.94632 17.9026C8.49087 18.0583 9.07503 17.99 9.56902 17.713C9.61544 17.207 9.84055 16.7341 10.204 16.379C7.99002 16.128 5.66202 15.272 5.66202 11.449C5.64973 10.4602 6.01691 9.5043 6.68802 8.778C6.38437 7.91731 6.42013 6.97325 6.78802 6.138C6.78802 6.138 7.62502 5.869 9.53002 7.159C11.1639 6.71101 12.8882 6.71101 14.522 7.159C16.428 5.868 17.264 6.138 17.264 6.138C17.6336 6.97286 17.6694 7.91757 17.364 8.778C18.0376 9.50423 18.4045 10.4626 18.388 11.453C18.388 15.286 16.058 16.128 13.836 16.375C14.3153 16.8651 14.5612 17.5373 14.511 18.221C14.511 19.555 14.499 20.631 14.499 20.958C14.499 21.225 14.677 21.535 15.186 21.437C19.8265 19.8884 22.6591 15.203 21.874 10.3743C21.089 5.54565 16.9181 1.99888 12.026 2Z">
|
||||
</path>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="#" class="mx-2 text-gray-600 transition-colors duration-200 transform dark:text-gray-300 hover:text-gray-500 dark:hover:text-gray-300" aria-label="Github">
|
||||
<svg class="w-5 h-5 fill-current" viewBox="0 0 24 24" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M12.026 2C7.13295 1.99937 2.96183 5.54799 2.17842 10.3779C1.395 15.2079 4.23061 19.893 8.87302 21.439C9.37302 21.529 9.55202 21.222 9.55202 20.958C9.55202 20.721 9.54402 20.093 9.54102 19.258C6.76602 19.858 6.18002 17.92 6.18002 17.92C5.99733 17.317 5.60459 16.7993 5.07302 16.461C4.17302 15.842 5.14202 15.856 5.14202 15.856C5.78269 15.9438 6.34657 16.3235 6.66902 16.884C6.94195 17.3803 7.40177 17.747 7.94632 17.9026C8.49087 18.0583 9.07503 17.99 9.56902 17.713C9.61544 17.207 9.84055 16.7341 10.204 16.379C7.99002 16.128 5.66202 15.272 5.66202 11.449C5.64973 10.4602 6.01691 9.5043 6.68802 8.778C6.38437 7.91731 6.42013 6.97325 6.78802 6.138C6.78802 6.138 7.62502 5.869 9.53002 7.159C11.1639 6.71101 12.8882 6.71101 14.522 7.159C16.428 5.868 17.264 6.138 17.264 6.138C17.6336 6.97286 17.6694 7.91757 17.364 8.778C18.0376 9.50423 18.4045 10.4626 18.388 11.453C18.388 15.286 16.058 16.128 13.836 16.375C14.3153 16.8651 14.5612 17.5373 14.511 18.221C14.511 19.555 14.499 20.631 14.499 20.958C14.499 21.225 14.677 21.535 15.186 21.437C19.8265 19.8884 22.6591 15.203 21.874 10.3743C21.089 5.54565 16.9181 1.99888 12.026 2Z">
|
||||
</path>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- header 15 end -->
|
||||
|
||||
|
||||
<!-- header 16 start -->
|
||||
<section class="section_divider">
|
||||
<div>Header 16</div>
|
||||
</section>
|
||||
|
||||
<nav class="bg-white shadow dark:bg-gray-800">
|
||||
<nav x-data="{mobile_nav_status:false}" class="bg-white shadow dark:bg-gray-800">
|
||||
<div class="container px-6 py-3 mx-auto">
|
||||
<div class="flex flex-col md:flex-row md:justify-between md:items-center">
|
||||
<div class="flex items-center justify-between">
|
||||
@@ -1102,7 +1110,7 @@
|
||||
|
||||
<!-- Mobile menu button -->
|
||||
<div class="flex md:hidden">
|
||||
<button type="button" class="text-gray-500 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 focus:outline-none focus:text-gray-600 dark:focus:text-gray-400" aria-label="toggle menu">
|
||||
<button @click="mobile_nav_status=!mobile_nav_status" type="button" class="text-gray-500 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 focus:outline-none focus:text-gray-600 dark:focus:text-gray-400" aria-label="toggle menu">
|
||||
<svg viewBox="0 0 24 24" class="w-6 h-6 fill-current">
|
||||
<path fill-rule="evenodd" d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"></path>
|
||||
</svg>
|
||||
@@ -1111,7 +1119,7 @@
|
||||
</div>
|
||||
|
||||
<!-- Mobile Menu open: "block", Menu closed: "hidden" -->
|
||||
<div class="items-center md:flex">
|
||||
<div :class="mobile_nav_status ? 'block items-center md:flex' : 'hidden items-center md:flex' ">
|
||||
<div class="flex flex-col mt-2 md:flex-row md:mt-0 md:mx-1">
|
||||
<a class="my-1 text-sm leading-5 text-gray-700 transition-colors duration-200 transform dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 hover:underline md:mx-4 md:my-0" href="#">Home</a>
|
||||
<a class="my-1 text-sm leading-5 text-gray-700 transition-colors duration-200 transform dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 hover:underline md:mx-4 md:my-0" href="#">Blog</a>
|
||||
@@ -1139,7 +1147,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="py-3 mt-3 -mx-3 overflow-y-auto whitespace-nowrap h-0 bg-transparent">
|
||||
<div class="py-5 mt-3 -mx-3 overflow-y-auto whitespace-nowrap h-0 bg-transparent hidden lg:block">
|
||||
<a class="mx-4 text-sm leading-5 text-gray-700 transition-colors duration-200 transform dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 hover:underline md:my-0" href="#">News</a>
|
||||
<a class="mx-4 text-sm leading-5 text-gray-700 transition-colors duration-200 transform dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 hover:underline md:my-0" href="#">Articles</a>
|
||||
<a class="mx-4 text-sm leading-5 text-gray-700 transition-colors duration-200 transform dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 hover:underline md:my-0" href="#">Videos</a>
|
||||
@@ -1166,6 +1174,7 @@
|
||||
|
||||
<!-- header 16 end -->
|
||||
|
||||
|
||||
<!-- header 17 start -->
|
||||
<section class="section_divider">
|
||||
<div>Header 17 </div>
|
||||
|
||||
@@ -19,57 +19,57 @@
|
||||
<!-- section 1 start -->
|
||||
<section class="section_divider" id="section_1">
|
||||
<div>Section 1</div>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<section class="bg-white dark:bg-gray-800">
|
||||
<div class="container px-6 py-8 mx-auto">
|
||||
<div class="items-center lg:flex">
|
||||
<div class="lg:w-1/2">
|
||||
<h2 class="text-3xl font-bold text-gray-800 dark:text-gray-100">Who I am</h2>
|
||||
<section class="bg-white dark:bg-gray-800">
|
||||
<div class="container px-6 py-8 mx-auto">
|
||||
<div class="items-center lg:flex">
|
||||
<div class="lg:w-1/2">
|
||||
<h2 class="text-3xl font-bold text-gray-800 dark:text-gray-100">Who I am</h2>
|
||||
|
||||
<p class="mt-4 text-gray-500 dark:text-gray-400 lg:max-w-md">
|
||||
Hi I am jane , software engineer <a class="font-bold text-blue-600 dark:text-blue-400" href="#">@BakaTeam</a> , Lorem ipsum, dolor sit amet consectetur adipisicing elit. Illum in sed non alias, fugiat, commodi nemo ut fugit corrupti dolorem sequi ex veniam consequuntur id, maiores beatae ipsa omnis aliquam?
|
||||
</p>
|
||||
<p class="mt-4 text-gray-500 dark:text-gray-400 lg:max-w-md">
|
||||
Hi I am jane , software engineer <a class="font-bold text-blue-600 dark:text-blue-400" href="#">@BakaTeam</a> , Lorem ipsum, dolor sit amet consectetur adipisicing elit. Illum in sed non alias, fugiat, commodi nemo ut fugit corrupti dolorem sequi ex veniam consequuntur id, maiores beatae ipsa omnis aliquam?
|
||||
</p>
|
||||
|
||||
<div class="flex items-center mt-6 -mx-2">
|
||||
<a class="mx-2" href="#" aria-label="Twitter">
|
||||
<svg class="w-5 h-5 text-gray-700 fill-current dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
||||
<path d="M492 109.5c-17.4 7.7-36 12.9-55.6 15.3 20-12 35.4-31 42.6-53.6-18.7 11.1-39.4 19.2-61.5 23.5C399.8 75.8 374.6 64 346.8 64c-53.5 0-96.8 43.4-96.8 96.9 0 7.6.8 15 2.5 22.1-80.5-4-151.9-42.6-199.6-101.3-8.3 14.3-13.1 31-13.1 48.7 0 33.6 17.2 63.3 43.2 80.7-16-.4-31-4.8-44-12.1v1.2c0 47 33.4 86.1 77.7 95-8.1 2.2-16.7 3.4-25.5 3.4-6.2 0-12.3-.6-18.2-1.8 12.3 38.5 48.1 66.5 90.5 67.3-33.1 26-74.9 41.5-120.3 41.5-7.8 0-15.5-.5-23.1-1.4C62.8 432 113.7 448 168.3 448 346.6 448 444 300.3 444 172.2c0-4.2-.1-8.4-.3-12.5C462.6 146 479 129 492 109.5z"/>
|
||||
</svg>
|
||||
</a>
|
||||
<div class="flex items-center mt-6 -mx-2">
|
||||
<a class="mx-2" href="#" aria-label="Twitter">
|
||||
<svg class="w-5 h-5 text-gray-700 fill-current dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
||||
<path d="M492 109.5c-17.4 7.7-36 12.9-55.6 15.3 20-12 35.4-31 42.6-53.6-18.7 11.1-39.4 19.2-61.5 23.5C399.8 75.8 374.6 64 346.8 64c-53.5 0-96.8 43.4-96.8 96.9 0 7.6.8 15 2.5 22.1-80.5-4-151.9-42.6-199.6-101.3-8.3 14.3-13.1 31-13.1 48.7 0 33.6 17.2 63.3 43.2 80.7-16-.4-31-4.8-44-12.1v1.2c0 47 33.4 86.1 77.7 95-8.1 2.2-16.7 3.4-25.5 3.4-6.2 0-12.3-.6-18.2-1.8 12.3 38.5 48.1 66.5 90.5 67.3-33.1 26-74.9 41.5-120.3 41.5-7.8 0-15.5-.5-23.1-1.4C62.8 432 113.7 448 168.3 448 346.6 448 444 300.3 444 172.2c0-4.2-.1-8.4-.3-12.5C462.6 146 479 129 492 109.5z"/>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<a class="mx-2" href="#" aria-label="Facebook">
|
||||
<svg class="w-5 h-5 text-gray-700 fill-current dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
||||
<path d="M426.8 64H85.2C73.5 64 64 73.5 64 85.2v341.6c0 11.7 9.5 21.2 21.2 21.2H256V296h-45.9v-56H256v-41.4c0-49.6 34.4-76.6 78.7-76.6 21.2 0 44 1.6 49.3 2.3v51.8h-35.3c-24.1 0-28.7 11.4-28.7 28.2V240h57.4l-7.5 56H320v152h106.8c11.7 0 21.2-9.5 21.2-21.2V85.2c0-11.7-9.5-21.2-21.2-21.2z"/>
|
||||
</svg>
|
||||
</a>
|
||||
<a class="mx-2" href="#" aria-label="Facebook">
|
||||
<svg class="w-5 h-5 text-gray-700 fill-current dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
||||
<path d="M426.8 64H85.2C73.5 64 64 73.5 64 85.2v341.6c0 11.7 9.5 21.2 21.2 21.2H256V296h-45.9v-56H256v-41.4c0-49.6 34.4-76.6 78.7-76.6 21.2 0 44 1.6 49.3 2.3v51.8h-35.3c-24.1 0-28.7 11.4-28.7 28.2V240h57.4l-7.5 56H320v152h106.8c11.7 0 21.2-9.5 21.2-21.2V85.2c0-11.7-9.5-21.2-21.2-21.2z"/>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<a class="mx-2" href="#" aria-label="Linkden">
|
||||
<svg class="w-5 h-5 text-gray-700 fill-current dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
||||
<path d="M417.2 64H96.8C79.3 64 64 76.6 64 93.9V415c0 17.4 15.3 32.9 32.8 32.9h320.3c17.6 0 30.8-15.6 30.8-32.9V93.9C448 76.6 434.7 64 417.2 64zM183 384h-55V213h55v171zm-25.6-197h-.4c-17.6 0-29-13.1-29-29.5 0-16.7 11.7-29.5 29.7-29.5s29 12.7 29.4 29.5c0 16.4-11.4 29.5-29.7 29.5zM384 384h-55v-93.5c0-22.4-8-37.7-27.9-37.7-15.2 0-24.2 10.3-28.2 20.3-1.5 3.6-1.9 8.5-1.9 13.5V384h-55V213h55v23.8c8-11.4 20.5-27.8 49.6-27.8 36.1 0 63.4 23.8 63.4 75.1V384z"/>
|
||||
</svg>
|
||||
</a>
|
||||
<a class="mx-2" href="#" aria-label="Linkden">
|
||||
<svg class="w-5 h-5 text-gray-700 fill-current dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
||||
<path d="M417.2 64H96.8C79.3 64 64 76.6 64 93.9V415c0 17.4 15.3 32.9 32.8 32.9h320.3c17.6 0 30.8-15.6 30.8-32.9V93.9C448 76.6 434.7 64 417.2 64zM183 384h-55V213h55v171zm-25.6-197h-.4c-17.6 0-29-13.1-29-29.5 0-16.7 11.7-29.5 29.7-29.5s29 12.7 29.4 29.5c0 16.4-11.4 29.5-29.7 29.5zM384 384h-55v-93.5c0-22.4-8-37.7-27.9-37.7-15.2 0-24.2 10.3-28.2 20.3-1.5 3.6-1.9 8.5-1.9 13.5V384h-55V213h55v23.8c8-11.4 20.5-27.8 49.6-27.8 36.1 0 63.4 23.8 63.4 75.1V384z"/>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<a class="mx-2" href="#" aria-label="Github">
|
||||
<svg class="w-5 h-5 text-gray-700 fill-current dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
||||
<path d="M256 32C132.3 32 32 134.9 32 261.7c0 101.5 64.2 187.5 153.2 217.9 1.4.3 2.6.4 3.8.4 8.3 0 11.5-6.1 11.5-11.4 0-5.5-.2-19.9-.3-39.1-8.4 1.9-15.9 2.7-22.6 2.7-43.1 0-52.9-33.5-52.9-33.5-10.2-26.5-24.9-33.6-24.9-33.6-19.5-13.7-.1-14.1 1.4-14.1h.1c22.5 2 34.3 23.8 34.3 23.8 11.2 19.6 26.2 25.1 39.6 25.1 10.5 0 20-3.4 25.6-6 2-14.8 7.8-24.9 14.2-30.7-49.7-5.8-102-25.5-102-113.5 0-25.1 8.7-45.6 23-61.6-2.3-5.8-10-29.2 2.2-60.8 0 0 1.6-.5 5-.5 8.1 0 26.4 3.1 56.6 24.1 17.9-5.1 37-7.6 56.1-7.7 19 .1 38.2 2.6 56.1 7.7 30.2-21 48.5-24.1 56.6-24.1 3.4 0 5 .5 5 .5 12.2 31.6 4.5 55 2.2 60.8 14.3 16.1 23 36.6 23 61.6 0 88.2-52.4 107.6-102.3 113.3 8 7.1 15.2 21.1 15.2 42.5 0 30.7-.3 55.5-.3 63 0 5.4 3.1 11.5 11.4 11.5 1.2 0 2.6-.1 4-.4C415.9 449.2 480 363.1 480 261.7 480 134.9 379.7 32 256 32z"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<a class="mx-2" href="#" aria-label="Github">
|
||||
<svg class="w-5 h-5 text-gray-700 fill-current dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
||||
<path d="M256 32C132.3 32 32 134.9 32 261.7c0 101.5 64.2 187.5 153.2 217.9 1.4.3 2.6.4 3.8.4 8.3 0 11.5-6.1 11.5-11.4 0-5.5-.2-19.9-.3-39.1-8.4 1.9-15.9 2.7-22.6 2.7-43.1 0-52.9-33.5-52.9-33.5-10.2-26.5-24.9-33.6-24.9-33.6-19.5-13.7-.1-14.1 1.4-14.1h.1c22.5 2 34.3 23.8 34.3 23.8 11.2 19.6 26.2 25.1 39.6 25.1 10.5 0 20-3.4 25.6-6 2-14.8 7.8-24.9 14.2-30.7-49.7-5.8-102-25.5-102-113.5 0-25.1 8.7-45.6 23-61.6-2.3-5.8-10-29.2 2.2-60.8 0 0 1.6-.5 5-.5 8.1 0 26.4 3.1 56.6 24.1 17.9-5.1 37-7.6 56.1-7.7 19 .1 38.2 2.6 56.1 7.7 30.2-21 48.5-24.1 56.6-24.1 3.4 0 5 .5 5 .5 12.2 31.6 4.5 55 2.2 60.8 14.3 16.1 23 36.6 23 61.6 0 88.2-52.4 107.6-102.3 113.3 8 7.1 15.2 21.1 15.2 42.5 0 30.7-.3 55.5-.3 63 0 5.4 3.1 11.5 11.4 11.5 1.2 0 2.6-.1 4-.4C415.9 449.2 480 363.1 480 261.7 480 134.9 379.7 32 256 32z"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-8 lg:mt-0 lg:w-1/2">
|
||||
<div class="flex items-center justify-center lg:justify-end">
|
||||
<div class="max-w-lg">
|
||||
<img class="object-cover object-center w-full h-64 rounded-md shadow" src="https://images.unsplash.com/photo-1484399172022-72a90b12e3c1?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=80" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<div class="mt-8 lg:mt-0 lg:w-1/2">
|
||||
<div class="flex items-center justify-center lg:justify-end">
|
||||
<div class="max-w-lg">
|
||||
<img class="object-cover object-center w-full h-64 rounded-md shadow" src="https://images.unsplash.com/photo-1484399172022-72a90b12e3c1?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=80" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- section 1 end -->
|
||||
<!-- section 1 end -->
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -189,6 +189,690 @@
|
||||
|
||||
<!-- section 3 end -->
|
||||
|
||||
<!-- section 4 start -->
|
||||
|
||||
<section class="section_divider">
|
||||
<div>Section 4 (about me template)</div>
|
||||
</section>
|
||||
<!-- about -->
|
||||
<!-- component -->
|
||||
<div class="container mx-auto">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 h-screen">
|
||||
<div class="max-h-96 md:h-screen">
|
||||
<img class="w-screen h-screen object-cover object-top" src="https://images.pexels.com/photos/270373/pexels-photo-270373.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="">
|
||||
</div>
|
||||
<div class="flex bg-gray-100 p-10">
|
||||
<div class="mb-auto mt-auto max-w-lg">
|
||||
<h1 class="text-3xl uppercase">Jun Santilla</h1>
|
||||
<p class="font-semibold mb-5">Web Developer</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
|
||||
<button class="bg-black rounded-md py-3 px-7 mt-6 text-white">Email Me</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- about -->
|
||||
<!-- section 4 end -->
|
||||
|
||||
|
||||
<!-- section 5 start -->
|
||||
<section class="section_divider">
|
||||
<div>Section 5 ( about 2 ) </div>
|
||||
</section>
|
||||
<!-- ====== About Section Start -->
|
||||
<section class="pt-20 lg:pt-[120px] pb-12 lg:pb-[90px] overflow-hidden dark:bg-gray-800">
|
||||
<div class="container mx-auto">
|
||||
<div class="flex flex-wrap justify-between items-center ">
|
||||
<div class="w-full lg:w-6/12 px-4">
|
||||
<div class=" flex justify-center ">
|
||||
<div class="w-full xl:w-1/2 px-3 sm:px-4">
|
||||
<div class="py-3 sm:py-4">
|
||||
<img
|
||||
src="https://cdn.tailgrids.com/1.0/assets/images/services/image-1.jpg"
|
||||
alt=""
|
||||
class="rounded-2xl w-full"
|
||||
/>
|
||||
</div>
|
||||
<div class="py-3 sm:py-4">
|
||||
<img
|
||||
src="https://cdn.tailgrids.com/1.0/assets/images/services/image-2.jpg"
|
||||
alt=""
|
||||
class="rounded-2xl w-full"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full xl:w-1/2 px-3 sm:px-4">
|
||||
<div class="my-4 relative z-10">
|
||||
<img
|
||||
src="https://cdn.tailgrids.com/1.0/assets/images/services/image-3.jpg"
|
||||
alt=""
|
||||
class="rounded-2xl w-full"
|
||||
/>
|
||||
<span class="absolute -right-7 -bottom-7 z-[-1]">
|
||||
<svg
|
||||
width="134"
|
||||
height="106"
|
||||
viewBox="0 0 134 106"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<circle
|
||||
cx="1.66667"
|
||||
cy="104"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 1.66667 104)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="16.3333"
|
||||
cy="104"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 16.3333 104)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="31"
|
||||
cy="104"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 31 104)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="45.6667"
|
||||
cy="104"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 45.6667 104)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="60.3334"
|
||||
cy="104"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 60.3334 104)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="88.6667"
|
||||
cy="104"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 88.6667 104)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="117.667"
|
||||
cy="104"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 117.667 104)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="74.6667"
|
||||
cy="104"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 74.6667 104)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="103"
|
||||
cy="104"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 103 104)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="132"
|
||||
cy="104"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 132 104)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="1.66667"
|
||||
cy="89.3333"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 1.66667 89.3333)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="16.3333"
|
||||
cy="89.3333"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 16.3333 89.3333)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="31"
|
||||
cy="89.3333"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 31 89.3333)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="45.6667"
|
||||
cy="89.3333"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 45.6667 89.3333)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="60.3333"
|
||||
cy="89.3338"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 60.3333 89.3338)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="88.6667"
|
||||
cy="89.3338"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 88.6667 89.3338)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="117.667"
|
||||
cy="89.3338"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 117.667 89.3338)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="74.6667"
|
||||
cy="89.3338"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 74.6667 89.3338)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="103"
|
||||
cy="89.3338"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 103 89.3338)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="132"
|
||||
cy="89.3338"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 132 89.3338)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="1.66667"
|
||||
cy="74.6673"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 1.66667 74.6673)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="1.66667"
|
||||
cy="31.0003"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 1.66667 31.0003)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="16.3333"
|
||||
cy="74.6668"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 16.3333 74.6668)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="16.3333"
|
||||
cy="31.0003"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 16.3333 31.0003)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="31"
|
||||
cy="74.6668"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 31 74.6668)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="31"
|
||||
cy="31.0003"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 31 31.0003)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="45.6667"
|
||||
cy="74.6668"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 45.6667 74.6668)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="45.6667"
|
||||
cy="31.0003"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 45.6667 31.0003)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="60.3333"
|
||||
cy="74.6668"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 60.3333 74.6668)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="60.3333"
|
||||
cy="30.9998"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 60.3333 30.9998)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="88.6667"
|
||||
cy="74.6668"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 88.6667 74.6668)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="88.6667"
|
||||
cy="30.9998"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 88.6667 30.9998)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="117.667"
|
||||
cy="74.6668"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 117.667 74.6668)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="117.667"
|
||||
cy="30.9998"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 117.667 30.9998)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="74.6667"
|
||||
cy="74.6668"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 74.6667 74.6668)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="74.6667"
|
||||
cy="30.9998"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 74.6667 30.9998)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="103"
|
||||
cy="74.6668"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 103 74.6668)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="103"
|
||||
cy="30.9998"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 103 30.9998)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="132"
|
||||
cy="74.6668"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 132 74.6668)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="132"
|
||||
cy="30.9998"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 132 30.9998)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="1.66667"
|
||||
cy="60.0003"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 1.66667 60.0003)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="1.66667"
|
||||
cy="16.3333"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 1.66667 16.3333)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="16.3333"
|
||||
cy="60.0003"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 16.3333 60.0003)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="16.3333"
|
||||
cy="16.3333"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 16.3333 16.3333)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="31"
|
||||
cy="60.0003"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 31 60.0003)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="31"
|
||||
cy="16.3333"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 31 16.3333)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="45.6667"
|
||||
cy="60.0003"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 45.6667 60.0003)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="45.6667"
|
||||
cy="16.3333"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 45.6667 16.3333)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="60.3333"
|
||||
cy="60.0003"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 60.3333 60.0003)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="60.3333"
|
||||
cy="16.3333"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 60.3333 16.3333)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="88.6667"
|
||||
cy="60.0003"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 88.6667 60.0003)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="88.6667"
|
||||
cy="16.3333"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 88.6667 16.3333)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="117.667"
|
||||
cy="60.0003"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 117.667 60.0003)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="117.667"
|
||||
cy="16.3333"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 117.667 16.3333)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="74.6667"
|
||||
cy="60.0003"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 74.6667 60.0003)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="74.6667"
|
||||
cy="16.3333"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 74.6667 16.3333)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="103"
|
||||
cy="60.0003"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 103 60.0003)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="103"
|
||||
cy="16.3333"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 103 16.3333)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="132"
|
||||
cy="60.0003"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 132 60.0003)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="132"
|
||||
cy="16.3333"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 132 16.3333)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="1.66667"
|
||||
cy="45.3333"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 1.66667 45.3333)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="1.66667"
|
||||
cy="1.66683"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 1.66667 1.66683)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="16.3333"
|
||||
cy="45.3333"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 16.3333 45.3333)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="16.3333"
|
||||
cy="1.66683"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 16.3333 1.66683)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="31"
|
||||
cy="45.3333"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 31 45.3333)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="31"
|
||||
cy="1.66683"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 31 1.66683)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="45.6667"
|
||||
cy="45.3333"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 45.6667 45.3333)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="45.6667"
|
||||
cy="1.66683"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 45.6667 1.66683)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="60.3333"
|
||||
cy="45.3338"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 60.3333 45.3338)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="60.3333"
|
||||
cy="1.66683"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 60.3333 1.66683)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="88.6667"
|
||||
cy="45.3338"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 88.6667 45.3338)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="88.6667"
|
||||
cy="1.66683"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 88.6667 1.66683)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="117.667"
|
||||
cy="45.3338"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 117.667 45.3338)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="117.667"
|
||||
cy="1.66683"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 117.667 1.66683)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="74.6667"
|
||||
cy="45.3338"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 74.6667 45.3338)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="74.6667"
|
||||
cy="1.66683"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 74.6667 1.66683)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="103"
|
||||
cy="45.3338"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 103 45.3338)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="103"
|
||||
cy="1.66683"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 103 1.66683)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="132"
|
||||
cy="45.3338"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 132 45.3338)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="132"
|
||||
cy="1.66683"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 132 1.66683)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full lg:w-1/2 xl:w-5/12 px-4">
|
||||
<div class="mt-10 lg:mt-0">
|
||||
<span class="font-semibold text-lg text-primary mb-2 block dark:text-gray-100">
|
||||
Why Choose Us
|
||||
</span>
|
||||
<h2 class="font-bold text-3xl sm:text-4xl text-dark mb-8 dark:text-cyan-200">
|
||||
Make your customers happy by giving services.
|
||||
</h2>
|
||||
<p class="text-base text-body-color mb-8 dark:text-emerald-100">
|
||||
It is a long established fact that a reader will be distracted
|
||||
by the readable content of a page when looking at its layout.
|
||||
The point of using Lorem Ipsum is that it has a more-or-less.
|
||||
</p>
|
||||
<p class="text-base text-body-color mb-12 dark:text-emerald-100">
|
||||
A domain name is one of the first steps to establishing your
|
||||
brand. Secure a consistent brand image with a domain name that
|
||||
matches your business.
|
||||
</p>
|
||||
<a
|
||||
href="javascript:void(0)"
|
||||
class="
|
||||
py-4
|
||||
px-10
|
||||
lg:px-8
|
||||
xl:px-10
|
||||
inline-flex
|
||||
items-center
|
||||
justify-center
|
||||
text-center text-white text-base
|
||||
bg-black
|
||||
hover:bg-opacity-90
|
||||
font-normal
|
||||
rounded-lg
|
||||
"
|
||||
>
|
||||
Get Started
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- ====== About Section End -->
|
||||
|
||||
<!-- section 5 end -->
|
||||
|
||||
<!-- section 6 start -->
|
||||
|
||||
|
||||
<!-- section 6 end -->
|
||||
|
||||
|
||||
<!-- start of script section -->
|
||||
<script type="text/javascript">
|
||||
|
||||
48
public/componets/service/1_service.html
Normal file
48
public/componets/service/1_service.html
Normal file
@@ -0,0 +1,48 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="./../../../dist/tailshape.css">
|
||||
<link rel="stylesheet" href="https://demos.creative-tim.com/notus-js/assets/vendor/@fortawesome/fontawesome-free/css/all.min.css">
|
||||
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
|
||||
<title>Service </title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||
d
|
||||
</button>
|
||||
|
||||
|
||||
|
||||
<!-- start of script section -->
|
||||
<script type="text/javascript">
|
||||
let toogler = document.getElementById("dark_mood_toogler");
|
||||
let doc_html_el = document.getElementsByTagName('html')[0];
|
||||
|
||||
doc_html_el.addEventListener('keyup',(e)=>{
|
||||
// key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
|
||||
if(e.ctrlKey && e.keyCode =='220'){
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
|
||||
}
|
||||
})
|
||||
doc_html_el.addEventListener('keyup',(e)=>{
|
||||
// key 191 is the forward slash , need to press ctrl+ / to show or hide the darkmode button
|
||||
if(e.ctrlKey && e.keyCode =='191'){
|
||||
toogler.style.display =='block'? toogler.style.display = 'none':toogler.style.display ='block';
|
||||
|
||||
}
|
||||
})
|
||||
toogler.addEventListener('click',()=>{
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
console.log(doc_html_el.className);
|
||||
})
|
||||
</script>
|
||||
<!-- end of script section -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
48
public/componets/service/2_service.html
Normal file
48
public/componets/service/2_service.html
Normal file
@@ -0,0 +1,48 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="./../../../dist/tailshape.css">
|
||||
<link rel="stylesheet" href="https://demos.creative-tim.com/notus-js/assets/vendor/@fortawesome/fontawesome-free/css/all.min.css">
|
||||
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
|
||||
<title>Service </title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||
d
|
||||
</button>
|
||||
|
||||
|
||||
|
||||
<!-- start of script section -->
|
||||
<script type="text/javascript">
|
||||
let toogler = document.getElementById("dark_mood_toogler");
|
||||
let doc_html_el = document.getElementsByTagName('html')[0];
|
||||
|
||||
doc_html_el.addEventListener('keyup',(e)=>{
|
||||
// key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
|
||||
if(e.ctrlKey && e.keyCode =='220'){
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
|
||||
}
|
||||
})
|
||||
doc_html_el.addEventListener('keyup',(e)=>{
|
||||
// key 191 is the forward slash , need to press ctrl+ / to show or hide the darkmode button
|
||||
if(e.ctrlKey && e.keyCode =='191'){
|
||||
toogler.style.display =='block'? toogler.style.display = 'none':toogler.style.display ='block';
|
||||
|
||||
}
|
||||
})
|
||||
toogler.addEventListener('click',()=>{
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
console.log(doc_html_el.className);
|
||||
})
|
||||
</script>
|
||||
<!-- end of script section -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
48
public/componets/service/3_service.html
Normal file
48
public/componets/service/3_service.html
Normal file
@@ -0,0 +1,48 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="./../../../dist/tailshape.css">
|
||||
<link rel="stylesheet" href="https://demos.creative-tim.com/notus-js/assets/vendor/@fortawesome/fontawesome-free/css/all.min.css">
|
||||
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
|
||||
<title>Service </title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||
d
|
||||
</button>
|
||||
|
||||
|
||||
|
||||
<!-- start of script section -->
|
||||
<script type="text/javascript">
|
||||
let toogler = document.getElementById("dark_mood_toogler");
|
||||
let doc_html_el = document.getElementsByTagName('html')[0];
|
||||
|
||||
doc_html_el.addEventListener('keyup',(e)=>{
|
||||
// key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
|
||||
if(e.ctrlKey && e.keyCode =='220'){
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
|
||||
}
|
||||
})
|
||||
doc_html_el.addEventListener('keyup',(e)=>{
|
||||
// key 191 is the forward slash , need to press ctrl+ / to show or hide the darkmode button
|
||||
if(e.ctrlKey && e.keyCode =='191'){
|
||||
toogler.style.display =='block'? toogler.style.display = 'none':toogler.style.display ='block';
|
||||
|
||||
}
|
||||
})
|
||||
toogler.addEventListener('click',()=>{
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
console.log(doc_html_el.className);
|
||||
})
|
||||
</script>
|
||||
<!-- end of script section -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
58
public/componets/service/service.html
Normal file
58
public/componets/service/service.html
Normal file
File diff suppressed because one or more lines are too long
48
public/componets/skill/1_skill.html
Normal file
48
public/componets/skill/1_skill.html
Normal file
@@ -0,0 +1,48 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="./../../../dist/tailshape.css">
|
||||
<link rel="stylesheet" href="https://demos.creative-tim.com/notus-js/assets/vendor/@fortawesome/fontawesome-free/css/all.min.css">
|
||||
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
|
||||
<title>Skill 1 </title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||
d
|
||||
</button>
|
||||
|
||||
|
||||
|
||||
<!-- start of script section -->
|
||||
<script type="text/javascript">
|
||||
let toogler = document.getElementById("dark_mood_toogler");
|
||||
let doc_html_el = document.getElementsByTagName('html')[0];
|
||||
|
||||
doc_html_el.addEventListener('keyup',(e)=>{
|
||||
// key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
|
||||
if(e.ctrlKey && e.keyCode =='220'){
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
|
||||
}
|
||||
})
|
||||
doc_html_el.addEventListener('keyup',(e)=>{
|
||||
// key 191 is the forward slash , need to press ctrl+ / to show or hide the darkmode button
|
||||
if(e.ctrlKey && e.keyCode =='191'){
|
||||
toogler.style.display =='block'? toogler.style.display = 'none':toogler.style.display ='block';
|
||||
|
||||
}
|
||||
})
|
||||
toogler.addEventListener('click',()=>{
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
console.log(doc_html_el.className);
|
||||
})
|
||||
</script>
|
||||
<!-- end of script section -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
48
public/componets/skill/2_skill.html
Normal file
48
public/componets/skill/2_skill.html
Normal file
@@ -0,0 +1,48 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="./../../../dist/tailshape.css">
|
||||
<link rel="stylesheet" href="https://demos.creative-tim.com/notus-js/assets/vendor/@fortawesome/fontawesome-free/css/all.min.css">
|
||||
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
|
||||
<title>Skill 2 </title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||
d
|
||||
</button>
|
||||
|
||||
|
||||
|
||||
<!-- start of script section -->
|
||||
<script type="text/javascript">
|
||||
let toogler = document.getElementById("dark_mood_toogler");
|
||||
let doc_html_el = document.getElementsByTagName('html')[0];
|
||||
|
||||
doc_html_el.addEventListener('keyup',(e)=>{
|
||||
// key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
|
||||
if(e.ctrlKey && e.keyCode =='220'){
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
|
||||
}
|
||||
})
|
||||
doc_html_el.addEventListener('keyup',(e)=>{
|
||||
// key 191 is the forward slash , need to press ctrl+ / to show or hide the darkmode button
|
||||
if(e.ctrlKey && e.keyCode =='191'){
|
||||
toogler.style.display =='block'? toogler.style.display = 'none':toogler.style.display ='block';
|
||||
|
||||
}
|
||||
})
|
||||
toogler.addEventListener('click',()=>{
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
console.log(doc_html_el.className);
|
||||
})
|
||||
</script>
|
||||
<!-- end of script section -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
48
public/componets/skill/3_skill.html
Normal file
48
public/componets/skill/3_skill.html
Normal file
@@ -0,0 +1,48 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="./../../../dist/tailshape.css">
|
||||
<link rel="stylesheet" href="https://demos.creative-tim.com/notus-js/assets/vendor/@fortawesome/fontawesome-free/css/all.min.css">
|
||||
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
|
||||
<title>Skill 3 </title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||
d
|
||||
</button>
|
||||
|
||||
|
||||
|
||||
<!-- start of script section -->
|
||||
<script type="text/javascript">
|
||||
let toogler = document.getElementById("dark_mood_toogler");
|
||||
let doc_html_el = document.getElementsByTagName('html')[0];
|
||||
|
||||
doc_html_el.addEventListener('keyup',(e)=>{
|
||||
// key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
|
||||
if(e.ctrlKey && e.keyCode =='220'){
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
|
||||
}
|
||||
})
|
||||
doc_html_el.addEventListener('keyup',(e)=>{
|
||||
// key 191 is the forward slash , need to press ctrl+ / to show or hide the darkmode button
|
||||
if(e.ctrlKey && e.keyCode =='191'){
|
||||
toogler.style.display =='block'? toogler.style.display = 'none':toogler.style.display ='block';
|
||||
|
||||
}
|
||||
})
|
||||
toogler.addEventListener('click',()=>{
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
console.log(doc_html_el.className);
|
||||
})
|
||||
</script>
|
||||
<!-- end of script section -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
48
public/componets/skill/4_skill.html
Normal file
48
public/componets/skill/4_skill.html
Normal file
@@ -0,0 +1,48 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="./../../../dist/tailshape.css">
|
||||
<link rel="stylesheet" href="https://demos.creative-tim.com/notus-js/assets/vendor/@fortawesome/fontawesome-free/css/all.min.css">
|
||||
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
|
||||
<title>Skill 4 </title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||
d
|
||||
</button>
|
||||
|
||||
|
||||
|
||||
<!-- start of script section -->
|
||||
<script type="text/javascript">
|
||||
let toogler = document.getElementById("dark_mood_toogler");
|
||||
let doc_html_el = document.getElementsByTagName('html')[0];
|
||||
|
||||
doc_html_el.addEventListener('keyup',(e)=>{
|
||||
// key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
|
||||
if(e.ctrlKey && e.keyCode =='220'){
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
|
||||
}
|
||||
})
|
||||
doc_html_el.addEventListener('keyup',(e)=>{
|
||||
// key 191 is the forward slash , need to press ctrl+ / to show or hide the darkmode button
|
||||
if(e.ctrlKey && e.keyCode =='191'){
|
||||
toogler.style.display =='block'? toogler.style.display = 'none':toogler.style.display ='block';
|
||||
|
||||
}
|
||||
})
|
||||
toogler.addEventListener('click',()=>{
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
console.log(doc_html_el.className);
|
||||
})
|
||||
</script>
|
||||
<!-- end of script section -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
166
public/componets/skill/skill.html
Normal file
166
public/componets/skill/skill.html
Normal file
@@ -0,0 +1,166 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="./../../../dist/tailshape.css">
|
||||
<link rel="stylesheet" href="https://demos.creative-tim.com/notus-js/assets/vendor/@fortawesome/fontawesome-free/css/all.min.css">
|
||||
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
|
||||
<title>Skill </title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||
d
|
||||
</button>
|
||||
|
||||
<!-- skill 1 start -->
|
||||
<section class="section_divider">
|
||||
<div>Skill 1</div>
|
||||
</section>
|
||||
<section class="text-gray-200 bg-gray-900">
|
||||
<div class="max-w-6xl mx-auto px-5 py-24 ">
|
||||
<div class="text-center mb-20">
|
||||
<h1 class=" title-font mb-4 text-4xl font-extrabold leading-10 tracking-tight sm:text-5xl sm:leading-none md:text-6xl">Compétences</h1>
|
||||
<p class="text-base leading-relaxed xl:w-2/4 lg:w-3/4 mx-auto">L'informatique est vaste et les langages naissent presque à tout moment, je fais tout mon possible pour être à la hauteur afin de répondre au besoin de mes clients et d'apporter de l'aide aux nouveaux développeurs.</p>
|
||||
<div class="flex mt-6 justify-center">
|
||||
<div class="w-16 h-1 rounded-full bg-indigo-500 inline-flex"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-wrap sm:-m-4 -mx-4 -mb-10 -mt-4 ">
|
||||
<div class="p-10 md:w-1/3 md:mb-0 mb-6 flex flex-col ">
|
||||
<div class="pattern-dots-md gray-light">
|
||||
<div class="rounded bg-gray-800 p-4 transform translate-x-6 -translate-y-6 " >
|
||||
<div class="w-10 h-10 inline-flex items-center justify-center rounded-full bg-green-100 text-green-500 mb-5 flex-shrink-0 p-2">
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01"></path></svg> </div>
|
||||
<div class="flex-grow ">
|
||||
<h2 class=" text-xl title-font font-medium mb-3">Webdesign</h2>
|
||||
<p class="leading-relaxed text-sm text-justify">Donner du goût 😍 de la couleur aux applications, je le fais afin de rendre vos sites attrayants 🎨. Avant de devenir webdesigner, depuis tout petit j'étais déjà familier à la couleur et du dessin.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-10 md:w-1/3 md:mb-0 mb-6 flex flex-col ">
|
||||
<div class="pattern-dots-md gray-light">
|
||||
<div class="rounded bg-gray-800 p-4 transform translate-x-6 -translate-y-6 ">
|
||||
<div class="w-10 h-10 inline-flex items-center justify-center rounded-full bg-blue-100 text-blue-500 mb-5 flex-shrink-0">
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path></svg>
|
||||
</div>
|
||||
<div class="flex-grow">
|
||||
<h2 class=" text-xl title-font font-medium mb-3">Intégration web</h2>
|
||||
<p class="leading-relaxed text-sm text-justify">
|
||||
Donner du goût 😍 de la couleur aux applications, je le fais afin de rendre vos sites attrayants 🎨. Avant de devenir webdesigner, depuis tout petit j'étais déjà familier à la couleur et du dessin.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-10 md:w-1/3 md:mb-0 mb-6 flex flex-col ">
|
||||
<div class="pattern-dots-md gray-light">
|
||||
<div class="rounded bg-gray-800 p-4 transform translate-x-6 -translate-y-6 ">
|
||||
<div class="w-10 h-10 inline-flex items-center justify-center rounded-full bg-yellow-100 text-yellow-500 mb-5 flex-shrink-0">
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4"></path></svg>
|
||||
</div>
|
||||
<div class="flex-grow">
|
||||
<h2 class=" text-xl title-font font-medium mb-3">Developpement Back-end</h2>
|
||||
<p class="leading-relaxed text-sm text-justify">
|
||||
Grâce à Php et ces frameworks (Larave, Symfoni, Slim), je peux vous réaliser un site dynamique c'est-à-dire qui interagie avec votre base de données 💪. Nous pouvons essayer.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- skill 1 end -->
|
||||
|
||||
|
||||
|
||||
<!-- skill 2 start -->
|
||||
<section class="section_divider">
|
||||
<div>Skill 2</div>
|
||||
</section>
|
||||
|
||||
<div class=" w-full text-blue-800 bg-white h-auto py-20">
|
||||
|
||||
|
||||
|
||||
<div class=" text-center ">
|
||||
|
||||
<h1 class=" md:text-4xl sm:text-2xl text-xl mb-4"> Titre h1 SKILLS </h1>
|
||||
|
||||
<hr class="W-1/4 mx-auto mb-10 shadow-4xl">
|
||||
</div>
|
||||
|
||||
<div class="sm:flex content-center justify-center">
|
||||
|
||||
|
||||
<div class=" sm:w-2/4 w-3/4 mx-auto h-auto my-6 lg:mx-8 md:mx-4">
|
||||
<h3 class="text-center text-xl my-2"> <i class=" fas fa-user-astronaut text-4xl"></i> </h3>
|
||||
<p class=" text-sm text-justify mx-4">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Maxime
|
||||
vitae,
|
||||
nesciunt
|
||||
ipsa
|
||||
deleniti asperiores
|
||||
provident velit similique officiis ab reiciendis cupiditate illo incidunt aspernatur magnam dolorem
|
||||
quae. Facere, ex voluptatum.</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class=" sm:w-2/4 w-3/4 mx-auto h-auto my-6 lg:mx-8 md:mx-4">
|
||||
<h3 class="text-center text-xl my-2"> <i class=" fas fa-user-astronaut text-4xl"></i> </h3>
|
||||
<p class=" text-sm text-justify mx-4">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Maxime
|
||||
vitae,
|
||||
nesciunt
|
||||
ipsa
|
||||
deleniti asperiores
|
||||
provident velit similique officiis ab reiciendis cupiditate illo incidunt aspernatur magnam dolorem
|
||||
quae. Facere, ex voluptatum.</p>
|
||||
</div>
|
||||
|
||||
<div class=" sm:w-2/4 w-3/4 mx-auto h-auto my-6 lg:mx-8 md:mx-4">
|
||||
<h3 class="text-center text-xl my-2"> <i class=" fas fa-user-astronaut text-4xl"></i><br> </h3>
|
||||
<p class=" text-sm text-justify mx-4">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Maxime
|
||||
vitae,
|
||||
nesciunt
|
||||
ipsa
|
||||
deleniti asperiores
|
||||
provident velit similique officiis ab reiciendis cupiditate illo incidunt aspernatur magnam dolorem
|
||||
quae. Facere, ex voluptatum.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- skill 2 end -->
|
||||
|
||||
|
||||
<!-- start of script section -->
|
||||
<script type="text/javascript">
|
||||
let toogler = document.getElementById("dark_mood_toogler");
|
||||
let doc_html_el = document.getElementsByTagName('html')[0];
|
||||
|
||||
doc_html_el.addEventListener('keyup',(e)=>{
|
||||
// key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
|
||||
if(e.ctrlKey && e.keyCode =='220'){
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
|
||||
}
|
||||
})
|
||||
doc_html_el.addEventListener('keyup',(e)=>{
|
||||
// key 191 is the forward slash , need to press ctrl+ / to show or hide the darkmode button
|
||||
if(e.ctrlKey && e.keyCode =='191'){
|
||||
toogler.style.display =='block'? toogler.style.display = 'none':toogler.style.display ='block';
|
||||
|
||||
}
|
||||
})
|
||||
toogler.addEventListener('click',()=>{
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
console.log(doc_html_el.className);
|
||||
})
|
||||
</script>
|
||||
<!-- end of script section -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
145
public/componets/slider/1_slider.html
Normal file
145
public/componets/slider/1_slider.html
Normal file
@@ -0,0 +1,145 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="./../../../dist/tailshape.css">
|
||||
<link rel="stylesheet" href="https://demos.creative-tim.com/notus-js/assets/vendor/@fortawesome/fontawesome-free/css/all.min.css">
|
||||
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
|
||||
<title>Slider </title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||
d
|
||||
</button>
|
||||
|
||||
<!-- slider 1 start -->
|
||||
<section class="section_divider">
|
||||
<div>Slider 1 </div>
|
||||
</section>
|
||||
|
||||
|
||||
<div class="min-w-screen min-h-screen bg-indigo-500 flex items-center justify-center px-5 py-5">
|
||||
<div class="w-full mx-auto rounded-3xl shadow-lg bg-white px-10 pt-16 pb-10 text-gray-600" style="max-width: 350px" x-data="app()">
|
||||
<div class="overflow-hidden relative mb-10">
|
||||
<div class="overflow-hidden cursor-grab relative" @pointerdown="touchstartX=$event.screenX,touchstartY=$event.screenY" @pointerup="touchendX=$event.screenX,touchendY=$event.screenY,$nextTick(()=>handleSwipe())">
|
||||
<template x-for="(item,index) in slides">
|
||||
<div class="w-full overflow-hidden text-center select-none" x-show="item.show" x-transition:enter="transition duration-300 transform ease" :x-transition:enter-start="currentTransition.start" :x-transition:enter-end="currentTransition.end" x-transition:leave="absolute top-0 left-0 transition duration-300 transform ease" :x-transition:leave-start="previousTransition.start" :x-transition:leave-end="previousTransition.end">
|
||||
<div class="w-64 h-64 border rounded-full mx-auto mb-10 overflow-hidden bg-cover bg-center" :style="`background-image:url(${item.img})`"></div>
|
||||
<h2 x-text="item.title" class="font-bold text-xl text-indigo-500 mb-3"></h2>
|
||||
<p x-text="item.body" class="text-sm leading-tight h-16"></p>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-center">
|
||||
<template x-for="(item,index) in slides">
|
||||
<span :id="`slideDot${index}`" class="w-2 h-2 rounded-full mx-1" :class="{'bg-indigo-500':index==currentIndex,'bg-gray-200':index!==currentIndex}"></span>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function app() {
|
||||
return {
|
||||
touchstartX: 0,
|
||||
touchstartY: 0,
|
||||
touchendX: 0,
|
||||
touchendY: 0,
|
||||
previousIndex: 0,
|
||||
currentIndex: 0,
|
||||
previousTransition: {
|
||||
start: null,
|
||||
end: null,
|
||||
},
|
||||
currentTransition: {
|
||||
start: null,
|
||||
end: null,
|
||||
},
|
||||
slides: [
|
||||
{
|
||||
show:true,
|
||||
img: 'https://source.unsplash.com/random/?work',
|
||||
title: 'Lorem ipsum',
|
||||
body: 'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
|
||||
},
|
||||
{
|
||||
img: 'https://source.unsplash.com/random/?tree',
|
||||
title: 'Dolor sit amet',
|
||||
body: 'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.',
|
||||
},
|
||||
{
|
||||
img: 'https://source.unsplash.com/random/?building',
|
||||
title: 'Consectetur',
|
||||
body: 'Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
|
||||
}
|
||||
],
|
||||
handleSwipe: function() {
|
||||
// Stop
|
||||
if( this.touchstartX - this.touchendX > -20 && this.touchstartX - this.touchendX < 20 ) return;
|
||||
// Set previous index
|
||||
this.previousIndex = this.currentIndex;
|
||||
// Swipe
|
||||
if (this.touchendX < this.touchstartX) {
|
||||
// Swipe left
|
||||
this.currentIndex = Math.min(this.slides.length-1,this.currentIndex+1);
|
||||
this.previousTransition.start = 'translate-x-none opacity-1';
|
||||
this.previousTransition.end = '-translate-x-1/4 opacity-0';
|
||||
this.currentTransition.start = 'translate-x-1/4 opacity-0';
|
||||
this.currentTransition.end = 'translate-x-none opacity-1';
|
||||
} else {
|
||||
// Swipe right
|
||||
this.currentIndex = Math.max(0,this.currentIndex-1);
|
||||
this.previousTransition.start = 'translate-x-none opacity-1';
|
||||
this.previousTransition.end = 'translate-x-1/4 opacity-0';
|
||||
this.currentTransition.start = '-translate-x-1/4 opacity-0';
|
||||
this.currentTransition.end = 'translate-x-none opacity-1';
|
||||
}
|
||||
// Check previous index
|
||||
if( this.previousIndex !== this.currentIndex ) {
|
||||
this.showSlide();
|
||||
}
|
||||
},
|
||||
showSlide: function() {
|
||||
for(let i = 0; i < this.slides.length; i++){
|
||||
this.slides[i].show = i == this.currentIndex;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- slider 1 end -->
|
||||
|
||||
|
||||
<!-- start of script section -->
|
||||
<script type="text/javascript">
|
||||
let toogler = document.getElementById("dark_mood_toogler");
|
||||
let doc_html_el = document.getElementsByTagName('html')[0];
|
||||
|
||||
doc_html_el.addEventListener('keyup',(e)=>{
|
||||
// key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
|
||||
if(e.ctrlKey && e.keyCode =='220'){
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
|
||||
}
|
||||
})
|
||||
doc_html_el.addEventListener('keyup',(e)=>{
|
||||
// key 191 is the forward slash , need to press ctrl+ / to show or hide the darkmode button
|
||||
if(e.ctrlKey && e.keyCode =='191'){
|
||||
toogler.style.display =='block'? toogler.style.display = 'none':toogler.style.display ='block';
|
||||
|
||||
}
|
||||
})
|
||||
toogler.addEventListener('click',()=>{
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
console.log(doc_html_el.className);
|
||||
})
|
||||
</script>
|
||||
<!-- end of script section -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
119
public/componets/slider/2_slider.html
Normal file
119
public/componets/slider/2_slider.html
Normal file
@@ -0,0 +1,119 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="./../../../dist/tailshape.css">
|
||||
<link rel="stylesheet" href="https://demos.creative-tim.com/notus-js/assets/vendor/@fortawesome/fontawesome-free/css/all.min.css">
|
||||
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
|
||||
<title>Slider 2</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||
d
|
||||
</button>
|
||||
|
||||
|
||||
<!-- slider 2 start -->
|
||||
<section class="section_divider">
|
||||
<div>Slider 2</div>
|
||||
</section>
|
||||
|
||||
<main class="w-full min-h-screen grid place-content-center bg-gray-900">
|
||||
|
||||
<div x-data="imageSlider" class="bg-gray-100 rounded-md max-w-2xl mx-auto relative p-2 sm:p-4 overflow-hidden">
|
||||
|
||||
<div class="rounded-full bg-gray-600 text-white absolute top-5 right-5 text-sm px-2 text-center z-10">
|
||||
<span x-text="currentIndex"></span>/<span x-text="images.length"></span>
|
||||
</div>
|
||||
|
||||
<button @click="previous()"
|
||||
class="absolute left-5 top-1/2 -translate-y-1/2 bg-gray-100 rounded-full w-11 h-11 flex justify-center items-center shadow-md z-10">
|
||||
<svg class="w-8 h-8 font-bold text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M15 19l-7-7 7-7">
|
||||
</path>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<button @click="forward()"
|
||||
class="absolute right-5 top-1/2 -translate-y-1/2 bg-gray-100 rounded-full w-11 h-11 flex justify-center items-center shadow-md z-10">
|
||||
<svg class="w-8 h-8 font-bold text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M9 5l7 7-7 7"></path>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<div class="relative h-80" style="width: 30rem;">
|
||||
<template x-for="(image, index) in images">
|
||||
<div x-show="currentIndex == index + 1" x-transition:enter="transition transform duration-300"
|
||||
x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100"
|
||||
x-transition:leave="transition transform duration-300" x-transition:leave-start="opacity-100"
|
||||
x-transition:leave-end="opacity-0" class="absolute top-0">
|
||||
<img :src="image" alt="image" class="rounded-sm">
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
document.addEventListener('alpine:init', () => {
|
||||
Alpine.data('imageSlider', () => ({
|
||||
currentIndex: 1,
|
||||
images: [
|
||||
'https://unsplash.it/640/425?image=30',
|
||||
'https://unsplash.it/640/425?image=40',
|
||||
'https://unsplash.it/640/425?image=50'
|
||||
],
|
||||
|
||||
previous() {
|
||||
if (this.currentIndex > 1 ) {
|
||||
this.currentIndex = this.currentIndex - 1;
|
||||
}
|
||||
|
||||
},
|
||||
forward() {
|
||||
if (this.currentIndex < this.images.length) {
|
||||
this.currentIndex = this.currentIndex + 1;
|
||||
}
|
||||
}
|
||||
}))
|
||||
})
|
||||
</script>
|
||||
|
||||
<!-- slider 2 end -->
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- start of script section -->
|
||||
<script type="text/javascript">
|
||||
let toogler = document.getElementById("dark_mood_toogler");
|
||||
let doc_html_el = document.getElementsByTagName('html')[0];
|
||||
|
||||
doc_html_el.addEventListener('keyup',(e)=>{
|
||||
// key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
|
||||
if(e.ctrlKey && e.keyCode =='220'){
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
|
||||
}
|
||||
})
|
||||
doc_html_el.addEventListener('keyup',(e)=>{
|
||||
// key 191 is the forward slash , need to press ctrl+ / to show or hide the darkmode button
|
||||
if(e.ctrlKey && e.keyCode =='191'){
|
||||
toogler.style.display =='block'? toogler.style.display = 'none':toogler.style.display ='block';
|
||||
|
||||
}
|
||||
})
|
||||
toogler.addEventListener('click',()=>{
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
console.log(doc_html_el.className);
|
||||
})
|
||||
</script>
|
||||
<!-- end of script section -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
175
public/componets/slider/3_slider.html
Normal file
175
public/componets/slider/3_slider.html
Normal file
@@ -0,0 +1,175 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="./../../../dist/tailshape.css">
|
||||
<link rel="stylesheet" href="https://demos.creative-tim.com/notus-js/assets/vendor/@fortawesome/fontawesome-free/css/all.min.css">
|
||||
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
|
||||
<title>Slider 3</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||
d
|
||||
</button>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- slider 3 start -->
|
||||
<section class="section_divider">
|
||||
<div>Slider 3 </div>
|
||||
</section>
|
||||
|
||||
<div class="text-xl font-bold m-5 text-center">Use Keyboard Arrow Keys To Go Left And Right</div>
|
||||
|
||||
<div class="gallery border-2 rounded mx-auto m-5 bg-white" style="width:750px;">
|
||||
<div class="top flex p-2 border-b select-none">
|
||||
<div class="heading text-gray-800 w-full pl-3 font-semibold my-auto"></div>
|
||||
<div class="buttons ml-auto flex text-gray-600 mr-1">
|
||||
<svg action="prev" class="w-7 border-2 rounded-l-lg p-1 cursor-pointer border-r-0" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path action="prev" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" /></svg>
|
||||
<svg action="next" class="w-7 border-2 rounded-r-lg p-1 cursor-pointer" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path action="next" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" /></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-area w-full h-96 overflow-hidden">
|
||||
<div class="platform shadow-xl h-full flex">
|
||||
<!-- frame start -->
|
||||
<div class="each-frame border-box flex-none h-full" title="Tiger"> <!-- title shows in top -->
|
||||
<!-- this is full editable area -->
|
||||
<div class="main flex w-full p-8">
|
||||
<div class="sub w-4/6 my-auto">
|
||||
<img class="w-full p-8" src="https://images-na.ssl-images-amazon.com/images/I/81eJpEEQwYL._AC_SL1500_.jpg" alt="">
|
||||
</div>
|
||||
<div class="sub w-full my-auto">
|
||||
<div class="head text-3xl font-bold mb-4">The Tiger</div>
|
||||
<div class="long-text text-lg">(Panthera tigris) is the largest extant cat species and a member of the genus Panthera. It is most recognisable for its dark vertical stripes on orange-brown fur with a lighter underside. It is an apex predator, primarily preying on ungulates such as deer and wild boar.</div>
|
||||
<!-- this buttons are usable everywhere inside gallery element -->
|
||||
<div class="goto border border-gray-400 text-sm font-semibold inline-block mt-2 p-1 px-2 rounded cursor-pointer" action="goto" goto="2">Goto Third Frame</div><!-- add (action="goto" goto="[val]{0 means first frame and so on}") attribute to jump into frames -->
|
||||
<div class="goto border border-gray-400 text-sm font-semibold inline-block mt-2 p-1 px-2 rounded cursor-pointer" action="goto" goto="end">Goto Last Frame</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- frame end -->
|
||||
|
||||
<div class="each-frame border-box flex-none h-full" title="Lion"> <!-- title shows in top -->
|
||||
<!-- this is full editable area -->
|
||||
<div class="main flex w-full p-8">
|
||||
<div class="sub w-4/6 my-auto">
|
||||
<img class="w-full p-8" src="https://image.freepik.com/free-vector/cute-lion-cartoon_160606-353.jpg" alt="">
|
||||
</div>
|
||||
<div class="sub w-full my-auto">
|
||||
<div class="head text-3xl font-bold mb-4">The Lion</div>
|
||||
<div class="long-text text-lg">The lion is a species in the family Felidae and a member of the genus Panthera. It has a muscular, deep-chested body, short, rounded head, round ears, and a hairy tuft at the end of its tail. It is sexually dimorphic; adult male lions have a prominent mane.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- frame end -->
|
||||
|
||||
<div class="each-frame border-box flex-none h-full" title="Rat"> <!-- title shows in top -->
|
||||
<!-- this is full editable area -->
|
||||
<div class="main flex w-full p-8">
|
||||
<div class="sub w-4/6 my-auto">
|
||||
<img class="w-full p-8" src="https://i.pinimg.com/originals/07/1d/d0/071dd09d7b36e49139fe2cf08ff728a8.jpg" alt="">
|
||||
</div>
|
||||
<div class="sub w-full my-auto">
|
||||
<div class="head text-3xl font-bold mb-4">The Rat</div>
|
||||
<div class="long-text text-lg">Rats are various medium-sized, long-tailed rodents. Species of rats are found throughout the order Rodentia, but stereotypical rats are found in the genus Rattus. Other rat genera include Neotoma, Bandicota and Dipodomys. Rats are typically distinguished from</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- frame end -->
|
||||
|
||||
<div class="each-frame border-box flex-none h-full" title="Owl"> <!-- title shows in top -->
|
||||
<!-- this is full editable area -->
|
||||
<div class="main flex w-full p-8">
|
||||
<div class="sub w-4/6 my-auto">
|
||||
<img class="w-full p-8" src="https://image.freepik.com/free-vector/cartoon-owl-tree-branch_194935-43.jpg" alt="">
|
||||
</div>
|
||||
<div class="sub w-full my-auto">
|
||||
<div class="head text-3xl font-bold mb-4">The Owl</div>
|
||||
<div class="long-text text-lg">Owls are birds from the order Strigiformes, which includes over 200 species of mostly solitary and nocturnal birds of prey typified by an upright stance, a large, broad head, binocular vision, binaural hearing, sharp talons, and feathers adapted for silent flight.</div>
|
||||
<div class="goto border border-gray-400 text-sm font-semibold inline-block mt-2 p-1 px-2 rounded cursor-pointer" action="goto" goto="0">Goto First Frame</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- frame end -->
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script>
|
||||
function gallery(){
|
||||
this.index=0;
|
||||
this.load=function(){
|
||||
this.rootEl = document.querySelector(".gallery");
|
||||
this.platform = this.rootEl.querySelector(".platform");
|
||||
this.frames = this.platform.querySelectorAll(".each-frame");
|
||||
this.contentArea = this.rootEl.querySelector(".content-area");
|
||||
this.width = parseInt(this.rootEl.style.width);
|
||||
this.limit = {start:0,end:this.frames.length-1};
|
||||
this.frames.forEach(each=>{each.style.width=this.width+"px";});
|
||||
this.goto(this.index);
|
||||
}
|
||||
this.set_title = function(){this.rootEl.querySelector(".heading").innerText=this.frames[this.index].getAttribute("title");}
|
||||
this.next = function(){this.platform.style.right=this.width * ++this.index + "px";this.set_title();}
|
||||
this.prev = function(){this.platform.style.right=this.width * --this.index + "px";this.set_title();}
|
||||
this.goto = function(index){this.platform.style.right = this.width * index + "px";this.index=index;this.set_title();}
|
||||
this.load();
|
||||
}
|
||||
var G = new gallery();
|
||||
G.rootEl.addEventListener("click",function(t){
|
||||
var val = t.target.getAttribute("action");
|
||||
if(val == "next" && G.index != G.limit.end){G.next();}
|
||||
if(val == "prev" && G.index != G.limit.start){G.prev();}
|
||||
if(val == "goto"){
|
||||
let rv = t.target.getAttribute("goto");
|
||||
rv = rv == "end" ? G.limit.end:rv;
|
||||
G.goto(parseInt(rv));
|
||||
}
|
||||
});
|
||||
document.addEventListener("keyup",function(t){
|
||||
var val = t.keyCode;
|
||||
if(val == 39 && G.index != G.limit.end){G.next();}
|
||||
if(val == 37 && G.index != G.limit.start){G.prev();}
|
||||
});
|
||||
|
||||
// run G.load() if new data loaded with ajax
|
||||
|
||||
</script>
|
||||
|
||||
<!-- slider 3 end -->
|
||||
|
||||
|
||||
<!-- start of script section -->
|
||||
<script type="text/javascript">
|
||||
let toogler = document.getElementById("dark_mood_toogler");
|
||||
let doc_html_el = document.getElementsByTagName('html')[0];
|
||||
|
||||
doc_html_el.addEventListener('keyup',(e)=>{
|
||||
// key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
|
||||
if(e.ctrlKey && e.keyCode =='220'){
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
|
||||
}
|
||||
})
|
||||
doc_html_el.addEventListener('keyup',(e)=>{
|
||||
// key 191 is the forward slash , need to press ctrl+ / to show or hide the darkmode button
|
||||
if(e.ctrlKey && e.keyCode =='191'){
|
||||
toogler.style.display =='block'? toogler.style.display = 'none':toogler.style.display ='block';
|
||||
|
||||
}
|
||||
})
|
||||
toogler.addEventListener('click',()=>{
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
console.log(doc_html_el.className);
|
||||
})
|
||||
</script>
|
||||
<!-- end of script section -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
163
public/componets/slider/4_slider.html
Normal file
163
public/componets/slider/4_slider.html
Normal file
@@ -0,0 +1,163 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="./../../../dist/tailshape.css">
|
||||
<link rel="stylesheet" href="https://demos.creative-tim.com/notus-js/assets/vendor/@fortawesome/fontawesome-free/css/all.min.css">
|
||||
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
|
||||
<!-- used jquery for the slider -->
|
||||
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
|
||||
<title>Slider 4</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||
d
|
||||
</button>
|
||||
|
||||
|
||||
<!-- slider 4 start -->
|
||||
<section class="section_divider">
|
||||
<div>Slider 4</div>
|
||||
</section>
|
||||
<script>
|
||||
var cont=0;
|
||||
function loopSlider(){
|
||||
var xx= setInterval(function(){
|
||||
switch(cont)
|
||||
{
|
||||
case 0:{
|
||||
$("#slider-1").fadeOut(400);
|
||||
$("#slider-2").delay(400).fadeIn(400);
|
||||
$("#sButton1").removeClass("bg-purple-800");
|
||||
$("#sButton2").addClass("bg-purple-800");
|
||||
cont=1;
|
||||
|
||||
break;
|
||||
}
|
||||
case 1:
|
||||
{
|
||||
|
||||
$("#slider-2").fadeOut(400);
|
||||
$("#slider-1").delay(400).fadeIn(400);
|
||||
$("#sButton2").removeClass("bg-purple-800");
|
||||
$("#sButton1").addClass("bg-purple-800");
|
||||
|
||||
cont=0;
|
||||
|
||||
break;
|
||||
}
|
||||
|
||||
|
||||
}},8000);
|
||||
|
||||
}
|
||||
|
||||
function reinitLoop(time){
|
||||
clearInterval(xx);
|
||||
setTimeout(loopSlider(),time);
|
||||
}
|
||||
|
||||
|
||||
|
||||
function sliderButton1(){
|
||||
|
||||
$("#slider-2").fadeOut(400);
|
||||
$("#slider-1").delay(400).fadeIn(400);
|
||||
$("#sButton2").removeClass("bg-purple-800");
|
||||
$("#sButton1").addClass("bg-purple-800");
|
||||
reinitLoop(4000);
|
||||
cont=0
|
||||
|
||||
}
|
||||
|
||||
function sliderButton2(){
|
||||
$("#slider-1").fadeOut(400);
|
||||
$("#slider-2").delay(400).fadeIn(400);
|
||||
$("#sButton1").removeClass("bg-purple-800");
|
||||
$("#sButton2").addClass("bg-purple-800");
|
||||
reinitLoop(4000);
|
||||
cont=1
|
||||
|
||||
}
|
||||
|
||||
$(window).ready(function(){
|
||||
$("#slider-2").hide();
|
||||
$("#sButton1").addClass("bg-purple-800");
|
||||
|
||||
|
||||
loopSlider();
|
||||
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<section>
|
||||
<div class="sliderAx h-auto">
|
||||
<div id="slider-1" class="container mx-auto">
|
||||
<div class="bg-cover bg-center h-auto text-white py-24 px-10 object-fill" style="background-image: url(https://images.unsplash.com/photo-1544427920-c49ccfb85579?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1422&q=80)">
|
||||
<div class="md:w-1/2">
|
||||
<p class="font-bold text-sm uppercase">Services</p>
|
||||
<p class="text-3xl font-bold">Hello world</p>
|
||||
<p class="text-2xl mb-10 leading-none">Carousel with TailwindCSS and jQuery</p>
|
||||
<a href="#" class="bg-purple-800 py-4 px-8 text-white font-bold uppercase text-xs rounded hover:bg-gray-200 hover:text-gray-800">Contact us</a>
|
||||
</div>
|
||||
</div> <!-- container -->
|
||||
<br>
|
||||
</div>
|
||||
|
||||
<div id="slider-2" class="container mx-auto">
|
||||
<div class="bg-cover bg-top h-auto text-white py-24 px-10 object-fill" style="background-image: url(https://images.unsplash.com/photo-1544144433-d50aff500b91?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80)">
|
||||
|
||||
<p class="font-bold text-sm uppercase">Services</p>
|
||||
<p class="text-3xl font-bold">Hello world</p>
|
||||
<p class="text-2xl mb-10 leading-none">Carousel with TailwindCSS and jQuery</p>
|
||||
<a href="#" class="bg-purple-800 py-4 px-8 text-white font-bold uppercase text-xs rounded hover:bg-gray-200 hover:text-gray-800">Contact us</a>
|
||||
|
||||
</div> <!-- container -->
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-between w-12 mx-auto pb-2">
|
||||
<button id="sButton1" onclick="sliderButton1()" class="bg-purple-400 rounded-full w-4 pb-2 " ></button>
|
||||
<button id="sButton2" onclick="sliderButton2() " class="bg-purple-400 rounded-full w-4 p-2"></button>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<!-- slider 4 end -->
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- start of script section -->
|
||||
<script type="text/javascript">
|
||||
let toogler = document.getElementById("dark_mood_toogler");
|
||||
let doc_html_el = document.getElementsByTagName('html')[0];
|
||||
|
||||
doc_html_el.addEventListener('keyup',(e)=>{
|
||||
// key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
|
||||
if(e.ctrlKey && e.keyCode =='220'){
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
|
||||
}
|
||||
})
|
||||
doc_html_el.addEventListener('keyup',(e)=>{
|
||||
// key 191 is the forward slash , need to press ctrl+ / to show or hide the darkmode button
|
||||
if(e.ctrlKey && e.keyCode =='191'){
|
||||
toogler.style.display =='block'? toogler.style.display = 'none':toogler.style.display ='block';
|
||||
|
||||
}
|
||||
})
|
||||
toogler.addEventListener('click',()=>{
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
console.log(doc_html_el.className);
|
||||
})
|
||||
</script>
|
||||
<!-- end of script section -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
139
public/componets/slider/5_slider.html
Normal file
139
public/componets/slider/5_slider.html
Normal file
@@ -0,0 +1,139 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="./../../../dist/tailshape.css">
|
||||
<link rel="stylesheet" href="https://demos.creative-tim.com/notus-js/assets/vendor/@fortawesome/fontawesome-free/css/all.min.css">
|
||||
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
|
||||
|
||||
<!-- tailwind elements library cdn -->
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tw-elements/dist/css/index.min.css" />
|
||||
<script src="https://cdn.jsdelivr.net/npm/tw-elements/dist/js/index.min.js"></script>
|
||||
|
||||
<title>Slider 5</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||
d
|
||||
</button>
|
||||
|
||||
|
||||
<!-- slider 5 start -->
|
||||
<section class="section_divider">
|
||||
<div> Slider 5</div>
|
||||
</section>
|
||||
<div id="carouselExampleCaptions" class="carousel slide carousel-fade relative" data-bs-ride="carousel">
|
||||
<div
|
||||
class="carousel-indicators absolute right-0 bottom-0 left-0 flex justify-center p-0 mb-4"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
data-bs-target="#carouselExampleCaptions"
|
||||
data-bs-slide-to="0"
|
||||
class="active"
|
||||
aria-current="true"
|
||||
aria-label="Slide 1"
|
||||
></button>
|
||||
<button
|
||||
type="button"
|
||||
data-bs-target="#carouselExampleCaptions"
|
||||
data-bs-slide-to="1"
|
||||
aria-label="Slide 2"
|
||||
></button>
|
||||
<button
|
||||
type="button"
|
||||
data-bs-target="#carouselExampleCaptions"
|
||||
data-bs-slide-to="2"
|
||||
aria-label="Slide 3"
|
||||
></button>
|
||||
</div>
|
||||
<div class="carousel-inner relative w-full overflow-hidden">
|
||||
<div class="carousel-item active relative float-left w-full">
|
||||
<video class="w-full" autoplay loop muted>
|
||||
<source src="https://mdbcdn.b-cdn.net/img/video/Tropical.mp4" type="video/mp4" />
|
||||
</video>
|
||||
<div class="carousel-caption hidden md:block absolute text-center">
|
||||
<h5 class="text-xl">First slide label</h5>
|
||||
<p>Some representative placeholder content for the first slide.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="carousel-item relative float-left w-full">
|
||||
<video class="w-full" autoplay loop muted>
|
||||
<source src="https://mdbcdn.b-cdn.net/img/video/forest.mp4" type="video/mp4" />
|
||||
</video>
|
||||
<div class="carousel-caption hidden md:block absolute text-center">
|
||||
<h5 class="text-xl">Second slide label</h5>
|
||||
<p>Some representative placeholder content for the second slide.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="carousel-item relative float-left w-full">
|
||||
<video class="w-full" autoplay loop muted>
|
||||
<source src="https://mdbcdn.b-cdn.net/img/video/Agua-natural.mp4" type="video/mp4" />
|
||||
</video>
|
||||
<div class="carousel-caption hidden md:block absolute text-center">
|
||||
<h5 class="text-xl">Third slide label</h5>
|
||||
<p>Some representative placeholder content for the third slide.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="carousel-control-prev absolute top-0 bottom-0 flex items-center justify-center p-0 text-center border-0 hover:outline-none hover:no-underline focus:outline-none focus:no-underline left-0"
|
||||
type="button"
|
||||
data-bs-target="#carouselExampleCaptions"
|
||||
data-bs-slide="prev"
|
||||
>
|
||||
<span
|
||||
class="carousel-control-prev-icon inline-block bg-no-repeat"
|
||||
aria-hidden="true"
|
||||
></span>
|
||||
<span class="visually-hidden">Previous</span>
|
||||
</button>
|
||||
<button
|
||||
class="carousel-control-next absolute top-0 bottom-0 flex items-center justify-center p-0 text-center border-0 hover:outline-none hover:no-underline focus:outline-none focus:no-underline right-0"
|
||||
type="button"
|
||||
data-bs-target="#carouselExampleCaptions"
|
||||
data-bs-slide="next"
|
||||
>
|
||||
<span
|
||||
class="carousel-control-next-icon inline-block bg-no-repeat"
|
||||
aria-hidden="true"
|
||||
></span>
|
||||
<span class="visually-hidden">Next</span>
|
||||
</button>
|
||||
</div>
|
||||
<!-- slider 5 end -->
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- start of script section -->
|
||||
<script type="text/javascript">
|
||||
let toogler = document.getElementById("dark_mood_toogler");
|
||||
let doc_html_el = document.getElementsByTagName('html')[0];
|
||||
|
||||
doc_html_el.addEventListener('keyup',(e)=>{
|
||||
// key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
|
||||
if(e.ctrlKey && e.keyCode =='220'){
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
|
||||
}
|
||||
})
|
||||
doc_html_el.addEventListener('keyup',(e)=>{
|
||||
// key 191 is the forward slash , need to press ctrl+ / to show or hide the darkmode button
|
||||
if(e.ctrlKey && e.keyCode =='191'){
|
||||
toogler.style.display =='block'? toogler.style.display = 'none':toogler.style.display ='block';
|
||||
|
||||
}
|
||||
})
|
||||
toogler.addEventListener('click',()=>{
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
console.log(doc_html_el.className);
|
||||
})
|
||||
</script>
|
||||
<!-- end of script section -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
155
public/componets/slider/6_slider.html
Normal file
155
public/componets/slider/6_slider.html
Normal file
@@ -0,0 +1,155 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="./../../../dist/tailshape.css">
|
||||
<link rel="stylesheet" href="https://demos.creative-tim.com/notus-js/assets/vendor/@fortawesome/fontawesome-free/css/all.min.css">
|
||||
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
|
||||
|
||||
<!-- tailwind elements cdn -->
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tw-elements/dist/css/index.min.css" />
|
||||
<script src="https://cdn.jsdelivr.net/npm/tw-elements/dist/js/index.min.js"></script>
|
||||
|
||||
<title>Slider 6</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||
d
|
||||
</button>
|
||||
|
||||
|
||||
<!-- slider 6 start -->
|
||||
<section class="section_divider">
|
||||
<div>Slider 6 </div>
|
||||
</section>
|
||||
<div id="carouselExampleCaptionsFull" class="carousel slide carousel-fade relative h-screen" data-bs-ride="carousel">
|
||||
<div class="carousel-indicators absolute right-0 bottom-0 left-0 flex justify-center p-0 mb-4">
|
||||
<button
|
||||
type="button"
|
||||
data-bs-target="#carouselExampleCaptionsFull"
|
||||
data-bs-slide-to="0"
|
||||
class="active"
|
||||
aria-current="true"
|
||||
aria-label="Slide 1"
|
||||
></button>
|
||||
<button
|
||||
type="button"
|
||||
data-bs-target="#carouselExampleCaptionsFull"
|
||||
data-bs-slide-to="1"
|
||||
aria-label="Slide 2"
|
||||
></button>
|
||||
<button
|
||||
type="button"
|
||||
data-bs-target="#carouselExampleCaptionsFull"
|
||||
data-bs-slide-to="2"
|
||||
aria-label="Slide 3"
|
||||
></button>
|
||||
</div>
|
||||
<div class="carousel-inner relative w-full overflow-hidden h-screen">
|
||||
<div class="carousel-item active relative float-left w-full h-screen bg-no-repeat bg-cover bg-center">
|
||||
<video class="min-w-full min-h-full max-w-fit xl:min-w-0 xl:min-h-0" playsinline autoplay muted loop>
|
||||
<source class="w-full" src="https://mdbootstrap.com/img/video/Lines.mp4" type="video/mp4" />
|
||||
</video>
|
||||
<div class="absolute top-0 right-0 bottom-0 left-0 w-full h-full overflow-hidden bg-fixed" style="background-color: rgba(0, 0, 0, 0.6);">
|
||||
<div class="flex justify-center items-center h-full">
|
||||
<div class="text-white text-center px-14 px-md-0">
|
||||
<h2 class="text-3xl font-semibold mb-4">Learn Tailwind Elements</h2>
|
||||
<h5 class="text-lg font-semibold mb-6">Best & free guide of responsive web design</h5>
|
||||
<div class="md:space-x-2">
|
||||
<a type="button" class="inline-block px-6 py-2 mb-2 md:mb-0 border-2 border-white text-white font-medium text-xs leading-tight uppercase rounded hover:bg-black hover:bg-opacity-5 focus:outline-none focus:ring-0 transition duration-150 ease-in-out" href="#!" role="button" data-mdb-ripple="true" data-mdb-ripple-color="light">Start tutorial</a>
|
||||
<a type="button" class="inline-block px-6 py-2 border-2 border-white text-white font-medium text-xs leading-tight uppercase rounded hover:bg-black hover:bg-opacity-5 focus:outline-none focus:ring-0 transition duration-150 ease-in-out" href="#!" role="button" data-mdb-ripple="true" data-mdb-ripple-color="light">Read more</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="carousel-item relative float-left w-full h-screen bg-no-repeat bg-cover bg-center">
|
||||
<video class="min-w-full min-h-full max-w-fit xl:min-w-0 xl:min-h-0" playsinline autoplay muted loop>
|
||||
<source class="w-full" src="https://mdbootstrap.com/img/video/forest.mp4" type="video/mp4" />
|
||||
</video>
|
||||
<div class="absolute top-0 right-0 bottom-0 left-0 w-full h-full overflow-hidden bg-fixed" style="background-color: rgba(0, 0, 0, 0.3)">
|
||||
<div class="flex justify-center items-center h-full">
|
||||
<div class="text-white text-center px-14 px-md-0">
|
||||
<h2 class="text-3xl font-semibold mb-4">You can place here any content</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="carousel-item relative float-left w-full h-screen bg-no-repeat bg-cover bg-center">
|
||||
<video class="min-w-full min-h-full max-w-fit xl:min-w-0 xl:min-h-0" playsinline autoplay muted loop>
|
||||
<source class="w-full" src="https://mdbootstrap.com/img/video/Tropical.mp4" type="video/mp4" />
|
||||
</video>
|
||||
<div class="absolute top-0 right-0 bottom-0 left-0 w-full h-full overflow-hidden bg-fixed" style="background: linear-gradient(45deg, rgba(29, 236, 197, 0.7), rgba(91, 14, 214, 0.7) 100%);">
|
||||
<div class="flex justify-center items-center h-full">
|
||||
<div class="text-white text-center px-14 px-md-0">
|
||||
<h2 class="text-3xl font-semibold mb-4">And cover it with any mask</h2>
|
||||
<a type="button" class="inline-block px-6 py-2 border-2 border-white text-white font-medium text-xs leading-tight uppercase rounded hover:bg-black hover:bg-opacity-5 focus:outline-none focus:ring-0 transition duration-150 ease-in-out" href="#!" role="button" data-mdb-ripple="true" data-mdb-ripple-color="light">Learn more</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="carousel-control-prev absolute top-0 bottom-0 flex items-center justify-center p-0 text-center border-0 hover:outline-none hover:no-underline focus:outline-none focus:no-underline left-0"
|
||||
type="button"
|
||||
data-bs-target="#carouselExampleCaptionsFull"
|
||||
data-bs-slide="prev"
|
||||
>
|
||||
<span
|
||||
class="carousel-control-prev-icon inline-block bg-no-repeat"
|
||||
aria-hidden="true"
|
||||
></span>
|
||||
<span class="visually-hidden">Previous</span>
|
||||
</button>
|
||||
<button
|
||||
class="carousel-control-next absolute top-0 bottom-0 flex items-center justify-center p-0 text-center border-0 hover:outline-none hover:no-underline focus:outline-none focus:no-underline right-0"
|
||||
type="button"
|
||||
data-bs-target="#carouselExampleCaptionsFull"
|
||||
data-bs-slide="next"
|
||||
>
|
||||
<span
|
||||
class="carousel-control-next-icon inline-block bg-no-repeat"
|
||||
aria-hidden="true"
|
||||
></span>
|
||||
<span class="visually-hidden">Next</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- slider 6 end -->
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- start of script section -->
|
||||
<script type="text/javascript">
|
||||
let toogler = document.getElementById("dark_mood_toogler");
|
||||
let doc_html_el = document.getElementsByTagName('html')[0];
|
||||
|
||||
doc_html_el.addEventListener('keyup',(e)=>{
|
||||
// key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
|
||||
if(e.ctrlKey && e.keyCode =='220'){
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
|
||||
}
|
||||
})
|
||||
doc_html_el.addEventListener('keyup',(e)=>{
|
||||
// key 191 is the forward slash , need to press ctrl+ / to show or hide the darkmode button
|
||||
if(e.ctrlKey && e.keyCode =='191'){
|
||||
toogler.style.display =='block'? toogler.style.display = 'none':toogler.style.display ='block';
|
||||
|
||||
}
|
||||
})
|
||||
toogler.addEventListener('click',()=>{
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
console.log(doc_html_el.className);
|
||||
})
|
||||
</script>
|
||||
<!-- end of script section -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
650
public/componets/slider/slider.html
Normal file
650
public/componets/slider/slider.html
Normal file
@@ -0,0 +1,650 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="./../../../dist/tailshape.css">
|
||||
<link rel="stylesheet" href="https://demos.creative-tim.com/notus-js/assets/vendor/@fortawesome/fontawesome-free/css/all.min.css">
|
||||
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
|
||||
<title>Slider </title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
|
||||
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||
d
|
||||
</button>
|
||||
|
||||
<!-- slider 1 start -->
|
||||
<section class="section_divider">
|
||||
<div>Slider 1 </div>
|
||||
</section>
|
||||
|
||||
|
||||
<div class="min-w-screen min-h-screen bg-indigo-500 flex items-center justify-center px-5 py-5">
|
||||
<div class="w-full mx-auto rounded-3xl shadow-lg bg-white px-10 pt-16 pb-10 text-gray-600" style="max-width: 350px" x-data="app()">
|
||||
<div class="overflow-hidden relative mb-10">
|
||||
<div class="overflow-hidden cursor-grab relative" @pointerdown="touchstartX=$event.screenX,touchstartY=$event.screenY" @pointerup="touchendX=$event.screenX,touchendY=$event.screenY,$nextTick(()=>handleSwipe())">
|
||||
<template x-for="(item,index) in slides">
|
||||
<div class="w-full overflow-hidden text-center select-none" x-show="item.show" x-transition:enter="transition duration-300 transform ease" :x-transition:enter-start="currentTransition.start" :x-transition:enter-end="currentTransition.end" x-transition:leave="absolute top-0 left-0 transition duration-300 transform ease" :x-transition:leave-start="previousTransition.start" :x-transition:leave-end="previousTransition.end">
|
||||
<div class="w-64 h-64 border rounded-full mx-auto mb-10 overflow-hidden bg-cover bg-center" :style="`background-image:url(${item.img})`"></div>
|
||||
<h2 x-text="item.title" class="font-bold text-xl text-indigo-500 mb-3"></h2>
|
||||
<p x-text="item.body" class="text-sm leading-tight h-16"></p>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-center">
|
||||
<template x-for="(item,index) in slides">
|
||||
<span :id="`slideDot${index}`" class="w-2 h-2 rounded-full mx-1" :class="{'bg-indigo-500':index==currentIndex,'bg-gray-200':index!==currentIndex}"></span>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function app() {
|
||||
return {
|
||||
touchstartX: 0,
|
||||
touchstartY: 0,
|
||||
touchendX: 0,
|
||||
touchendY: 0,
|
||||
previousIndex: 0,
|
||||
currentIndex: 0,
|
||||
previousTransition: {
|
||||
start: null,
|
||||
end: null,
|
||||
},
|
||||
currentTransition: {
|
||||
start: null,
|
||||
end: null,
|
||||
},
|
||||
slides: [
|
||||
{
|
||||
show:true,
|
||||
img: 'https://source.unsplash.com/random/?work',
|
||||
title: 'Lorem ipsum',
|
||||
body: 'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
|
||||
},
|
||||
{
|
||||
img: 'https://source.unsplash.com/random/?tree',
|
||||
title: 'Dolor sit amet',
|
||||
body: 'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.',
|
||||
},
|
||||
{
|
||||
img: 'https://source.unsplash.com/random/?building',
|
||||
title: 'Consectetur',
|
||||
body: 'Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
|
||||
}
|
||||
],
|
||||
handleSwipe: function() {
|
||||
// Stop
|
||||
if( this.touchstartX - this.touchendX > -20 && this.touchstartX - this.touchendX < 20 ) return;
|
||||
// Set previous index
|
||||
this.previousIndex = this.currentIndex;
|
||||
// Swipe
|
||||
if (this.touchendX < this.touchstartX) {
|
||||
// Swipe left
|
||||
this.currentIndex = Math.min(this.slides.length-1,this.currentIndex+1);
|
||||
this.previousTransition.start = 'translate-x-none opacity-1';
|
||||
this.previousTransition.end = '-translate-x-1/4 opacity-0';
|
||||
this.currentTransition.start = 'translate-x-1/4 opacity-0';
|
||||
this.currentTransition.end = 'translate-x-none opacity-1';
|
||||
} else {
|
||||
// Swipe right
|
||||
this.currentIndex = Math.max(0,this.currentIndex-1);
|
||||
this.previousTransition.start = 'translate-x-none opacity-1';
|
||||
this.previousTransition.end = 'translate-x-1/4 opacity-0';
|
||||
this.currentTransition.start = '-translate-x-1/4 opacity-0';
|
||||
this.currentTransition.end = 'translate-x-none opacity-1';
|
||||
}
|
||||
// Check previous index
|
||||
if( this.previousIndex !== this.currentIndex ) {
|
||||
this.showSlide();
|
||||
}
|
||||
},
|
||||
showSlide: function() {
|
||||
for(let i = 0; i < this.slides.length; i++){
|
||||
this.slides[i].show = i == this.currentIndex;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- slider 1 end -->
|
||||
|
||||
|
||||
|
||||
<!-- slider 2 start -->
|
||||
<section class="section_divider">
|
||||
<div>Slider 2</div>
|
||||
</section>
|
||||
|
||||
<main class="w-full min-h-screen grid place-content-center bg-gray-900">
|
||||
|
||||
<div x-data="imageSlider" class="bg-gray-100 rounded-md max-w-2xl mx-auto relative p-2 sm:p-4 overflow-hidden">
|
||||
|
||||
<div class="rounded-full bg-gray-600 text-white absolute top-5 right-5 text-sm px-2 text-center z-10">
|
||||
<span x-text="currentIndex"></span>/<span x-text="images.length"></span>
|
||||
</div>
|
||||
|
||||
<button @click="previous()"
|
||||
class="absolute left-5 top-1/2 -translate-y-1/2 bg-gray-100 rounded-full w-11 h-11 flex justify-center items-center shadow-md z-10">
|
||||
<svg class="w-8 h-8 font-bold text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M15 19l-7-7 7-7">
|
||||
</path>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<button @click="forward()"
|
||||
class="absolute right-5 top-1/2 -translate-y-1/2 bg-gray-100 rounded-full w-11 h-11 flex justify-center items-center shadow-md z-10">
|
||||
<svg class="w-8 h-8 font-bold text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M9 5l7 7-7 7"></path>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<div class="relative h-80" style="width: 30rem;">
|
||||
<template x-for="(image, index) in images">
|
||||
<div x-show="currentIndex == index + 1" x-transition:enter="transition transform duration-300"
|
||||
x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100"
|
||||
x-transition:leave="transition transform duration-300" x-transition:leave-start="opacity-100"
|
||||
x-transition:leave-end="opacity-0" class="absolute top-0">
|
||||
<img :src="image" alt="image" class="rounded-sm">
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
document.addEventListener('alpine:init', () => {
|
||||
Alpine.data('imageSlider', () => ({
|
||||
currentIndex: 1,
|
||||
images: [
|
||||
'https://unsplash.it/640/425?image=30',
|
||||
'https://unsplash.it/640/425?image=40',
|
||||
'https://unsplash.it/640/425?image=50'
|
||||
],
|
||||
previous() {
|
||||
if (this.currentIndex > 1) {
|
||||
this.currentIndex = this.currentIndex - 1;
|
||||
}
|
||||
},
|
||||
forward() {
|
||||
if (this.currentIndex < this.images.length) {
|
||||
this.currentIndex = this.currentIndex + 1;
|
||||
}
|
||||
}
|
||||
}))
|
||||
})
|
||||
</script>
|
||||
|
||||
<!-- slider 2 end -->
|
||||
|
||||
|
||||
<!-- slider 3 start -->
|
||||
<section class="section_divider">
|
||||
<div>Slider 3 </div>
|
||||
</section>
|
||||
|
||||
<div class="text-xl font-bold m-5 text-center">Use Keyboard Arrow Keys To Go Left And Right</div>
|
||||
|
||||
<div class="gallery border-2 rounded mx-auto m-5 bg-white" style="width:750px;">
|
||||
<div class="top flex p-2 border-b select-none">
|
||||
<div class="heading text-gray-800 w-full pl-3 font-semibold my-auto"></div>
|
||||
<div class="buttons ml-auto flex text-gray-600 mr-1">
|
||||
<svg action="prev" class="w-7 border-2 rounded-l-lg p-1 cursor-pointer border-r-0" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path action="prev" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" /></svg>
|
||||
<svg action="next" class="w-7 border-2 rounded-r-lg p-1 cursor-pointer" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path action="next" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" /></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-area w-full h-96 overflow-hidden">
|
||||
<div class="platform shadow-xl h-full flex">
|
||||
<!-- frame start -->
|
||||
<div class="each-frame border-box flex-none h-full" title="Tiger"> <!-- title shows in top -->
|
||||
<!-- this is full editable area -->
|
||||
<div class="main flex w-full p-8">
|
||||
<div class="sub w-4/6 my-auto">
|
||||
<img class="w-full p-8" src="https://images-na.ssl-images-amazon.com/images/I/81eJpEEQwYL._AC_SL1500_.jpg" alt="">
|
||||
</div>
|
||||
<div class="sub w-full my-auto">
|
||||
<div class="head text-3xl font-bold mb-4">The Tiger</div>
|
||||
<div class="long-text text-lg">(Panthera tigris) is the largest extant cat species and a member of the genus Panthera. It is most recognisable for its dark vertical stripes on orange-brown fur with a lighter underside. It is an apex predator, primarily preying on ungulates such as deer and wild boar.</div>
|
||||
<!-- this buttons are usable everywhere inside gallery element -->
|
||||
<div class="goto border border-gray-400 text-sm font-semibold inline-block mt-2 p-1 px-2 rounded cursor-pointer" action="goto" goto="2">Goto Third Frame</div><!-- add (action="goto" goto="[val]{0 means first frame and so on}") attribute to jump into frames -->
|
||||
<div class="goto border border-gray-400 text-sm font-semibold inline-block mt-2 p-1 px-2 rounded cursor-pointer" action="goto" goto="end">Goto Last Frame</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- frame end -->
|
||||
|
||||
<div class="each-frame border-box flex-none h-full" title="Lion"> <!-- title shows in top -->
|
||||
<!-- this is full editable area -->
|
||||
<div class="main flex w-full p-8">
|
||||
<div class="sub w-4/6 my-auto">
|
||||
<img class="w-full p-8" src="https://image.freepik.com/free-vector/cute-lion-cartoon_160606-353.jpg" alt="">
|
||||
</div>
|
||||
<div class="sub w-full my-auto">
|
||||
<div class="head text-3xl font-bold mb-4">The Lion</div>
|
||||
<div class="long-text text-lg">The lion is a species in the family Felidae and a member of the genus Panthera. It has a muscular, deep-chested body, short, rounded head, round ears, and a hairy tuft at the end of its tail. It is sexually dimorphic; adult male lions have a prominent mane.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- frame end -->
|
||||
|
||||
<div class="each-frame border-box flex-none h-full" title="Rat"> <!-- title shows in top -->
|
||||
<!-- this is full editable area -->
|
||||
<div class="main flex w-full p-8">
|
||||
<div class="sub w-4/6 my-auto">
|
||||
<img class="w-full p-8" src="https://i.pinimg.com/originals/07/1d/d0/071dd09d7b36e49139fe2cf08ff728a8.jpg" alt="">
|
||||
</div>
|
||||
<div class="sub w-full my-auto">
|
||||
<div class="head text-3xl font-bold mb-4">The Rat</div>
|
||||
<div class="long-text text-lg">Rats are various medium-sized, long-tailed rodents. Species of rats are found throughout the order Rodentia, but stereotypical rats are found in the genus Rattus. Other rat genera include Neotoma, Bandicota and Dipodomys. Rats are typically distinguished from</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- frame end -->
|
||||
|
||||
<div class="each-frame border-box flex-none h-full" title="Owl"> <!-- title shows in top -->
|
||||
<!-- this is full editable area -->
|
||||
<div class="main flex w-full p-8">
|
||||
<div class="sub w-4/6 my-auto">
|
||||
<img class="w-full p-8" src="https://image.freepik.com/free-vector/cartoon-owl-tree-branch_194935-43.jpg" alt="">
|
||||
</div>
|
||||
<div class="sub w-full my-auto">
|
||||
<div class="head text-3xl font-bold mb-4">The Owl</div>
|
||||
<div class="long-text text-lg">Owls are birds from the order Strigiformes, which includes over 200 species of mostly solitary and nocturnal birds of prey typified by an upright stance, a large, broad head, binocular vision, binaural hearing, sharp talons, and feathers adapted for silent flight.</div>
|
||||
<div class="goto border border-gray-400 text-sm font-semibold inline-block mt-2 p-1 px-2 rounded cursor-pointer" action="goto" goto="0">Goto First Frame</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- frame end -->
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script>
|
||||
function gallery(){
|
||||
this.index=0;
|
||||
this.load=function(){
|
||||
this.rootEl = document.querySelector(".gallery");
|
||||
this.platform = this.rootEl.querySelector(".platform");
|
||||
this.frames = this.platform.querySelectorAll(".each-frame");
|
||||
this.contentArea = this.rootEl.querySelector(".content-area");
|
||||
this.width = parseInt(this.rootEl.style.width);
|
||||
this.limit = {start:0,end:this.frames.length-1};
|
||||
this.frames.forEach(each=>{each.style.width=this.width+"px";});
|
||||
this.goto(this.index);
|
||||
}
|
||||
this.set_title = function(){this.rootEl.querySelector(".heading").innerText=this.frames[this.index].getAttribute("title");}
|
||||
this.next = function(){this.platform.style.right=this.width * ++this.index + "px";this.set_title();}
|
||||
this.prev = function(){this.platform.style.right=this.width * --this.index + "px";this.set_title();}
|
||||
this.goto = function(index){this.platform.style.right = this.width * index + "px";this.index=index;this.set_title();}
|
||||
this.load();
|
||||
}
|
||||
var G = new gallery();
|
||||
G.rootEl.addEventListener("click",function(t){
|
||||
var val = t.target.getAttribute("action");
|
||||
if(val == "next" && G.index != G.limit.end){G.next();}
|
||||
if(val == "prev" && G.index != G.limit.start){G.prev();}
|
||||
if(val == "goto"){
|
||||
let rv = t.target.getAttribute("goto");
|
||||
rv = rv == "end" ? G.limit.end:rv;
|
||||
G.goto(parseInt(rv));
|
||||
}
|
||||
});
|
||||
document.addEventListener("keyup",function(t){
|
||||
var val = t.keyCode;
|
||||
if(val == 39 && G.index != G.limit.end){G.next();}
|
||||
if(val == 37 && G.index != G.limit.start){G.prev();}
|
||||
});
|
||||
|
||||
// run G.load() if new data loaded with ajax
|
||||
|
||||
</script>
|
||||
|
||||
<!-- slider 3 end -->
|
||||
|
||||
|
||||
|
||||
<!-- slider 4 start -->
|
||||
<section class="section_divider">
|
||||
<div>Slider 4</div>
|
||||
</section>
|
||||
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
|
||||
<script>
|
||||
var cont=0;
|
||||
function loopSlider(){
|
||||
var xx= setInterval(function(){
|
||||
switch(cont)
|
||||
{
|
||||
case 0:{
|
||||
$("#slider-1").fadeOut(400);
|
||||
$("#slider-2").delay(400).fadeIn(400);
|
||||
$("#sButton1").removeClass("bg-purple-800");
|
||||
$("#sButton2").addClass("bg-purple-800");
|
||||
cont=1;
|
||||
|
||||
break;
|
||||
}
|
||||
case 1:
|
||||
{
|
||||
|
||||
$("#slider-2").fadeOut(400);
|
||||
$("#slider-1").delay(400).fadeIn(400);
|
||||
$("#sButton2").removeClass("bg-purple-800");
|
||||
$("#sButton1").addClass("bg-purple-800");
|
||||
|
||||
cont=0;
|
||||
|
||||
break;
|
||||
}
|
||||
|
||||
|
||||
}},8000);
|
||||
|
||||
}
|
||||
|
||||
function reinitLoop(time){
|
||||
clearInterval(xx);
|
||||
setTimeout(loopSlider(),time);
|
||||
}
|
||||
|
||||
|
||||
|
||||
function sliderButton1(){
|
||||
|
||||
$("#slider-2").fadeOut(400);
|
||||
$("#slider-1").delay(400).fadeIn(400);
|
||||
$("#sButton2").removeClass("bg-purple-800");
|
||||
$("#sButton1").addClass("bg-purple-800");
|
||||
reinitLoop(4000);
|
||||
cont=0
|
||||
|
||||
}
|
||||
|
||||
function sliderButton2(){
|
||||
$("#slider-1").fadeOut(400);
|
||||
$("#slider-2").delay(400).fadeIn(400);
|
||||
$("#sButton1").removeClass("bg-purple-800");
|
||||
$("#sButton2").addClass("bg-purple-800");
|
||||
reinitLoop(4000);
|
||||
cont=1
|
||||
|
||||
}
|
||||
|
||||
$(window).ready(function(){
|
||||
$("#slider-2").hide();
|
||||
$("#sButton1").addClass("bg-purple-800");
|
||||
|
||||
|
||||
loopSlider();
|
||||
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<section>
|
||||
<div class="sliderAx h-auto">
|
||||
<div id="slider-1" class="container mx-auto">
|
||||
<div class="bg-cover bg-center h-auto text-white py-24 px-10 object-fill" style="background-image: url(https://images.unsplash.com/photo-1544427920-c49ccfb85579?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1422&q=80)">
|
||||
<div class="md:w-1/2">
|
||||
<p class="font-bold text-sm uppercase">Services</p>
|
||||
<p class="text-3xl font-bold">Hello world</p>
|
||||
<p class="text-2xl mb-10 leading-none">Carousel with TailwindCSS and jQuery</p>
|
||||
<a href="#" class="bg-purple-800 py-4 px-8 text-white font-bold uppercase text-xs rounded hover:bg-gray-200 hover:text-gray-800">Contact us</a>
|
||||
</div>
|
||||
</div> <!-- container -->
|
||||
<br>
|
||||
</div>
|
||||
|
||||
<div id="slider-2" class="container mx-auto">
|
||||
<div class="bg-cover bg-top h-auto text-white py-24 px-10 object-fill" style="background-image: url(https://images.unsplash.com/photo-1544144433-d50aff500b91?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80)">
|
||||
|
||||
<p class="font-bold text-sm uppercase">Services</p>
|
||||
<p class="text-3xl font-bold">Hello world</p>
|
||||
<p class="text-2xl mb-10 leading-none">Carousel with TailwindCSS and jQuery</p>
|
||||
<a href="#" class="bg-purple-800 py-4 px-8 text-white font-bold uppercase text-xs rounded hover:bg-gray-200 hover:text-gray-800">Contact us</a>
|
||||
|
||||
</div> <!-- container -->
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-between w-12 mx-auto pb-2">
|
||||
<button id="sButton1" onclick="sliderButton1()" class="bg-purple-400 rounded-full w-4 pb-2 " ></button>
|
||||
<button id="sButton2" onclick="sliderButton2() " class="bg-purple-400 rounded-full w-4 p-2"></button>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<!-- slider 4 end -->
|
||||
|
||||
|
||||
<!-- slider 5 start -->
|
||||
<section class="section_divider">
|
||||
<div> Slider 5</div>
|
||||
</section>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tw-elements/dist/css/index.min.css" />
|
||||
<script src="https://cdn.jsdelivr.net/npm/tw-elements/dist/js/index.min.js"></script>
|
||||
<div id="carouselExampleCaptions" class="carousel slide carousel-fade relative" data-bs-ride="carousel">
|
||||
<div
|
||||
class="carousel-indicators absolute right-0 bottom-0 left-0 flex justify-center p-0 mb-4"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
data-bs-target="#carouselExampleCaptions"
|
||||
data-bs-slide-to="0"
|
||||
class="active"
|
||||
aria-current="true"
|
||||
aria-label="Slide 1"
|
||||
></button>
|
||||
<button
|
||||
type="button"
|
||||
data-bs-target="#carouselExampleCaptions"
|
||||
data-bs-slide-to="1"
|
||||
aria-label="Slide 2"
|
||||
></button>
|
||||
<button
|
||||
type="button"
|
||||
data-bs-target="#carouselExampleCaptions"
|
||||
data-bs-slide-to="2"
|
||||
aria-label="Slide 3"
|
||||
></button>
|
||||
</div>
|
||||
<div class="carousel-inner relative w-full overflow-hidden">
|
||||
<div class="carousel-item active relative float-left w-full">
|
||||
<video class="w-full" autoplay loop muted>
|
||||
<source src="https://mdbcdn.b-cdn.net/img/video/Tropical.mp4" type="video/mp4" />
|
||||
</video>
|
||||
<div class="carousel-caption hidden md:block absolute text-center">
|
||||
<h5 class="text-xl">First slide label</h5>
|
||||
<p>Some representative placeholder content for the first slide.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="carousel-item relative float-left w-full">
|
||||
<video class="w-full" autoplay loop muted>
|
||||
<source src="https://mdbcdn.b-cdn.net/img/video/forest.mp4" type="video/mp4" />
|
||||
</video>
|
||||
<div class="carousel-caption hidden md:block absolute text-center">
|
||||
<h5 class="text-xl">Second slide label</h5>
|
||||
<p>Some representative placeholder content for the second slide.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="carousel-item relative float-left w-full">
|
||||
<video class="w-full" autoplay loop muted>
|
||||
<source src="https://mdbcdn.b-cdn.net/img/video/Agua-natural.mp4" type="video/mp4" />
|
||||
</video>
|
||||
<div class="carousel-caption hidden md:block absolute text-center">
|
||||
<h5 class="text-xl">Third slide label</h5>
|
||||
<p>Some representative placeholder content for the third slide.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="carousel-control-prev absolute top-0 bottom-0 flex items-center justify-center p-0 text-center border-0 hover:outline-none hover:no-underline focus:outline-none focus:no-underline left-0"
|
||||
type="button"
|
||||
data-bs-target="#carouselExampleCaptions"
|
||||
data-bs-slide="prev"
|
||||
>
|
||||
<span
|
||||
class="carousel-control-prev-icon inline-block bg-no-repeat"
|
||||
aria-hidden="true"
|
||||
></span>
|
||||
<span class="visually-hidden">Previous</span>
|
||||
</button>
|
||||
<button
|
||||
class="carousel-control-next absolute top-0 bottom-0 flex items-center justify-center p-0 text-center border-0 hover:outline-none hover:no-underline focus:outline-none focus:no-underline right-0"
|
||||
type="button"
|
||||
data-bs-target="#carouselExampleCaptions"
|
||||
data-bs-slide="next"
|
||||
>
|
||||
<span
|
||||
class="carousel-control-next-icon inline-block bg-no-repeat"
|
||||
aria-hidden="true"
|
||||
></span>
|
||||
<span class="visually-hidden">Next</span>
|
||||
</button>
|
||||
</div>
|
||||
<!-- slider 5 end -->
|
||||
|
||||
|
||||
<!-- slider 6 start -->
|
||||
<section class="section_divider">
|
||||
<div>Slider 6 </div>
|
||||
</section>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tw-elements/dist/css/index.min.css" />
|
||||
<script src="https://cdn.jsdelivr.net/npm/tw-elements/dist/js/index.min.js"></script>
|
||||
<div id="carouselExampleCaptionsFull" class="carousel slide carousel-fade relative h-screen" data-bs-ride="carousel">
|
||||
<div class="carousel-indicators absolute right-0 bottom-0 left-0 flex justify-center p-0 mb-4">
|
||||
<button
|
||||
type="button"
|
||||
data-bs-target="#carouselExampleCaptionsFull"
|
||||
data-bs-slide-to="0"
|
||||
class="active"
|
||||
aria-current="true"
|
||||
aria-label="Slide 1"
|
||||
></button>
|
||||
<button
|
||||
type="button"
|
||||
data-bs-target="#carouselExampleCaptionsFull"
|
||||
data-bs-slide-to="1"
|
||||
aria-label="Slide 2"
|
||||
></button>
|
||||
<button
|
||||
type="button"
|
||||
data-bs-target="#carouselExampleCaptionsFull"
|
||||
data-bs-slide-to="2"
|
||||
aria-label="Slide 3"
|
||||
></button>
|
||||
</div>
|
||||
<div class="carousel-inner relative w-full overflow-hidden h-screen">
|
||||
<div class="carousel-item active relative float-left w-full h-screen bg-no-repeat bg-cover bg-center">
|
||||
<video class="min-w-full min-h-full max-w-fit xl:min-w-0 xl:min-h-0" playsinline autoplay muted loop>
|
||||
<source class="" src="https://mdbootstrap.com/img/video/Lines.mp4" type="video/mp4" />
|
||||
</video>
|
||||
<div class="absolute top-0 right-0 bottom-0 left-0 w-full h-full overflow-hidden bg-fixed" style="background-color: rgba(0, 0, 0, 0.6);">
|
||||
<div class="flex justify-center items-center h-full">
|
||||
<div class="text-white text-center px-14 px-md-0">
|
||||
<h2 class="text-3xl font-semibold mb-4">Learn Tailwind Elements</h2>
|
||||
<h5 class="text-lg font-semibold mb-6">Best & free guide of responsive web design</h5>
|
||||
<div class="md:space-x-2">
|
||||
<a type="button" class="inline-block px-6 py-2 mb-2 md:mb-0 border-2 border-white text-white font-medium text-xs leading-tight uppercase rounded hover:bg-black hover:bg-opacity-5 focus:outline-none focus:ring-0 transition duration-150 ease-in-out" href="#!" role="button" data-mdb-ripple="true" data-mdb-ripple-color="light">Start tutorial</a>
|
||||
<a type="button" class="inline-block px-6 py-2 border-2 border-white text-white font-medium text-xs leading-tight uppercase rounded hover:bg-black hover:bg-opacity-5 focus:outline-none focus:ring-0 transition duration-150 ease-in-out" href="#!" role="button" data-mdb-ripple="true" data-mdb-ripple-color="light">Read more</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="carousel-item relative float-left w-full h-screen bg-no-repeat bg-cover bg-center">
|
||||
<video class="min-w-full min-h-full max-w-fit xl:min-w-0 xl:min-h-0" playsinline autoplay muted loop>
|
||||
<source class="" src="https://mdbootstrap.com/img/video/forest.mp4" type="video/mp4" />
|
||||
</video>
|
||||
<div class="absolute top-0 right-0 bottom-0 left-0 w-full h-full overflow-hidden bg-fixed" style="background-color: rgba(0, 0, 0, 0.3)">
|
||||
<div class="flex justify-center items-center h-full">
|
||||
<div class="text-white text-center px-14 px-md-0">
|
||||
<h2 class="text-3xl font-semibold mb-4">You can place here any content</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="carousel-item relative float-left w-full h-screen bg-no-repeat bg-cover bg-center">
|
||||
<video class="min-w-full min-h-full max-w-fit xl:min-w-0 xl:min-h-0" playsinline autoplay muted loop>
|
||||
<source class="" src="https://mdbootstrap.com/img/video/Tropical.mp4" type="video/mp4" />
|
||||
</video>
|
||||
<div class="absolute top-0 right-0 bottom-0 left-0 w-full h-full overflow-hidden bg-fixed" style="background: linear-gradient(45deg, rgba(29, 236, 197, 0.7), rgba(91, 14, 214, 0.7) 100%);">
|
||||
<div class="flex justify-center items-center h-full">
|
||||
<div class="text-white text-center px-14 px-md-0">
|
||||
<h2 class="text-3xl font-semibold mb-4">And cover it with any mask</h2>
|
||||
<a type="button" class="inline-block px-6 py-2 border-2 border-white text-white font-medium text-xs leading-tight uppercase rounded hover:bg-black hover:bg-opacity-5 focus:outline-none focus:ring-0 transition duration-150 ease-in-out" href="#!" role="button" data-mdb-ripple="true" data-mdb-ripple-color="light">Learn more</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="carousel-control-prev absolute top-0 bottom-0 flex items-center justify-center p-0 text-center border-0 hover:outline-none hover:no-underline focus:outline-none focus:no-underline left-0"
|
||||
type="button"
|
||||
data-bs-target="#carouselExampleCaptionsFull"
|
||||
data-bs-slide="prev"
|
||||
>
|
||||
<span
|
||||
class="carousel-control-prev-icon inline-block bg-no-repeat"
|
||||
aria-hidden="true"
|
||||
></span>
|
||||
<span class="visually-hidden">Previous</span>
|
||||
</button>
|
||||
<button
|
||||
class="carousel-control-next absolute top-0 bottom-0 flex items-center justify-center p-0 text-center border-0 hover:outline-none hover:no-underline focus:outline-none focus:no-underline right-0"
|
||||
type="button"
|
||||
data-bs-target="#carouselExampleCaptionsFull"
|
||||
data-bs-slide="next"
|
||||
>
|
||||
<span
|
||||
class="carousel-control-next-icon inline-block bg-no-repeat"
|
||||
aria-hidden="true"
|
||||
></span>
|
||||
<span class="visually-hidden">Next</span>
|
||||
</button>
|
||||
</div>
|
||||
<!-- slider 6 end -->
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- start of script section -->
|
||||
<script type="text/javascript">
|
||||
let toogler = document.getElementById("dark_mood_toogler");
|
||||
let doc_html_el = document.getElementsByTagName('html')[0];
|
||||
|
||||
doc_html_el.addEventListener('keyup',(e)=>{
|
||||
// key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
|
||||
if(e.ctrlKey && e.keyCode =='220'){
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
|
||||
}
|
||||
})
|
||||
doc_html_el.addEventListener('keyup',(e)=>{
|
||||
// key 191 is the forward slash , need to press ctrl+ / to show or hide the darkmode button
|
||||
if(e.ctrlKey && e.keyCode =='191'){
|
||||
toogler.style.display =='block'? toogler.style.display = 'none':toogler.style.display ='block';
|
||||
|
||||
}
|
||||
})
|
||||
toogler.addEventListener('click',()=>{
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
console.log(doc_html_el.className);
|
||||
})
|
||||
</script>
|
||||
<!-- end of script section -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -14,8 +14,369 @@
|
||||
</button>
|
||||
|
||||
|
||||
<!-- header 12 start -->
|
||||
|
||||
<nav x-data="{template_16_nav_status:false}" class="bg-white shadow dark:bg-gray-800">
|
||||
<div class="container px-6 py-4 mx-auto md:flex md:justify-between md:items-center">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<a class="text-2xl font-bold text-gray-800 transition-colors duration-200 transform dark:text-white lg:text-3xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
|
||||
</div>
|
||||
|
||||
<!-- Mobile menu button -->
|
||||
<div class="flex md:hidden ">
|
||||
<button @click="template_16_nav_status=!template_16_nav_status" type="button" class="text-gray-500 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 focus:outline-none focus:text-gray-600 dark:focus:text-gray-400" aria-label="toggle menu">
|
||||
<svg viewBox="0 0 24 24" class="w-6 h-6 fill-current">
|
||||
<path fill-rule="evenodd" d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mobile Menu open: "block", Menu closed: "hidden" -->
|
||||
<div :class="template_16_nav_status ? 'block items-center md:flex ' : 'hidden items-center md:flex '" >
|
||||
<div class="flex flex-col md:flex-row md:mx-6">
|
||||
<a class="my-1 text-sm font-medium text-gray-700 transition-colors duration-200 transform dark:text-gray-200 hover:text-blue-500 dark:hover:text-blue-400 md:mx-4 md:my-0" href="#">Home</a>
|
||||
<a class="my-1 text-sm font-medium text-gray-700 transition-colors duration-200 transform dark:text-gray-200 hover:text-blue-500 dark:hover:text-blue-400 md:mx-4 md:my-0" href="#">Shop</a>
|
||||
<a class="my-1 text-sm font-medium text-gray-700 transition-colors duration-200 transform dark:text-gray-200 hover:text-blue-500 dark:hover:text-blue-400 md:mx-4 md:my-0" href="#">Contact</a>
|
||||
<a class="my-1 text-sm font-medium text-gray-700 transition-colors duration-200 transform dark:text-gray-200 hover:text-blue-500 dark:hover:text-blue-400 md:mx-4 md:my-0" href="#">About</a>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-center md:block border p-2 rounded mt-3 md:mt-0 md:rounded-none md:border-none">
|
||||
<a class="relative text-gray-700 transition-colors duration-200 transform dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-300" href="#">
|
||||
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M3 3H5L5.4 5M7 13H17L21 5H5.4M7 13L5.4 5M7 13L4.70711 15.2929C4.07714 15.9229 4.52331 17 5.41421 17H17M17 17C15.8954 17 15 17.8954 15 19C15 20.1046 15.8954 21 17 21C18.1046 21 19 20.1046 19 19C19 17.8954 18.1046 17 17 17ZM9 19C9 20.1046 8.10457 21 7 21C5.89543 21 5 20.1046 5 19C5 17.8954 5.89543 17 7 17C8.10457 17 9 17.8954 9 19Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
||||
<span class="absolute top-3 left-0 p-1 text-xs text-white bg-blue-500 rounded-full"></span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- header 12 end -->
|
||||
|
||||
|
||||
<!-- section 1 start -->
|
||||
|
||||
<section class="bg-white dark:bg-gray-800">
|
||||
<div class="container px-6 py-24 mx-auto">
|
||||
<div class="items-center lg:flex">
|
||||
<div class="lg:w-1/2">
|
||||
<h2 class="text-3xl font-bold text-gray-800 dark:text-gray-100">Who I am</h2>
|
||||
|
||||
<p class="mt-4 text-gray-500 dark:text-gray-400 lg:max-w-md">
|
||||
Hi I am brand , software engineer <a class="font-bold text-blue-600 dark:text-blue-400" href="#">@team</a> , Lorem ipsum, dolor sit amet consectetur adipisicing elit. Illum in sed non alias, fugiat, commodi nemo ut fugit corrupti dolorem sequi ex veniam consequuntur id, maiores beatae ipsa omnis aliquam?
|
||||
</p>
|
||||
|
||||
<div class="flex items-center mt-6 -mx-2">
|
||||
<a class="mx-2" href="#" aria-label="Twitter">
|
||||
<svg class="w-5 h-5 text-gray-700 fill-current dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
||||
<path d="M492 109.5c-17.4 7.7-36 12.9-55.6 15.3 20-12 35.4-31 42.6-53.6-18.7 11.1-39.4 19.2-61.5 23.5C399.8 75.8 374.6 64 346.8 64c-53.5 0-96.8 43.4-96.8 96.9 0 7.6.8 15 2.5 22.1-80.5-4-151.9-42.6-199.6-101.3-8.3 14.3-13.1 31-13.1 48.7 0 33.6 17.2 63.3 43.2 80.7-16-.4-31-4.8-44-12.1v1.2c0 47 33.4 86.1 77.7 95-8.1 2.2-16.7 3.4-25.5 3.4-6.2 0-12.3-.6-18.2-1.8 12.3 38.5 48.1 66.5 90.5 67.3-33.1 26-74.9 41.5-120.3 41.5-7.8 0-15.5-.5-23.1-1.4C62.8 432 113.7 448 168.3 448 346.6 448 444 300.3 444 172.2c0-4.2-.1-8.4-.3-12.5C462.6 146 479 129 492 109.5z"/>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<a class="mx-2" href="#" aria-label="Facebook">
|
||||
<svg class="w-5 h-5 text-gray-700 fill-current dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
||||
<path d="M426.8 64H85.2C73.5 64 64 73.5 64 85.2v341.6c0 11.7 9.5 21.2 21.2 21.2H256V296h-45.9v-56H256v-41.4c0-49.6 34.4-76.6 78.7-76.6 21.2 0 44 1.6 49.3 2.3v51.8h-35.3c-24.1 0-28.7 11.4-28.7 28.2V240h57.4l-7.5 56H320v152h106.8c11.7 0 21.2-9.5 21.2-21.2V85.2c0-11.7-9.5-21.2-21.2-21.2z"/>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<a class="mx-2" href="#" aria-label="Linkden">
|
||||
<svg class="w-5 h-5 text-gray-700 fill-current dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
||||
<path d="M417.2 64H96.8C79.3 64 64 76.6 64 93.9V415c0 17.4 15.3 32.9 32.8 32.9h320.3c17.6 0 30.8-15.6 30.8-32.9V93.9C448 76.6 434.7 64 417.2 64zM183 384h-55V213h55v171zm-25.6-197h-.4c-17.6 0-29-13.1-29-29.5 0-16.7 11.7-29.5 29.7-29.5s29 12.7 29.4 29.5c0 16.4-11.4 29.5-29.7 29.5zM384 384h-55v-93.5c0-22.4-8-37.7-27.9-37.7-15.2 0-24.2 10.3-28.2 20.3-1.5 3.6-1.9 8.5-1.9 13.5V384h-55V213h55v23.8c8-11.4 20.5-27.8 49.6-27.8 36.1 0 63.4 23.8 63.4 75.1V384z"/>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<a class="mx-2" href="#" aria-label="Github">
|
||||
<svg class="w-5 h-5 text-gray-700 fill-current dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
||||
<path d="M256 32C132.3 32 32 134.9 32 261.7c0 101.5 64.2 187.5 153.2 217.9 1.4.3 2.6.4 3.8.4 8.3 0 11.5-6.1 11.5-11.4 0-5.5-.2-19.9-.3-39.1-8.4 1.9-15.9 2.7-22.6 2.7-43.1 0-52.9-33.5-52.9-33.5-10.2-26.5-24.9-33.6-24.9-33.6-19.5-13.7-.1-14.1 1.4-14.1h.1c22.5 2 34.3 23.8 34.3 23.8 11.2 19.6 26.2 25.1 39.6 25.1 10.5 0 20-3.4 25.6-6 2-14.8 7.8-24.9 14.2-30.7-49.7-5.8-102-25.5-102-113.5 0-25.1 8.7-45.6 23-61.6-2.3-5.8-10-29.2 2.2-60.8 0 0 1.6-.5 5-.5 8.1 0 26.4 3.1 56.6 24.1 17.9-5.1 37-7.6 56.1-7.7 19 .1 38.2 2.6 56.1 7.7 30.2-21 48.5-24.1 56.6-24.1 3.4 0 5 .5 5 .5 12.2 31.6 4.5 55 2.2 60.8 14.3 16.1 23 36.6 23 61.6 0 88.2-52.4 107.6-102.3 113.3 8 7.1 15.2 21.1 15.2 42.5 0 30.7-.3 55.5-.3 63 0 5.4 3.1 11.5 11.4 11.5 1.2 0 2.6-.1 4-.4C415.9 449.2 480 363.1 480 261.7 480 134.9 379.7 32 256 32z"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-8 lg:mt-0 lg:w-1/2">
|
||||
<div class="flex items-center justify-center lg:justify-end">
|
||||
<div class="max-w-lg">
|
||||
<img class="object-cover object-center w-full h-64 rounded-md shadow" src="https://images.unsplash.com/photo-1484399172022-72a90b12e3c1?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=80" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- section 1 end -->
|
||||
|
||||
|
||||
|
||||
<!-- feature 11 start -->
|
||||
|
||||
<section class="dark:bg-gray-800 dark:text-gray-100 py-24">
|
||||
<div class="container mx-auto p-4 space-y-2 text-center">
|
||||
<h2 class="text-5xl font-bold">Built to empower every team</h2>
|
||||
<p class="dark:text-gray-400">Libero minima optio qui</p>
|
||||
</div>
|
||||
<div class="container mx-auto grid justify-center gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
||||
<div class="flex flex-col items-center p-4">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-8 h-8 dark:text-green-400">
|
||||
<path fill-rule="evenodd" d="M11.3 1.046A1 1 0 0112 2v5h4a1 1 0 01.82 1.573l-7 10A1 1 0 018 18v-5H4a1 1 0 01-.82-1.573l7-10a1 1 0 011.12-.38z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
<h3 class="my-3 text-3xl font-semibold">Product</h3>
|
||||
<div class="space-y-1 leading-tight">
|
||||
<p>Similique quas ea veniam</p>
|
||||
<p>Tempore quasi porro</p>
|
||||
<p>Blanditiis aut mollitia ex</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col items-center p-4">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-8 h-8 dark:text-green-400">
|
||||
<path fill-rule="evenodd" d="M11.3 1.046A1 1 0 0112 2v5h4a1 1 0 01.82 1.573l-7 10A1 1 0 018 18v-5H4a1 1 0 01-.82-1.573l7-10a1 1 0 011.12-.38z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
<h3 class="my-3 text-3xl font-semibold">Product</h3>
|
||||
<div class="space-y-1 leading-tight">
|
||||
<p>Similique quas ea veniam</p>
|
||||
<p>Tempore quasi porro</p>
|
||||
<p>Blanditiis aut mollitia ex</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col items-center p-4">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-8 h-8 dark:text-green-400">
|
||||
<path fill-rule="evenodd" d="M11.3 1.046A1 1 0 0112 2v5h4a1 1 0 01.82 1.573l-7 10A1 1 0 018 18v-5H4a1 1 0 01-.82-1.573l7-10a1 1 0 011.12-.38z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
<h3 class="my-3 text-3xl font-semibold">Product</h3>
|
||||
<div class="space-y-1 leading-tight">
|
||||
<p>Similique quas ea veniam</p>
|
||||
<p>Tempore quasi porro</p>
|
||||
<p>Blanditiis aut mollitia ex</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col items-center p-4">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-8 h-8 dark:text-green-400">
|
||||
<path fill-rule="evenodd" d="M11.3 1.046A1 1 0 0112 2v5h4a1 1 0 01.82 1.573l-7 10A1 1 0 018 18v-5H4a1 1 0 01-.82-1.573l7-10a1 1 0 011.12-.38z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
<h3 class="my-3 text-3xl font-semibold">Product</h3>
|
||||
<div class="space-y-1 leading-tight">
|
||||
<p>Similique quas ea veniam</p>
|
||||
<p>Tempore quasi porro</p>
|
||||
<p>Blanditiis aut mollitia ex</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col items-center p-4">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-8 h-8 dark:text-green-400">
|
||||
<path fill-rule="evenodd" d="M11.3 1.046A1 1 0 0112 2v5h4a1 1 0 01.82 1.573l-7 10A1 1 0 018 18v-5H4a1 1 0 01-.82-1.573l7-10a1 1 0 011.12-.38z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
<h3 class="my-3 text-3xl font-semibold">Product</h3>
|
||||
<div class="space-y-1 leading-tight">
|
||||
<p>Similique quas ea veniam</p>
|
||||
<p>Tempore quasi porro</p>
|
||||
<p>Blanditiis aut mollitia ex</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col items-center p-4">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-8 h-8 dark:text-green-400">
|
||||
<path fill-rule="evenodd" d="M11.3 1.046A1 1 0 0112 2v5h4a1 1 0 01.82 1.573l-7 10A1 1 0 018 18v-5H4a1 1 0 01-.82-1.573l7-10a1 1 0 011.12-.38z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
<h3 class="my-3 text-3xl font-semibold">Product</h3>
|
||||
<div class="space-y-1 leading-tight">
|
||||
<p>Similique quas ea veniam</p>
|
||||
<p>Tempore quasi porro</p>
|
||||
<p>Blanditiis aut mollitia ex</p>
|
||||
</div>
|
||||
</div><!---->
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- feature 11 end -->
|
||||
|
||||
|
||||
|
||||
<!-- timeline 1 start -->
|
||||
|
||||
<section class="dark:bg-gray-800 dark:text-gray-100">
|
||||
<div class="container max-w-5xl px-4 py-24 mx-auto">
|
||||
<div class="grid gap-4 mx-4 sm:grid-cols-12">
|
||||
<div class="col-span-12 sm:col-span-3">
|
||||
<div class="text-center sm:text-left mb-14 before:block before:w-24 before:h-3 before:mb-5 before:rounded-md before:mx-auto sm:before:mx-0 before:dark:bg-green-400">
|
||||
<h3 class="text-3xl font-semibold">Morbi tempor</h3>
|
||||
<span class="text-sm font-bold tracking-wider uppercase dark:text-gray-400">Vestibulum diam nunc</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative col-span-12 px-4 space-y-6 sm:col-span-9">
|
||||
<div class="col-span-12 space-y-12 relative px-4 sm:col-span-8 sm:space-y-8 sm:before:absolute sm:before:top-2 sm:before:bottom-0 sm:before:w-0.5 sm:before:-left-3 before:dark:bg-gray-700">
|
||||
<div class="flex flex-col sm:relative sm:before:absolute sm:before:top-2 sm:before:w-4 sm:before:h-4 sm:before:rounded-full sm:before:left-[-35px] sm:before:z-[1] before:dark:bg-green-400">
|
||||
<h3 class="text-xl font-semibold tracking-wide">Donec porta enim vel </h3>
|
||||
<time class="text-xs tracking-wide uppercase dark:text-gray-400">Dec 2020</time>
|
||||
<p class="mt-3">Pellentesque feugiat ante at nisl efficitur, in mollis orci scelerisque. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
|
||||
</div>
|
||||
<div class="flex flex-col sm:relative sm:before:absolute sm:before:top-2 sm:before:w-4 sm:before:h-4 sm:before:rounded-full sm:before:left-[-35px] sm:before:z-[1] before:dark:bg-green-400">
|
||||
<h3 class="text-xl font-semibold tracking-wide">Aliquam sit amet nunc ut</h3>
|
||||
<time class="text-xs tracking-wide uppercase dark:text-gray-400">Jul 2019</time>
|
||||
<p class="mt-3">Morbi vulputate aliquam libero non dictum. Aliquam sit amet nunc ut diam aliquet tincidunt nec nec dui. Donec mollis turpis eget egestas sodales.</p>
|
||||
</div>
|
||||
<div class="flex flex-col sm:relative sm:before:absolute sm:before:top-2 sm:before:w-4 sm:before:h-4 sm:before:rounded-full sm:before:left-[-35px] sm:before:z-[1] before:dark:bg-green-400">
|
||||
<h3 class="text-xl font-semibold tracking-wide">Pellentesque habitant morbi</h3>
|
||||
<time class="text-xs tracking-wide uppercase dark:text-gray-400">Jan 2016</time>
|
||||
<p class="mt-3">Suspendisse tincidunt, arcu nec faucibus efficitur, justo velit consectetur nisl, sit amet condimentum lacus orci nec purus. Mauris quis quam suscipit, vehicula felis id, vehicula enim.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- timeline 1 end -->
|
||||
|
||||
|
||||
|
||||
<!-- contact 6 start -->
|
||||
<section class="text-gray-600 body-font relative dark:bg-gray-800">
|
||||
<div class="container px-5 py-24 mx-auto">
|
||||
<div class="flex flex-col text-center w-full mb-12">
|
||||
<h1 class="sm:text-3xl text-2xl font-medium title-font mb-4 text-gray-900 dark:text-emerald-300">Contact Us</h1>
|
||||
<p class="lg:w-2/3 mx-auto leading-relaxed text-base dark:text-emerald-100">Whatever cardigan tote bag tumblr hexagon brooklyn asymmetrical gentrify.</p>
|
||||
</div>
|
||||
<div class="lg:w-1/2 md:w-2/3 mx-auto">
|
||||
<div class="flex flex-wrap -m-2">
|
||||
<div class="p-2 w-1/2">
|
||||
<div class="relative">
|
||||
<label for="name" class="leading-7 text-sm text-gray-600 dark:text-emerald-300">Name</label>
|
||||
<input type="text" id="name" name="name" class="w-full bg-gray-100 bg-opacity-50 rounded border border-gray-300 focus:border-indigo-500 focus:bg-white focus:ring-2 focus:ring-indigo-200 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out">
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-2 w-1/2">
|
||||
<div class="relative">
|
||||
<label for="email" class="leading-7 text-sm text-gray-600 dark:text-emerald-300">Email</label>
|
||||
<input type="email" id="email" name="email" class="w-full bg-gray-100 bg-opacity-50 rounded border border-gray-300 focus:border-indigo-500 focus:bg-white focus:ring-2 focus:ring-indigo-200 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out">
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-2 w-full">
|
||||
<div class="relative">
|
||||
<label for="message" class="leading-7 text-sm text-gray-600 dark:text-emerald-300">Message</label>
|
||||
<textarea id="message" name="message" class="w-full bg-gray-100 bg-opacity-50 rounded border border-gray-300 focus:border-indigo-500 focus:bg-white focus:ring-2 focus:ring-indigo-200 h-32 text-base outline-none text-gray-700 py-1 px-3 resize-none leading-6 transition-colors duration-200 ease-in-out"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-2 w-full">
|
||||
<button class="flex mx-auto text-white bg-indigo-500 border-0 py-2 px-8 focus:outline-none hover:bg-indigo-600 dark:bg-emerald-400 dark:text-gray-800 dark:font-bold rounded text-lg">Button</button>
|
||||
</div>
|
||||
<div class="p-2 w-full pt-8 mt-8 border-t border-gray-200 dark:border-cyan-100 text-center">
|
||||
<a class="text-indigo-500 dark:text-emerald-300">example@email.com</a>
|
||||
<p class="leading-normal my-5 dark:text-cyan-100">49 Smith St.
|
||||
<br>Saint Cloud, MN 56301
|
||||
</p>
|
||||
<span class="inline-flex">
|
||||
<a class="text-gray-500 dark:hover:text-cyan-300 hover:cursor-pointer">
|
||||
<svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
|
||||
<path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z"></path>
|
||||
</svg>
|
||||
</a>
|
||||
<a class="ml-4 text-gray-500 dark:hover:text-cyan-300 hover:cursor-pointer">
|
||||
<svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
|
||||
<path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z"></path>
|
||||
</svg>
|
||||
</a>
|
||||
<a class="ml-4 text-gray-500 dark:hover:text-cyan-300 hover:cursor-pointer">
|
||||
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
|
||||
<rect width="20" height="20" x="2" y="2" rx="5" ry="5"></rect>
|
||||
<path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37zm1.5-4.87h.01"></path>
|
||||
</svg>
|
||||
</a>
|
||||
<a class="ml-4 text-gray-500 dark:hover:text-cyan-300 hover:cursor-pointer">
|
||||
<svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
|
||||
<path d="M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- contact 6 end -->
|
||||
|
||||
|
||||
|
||||
<!-- footer 9 start -->
|
||||
<footer class="bg-gray-50 dark:bg-gray-800 ">
|
||||
<div class="max-w-screen-xl px-4 py-24 mx-auto sm:px-6 lg:px-8">
|
||||
<span class="inline-block w-32 p-4 bg-gray-400 dark:ring-2 dark:rign-sky-300 dark:bg-gray-700 rounded-lg text-center text-white"> Logo </span>
|
||||
|
||||
|
||||
<div class="grid grid-cols-1 gap-8 mt-8 sm:grid-cols-2 lg:grid-cols-4">
|
||||
<div>
|
||||
<p class="font-medium dark:text-gray-300 ">
|
||||
Company
|
||||
</p>
|
||||
|
||||
<nav class="flex flex-col mt-4 space-y-2 text-sm text-gray-500">
|
||||
<a class="hover:opacity-75 dark:hover:text-sky-300" href=""> About </a>
|
||||
<a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Meet the Team </a>
|
||||
<a class="hover:opacity-75 dark:hover:text-sky-300" href=""> History </a>
|
||||
<a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Careers </a>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p class="font-medium dark:text-gray-300 ">
|
||||
Services
|
||||
</p>
|
||||
|
||||
<nav class="flex flex-col mt-4 space-y-2 text-sm text-gray-500">
|
||||
<a class="hover:opacity-75 dark:hover:text-sky-300" href=""> 1on1 Coaching </a>
|
||||
<a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Company Review </a>
|
||||
<a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Accounts Review </a>
|
||||
<a class="hover:opacity-75 dark:hover:text-sky-300" href=""> HR Consulting </a>
|
||||
<a class="hover:opacity-75 dark:hover:text-sky-300" href=""> SEO Optimisation </a>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p class="font-medium dark:text-gray-300 ">
|
||||
Helpful Links
|
||||
</p>
|
||||
|
||||
<nav class="flex flex-col mt-4 space-y-2 text-sm text-gray-500">
|
||||
<a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Contact </a>
|
||||
<a class="hover:opacity-75 dark:hover:text-sky-300" href=""> FAQs </a>
|
||||
<a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Live Chat </a>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p class="font-medium dark:text-gray-300">
|
||||
Legal
|
||||
</p>
|
||||
|
||||
<nav class="flex flex-col mt-4 space-y-2 text-sm text-gray-500">
|
||||
<a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Privacy Policy </a>
|
||||
<a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Terms & Conditions </a>
|
||||
<a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Returns Policy </a>
|
||||
<a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Accessibility </a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pt-8 mt-8 border-t border-gray-100 sm:items-center sm:justify-between sm:flex">
|
||||
<p class="text-xs text-gray-500">
|
||||
© 2022 Company Name
|
||||
</p>
|
||||
|
||||
<strong class="inline-flex items-center dark:text-white p-2 space-x-2 text-sm font-medium border border-gray-200 rounded">
|
||||
<span> Status: </span>
|
||||
|
||||
<span class="w-3 h-3 bg-green-600 rounded-full"></span>
|
||||
|
||||
<span class="font-medium text-green-600">
|
||||
All systems operational
|
||||
</span>
|
||||
</strong>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<!-- footer 9 end -->
|
||||
|
||||
|
||||
<!-- start of script section -->
|
||||
|
||||
@@ -6,6 +6,9 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="./../../../dist/tailshape.css">
|
||||
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
|
||||
<!-- tailwind elements library cdn -->
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tw-elements/dist/css/index.min.css" />
|
||||
<script src="https://cdn.jsdelivr.net/npm/tw-elements/dist/js/index.min.js"></script>
|
||||
<title>Template 17</title>
|
||||
</head>
|
||||
<body>
|
||||
@@ -17,7 +20,6 @@
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- start of script section -->
|
||||
<script type="text/javascript">
|
||||
let toogler = document.getElementById("dark_mood_toogler");
|
||||
|
||||
49
public/template/22_template.html
Normal file
49
public/template/22_template.html
Normal file
@@ -0,0 +1,49 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="./../../../dist/tailshape.css">
|
||||
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
|
||||
<title>Template 22</title>
|
||||
</head>
|
||||
<body>
|
||||
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||
d
|
||||
</button>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- start of script section -->
|
||||
<script type="text/javascript">
|
||||
let toogler = document.getElementById("dark_mood_toogler");
|
||||
let doc_html_el = document.getElementsByTagName('html')[0];
|
||||
|
||||
doc_html_el.addEventListener('keyup',(e)=>{
|
||||
// key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
|
||||
if(e.ctrlKey && e.keyCode =='220'){
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
|
||||
}
|
||||
})
|
||||
doc_html_el.addEventListener('keyup',(e)=>{
|
||||
// key 191 is the forward slash , need to press ctrl+ / to show or hide the darkmode button
|
||||
if(e.ctrlKey && e.keyCode =='191'){
|
||||
toogler.style.display =='block'? toogler.style.display = 'none':toogler.style.display ='block';
|
||||
|
||||
}
|
||||
})
|
||||
toogler.addEventListener('click',()=>{
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
console.log(doc_html_el.className);
|
||||
})
|
||||
</script>
|
||||
<!-- end of script section -->
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
49
public/template/23_template.html
Normal file
49
public/template/23_template.html
Normal file
@@ -0,0 +1,49 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="./../../../dist/tailshape.css">
|
||||
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
|
||||
<title>Template 23</title>
|
||||
</head>
|
||||
<body>
|
||||
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||
d
|
||||
</button>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- start of script section -->
|
||||
<script type="text/javascript">
|
||||
let toogler = document.getElementById("dark_mood_toogler");
|
||||
let doc_html_el = document.getElementsByTagName('html')[0];
|
||||
|
||||
doc_html_el.addEventListener('keyup',(e)=>{
|
||||
// key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
|
||||
if(e.ctrlKey && e.keyCode =='220'){
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
|
||||
}
|
||||
})
|
||||
doc_html_el.addEventListener('keyup',(e)=>{
|
||||
// key 191 is the forward slash , need to press ctrl+ / to show or hide the darkmode button
|
||||
if(e.ctrlKey && e.keyCode =='191'){
|
||||
toogler.style.display =='block'? toogler.style.display = 'none':toogler.style.display ='block';
|
||||
|
||||
}
|
||||
})
|
||||
toogler.addEventListener('click',()=>{
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
console.log(doc_html_el.className);
|
||||
})
|
||||
</script>
|
||||
<!-- end of script section -->
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
49
public/template/24_template.html
Normal file
49
public/template/24_template.html
Normal file
@@ -0,0 +1,49 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="./../../../dist/tailshape.css">
|
||||
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
|
||||
<title>Template 24</title>
|
||||
</head>
|
||||
<body>
|
||||
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||
d
|
||||
</button>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- start of script section -->
|
||||
<script type="text/javascript">
|
||||
let toogler = document.getElementById("dark_mood_toogler");
|
||||
let doc_html_el = document.getElementsByTagName('html')[0];
|
||||
|
||||
doc_html_el.addEventListener('keyup',(e)=>{
|
||||
// key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
|
||||
if(e.ctrlKey && e.keyCode =='220'){
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
|
||||
}
|
||||
})
|
||||
doc_html_el.addEventListener('keyup',(e)=>{
|
||||
// key 191 is the forward slash , need to press ctrl+ / to show or hide the darkmode button
|
||||
if(e.ctrlKey && e.keyCode =='191'){
|
||||
toogler.style.display =='block'? toogler.style.display = 'none':toogler.style.display ='block';
|
||||
|
||||
}
|
||||
})
|
||||
toogler.addEventListener('click',()=>{
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
console.log(doc_html_el.className);
|
||||
})
|
||||
</script>
|
||||
<!-- end of script section -->
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
49
public/template/25_template.html
Normal file
49
public/template/25_template.html
Normal file
@@ -0,0 +1,49 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="./../../../dist/tailshape.css">
|
||||
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
|
||||
<title>Template 25</title>
|
||||
</head>
|
||||
<body>
|
||||
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||
d
|
||||
</button>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- start of script section -->
|
||||
<script type="text/javascript">
|
||||
let toogler = document.getElementById("dark_mood_toogler");
|
||||
let doc_html_el = document.getElementsByTagName('html')[0];
|
||||
|
||||
doc_html_el.addEventListener('keyup',(e)=>{
|
||||
// key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
|
||||
if(e.ctrlKey && e.keyCode =='220'){
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
|
||||
}
|
||||
})
|
||||
doc_html_el.addEventListener('keyup',(e)=>{
|
||||
// key 191 is the forward slash , need to press ctrl+ / to show or hide the darkmode button
|
||||
if(e.ctrlKey && e.keyCode =='191'){
|
||||
toogler.style.display =='block'? toogler.style.display = 'none':toogler.style.display ='block';
|
||||
|
||||
}
|
||||
})
|
||||
toogler.addEventListener('click',()=>{
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
console.log(doc_html_el.className);
|
||||
})
|
||||
</script>
|
||||
<!-- end of script section -->
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user