add logo and project name

This commit is contained in:
Pavel Sviderski
2025-01-10 14:07:44 +10:00
parent d922f7bfed
commit fa54584128
3 changed files with 97 additions and 29 deletions
+7
View File
@@ -0,0 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80">
<g>
<rect x="0" y="0" width="80" height="80" rx="10" fill="#18181B"/>
<path d="M20 32 L20 48 L36 48 L36 32 M60 32 L45 32 L45 48 L60 48" stroke="white" stroke-width="6" fill="none"
stroke-linecap="square" stroke-linejoin="miter"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 341 B

+27 -29
View File
@@ -15,37 +15,35 @@
<!-- Site header -->
<header class="absolute top-2 md:top-6 w-full z-30">
<div class="px-4 sm:px-6">
<div class="max-w-3xl mx-auto">
<div class="flex items-center justify-between h-14 border border-transparent [background:linear-gradient(theme(colors.white),theme(colors.white))_padding-box,linear-gradient(120deg,theme(colors.zinc.300),theme(colors.zinc.100),theme(colors.zinc.300))_border-box] rounded-lg px-3">
<!-- Site branding -->
<div class="shrink-0 mr-4">
<!-- Logo -->
<a class="flex items-center justify-center bg-white w-8 h-8 rounded shadow-sm shadow-zinc-950/20"
href="index.html">
<img src="./images/logo.png" width="24" height="24" alt="Logo">
</a>
</div>
<!-- Desktop navigation -->
<nav class="flex grow">
<!-- Desktop sign in links -->
<ul class="flex grow justify-end flex-wrap items-center">
<li>
<a class="text-sm font-medium text-zinc-500 hover:text-zinc-900 px-3 lg:px-5 py-2 flex items-center transition"
href="login.html">Log in</a>
</li>
<li class="ml-1">
<a class="btn-sm text-zinc-100 bg-zinc-900 hover:bg-zinc-800 w-full shadow"
href="request-demo.html">Request Demo</a>
</li>
</ul>
</nav>
<div class="max-w-6xl mx-auto px-4 sm:px-6">
<div class="flex items-center justify-between h-14">
<!-- Site branding -->
<div class="shrink-0 mr-4">
<a class="flex items-center" href="index.html">
<img class="w-8 h-8 rounded shadow-sm shadow-zinc-950/20" src="./images/logo.svg"
alt="Logo">
<span class="ml-2 font-semibold text-lg text-zinc-900">uncloud</span>
</a>
</div>
<!-- Desktop navigation -->
<nav class="flex grow">
<!-- Desktop sign in links -->
<ul class="flex grow justify-end flex-wrap items-center">
<li>
<a class="text-sm font-medium text-zinc-500 hover:text-zinc-900 px-3 lg:px-5 py-2 flex items-center transition"
href="login.html">Log in</a>
</li>
<li class="ml-1">
<a class="btn-sm text-zinc-100 bg-zinc-900 hover:bg-zinc-800 w-full shadow"
href="request-demo.html">Request Demo</a>
</li>
</ul>
</nav>
</div>
</div>
</header>
+63
View File
@@ -1343,6 +1343,14 @@ input[type="search"]::-webkit-search-results-decoration {
margin-top: 2rem;
}
.mr-1{
margin-right: 0.25rem;
}
.mr-14{
margin-right: 3.5rem;
}
.box-content{
box-sizing: content-box;
}
@@ -1455,6 +1463,10 @@ input[type="search"]::-webkit-search-results-decoration {
width: 100%;
}
.w-28{
width: 7rem;
}
.max-w-2xl{
max-width: 42rem;
}
@@ -1702,6 +1714,10 @@ input[type="search"]::-webkit-search-results-decoration {
gap: 2rem;
}
.gap-3{
gap: 0.75rem;
}
.space-x-3 > :not([hidden]) ~ :not([hidden]){
--tw-space-x-reverse: 0;
margin-right: calc(0.75rem * var(--tw-space-x-reverse));
@@ -2028,6 +2044,11 @@ input[type="search"]::-webkit-search-results-decoration {
padding-bottom: 2rem;
}
.py-1{
padding-top: 0.25rem;
padding-bottom: 0.25rem;
}
.pb-12{
padding-bottom: 3rem;
}
@@ -2143,6 +2164,10 @@ input[type="search"]::-webkit-search-results-decoration {
letter-spacing: -0.025em;
}
.tracking-normal{
letter-spacing: 0em;
}
.text-black{
--tw-text-opacity: 1;
color: rgb(0 0 0 / var(--tw-text-opacity));
@@ -2288,6 +2313,12 @@ input[type="search"]::-webkit-search-results-decoration {
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-xl{
--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-black\/5{
--tw-shadow-color: rgb(0 0 0 / 0.05);
--tw-shadow: var(--tw-shadow-colored);
@@ -2298,6 +2329,11 @@ input[type="search"]::-webkit-search-results-decoration {
--tw-shadow: var(--tw-shadow-colored);
}
.shadow-zinc-950{
--tw-shadow-color: #09090b;
--tw-shadow: var(--tw-shadow-colored);
}
.filter{
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);
}
@@ -2670,6 +2706,11 @@ input[type="search"]::-webkit-search-results-decoration {
background-color: rgb(39 39 42 / var(--tw-bg-opacity));
}
.hover\:bg-zinc-600:hover{
--tw-bg-opacity: 1;
background-color: rgb(82 82 91 / var(--tw-bg-opacity));
}
.hover\:from-zinc-900:hover{
--tw-gradient-from: #18181b var(--tw-gradient-from-position);
--tw-gradient-to: rgb(24 24 27 / 0) var(--tw-gradient-to-position);
@@ -2690,10 +2731,23 @@ input[type="search"]::-webkit-search-results-decoration {
color: rgb(24 24 27 / var(--tw-text-opacity));
}
.hover\:text-black:hover{
--tw-text-opacity: 1;
color: rgb(0 0 0 / var(--tw-text-opacity));
}
.hover\:underline:hover{
text-decoration-line: underline;
}
.hover\:no-underline:hover{
text-decoration-line: none;
}
.hover\:decoration-zinc-500:hover{
text-decoration-color: #71717a;
}
.hover\:opacity-100:hover{
opacity: 1;
}
@@ -2904,6 +2958,10 @@ input[type="search"]::-webkit-search-results-decoration {
margin-bottom: 0px;
}
.md\:block{
display: block;
}
.md\:max-w-4xl{
max-width: 56rem;
}
@@ -3000,6 +3058,11 @@ input[type="search"]::-webkit-search-results-decoration {
grid-column: span 6 / span 6;
}
.lg\:mx-1{
margin-left: 0.25rem;
margin-right: 0.25rem;
}
.lg\:mb-16{
margin-bottom: 4rem;
}