<div class="page-wrapper">
<header class="header header--checkout">
<div class="container">
<div class="header__wrapper">
<a class="logo header__logo" href="#" aria-label="Homepage">
<img class="logo__image " src="/images/logo/logo.svg" alt="Alpaca Logo">
</a>
<div class="header__buttons">
<a class="
header-button
button
button--icon
button--icon-light
" href="#" aria-label="cartLink">
<svg class="icon header-button__icon" role="img">
<title>cart link</title>
<use href="/images/icons-sprite.svg#shopping-cart"></use>
</svg>
</a>
</div>
</div>
</div>
</header>
<main class="container" id="maincontent">
<div class="row success-page">
<div class="col-xs-12 center-xs">
<h1 class="heading heading--page">
Thank you for your purchase!
</h1>
<div class="success-page__order-confirmation">
<p>Your order # is: <strong>000000002</strong>.</p>
<p>We'll email you an order confirmation with details and tracking info.</p>
<a href="#" class="button link--button">
Continue Shopping
</a>
</div>
<!-- Knockout component - registration -->
<div class="success-page__registration">
<div>
<p>You can track your order status by creating an account.</p>
<p><span>Email Address</span>: <span>john@doe.com</span></p>
<a class="
action
primary
link--button
" href="#">
<span>Create an Account</span>
</a>
</div>
</div>
</div>
</div>
</main>
</div>
<footer class="footer margin-top-xl footer--checkout">
<section class="footer__bottom-bar ">
<div class="footer__bottom-bar-handler container">
<div class="footer__copyright">
<small>
Copyright © 2019 Alpaca
</small>
</div>
<ul class="
footer__payments-list
list
list--horizontal
">
<li class="list__item">
<svg class="icon footer__payments-list-icon footer__payments-list-icon--visa" role="img">
<title>Visa</title>
<use href="/images/icons-sprite.svg#visa"></use>
</svg>
</li>
<li class="list__item">
<svg class="icon footer__payments-list-icon" role="img">
<title>Master Card</title>
<use href="/images/icons-sprite.svg#master-card"></use>
</svg>
</li>
<li class="list__item">
<svg class="icon footer__payments-list-icon" role="img">
<title>Discover</title>
<use href="/images/icons-sprite.svg#discover"></use>
</svg>
</li>
<li class="list__item">
<svg class="icon footer__payments-list-icon" role="img">
<title>American Express</title>
<use href="/images/icons-sprite.svg#american-express"></use>
</svg>
</li>
<li class="list__item">
<svg class="icon footer__payments-list-icon footer__payments-list-icon--paypal" role="img">
<title>PayPal</title>
<use href="/images/icons-sprite.svg#paypal"></use>
</svg>
</li>
</ul>
<div class="footer__switchers">
<div id="language-dropdown" class="dropdown-list dropdown-list--detailed-content footer__dropdown-switcher">
<ul class="dropdown-list__list">
<li class="
dropdown-list__item
dropdown-list__item--collapse
">
<a class="dropdown-list__label " href="#" aria-expanded="false" aria-controls="dropdown-detailed-content1">
German
<svg class="icon dropdown-list__icon" aria-hidden="true" role="img">
<title>Arrow Down</title>
<use href="/images/icons-sprite.svg#angle-down"></use>
</svg>
</a>
<div id="dropdown-detailed-content1" class="dropdown-list__content " aria-hidden="true">
<ul class="list ">
<li class="list__item ">
Lorem ipsum
</li>
<li class="list__item ">
Lorem ipsum
</li>
<li class="list__item ">
Lorem ipsum
</li>
<li class="list__item ">
Lorem ipsum
</li>
<li class="list__item ">
Lorem ipsum
</li>
</ul>
</div>
</li>
</ul>
</div>
<script type="text/javascript">
new DropdownList(document.getElementById('language-dropdown'));
</script>
<div id="currency-dropdown" class="dropdown-list dropdown-list--detailed-content footer__dropdown-switcher margin-right-xs">
<ul class="dropdown-list__list">
<li class="
dropdown-list__item
dropdown-list__item--collapse
">
<a class="dropdown-list__label " href="#" aria-expanded="false" aria-controls="dropdown-detailed-content2">
USD - US Dollar
<svg class="icon dropdown-list__icon" aria-hidden="true" role="img">
<title>Arrow Down</title>
<use href="/images/icons-sprite.svg#angle-down"></use>
</svg>
</a>
<div id="dropdown-detailed-content2" class="dropdown-list__content " aria-hidden="true">
<ul class="list ">
<li class="list__item ">
Lorem ipsum
</li>
<li class="list__item ">
Lorem ipsum
</li>
<li class="list__item ">
Lorem ipsum
</li>
<li class="list__item ">
Lorem ipsum
</li>
<li class="list__item ">
Lorem ipsum
</li>
</ul>
</div>
</li>
</ul>
</div>
<script type="text/javascript">
new DropdownList(document.getElementById('currency-dropdown'));
</script>
</div>
</div>
</section>
</footer>
<div class="page-wrapper">
{{ render '@header--checkout' }}
<main
class="container"
id="maincontent"
>
<div class="row success-page">
<div class="col-xs-12 center-xs">
<h1 class="heading heading--page">
Thank you for your purchase!
</h1>
<div class="success-page__order-confirmation">
<p>Your order # is: <strong>000000002</strong>.</p>
<p>We'll email you an order confirmation with details and tracking info.</p>
<a
href="#"
class="button link--button"
>
Continue Shopping
</a>
</div>
<!-- Knockout component - registration -->
<div class="success-page__registration">
<div>
<p>You can track your order status by creating an account.</p>
<p><span>Email Address</span>: <span>john@doe.com</span></p>
<a
class="
action
primary
link--button
"
href="#"
>
<span>Create an Account</span>
</a>
</div>
</div>
</div>
</div>
</main>
</div>
{{ render '@footer--checkout' }}
/* No context defined. */
$success-page__padding : 60px 0 $spacer--extra-large !default;
$success-page__button-margin : $spacer--large auto !default;
$success-page__button-width : 100% !default;
$success-page__button-width\@s: auto !default;
.success-page {
padding: $success-page__padding;
&__order-confirmation {
padding: $spacer--large 0;
}
&__button {
width: $success-page__button-width;
margin: $success-page__button-margin;
@include mq($screen-s) {
width: $success-page__button-width\@s;
}
}
}
No notes defined.