Skip to content

Instantly share code, notes, and snippets.

@jshmllr

jshmllr/doc.markdown

Created September 20, 2024 13:43
Show Gist options
  • Save jshmllr/12909e5d84be015a79b140079b1f09fe to your computer and use it in GitHub Desktop.
Save jshmllr/12909e5d84be015a79b140079b1f09fe to your computer and use it in GitHub Desktop.
Download ZIP
Doc
Raw
index.html
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Offer Details</title>
</head>
<body>
<div class="container">
<div class="logo">
<svg width="92" height="92" viewBox="0 0 92 92" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_dd_1301_4674)">
<path d="M47.3476 40.2194V27.5504L63.2508 51.9253L47.3476 40.2194ZM47.3476 43.878L66.4476 57.9371L47.3476 71.9958V43.878ZM44.401 43.8778V71.9958L25.301 57.9371L44.401 43.8778ZM44.401 40.2192L28.4976 51.9255L44.401 27.5504V40.2192ZM20.8213 58.298L45.8744 76.7387L70.9273 58.298L45.8744 19.9004L20.8213 58.298Z" fill="url(#paint0_linear_1301_4674)"/>
</g>
<g filter="url(#filter1_dd_1301_4674)">
<path d="M72.4268 62.6825L49.3683 79.6551L45.8752 82.2266L42.3814 79.6551L19.3236 62.6825L14.838 59.3803L17.8815 54.716L40.9396 19.3754L45.8752 11.8108L50.8106 19.3754L73.8688 54.716L76.9126 59.3803L72.4268 62.6825ZM76.3368 53.106L53.2785 17.7656L45.8752 6.41821L38.4718 17.7656L15.4134 53.106L10.8486 60.1029L17.5766 65.0552L40.6349 82.0282L45.8752 85.8855L51.1151 82.0282L74.1733 65.0552L80.9017 60.1029L76.3368 53.106Z" fill="url(#paint1_linear_1301_4674)"/>
</g>
<defs>
<filter id="filter0_dd_1301_4674" x="17.8213" y="17.9004" width="56.106" height="62.8383" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1"/>
<feGaussianBlur stdDeviation="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.06 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1301_4674"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1"/>
<feGaussianBlur stdDeviation="1.5"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.1 0"/>
<feBlend mode="normal" in2="effect1_dropShadow_1301_4674" result="effect2_dropShadow_1301_4674"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_1301_4674" result="shape"/>
</filter>
<filter id="filter1_dd_1301_4674" x="7.84863" y="4.41821" width="76.0532" height="85.4673" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1"/>
<feGaussianBlur stdDeviation="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.0627451 0 0 0 0 0 0 0 0 0 0.156863 0 0 0 0.06 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1301_4674"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1"/>
<feGaussianBlur stdDeviation="1.5"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.1 0"/>
<feBlend mode="normal" in2="effect1_dropShadow_1301_4674" result="effect2_dropShadow_1301_4674"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_1301_4674" result="shape"/>
</filter>
<linearGradient id="paint0_linear_1301_4674" x1="33.3478" y1="76.7387" x2="63.8367" y2="22.9835" gradientUnits="userSpaceOnUse">
<stop stop-color="#53389E"/>
<stop offset="1" stop-color="#6941C6"/>
</linearGradient>
<linearGradient id="paint1_linear_1301_4674" x1="28.3619" y1="85.8854" x2="70.9898" y2="10.7296" gradientUnits="userSpaceOnUse">
<stop stop-color="#53389E"/>
<stop offset="1" stop-color="#6941C6"/>
</linearGradient>
</defs>
</svg>
</div>
<div class="main-text section">
<h1>Jason Isbell</h1>
<p class="secondary-text">The Roosevelt Room</p>
<p class="secondary-text">2400 E Cesar Chavez St suite 102,<br>Austin, TX 78702<br>United States</p>
</div>
<div class="section">
<p><strong>Buyer</strong></p>
<p class="secondary-text">Prism Promotions</p>
<p class="secondary-text">555-555-5555</p>
<p class="secondary-text">[email protected]</p>
</div>
<div class="section">
<a href="#" class="button">Confirm Show</a>
<a href="#" class="button" style="background-color: #FFFFFF; color: #7F56D9; border: 1px solid #7F56D9;">Download Offer</a>
</div>
<div class="divider"></div>
<div class="offer-details">
<h2>Headliner Offer</h2>
<p>$25,000 versus 85% of Net Revenue after Taxes, Fees, & Agreed Expenses</p>
<h2>Artist Walkout Potential</h2>
<p>$50,899.65</p>
<p>Walkout Adjustment: +$1,100.32</p>
<p>Tax Witholding: +$11,590.79</p>
<h2>Total Potential Payout</h2>
<p>$40,409.18</p>
</div>
<div class="offer-details">
<h2>Ticket Scaling</h2>
<p>GA: $51,741.18</p>
<p>VIP: $9,703.92</p>
<p>VIP 2: $7,643.14</p>
<p>VIP 3: $14,205.88</p>
<p>Sub-Total: $14,205.88</p>
<p>Ticket Sales Tax (7.5%): -$5,811.22</p>
<p>Percentage of Adjusted Gross: -$824.69</p>
<p>Platinum Lift 10%: +$1,100.32</p>
</div>
<div class="offer-details">
<h2>Expenses</h2>
<p>GA: $51,741.18</p>
<p>VIP: $9,703.92</p>
<p>VIP 2: $7,643.14</p>
<p>VIP 3: $14,205.88</p>
<p>Sub-Total: $14,205.88</p>
<p>Ticket Sales Tax (7.5%): -$5,811.22</p>
<p>Percentage of Adjusted Gross: -$824.69</p>
<p>Platinum Lift 10%: +$1,100.32</p>
</div>
</div>
</body>
Raw
style.css
body {
font-family: Arial, sans-serif;
color: #101828;
padding: 20px;
background-color: #F9FAFB;
}
.container {
max-width: 600px;
margin: 0 auto;
background: #fff;
padding: 20px;
border-radius: 16px;
border: 1px solid #EAECF0;
box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
}
.logo {
text-align: center;
margin-bottom: 20px;
}
.logo svg {
width: 92px;
height: 92px;
}
.main-text {
text-align: center;
color: #7F56D9;
}
.secondary-text {
text-align: center;
color: #475467;
}
.section {
margin: 10px 0;
}
.button {
display: inline-block;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 12px 20px;
gap: 8px;
background: #7F56D9;
border: 1px solid #7F56D9;
box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
border-radius: 8px;
color: #fff;
text-align: center;
text-decoration: none;
border-radius: 4px;
margin: 4px 0;
}
.offer-details {
background-color: #white;
padding: 20px;
border-radius: 8px;
border: 1px solid #EAECF0;
}
.offer-details h2 {
color: #7F56D9;
font-style: normal;
font-weight: 600;
font-size: 20px;
line-height: 30px;
text-align: center;
}
.offer-details p {
margin: 4px 0;
}
.divider {
height: 1px;
background-color: #E5E7EB;
margin: 20px 0;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment