Aggiunti script deploy e pagina coming soon
This commit is contained in:
309
coming-soon/index.html
Normal file
309
coming-soon/index.html
Normal file
@@ -0,0 +1,309 @@
|
||||
<!doctype html>
|
||||
<html lang="it">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Clinica Veterinaria Formiginese | Coming Soon</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="Il nuovo sito della Clinica Veterinaria Formiginese sarà presto online."
|
||||
/>
|
||||
<style>
|
||||
:root {
|
||||
--ink: #15384f;
|
||||
--ink-soft: #315f78;
|
||||
--aqua: #54c8bf;
|
||||
--sand: #f4ede2;
|
||||
--paper: #fffdf9;
|
||||
--mist: rgba(255, 255, 255, 0.72);
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
font-family: "Segoe UI", Arial, sans-serif;
|
||||
color: var(--ink);
|
||||
background:
|
||||
radial-gradient(circle at top left, rgba(84, 200, 191, 0.22), transparent 38%),
|
||||
radial-gradient(circle at bottom right, rgba(21, 56, 79, 0.18), transparent 32%),
|
||||
linear-gradient(135deg, #f8f4ec 0%, #fefcf9 48%, #eef7f7 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.shell {
|
||||
width: min(1120px, 100%);
|
||||
display: grid;
|
||||
grid-template-columns: 1.1fr 0.9fr;
|
||||
gap: 28px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.panel {
|
||||
background: var(--mist);
|
||||
backdrop-filter: blur(16px);
|
||||
border: 1px solid rgba(21, 56, 79, 0.08);
|
||||
border-radius: 30px;
|
||||
box-shadow: 0 24px 70px rgba(21, 56, 79, 0.12);
|
||||
}
|
||||
|
||||
.copy {
|
||||
padding: 48px;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 10px 16px;
|
||||
border-radius: 999px;
|
||||
background: rgba(84, 200, 191, 0.16);
|
||||
color: var(--ink);
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.14em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.eyebrow::before {
|
||||
content: "";
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
background: var(--aqua);
|
||||
box-shadow: 0 0 0 5px rgba(84, 200, 191, 0.16);
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 28px 0 16px;
|
||||
font-size: clamp(2.6rem, 5vw, 4.8rem);
|
||||
line-height: 0.95;
|
||||
letter-spacing: -0.04em;
|
||||
}
|
||||
|
||||
h1 span {
|
||||
display: block;
|
||||
color: var(--ink-soft);
|
||||
font-style: italic;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
max-width: 46ch;
|
||||
font-size: 18px;
|
||||
line-height: 1.75;
|
||||
color: rgba(21, 56, 79, 0.82);
|
||||
}
|
||||
|
||||
.chips {
|
||||
margin-top: 28px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.chip {
|
||||
padding: 12px 16px;
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 255, 255, 0.72);
|
||||
border: 1px solid rgba(21, 56, 79, 0.1);
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--ink-soft);
|
||||
}
|
||||
|
||||
.note {
|
||||
margin-top: 34px;
|
||||
padding: 18px 20px;
|
||||
border-radius: 20px;
|
||||
background: rgba(21, 56, 79, 0.06);
|
||||
color: var(--ink-soft);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.visual {
|
||||
padding: 22px;
|
||||
}
|
||||
|
||||
.artboard {
|
||||
overflow: hidden;
|
||||
border-radius: 26px;
|
||||
min-height: 560px;
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.3)),
|
||||
linear-gradient(160deg, #dff5f1 0%, #f7f0e7 48%, #dcecf8 100%);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.artboard::before,
|
||||
.artboard::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
filter: blur(4px);
|
||||
}
|
||||
|
||||
.artboard::before {
|
||||
width: 210px;
|
||||
height: 210px;
|
||||
background: rgba(84, 200, 191, 0.2);
|
||||
top: -60px;
|
||||
right: -40px;
|
||||
}
|
||||
|
||||
.artboard::after {
|
||||
width: 260px;
|
||||
height: 260px;
|
||||
background: rgba(21, 56, 79, 0.12);
|
||||
bottom: -80px;
|
||||
left: -70px;
|
||||
}
|
||||
|
||||
.stamp {
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
left: 22px;
|
||||
z-index: 2;
|
||||
padding: 10px 14px;
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 255, 255, 0.82);
|
||||
border: 1px solid rgba(21, 56, 79, 0.08);
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
svg {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.shell {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.copy {
|
||||
padding: 34px 26px;
|
||||
}
|
||||
|
||||
.visual {
|
||||
padding: 18px;
|
||||
}
|
||||
|
||||
.artboard {
|
||||
min-height: 420px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main class="shell">
|
||||
<section class="panel copy">
|
||||
<div class="eyebrow">Nuovo sito in preparazione</div>
|
||||
<h1>
|
||||
Clinica Veterinaria
|
||||
<span>Formiginese</span>
|
||||
</h1>
|
||||
<p>
|
||||
Stiamo preparando una nuova esperienza digitale pensata per presentare al meglio la
|
||||
clinica, il team medico e i servizi dedicati alla salute dei vostri animali.
|
||||
</p>
|
||||
<div class="chips">
|
||||
<div class="chip">Servizi specialistici</div>
|
||||
<div class="chip">Team clinico</div>
|
||||
<div class="chip">Prenotazioni online</div>
|
||||
<div class="chip">Area clienti dedicata</div>
|
||||
</div>
|
||||
<div class="note">
|
||||
Il sito completo sarà pubblicato a breve. Nel frattempo la clinica continua a essere
|
||||
disponibile ai consueti recapiti telefonici.
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="panel visual">
|
||||
<div class="artboard">
|
||||
<div class="stamp">Coming Soon</div>
|
||||
<svg viewBox="0 0 680 760" aria-hidden="true">
|
||||
<defs>
|
||||
<linearGradient id="card" x1="0" y1="0" x2="1" y2="1">
|
||||
<stop offset="0%" stop-color="#ffffff" />
|
||||
<stop offset="100%" stop-color="#f4ede2" />
|
||||
</linearGradient>
|
||||
<linearGradient id="teal" x1="0" y1="0" x2="1" y2="1">
|
||||
<stop offset="0%" stop-color="#68d7cf" />
|
||||
<stop offset="100%" stop-color="#2d9f98" />
|
||||
</linearGradient>
|
||||
<linearGradient id="blue" x1="0" y1="0" x2="1" y2="1">
|
||||
<stop offset="0%" stop-color="#264f68" />
|
||||
<stop offset="100%" stop-color="#16384f" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
<g opacity="0.9">
|
||||
<circle cx="540" cy="122" r="68" fill="#ffffff" />
|
||||
<circle cx="578" cy="146" r="12" fill="#54c8bf" opacity="0.5" />
|
||||
<circle cx="500" cy="106" r="14" fill="#15384f" opacity="0.08" />
|
||||
</g>
|
||||
|
||||
<g transform="translate(62 118)">
|
||||
<rect width="556" height="506" rx="38" fill="url(#card)" />
|
||||
<rect x="24" y="22" width="508" height="462" rx="28" fill="#ffffff" opacity="0.78" />
|
||||
|
||||
<rect x="56" y="58" width="214" height="264" rx="26" fill="url(#teal)" opacity="0.18" />
|
||||
<rect x="304" y="58" width="196" height="108" rx="24" fill="#edf5f7" />
|
||||
<rect x="304" y="184" width="196" height="138" rx="24" fill="#f8f3ec" />
|
||||
<rect x="56" y="348" width="444" height="84" rx="22" fill="#15384f" opacity="0.06" />
|
||||
|
||||
<circle cx="164" cy="172" r="82" fill="url(#blue)" />
|
||||
<ellipse cx="162" cy="207" rx="104" ry="88" fill="#1c445d" />
|
||||
<ellipse cx="392" cy="108" rx="46" ry="30" fill="#dce9ee" />
|
||||
<ellipse cx="392" cy="234" rx="70" ry="42" fill="#efe4d4" />
|
||||
|
||||
<path d="M155 104c-18-28-45-43-76-43 8 20 21 42 39 62" fill="#0f344b" />
|
||||
<path d="M174 104c18-28 45-43 76-43-8 20-21 42-39 62" fill="#0f344b" />
|
||||
<ellipse cx="139" cy="192" rx="18" ry="14" fill="#ffffff" />
|
||||
<ellipse cx="185" cy="192" rx="18" ry="14" fill="#ffffff" />
|
||||
<circle cx="139" cy="192" r="7" fill="#15384f" />
|
||||
<circle cx="185" cy="192" r="7" fill="#15384f" />
|
||||
<path d="M151 222c12 14 26 14 38 0" stroke="#54c8bf" stroke-width="8" stroke-linecap="round" fill="none" />
|
||||
<path d="M162 212l-12 12h24z" fill="#54c8bf" />
|
||||
|
||||
<g transform="translate(344 74)">
|
||||
<rect width="146" height="18" rx="9" fill="#15384f" opacity="0.12" />
|
||||
<rect y="34" width="108" height="14" rx="7" fill="#54c8bf" opacity="0.32" />
|
||||
<rect y="60" width="122" height="14" rx="7" fill="#15384f" opacity="0.08" />
|
||||
</g>
|
||||
|
||||
<g transform="translate(332 212)">
|
||||
<rect width="144" height="16" rx="8" fill="#15384f" opacity="0.12" />
|
||||
<rect y="34" width="122" height="14" rx="7" fill="#54c8bf" opacity="0.26" />
|
||||
<rect y="60" width="138" height="14" rx="7" fill="#15384f" opacity="0.08" />
|
||||
<rect y="86" width="104" height="14" rx="7" fill="#15384f" opacity="0.08" />
|
||||
</g>
|
||||
|
||||
<g transform="translate(82 370)">
|
||||
<rect width="84" height="40" rx="20" fill="#54c8bf" />
|
||||
<rect x="100" width="112" height="40" rx="20" fill="#ffffff" stroke="#15384f" opacity="0.28" />
|
||||
<rect x="228" width="160" height="40" rx="20" fill="#15384f" opacity="0.08" />
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user