Website: öffentliche Version mit FAQ

Beta-Hinweise und noindex entfernt, Kostenlos-Hinweis, Funktionen
(Ausschnitt, Marken, Feed/Ads-Format), FAQ, Impressum-&-Datenschutz-Link.
Falsche Angaben korrigiert (Ausgabe ist MP4/H.264/AAC, nicht codec-
erhaltend). Schriften selbst gehostet statt Google Fonts, OG-Bild.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01ShKCZzkdZhym6mHuPqXQAT
main
Samuel Zielke 2 weeks ago
parent 4276d6feb3
commit c7fcd670cc

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

@ -0,0 +1,192 @@
Kanit
=====
Copyright 2020 The Kanit Project Authors (https://github.com/cadsondemak/kanit)
This Font Software is licensed under the SIL Open Font License, Version 1.1.
This license is copied below, and is also available with a FAQ at:
http://scripts.sil.org/OFL
-----------------------------------------------------------
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
-----------------------------------------------------------
PREAMBLE
The goals of the Open Font License (OFL) are to stimulate worldwide
development of collaborative font projects, to support the font creation
efforts of academic and linguistic communities, and to provide a free and
open framework in which fonts may be shared and improved in partnership
with others.
The OFL allows the licensed fonts to be used, studied, modified and
redistributed freely as long as they are not sold by themselves. The
fonts, including any derivative works, can be bundled, embedded,
redistributed and/or sold with any software provided that any reserved
names are not used by derivative works. The fonts and derivatives,
however, cannot be released under any other type of license. The
requirement for fonts to remain under this license does not apply
to any document created using the fonts or their derivatives.
DEFINITIONS
"Font Software" refers to the set of files released by the Copyright
Holder(s) under this license and clearly marked as such. This may
include source files, build scripts and documentation.
"Reserved Font Name" refers to any names specified as such after the
copyright statement(s).
"Original Version" refers to the collection of Font Software components as
distributed by the Copyright Holder(s).
"Modified Version" refers to any derivative made by adding to, deleting,
or substituting -- in part or in whole -- any of the components of the
Original Version, by changing formats or by porting the Font Software to a
new environment.
"Author" refers to any designer, engineer, programmer, technical
writer or other person who contributed to the Font Software.
PERMISSION & CONDITIONS
Permission is hereby granted, free of charge, to any person obtaining
a copy of the Font Software, to use, study, copy, merge, embed, modify,
redistribute, and sell modified and unmodified copies of the Font
Software, subject to the following conditions:
1) Neither the Font Software nor any of its individual components,
in Original or Modified Versions, may be sold by itself.
2) Original or Modified Versions of the Font Software may be bundled,
redistributed and/or sold with any software, provided that each copy
contains the above copyright notice and this license. These can be
included either as stand-alone text files, human-readable headers or
in the appropriate machine-readable metadata fields within text or
binary files as long as those fields can be easily viewed by the user.
3) No Modified Version of the Font Software may use the Reserved Font
Name(s) unless explicit written permission is granted by the corresponding
Copyright Holder. This restriction only applies to the primary font name as
presented to the users.
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
Software shall not be used to promote, endorse or advertise any
Modified Version, except to acknowledge the contribution(s) of the
Copyright Holder(s) and the Author(s) or with their explicit written
permission.
5) The Font Software, modified or unmodified, in part or in whole,
must be distributed entirely under this license, and must not be
distributed under any other license. The requirement for fonts to
remain under this license does not apply to any document created
using the Font Software.
TERMINATION
This license becomes null and void if any of the above conditions are
not met.
DISCLAIMER
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
OTHER DEALINGS IN THE FONT SOFTWARE.
Instrument Serif
================
Copyright 2022 The Instrument Serif Project Authors (https://github.com/Instrument/instrument-serif)
This Font Software is licensed under the SIL Open Font License, Version 1.1.
This license is copied below, and is also available with a FAQ at:
https://scripts.sil.org/OFL
-----------------------------------------------------------
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
-----------------------------------------------------------
PREAMBLE
The goals of the Open Font License (OFL) are to stimulate worldwide
development of collaborative font projects, to support the font creation
efforts of academic and linguistic communities, and to provide a free and
open framework in which fonts may be shared and improved in partnership
with others.
The OFL allows the licensed fonts to be used, studied, modified and
redistributed freely as long as they are not sold by themselves. The
fonts, including any derivative works, can be bundled, embedded,
redistributed and/or sold with any software provided that any reserved
names are not used by derivative works. The fonts and derivatives,
however, cannot be released under any other type of license. The
requirement for fonts to remain under this license does not apply
to any document created using the fonts or their derivatives.
DEFINITIONS
"Font Software" refers to the set of files released by the Copyright
Holder(s) under this license and clearly marked as such. This may
include source files, build scripts and documentation.
"Reserved Font Name" refers to any names specified as such after the
copyright statement(s).
"Original Version" refers to the collection of Font Software components as
distributed by the Copyright Holder(s).
"Modified Version" refers to any derivative made by adding to, deleting,
or substituting -- in part or in whole -- any of the components of the
Original Version, by changing formats or by porting the Font Software to a
new environment.
"Author" refers to any designer, engineer, programmer, technical
writer or other person who contributed to the Font Software.
PERMISSION & CONDITIONS
Permission is hereby granted, free of charge, to any person obtaining
a copy of the Font Software, to use, study, copy, merge, embed, modify,
redistribute, and sell modified and unmodified copies of the Font
Software, subject to the following conditions:
1) Neither the Font Software nor any of its individual components,
in Original or Modified Versions, may be sold by itself.
2) Original or Modified Versions of the Font Software may be bundled,
redistributed and/or sold with any software, provided that each copy
contains the above copyright notice and this license. These can be
included either as stand-alone text files, human-readable headers or
in the appropriate machine-readable metadata fields within text or
binary files as long as those fields can be easily viewed by the user.
3) No Modified Version of the Font Software may use the Reserved Font
Name(s) unless explicit written permission is granted by the corresponding
Copyright Holder. This restriction only applies to the primary font name as
presented to the users.
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
Software shall not be used to promote, endorse or advertise any
Modified Version, except to acknowledge the contribution(s) of the
Copyright Holder(s) and the Author(s) or with their explicit written
permission.
5) The Font Software, modified or unmodified, in part or in whole,
must be distributed entirely under this license, and must not be
distributed under any other license. The requirement for fonts to
remain under this license does not apply to any document created
using the Font Software.
TERMINATION
This license becomes null and void if any of the above conditions are
not met.
DISCLAIMER
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
OTHER DEALINGS IN THE FONT SOFTWARE.

@ -0,0 +1,92 @@
/* Kanit and Instrument Serif (SIL Open Font License 1.1), self-hosted:
no requests to Google. Latin and Latin Extended only. */
/* latin-ext */
@font-face {
font-family: 'Instrument Serif';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url(InstrumentSerif-400-italic-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Instrument Serif';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url(InstrumentSerif-400-italic-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Kanit';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(Kanit-300-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Kanit';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(Kanit-300-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Kanit';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(Kanit-400-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Kanit';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(Kanit-400-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Kanit';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(Kanit-500-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Kanit';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(Kanit-500-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Kanit';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(Kanit-600-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Kanit';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(Kanit-600-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@ -3,15 +3,38 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="noindex"> <title>drop.two – 4:5-Fassung aus 9:16-Videos für den Mac</title>
<title>drop.two</title> <meta name="description" content="9:16 rein. 9:16 und 4:5 raus. drop.two schneidet aus fertigen Hochkant-Videos die 4:5-Fassung für Feed und Ads und legt beide sauber im Projektordner ab. Kostenlos für macOS.">
<meta name="description" content="9:16 rein. 9:16 und 4:5 raus."> <link rel="canonical" href="https://droptwo.zielke.studio/">
<meta property="og:type" content="website">
<meta property="og:site_name" content="drop.two">
<meta property="og:locale" content="de_DE">
<meta property="og:url" content="https://droptwo.zielke.studio/">
<meta property="og:title" content="drop.two – 9:16 rein. 9:16 und 4:5 raus.">
<meta property="og:description" content="Fertige Hochkant-Videos reinziehen, 4:5-Fassung raus. Ausschnitt verschiebbar, auch pro Szene. Kostenlos für macOS.">
<meta property="og:image" content="https://droptwo.zielke.studio/og/og-de.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta name="twitter:card" content="summary_large_image">
<link rel="icon" type="image/svg+xml" href="favicon.svg"> <link rel="icon" type="image/svg+xml" href="favicon.svg">
<link rel="preconnect" href="https://fonts.googleapis.com"> <link href="fonts/fonts.css" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <script type="application/ld+json">
<link href="https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600&family=Instrument+Serif:ital@1&display=swap" rel="stylesheet"> {
"@context": "https://schema.org",
"@type": "SoftwareApplication",
"name": "drop.two",
"operatingSystem": "macOS 13 oder neuer",
"applicationCategory": "MultimediaApplication",
"description": "Schneidet aus 9:16-Videos die 4:5-Fassung und legt beide Fassungen im Projektordner ab.",
"url": "https://droptwo.zielke.studio/",
"downloadUrl": "https://droptwo.zielke.studio/drop.two-latest.dmg",
"offers": { "@type": "Offer", "price": "0", "priceCurrency": "EUR" },
"publisher": { "@type": "Organization", "name": "Zielke Studio", "url": "https://zielke.studio/" }
}
</script>
<!-- drop.two landing page, /var/www/updates/droptwo (droptwo.zielke.studio). <!-- drop.two landing page, /var/www/updates/droptwo (droptwo.zielke.studio).
Source: drop.two repo, site/. Version from appcast.xml. --> Source: drop.two repo, site/. Version from appcast.xml. Fonts are
self-hosted (fonts/), no requests to third parties. -->
<style> <style>
:root { :root {
--dark: #0B0B0C; --dark: #0B0B0C;
@ -24,14 +47,14 @@
--gold-hi: #E4C98F; --gold-hi: #E4C98F;
} }
* { box-sizing: border-box; margin: 0; padding: 0; } * { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--dark); } html { background: var(--dark); scroll-behavior: smooth; }
body { body {
color: var(--light); color: var(--light);
font-family: "Kanit", "Poppins", -apple-system, sans-serif; font-family: "Kanit", "Poppins", -apple-system, sans-serif;
font-weight: 300; font-weight: 300;
line-height: 1.65; line-height: 1.65;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
padding: 0 16px 64px; padding: 0 16px 48px;
background: background:
radial-gradient(38vw 30vw at 85% 12%, rgba(200, 169, 106, .16), transparent 70%), radial-gradient(38vw 30vw at 85% 12%, rgba(200, 169, 106, .16), transparent 70%),
radial-gradient(30vw 30vw at 0% 60%, rgba(200, 169, 106, .07), transparent 70%), radial-gradient(30vw 30vw at 0% 60%, rgba(200, 169, 106, .07), transparent 70%),
@ -39,12 +62,14 @@
background-repeat: no-repeat; background-repeat: no-repeat;
} }
main { max-width: 1000px; margin: 0 auto; } main { max-width: 1000px; margin: 0 auto; }
a { color: inherit; }
nav { display: flex; justify-content: space-between; align-items: center; padding: 26px 0; } nav { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 26px 0; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; font-size: 1.05rem; color: var(--light); text-decoration: none; } .brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; font-size: 1.05rem; color: var(--light); text-decoration: none; }
.brand svg { width: 30px; height: 30px; } .brand svg { width: 30px; height: 30px; }
nav a.back { font-size: .85rem; color: var(--gray); text-decoration: none; } .links { display: flex; gap: 22px; align-items: center; }
nav a.back:hover { color: var(--light); } .links a { font-size: .85rem; color: var(--gray); text-decoration: none; transition: color .15s ease; }
.links a:hover { color: var(--light); }
/* Hero */ /* Hero */
.hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center; padding: 64px 0 88px; } .hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center; padding: 64px 0 88px; }
@ -61,6 +86,7 @@
} }
@keyframes shimmer { 50% { background-position: 100% 0; } } @keyframes shimmer { 50% { background-position: 100% 0; } }
.lede { color: var(--mid); font-size: 1.08rem; max-width: 30em; margin-bottom: 34px; } .lede { color: var(--mid); font-size: 1.08rem; max-width: 30em; margin-bottom: 34px; }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.download { .download {
display: inline-flex; align-items: center; gap: 10px; display: inline-flex; align-items: center; gap: 10px;
background: var(--gold); color: var(--dark); text-decoration: none; font-weight: 500; background: var(--gold); color: var(--dark); text-decoration: none; font-weight: 500;
@ -69,44 +95,51 @@
transition: transform .15s ease, box-shadow .15s ease, background .15s ease; transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
} }
.download:hover { background: var(--gold-hi); transform: translateY(-2px); box-shadow: 0 14px 40px rgba(200, 169, 106, .38); } .download:hover { background: var(--gold-hi); transform: translateY(-2px); box-shadow: 0 14px 40px rgba(200, 169, 106, .38); }
.free { font-size: .88rem; color: var(--mid); }
.free b { color: var(--light); font-weight: 400; }
.version { font-size: .8rem; color: var(--gray); margin-top: 14px; min-height: 1.2em; } .version { font-size: .8rem; color: var(--gray); margin-top: 14px; min-height: 1.2em; }
/* Demo: 9:16 master, the 4:5 frame lands on it, the 4:5 cut slides out. */ /* Demo: 9:16 master, the 4:5 frame lands on it, moves to the subject, the 4:5 cut follows. */
.demo { display: flex; align-items: center; justify-content: center; gap: 26px; position: relative; } .demo { display: flex; align-items: center; justify-content: center; gap: 26px; position: relative; }
.frame { position: relative; border-radius: 18px; overflow: hidden; background: #1a1a1d; } .frame { position: relative; border-radius: 18px; overflow: hidden; background: #1a1a1d; }
.master { width: 176px; aspect-ratio: 9 / 16; border: 3px solid var(--light); } .master { width: 176px; aspect-ratio: 9 / 16; border: 3px solid var(--light); }
.cut { width: 176px; aspect-ratio: 4 / 5; border: 3px solid var(--gold); box-shadow: 0 0 40px rgba(200, 169, 106, .35); animation: slide 5s ease-in-out infinite; } .cut { width: 176px; aspect-ratio: 4 / 5; border: 3px solid var(--gold); box-shadow: 0 0 40px rgba(200, 169, 106, .35); animation: slide 8s ease-in-out infinite; }
.scene { position: absolute; inset: 0; } .scene { position: absolute; inset: 0; background: linear-gradient(180deg, #2b2f45 0%, #7a5a48 45%, #d19b5b 62%, #2a221c 100%); }
.master .scene { background: linear-gradient(180deg, #2b2f45 0%, #7a5a48 45%, #d19b5b 62%, #2a221c 100%); } /* The 4:5 cut shows the same scene, shifted with the frame. */
/* The 4:5 cut shows the middle of the same scene (full width, centered). */ .cut .scene { inset: -21.1% 0; animation: follow 8s ease-in-out infinite; }
.cut .scene { inset: -21.1% 0; background: linear-gradient(180deg, #2b2f45 0%, #7a5a48 45%, #d19b5b 62%, #2a221c 100%); } .sun { position: absolute; left: 50%; top: 36%; width: 34%; aspect-ratio: 1; border-radius: 50%; background: #ffd9a0; box-shadow: 0 0 40px #ffcf87; transform: translateX(-50%); }
.sun { position: absolute; left: 50%; width: 34%; aspect-ratio: 1; border-radius: 50%; background: #ffd9a0; box-shadow: 0 0 40px #ffcf87; transform: translateX(-50%); animation: sun 5s ease-in-out infinite; }
.master .sun { top: 36%; }
.cut .sun { top: 36%; }
.person { position: absolute; bottom: 22%; left: 50%; width: 30%; height: 34%; transform: translateX(-50%); background: #151418; border-radius: 40% 40% 12% 12% / 30% 30% 10% 10%; } .person { position: absolute; bottom: 22%; left: 50%; width: 30%; height: 34%; transform: translateX(-50%); background: #151418; border-radius: 40% 40% 12% 12% / 30% 30% 10% 10%; }
.person::before { content: ""; position: absolute; top: -34%; left: 50%; width: 62%; aspect-ratio: 1; transform: translateX(-50%); background: #151418; border-radius: 50%; } .person::before { content: ""; position: absolute; top: -34%; left: 50%; width: 62%; aspect-ratio: 1; transform: translateX(-50%); background: #151418; border-radius: 50%; }
.crop { .crop {
position: absolute; left: 0; right: 0; top: 50%; aspect-ratio: 4 / 5; transform: translateY(-50%); position: absolute; left: 0; right: 0; top: 50%; aspect-ratio: 4 / 5; transform: translateY(-50%);
border: 3px solid var(--gold); border-radius: 12px; border: 3px solid var(--gold); border-radius: 12px;
box-shadow: 0 0 0 999px rgba(11, 11, 12, .55); box-shadow: 0 0 0 999px rgba(11, 11, 12, .55);
animation: crop 5s ease-in-out infinite; animation: crop 8s ease-in-out infinite;
} }
.label { position: absolute; bottom: -30px; left: 0; right: 0; text-align: center; font-size: .78rem; letter-spacing: .12em; color: var(--gray); } .label { position: absolute; bottom: -30px; left: 0; right: 0; text-align: center; font-size: .78rem; letter-spacing: .12em; color: var(--gray); }
.wrap-master, .wrap-cut { position: relative; } .wrap-master, .wrap-cut { position: relative; }
.arrow { color: var(--gold); font-size: 1.6rem; animation: nudge 5s ease-in-out infinite; } .arrow { color: var(--gold); font-size: 1.6rem; animation: nudge 8s ease-in-out infinite; }
/* Frame moves down by 12% of its own height (max. 21.1% fits), the cut
scene moves up by the same distance: 12% × 1.25 ÷ 1.778 ≈ 8.44% of its height. */
@keyframes crop { @keyframes crop {
0%, 12% { opacity: 0; transform: translateY(-50%) scale(1.25); } 0%, 8% { opacity: 0; transform: translateY(-50%) scale(1.25); }
26%, 88% { opacity: 1; transform: translateY(-50%) scale(1); } 18%, 40% { opacity: 1; transform: translateY(-50%) scale(1); }
52%, 80% { opacity: 1; transform: translateY(calc(-50% + 12%)) scale(1); }
92% { opacity: 1; transform: translateY(-50%) scale(1); }
100% { opacity: 0; transform: translateY(-50%) scale(1); } 100% { opacity: 0; transform: translateY(-50%) scale(1); }
} }
@keyframes follow {
0%, 40% { transform: none; }
52%, 80% { transform: translateY(-8.44%); }
92%, 100% { transform: none; }
}
@keyframes slide { @keyframes slide {
0%, 30% { opacity: 0; transform: translateX(-40px) scale(.9); } 0%, 18% { opacity: 0; transform: translateX(-40px) scale(.9); }
44%, 88% { opacity: 1; transform: translateX(0) scale(1); } 28%, 90% { opacity: 1; transform: translateX(0) scale(1); }
100% { opacity: 0; transform: translateX(0) scale(1); } 100% { opacity: 0; transform: translateX(0) scale(1); }
} }
@keyframes nudge { 0%, 30% { opacity: .2; transform: translateX(-6px); } 44%, 88% { opacity: 1; transform: none; } 100% { opacity: .2; } } @keyframes nudge { 0%, 18% { opacity: .2; transform: translateX(-6px); } 28%, 90% { opacity: 1; transform: none; } 100% { opacity: .2; } }
@keyframes sun { 50% { transform: translateX(-50%) translateY(-6%); } }
/* Filename */ /* Filename */
.file { .file {
@ -123,33 +156,68 @@
.file .to { color: var(--gold); } .file .to { color: var(--gold); }
.file .out { display: grid; gap: 6px; color: var(--mid); } .file .out { display: grid; gap: 6px; color: var(--mid); }
.legend { margin-top: 16px; font-family: "Kanit", sans-serif; font-size: .85rem; color: var(--gray); } .legend { margin-top: 16px; font-family: "Kanit", sans-serif; font-size: .85rem; color: var(--gray); }
.legend code { font-size: .8rem; color: var(--mid); }
/* Steps & facts */ /* Sections */
section.how { padding: 88px 0 24px; } section { padding: 88px 0 0; scroll-margin-top: 16px; }
h2 { font-size: 1.6rem; font-weight: 500; letter-spacing: -0.01em; margin-bottom: 26px; } h2 { font-size: 1.6rem; font-weight: 500; letter-spacing: -0.01em; margin-bottom: 8px; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 56px; } .sub { color: var(--mid); margin-bottom: 30px; max-width: 36em; }
.step { padding: 24px; border-radius: 18px; background: var(--surface); border: 1px solid var(--rule); transition: border-color .15s ease, transform .15s ease; }
.step:hover { border-color: rgba(200, 169, 106, .5); transform: translateY(-2px); } .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.step, .feature { padding: 24px; border-radius: 18px; background: var(--surface); border: 1px solid var(--rule); transition: border-color .15s ease, transform .15s ease; }
.step:hover, .feature:hover { border-color: rgba(200, 169, 106, .5); transform: translateY(-2px); }
.step .num { font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-size: 2.4rem; line-height: 1; color: var(--gold); display: block; margin-bottom: 12px; } .step .num { font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-size: 2.4rem; line-height: 1; color: var(--gold); display: block; margin-bottom: 12px; }
.step h3 { font-weight: 500; font-size: 1.05rem; margin-bottom: 4px; } .step h3, .feature h3 { font-weight: 500; font-size: 1.05rem; margin-bottom: 4px; }
.step p { color: var(--mid); font-size: .92rem; } .step p, .feature p { color: var(--mid); font-size: .92rem; }
.facts { display: flex; flex-wrap: wrap; gap: 10px; }
.features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.feature { display: flex; gap: 16px; align-items: flex-start; }
.feature svg { width: 40px; height: 40px; flex: none; }
.facts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.fact { padding: 8px 16px; border-radius: 999px; border: 1px solid var(--rule); color: var(--mid); font-size: .88rem; } .fact { padding: 8px 16px; border-radius: 999px; border: 1px solid var(--rule); color: var(--mid); font-size: .88rem; }
.fact b { color: var(--light); font-weight: 400; } .fact b { color: var(--light); font-weight: 400; }
/* Info */ /* FAQ */
.info { max-width: 560px; margin: 0 auto; padding: 72px 0 0; } .faq { max-width: 720px; }
.info h2 { margin-bottom: 24px; } details { border-bottom: 1px solid var(--rule); }
dl { display: grid; gap: 24px; } details:first-of-type { border-top: 1px solid var(--rule); }
dt { font-size: .74rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--gray); margin-bottom: 4px; } summary {
dd { color: var(--mid); } list-style: none; cursor: pointer; padding: 18px 40px 18px 0; position: relative;
dd strong { color: var(--light); font-weight: 400; } font-weight: 400; font-size: 1.02rem; transition: color .15s ease;
footer { margin-top: 56px; font-size: .78rem; color: var(--gray); } }
summary::-webkit-details-marker { display: none; }
summary::after {
content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
color: var(--gold); font-size: 1.4rem; font-weight: 300; transition: transform .2s ease;
}
details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
summary:hover { color: var(--gold-hi); }
details p { color: var(--mid); padding: 0 40px 20px 0; font-size: .95rem; }
details p + p { margin-top: -8px; }
/* Closing */
.closing {
margin-top: 96px; padding: 48px 32px; border-radius: 24px; text-align: center;
background: radial-gradient(60% 120% at 50% 0%, rgba(200, 169, 106, .14), transparent 70%), var(--surface);
border: 1px solid var(--rule);
}
.closing h2 { margin-bottom: 10px; }
.closing p { color: var(--mid); margin-bottom: 26px; }
footer {
margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--rule);
display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px;
font-size: .82rem; color: var(--gray);
}
footer nav { padding: 0; gap: 18px; flex-wrap: wrap; justify-content: flex-start; }
footer a { color: var(--gray); text-decoration: none; }
footer a:hover { color: var(--light); }
@media (max-width: 800px) { @media (max-width: 800px) {
.hero { grid-template-columns: 1fr; gap: 64px; padding-top: 32px; } .hero { grid-template-columns: 1fr; gap: 64px; padding-top: 32px; }
.master, .cut { width: 132px; } .master, .cut { width: 132px; }
.steps { grid-template-columns: 1fr; } .steps, .features { grid-template-columns: 1fr; }
.links a:not(.back) { display: none; }
} }
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation: none !important; } *, *::before, *::after { animation: none !important; }
@ -167,19 +235,26 @@
</svg> </svg>
drop.two drop.two
</a> </a>
<a class="back" href="https://apps.zielke.studio/">← Alle Apps</a> <div class="links">
<a href="#funktionen">Funktionen</a>
<a href="#faq">FAQ</a>
<a class="back" href="https://apps.zielke.studio/">← Alle Apps</a>
</div>
</nav> </nav>
<section class="hero"> <section class="hero">
<div> <div>
<p class="eyebrow">Beta · für macOS</p> <p class="eyebrow">Kostenlos · für macOS</p>
<h1>9:16 rein. <span class="em">9:16 und 4:5 raus.</span></h1> <h1>9:16 rein. <span class="em">9:16 und 4:5 raus.</span></h1>
<p class="lede">Fertige Hochkant-Master reinziehen – drop.two schneidet die 4:5-Fassung sauber aus der Mitte und legt beide ordentlich im Projektordner ab. Keine Timeline, kein Export-Dialog.</p> <p class="lede">Fertige Hochkant-Videos reinziehen – drop.two schneidet die 4:5-Fassung für Feed und Ads und legt beide Fassungen ordentlich im Projektordner ab. Ausschnitt mittig oder genau da, wo er hingehört. Keine Timeline, kein Export-Dialog.</p>
<a class="download" href="drop.two-latest.dmg">Für macOS laden <span aria-hidden="true">↓</span></a> <div class="cta-row">
<p class="version" id="version"></p> <a class="download" href="drop.two-latest.dmg">Für macOS laden <span aria-hidden="true">↓</span></a>
<span class="free"><b>Kostenlos</b> · ohne Konto · ohne Abo</span>
</div>
<p class="version" id="version">macOS 13 oder neuer · Apple Silicon &amp; Intel</p>
</div> </div>
<div class="demo" aria-label="Animation: aus einem 9:16-Video entsteht ein 4:5-Ausschnitt"> <div class="demo" aria-label="Animation: aus einem 9:16-Video entsteht ein 4:5-Ausschnitt, der Rahmen lässt sich verschieben">
<div class="wrap-master"> <div class="wrap-master">
<div class="frame master"> <div class="frame master">
<div class="scene"><div class="sun"></div><div class="person"></div></div> <div class="scene"><div class="sun"></div><div class="person"></div></div>
@ -206,47 +281,106 @@
<span><span class="seg project">SOMOS</span>/SOMOS-<span class="seg new">4x5</span>-v3-DE.mp4</span> <span><span class="seg project">SOMOS</span>/SOMOS-<span class="seg new">4x5</span>-v3-DE.mp4</span>
</span> </span>
</div> </div>
<p class="legend">Das Projekt steht im Dateinamen: <code>[Projekt]-[Format]-[Version]-[Sprache]</code>. drop.two liest von rechts, damit auch Projekte mit Bindestrich heil bleiben.</p> <p class="legend">Das Projekt steht im Dateinamen, das Format ist der Anker: <code>9x16</code>, <code>9X16</code>, getrennt mit <code>-</code>, <code>_</code> oder Leerzeichen. Steht kein Format drin, fragt drop.two nach und hängt <code>4x5</code> auf Wunsch an.</p>
</div> </div>
<section class="how"> <section id="ablauf">
<h2>So einfach geht's</h2> <h2>So einfach geht's</h2>
<p class="sub">Drei Schritte, und der zweite ist optional.</p>
<div class="steps"> <div class="steps">
<div class="step"><span class="num">1</span><h3>Reinziehen</h3><p>Eine oder gleich viele 9:16-Dateien per Drag &amp; Drop – oder im Dialog auswählen.</p></div> <div class="step"><span class="num">1</span><h3>Reinziehen</h3><p>Eine oder gleich viele 9:16-Dateien per Drag &amp; Drop – oder im Dialog auswählen. drop.two zeigt sofort, was daraus wird.</p></div>
<div class="step"><span class="num">2</span><h3>Erkannt</h3><p>drop.two liest Projekt, Version und Sprache aus dem Namen und prüft das Seitenverhältnis.</p></div> <div class="step"><span class="num">2</span><h3>Ausschnitt prüfen</h3><p>Der 4:5-Rahmen liegt über dem Video. Passt er nicht, ziehst du ihn einfach dahin, wo das Bild spielt.</p></div>
<div class="step"><span class="num">3</span><h3>Abgelegt</h3><p>Original und 4:5-Fassung landen zusammen im Projektordner. Fertig zum Weitergeben.</p></div> <div class="step"><span class="num">3</span><h3>Abgelegt</h3><p>Original und 4:5-Fassung landen zusammen im Projektordner. Fertig zum Hochladen.</p></div>
</div>
<div class="facts">
<span class="fact"><b>ProRes</b> bleibt ProRes</span>
<span class="fact"><b>Ton</b> ohne Neukodierung</span>
<span class="fact"><b>Volle Breite</b>, mittig beschnitten</span>
<span class="fact"><b>1080×1920</b> → 1080×1350</span>
<span class="fact"><b>Fehler</b> werden gezeigt, nicht verschluckt</span>
</div> </div>
</section> </section>
<section class="info"> <section id="funktionen">
<h2>Loslegen</h2> <h2>Was drop.two kann</h2>
<dl> <p class="sub">Ein Werkzeug für genau einen Handgriff – der dafür sitzt.</p>
<div> <div class="features">
<dt>Installation</dt> <div class="feature">
<dd>DMG öffnen, <strong>drop.two</strong> in den Programme-Ordner ziehen. Beim ersten Start kann macOS kurz prüfen – das dauert einen Moment und passiert nur einmal.</dd> <svg viewBox="0 0 40 40" aria-hidden="true"><rect x="11" y="3" width="18" height="34" rx="3" fill="none" stroke="#F5F5F4" stroke-width="2"/><rect x="12" y="13" width="16" height="20" rx="2" fill="#C8A96A"/><path d="M34 15l2.5 3-2.5 3M34 25l2.5-3" fill="none" stroke="#C8A96A" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>
<div><h3>Ausschnitt verschieben</h3>
<p>Rahmen in der Vorschau nach oben oder unten ziehen. Was du siehst, wird gerendert – pixelgenau.</p></div>
</div> </div>
<div> <div class="feature">
<dt>Updates</dt> <svg viewBox="0 0 40 40" aria-hidden="true"><path d="M4 26h32" stroke="#F5F5F4" stroke-opacity=".35" stroke-width="2.5" stroke-linecap="round"/><path d="M15 26h21" stroke="#C8A96A" stroke-width="2.5" stroke-linecap="round"/><rect x="2.5" y="22.5" width="7" height="7" transform="rotate(45 6 26)" fill="#C8A96A"/><rect x="11.5" y="22.5" width="7" height="7" transform="rotate(45 15 26)" fill="#E4C98F"/><rect x="25.5" y="10" width="2" height="16" rx="1" fill="#F5F5F4"/></svg>
<dd>Kommen automatisch. Die App meldet sich, wenn eine neue Version bereitsteht. Diese Seite brauchst du danach nicht mehr.</dd> <div><h3>Marken für Szenenwechsel</h3>
<p>Zwei Szenen, zwei Bildausschnitte? Marke setzen, Rahmen ziehen – ab dort gilt die neue Position. Harter Schnitt, kein Wackeln.</p></div>
</div> </div>
<div> <div class="feature">
<dt>Voraussetzung</dt> <svg viewBox="0 0 40 40" aria-hidden="true"><rect x="5" y="9" width="30" height="22" rx="4" fill="none" stroke="#F5F5F4" stroke-width="2"/><path d="M17 15.5v9l7.5-4.5z" fill="#C8A96A"/></svg>
<dd>macOS 13 oder neuer.</dd> <div><h3>Bereit für Feed und Ads</h3>
<p>MP4 mit H.264 und AAC – das Format, das Instagram, Facebook und Meta Ads ohne Umweg nehmen. Egal ob ProRes, H.264 oder HEVC reinkommt.</p></div>
</div> </div>
<div> <div class="feature">
<dt>Fehler gefunden?</dt> <svg viewBox="0 0 40 40" aria-hidden="true"><path d="M5 12h12l3 3h15v17a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2z" fill="none" stroke="#F5F5F4" stroke-width="2" stroke-linejoin="round"/><rect x="13" y="20" width="6" height="10" rx="1" fill="none" stroke="#F5F5F4" stroke-width="1.5"/><rect x="22" y="21" width="7" height="8.5" rx="1" fill="#C8A96A"/></svg>
<dd>Kurze Nachricht an Samuel oder an <a href="mailto:app-feedback@zielke.studio" style="color: var(--light)">app-feedback@zielke.studio</a> – am besten mit dem Dateinamen, bei dem es geklemmt hat.</dd> <div><h3>Ordnung von allein</h3>
<p>Projektname aus dem Dateinamen, Unterordner automatisch, Original unverändert daneben. Ganze Stapel auf einmal.</p></div>
</div> </div>
</dl> </div>
<footer>Interne Beta &middot; bitte nicht weitergeben</footer> <div class="facts">
<span class="fact"><b>Volle Breite</b>, 1080×1920 → 1080×1350</span>
<span class="fact"><b>Framerate</b> und Dauer bleiben</span>
<span class="fact"><b>Lokal</b> auf deinem Mac, kein Upload</span>
<span class="fact"><b>Fehler</b> werden gezeigt, nicht verschluckt</span>
<span class="fact"><b>Updates</b> kommen automatisch</span>
</div>
</section> </section>
<section id="faq" class="faq">
<h2>Häufige Fragen</h2>
<p class="sub">Kurz beantwortet. Fehlt etwas? Schreib an <a href="mailto:app-feedback@zielke.studio">app-feedback@zielke.studio</a>.</p>
<details>
<summary>Was kostet drop.two?</summary>
<p>Nichts. drop.two ist kostenlos, ohne Konto, ohne Abo und ohne Wasserzeichen.</p>
</details>
<details>
<summary>Welche Videos kann ich reinwerfen?</summary>
<p>Alles im Seitenverhältnis 9:16, was dein Mac abspielen kann – zum Beispiel ProRes, H.264 oder HEVC in .mov oder .mp4. Dateien in einem anderen Seitenverhältnis lehnt drop.two mit einem Hinweis ab, statt sie zu verzerren.</p>
</details>
<details>
<summary>In welchem Format kommt die 4:5-Fassung raus?</summary>
<p>Als MP4 mit H.264 (High Profile) und AAC-Ton mit 128 kbit/s. Die Breite bleibt, die Höhe wird auf 4:5 beschnitten; Framerate und Dauer bleiben unverändert. Die Bitrate passt drop.two an Auflösung und Framerate an – passend für Feed-Posts und Meta Ads.</p>
</details>
<details>
<summary>Und wenn der Ausschnitt nicht in der Mitte sitzen soll?</summary>
<p>Klick in der Liste auf das Ausschnitt-Symbol. In der Vorschau ziehst du den goldenen Rahmen dahin, wo er hingehört. Wechselt die Szene, spulst du an die Stelle und setzt eine Marke (Taste M) – ab dort gilt eine eigene Position.</p>
</details>
<details>
<summary>Muss ich meine Dateien umbenennen?</summary>
<p>Nein. drop.two erkennt das Format im Namen in vielen Schreibweisen, etwa <code>Projekt-9x16-v3-DE</code>, <code>Projekt_9X16_v3</code> oder <code>Projekt 9x16</code>, und ersetzt dort nur das Format durch 4x5. Steht kein Format im Namen, fragt die App nach und hängt „4x5“ auf Wunsch einfach an.</p>
</details>
<details>
<summary>Wird mein Original verändert oder hochgeladen?</summary>
<p>Weder noch. Das Original wird unverändert in den Projektordner kopiert, gerendert wird komplett auf deinem Mac. Die App schickt keine Videos und keine Nutzungsdaten irgendwohin; sie fragt nur nach, ob es eine neue Version gibt.</p>
</details>
<details>
<summary>Welchen Mac brauche ich?</summary>
<p>macOS 13 Ventura oder neuer, auf Apple Silicon und Intel. Gerendert wird hardwarebeschleunigt mit den Videobausteinen von macOS.</p>
</details>
<details>
<summary>Wie installiere und aktualisiere ich die App?</summary>
<p>DMG öffnen und drop.two in den Programme-Ordner ziehen. Die App ist von Apple notarisiert, macOS prüft sie beim ersten Start einmal kurz. Neue Versionen meldet die App selbst; alternativ im App-Menü „Nach Updates suchen …“.</p>
</details>
</section>
<div class="closing">
<h2>Nie wieder zweite Timeline.</h2>
<p>Laden, Video reinziehen, fertig. Kostenlos für macOS 13 oder neuer.</p>
<a class="download" href="drop.two-latest.dmg">Für macOS laden <span aria-hidden="true">↓</span></a>
</div>
<footer>
<span>&copy; Zielke Studio</span>
<nav>
<a href="#faq">FAQ</a>
<a href="mailto:app-feedback@zielke.studio">Feedback</a>
<a href="https://zielke.studio/">Impressum &amp; Datenschutz</a>
<a href="https://apps.zielke.studio/">Weitere Apps</a>
</nav>
</footer>
</main> </main>
<script> <script>
@ -259,9 +393,9 @@ fetch("appcast.xml")
if (!items.length) return; if (!items.length) return;
var el = items[0].getElementsByTagName("sparkle:shortVersionString")[0] var el = items[0].getElementsByTagName("sparkle:shortVersionString")[0]
|| items[0].getElementsByTagName("title")[0]; || items[0].getElementsByTagName("title")[0];
if (el) document.getElementById("version").textContent = "Version " + el.textContent.trim() + " · macOS 13+"; if (el) document.getElementById("version").textContent = "Version " + el.textContent.trim() + " · macOS 13+ · Apple Silicon & Intel";
}) })
.catch(function () { /* stay quiet, the link works anyway */ }); .catch(function () { /* stay quiet, the default line stays */ });
</script> </script>
</body> </body>
</html> </html>

@ -0,0 +1,29 @@
<!DOCTYPE html>
<!-- Source of og-de.png (1200×630). Render: Chrome headless, see README. -->
<html lang="de"><head><meta charset="utf-8">
<link href="../fonts/fonts.css" rel="stylesheet">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { width: 1200px; height: 630px; overflow: hidden; color: #F5F5F4; font-family: "Kanit", sans-serif; font-weight: 300;
background: radial-gradient(520px 420px at 88% 8%, rgba(200,169,106,.22), transparent 70%), #0B0B0C;
display: grid; grid-template-columns: 1fr 380px; align-items: center; padding: 0 90px; }
.brand { display: flex; align-items: center; gap: 14px; font-weight: 500; font-size: 30px; margin-bottom: 44px; }
.brand svg { width: 52px; height: 52px; }
h1 { font-size: 76px; font-weight: 500; letter-spacing: -0.03em; line-height: 1.02; }
.em { font-family: "Instrument Serif", serif; font-style: italic; font-weight: 400; color: #E4C98F; }
p { margin-top: 30px; font-size: 26px; color: #B8B5B0; }
.art { display: flex; align-items: center; gap: 26px; justify-content: flex-end; }
.master { width: 170px; aspect-ratio: 9/16; border: 4px solid #F5F5F4; border-radius: 20px; position: relative; overflow: hidden;
background: linear-gradient(180deg, #2b2f45 0%, #7a5a48 45%, #d19b5b 62%, #2a221c 100%); }
.crop { position: absolute; left: 0; right: 0; top: 50%; aspect-ratio: 4/5; transform: translateY(-50%); border: 4px solid #C8A96A; border-radius: 12px; box-shadow: 0 0 0 999px rgba(11,11,12,.55); }
.cut { width: 150px; aspect-ratio: 4/5; border-radius: 16px; background: #C8A96A; box-shadow: 0 0 60px rgba(200,169,106,.45); }
.arrow { color: #C8A96A; font-size: 40px; }
</style></head>
<body>
<div>
<div class="brand"><svg viewBox="0 0 1024 1024"><rect x="310" y="152" width="404" height="718" rx="44" fill="none" stroke="#F5F5F4" stroke-width="44"/><rect x="328" y="281" width="368" height="460" rx="26" fill="#C8A96A"/></svg>drop.two</div>
<h1>9:16 rein.<br><span class="em">9:16 und 4:5 raus.</span></h1>
<p>Kostenlos für macOS</p>
</div>
<div class="art"><div class="master"><div class="crop"></div></div><span class="arrow">→</span><div class="cut"></div></div>
</body></html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 108 KiB

Loading…
Cancel
Save

Powered by TurnKey Linux.