bored.investments/template/style-guide.html
2023-02-01 22:55:46 +11:00

266 lines
No EOL
21 KiB
HTML
Raw Permalink Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html><!-- This site was created in Webflow. https://www.webflow.com -->
<!-- Last Published: Wed Feb 01 2023 07:58:48 GMT+0000 (Coordinated Universal Time) -->
<html data-wf-page="631e4c55f265cf3a01cde893" data-wf-site="631e4c55f265cf0615cde885">
<head>
<meta charset="utf-8">
<title>NFT Peeps - Webflow HTML website template</title>
<meta content="NFT Peeps is a colorful, vibrant Webflow template that lets you introduce your NFT to the world." name="description">
<meta content="NFT Peeps - Webflow HTML website template" property="og:title">
<meta content="NFT Peeps is a colorful, vibrant Webflow template that lets you introduce your NFT to the world." property="og:description">
<meta content="NFT Peeps - Webflow HTML website template" property="twitter:title">
<meta content="NFT Peeps is a colorful, vibrant Webflow template that lets you introduce your NFT to the world." property="twitter:description">
<meta property="og:type" content="website">
<meta content="summary_large_image" name="twitter:card">
<meta content="width=device-width, initial-scale=1" name="viewport">
<meta content="Webflow" name="generator">
<link href="../css/normalize.css" rel="stylesheet" type="text/css">
<link href="../css/webflow.css" rel="stylesheet" type="text/css">
<link href="../css/bored-fun-cloggss.webflow.css" rel="stylesheet" type="text/css">
<style>@media (max-width:991px) and (min-width:768px) {html.w-mod-js:not(.w-mod-ix) [data-w-id="154607de-15d8-3535-9a1c-06ddab82181c"] {opacity:1;}html.w-mod-js:not(.w-mod-ix) [data-w-id="154607de-15d8-3535-9a1c-06ddab82181e"] {opacity:0;}html.w-mod-js:not(.w-mod-ix) [data-w-id="154607de-15d8-3535-9a1c-06ddab82181d"] {opacity:0;}}@media (max-width:767px) and (min-width:480px) {html.w-mod-js:not(.w-mod-ix) [data-w-id="154607de-15d8-3535-9a1c-06ddab82181c"] {opacity:1;}html.w-mod-js:not(.w-mod-ix) [data-w-id="154607de-15d8-3535-9a1c-06ddab82181e"] {opacity:0;}html.w-mod-js:not(.w-mod-ix) [data-w-id="154607de-15d8-3535-9a1c-06ddab82181d"] {opacity:0;}}@media (max-width:479px) {html.w-mod-js:not(.w-mod-ix) [data-w-id="154607de-15d8-3535-9a1c-06ddab82181c"] {opacity:1;}html.w-mod-js:not(.w-mod-ix) [data-w-id="154607de-15d8-3535-9a1c-06ddab82181e"] {opacity:0;}html.w-mod-js:not(.w-mod-ix) [data-w-id="154607de-15d8-3535-9a1c-06ddab82181d"] {opacity:0;}}</style>
<link href="https://fonts.googleapis.com" rel="preconnect">
<link href="https://fonts.gstatic.com" rel="preconnect" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js" type="text/javascript"></script>
<script type="text/javascript">WebFont.load({ google: { families: ["Open Sans:300,300italic,400,400italic,600,600italic,700,700italic,800,800italic","Montserrat:100,100italic,200,200italic,300,300italic,400,400italic,500,500italic,600,600italic,700,700italic,800,800italic,900,900italic"] }});</script>
<!-- [if lt IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js" type="text/javascript"></script><![endif] -->
<script type="text/javascript">!function(o,c){var n=c.documentElement,t=" w-mod-";n.className+=t+"js",("ontouchstart"in o||o.DocumentTouch&&c instanceof DocumentTouch)&&(n.className+=t+"touch")}(window,document);</script>
<link href="../images/favicon.svg" rel="shortcut icon" type="image/x-icon">
<link href="../images/webclip.svg" rel="apple-touch-icon">
<style>
@media only screen and (max-width: 991px) {
.nav-menu{
box-shadow: 0px 1px 10px #999;
}
}
</style>
<meta name="robots" content="noindex">
</head>
<body>
<div class="page-wrapper">
<div data-w-id="2a990361-4377-48ba-de99-5ea8887bf041" data-animation="default" data-collapse="medium" data-duration="500" data-easing="ease" data-easing2="ease" role="banner" class="navbar w-nav">
<div class="navbar-inner">
<a href="../index.html" style="-webkit-transform:translate3d(0, -10px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-moz-transform:translate3d(0, -10px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-ms-transform:translate3d(0, -10px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);transform:translate3d(0, -10px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);opacity:0" class="logo-wrapper w-nav-brand"><img src="../images/logo.svg" loading="lazy" alt="NFT Peeps logo" class="image"></a>
<nav role="navigation" class="nav-menu w-nav-menu">
<div style="-webkit-transform:translate3d(0, -10px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-moz-transform:translate3d(0, -10px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-ms-transform:translate3d(0, -10px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);transform:translate3d(0, -10px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);opacity:0" class="link-wrapper secondary-page">
<a href="../index.html" class="nav-link w-nav-link">Homepage</a><img src="../images/section_blob3.svg" loading="lazy" alt="" class="link-blob">
</div>
<div class="navbar-button-wrapper">
<div class="navbar-button-divider"></div>
<a style="-webkit-transform:translate3d(0, -10px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-moz-transform:translate3d(0, -10px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-ms-transform:translate3d(0, -10px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);transform:translate3d(0, -10px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);opacity:0" href="https://opensea.io/" target="_blank" class="primary-button secondary-page w-button">OpenSea</a>
</div>
</nav>
<div style="-webkit-transform:translate3d(0, -10px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-moz-transform:translate3d(0, -10px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-ms-transform:translate3d(0, -10px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);transform:translate3d(0, -10px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);opacity:0" class="menu-button w-nav-button"><img src="../images/menu_open_icon.svg" loading="lazy" data-w-id="154607de-15d8-3535-9a1c-06ddab82181c" alt="Open Menu Icon" class="open-menu-icon"><img src="../images/menu_close_icon.svg" loading="lazy" data-w-id="154607de-15d8-3535-9a1c-06ddab82181d" alt="Menu Close Icon" class="close-menu-icon"></div>
</div>
<div data-w-id="154607de-15d8-3535-9a1c-06ddab82181e" class="navbar-white-overlay"></div>
</div>
<div class="hero wf-section">
<div class="hero-container">
<div style="opacity:0;-webkit-transform:translate3d(0, 12px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-moz-transform:translate3d(0, 12px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-ms-transform:translate3d(0, 12px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);transform:translate3d(0, 12px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0)" class="hero-content">
<div class="section-name">
<div class="section-name-text">Template Page</div><img src="../images/section_blob.svg" loading="lazy" alt="" class="section-blob">
</div>
<h1 class="heading-1">Style Guide</h1>
<div class="hero-paragraph-and-btn">
<div class="hero-paragraph">
<p class="paragraph">Style Guide page contains styles that are used the most throughout this template.</p>
</div>
<a href="../index.html" class="primary-button w-button">Homepage</a>
</div>
</div>
<div class="hero-images">
<div style="-webkit-transform:translate3d(-12px, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-moz-transform:translate3d(-12px, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-ms-transform:translate3d(-12px, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);transform:translate3d(-12px, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);opacity:0" class="hero-image-wrapper left"><img src="../images/nft1.svg" loading="lazy" alt="NFT 1 image" class="image"><img src="../images/hero_blob1.svg" loading="lazy" alt="" class="hero-blob blob-1"><img src="../images/pattern1.svg" loading="lazy" alt="" class="pattern-1 hero-pattern-1"><img src="../images/pattern2.svg" loading="lazy" alt="" class="pattern-2 hero-pattern-3"></div>
<div style="-webkit-transform:translate3d(12px, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-moz-transform:translate3d(12px, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-ms-transform:translate3d(12px, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);transform:translate3d(12px, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);opacity:0" class="hero-image-wrapper right"><img src="../images/hero_nft_rotated.svg" loading="lazy" alt="" class="image"><img src="../images/hero_blob1.svg" loading="lazy" alt="" class="hero-blob blob-2"><img src="../images/pattern2.svg" loading="lazy" alt="" class="pattern-2 hero-pattern-2"><img src="../images/hero_blob2.svg" loading="lazy" alt="" class="hero-blob blob-3"><img src="../images/pattern1.svg" loading="lazy" alt="" class="pattern-1 hero-pattern-4"></div>
</div>
<div style="-webkit-transform:translate3d(0, 12px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-moz-transform:translate3d(0, 12px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-ms-transform:translate3d(0, 12px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);transform:translate3d(0, 12px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);opacity:0" class="hero-mobile-text-and-btn">
<div class="hero-paragraph">
<p class="paragraph">Style Guide page contains styles that are used the most throughout this template.</p>
</div>
<a href="../index.html" class="primary-button w-button">Homepage</a>
</div>
</div>
</div>
<div class="section for-roadmap for-template-page wf-section">
<div class="wide-container center">
<div class="section-title-container">
<div class="section-name">
<div class="section-name-text">Styles</div><img src="../images/section_blob3.svg" loading="lazy" alt="" class="section-blob">
</div>
<h2 class="heading-2">Most Used Styles</h2>
</div>
<div class="roadmap-main">
<div class="roadmap-item for-style-gudie first">
<div class="roadmap for-style-guide">
<div class="roadmap-text-content for-style-guide">
<div class="huge-text">Lorem</div>
</div>
<div class="roadmap-percentage">
<div class="blob-and-dotted-line"><img src="../images/section_blob3.svg" loading="lazy" alt="" class="roadmap-small-blob">
<div class="dotted-line for-style-guide">
<div class="inner-dotted-line"></div>
</div>
</div>
<div class="roadmap-percentage-text">Huge Text</div>
</div>
</div>
</div>
<div class="roadmap-item for-style-gudie">
<div data-w-id="3dbf66d8-80c3-d103-ef52-5c1851ace62b" class="roadmap for-style-guide">
<div class="roadmap-text-content for-style-guide">
<h1 class="heading-1">Lorem</h1>
</div>
<div class="roadmap-percentage">
<div class="blob-and-dotted-line"><img src="../images/section_blob3.svg" loading="lazy" alt="" class="roadmap-small-blob">
<div class="dotted-line for-style-guide">
<div class="inner-dotted-line"></div>
</div>
</div>
<div class="roadmap-percentage-text">Heading 1</div>
</div>
</div>
</div>
<div class="roadmap-item for-style-gudie">
<div class="roadmap for-style-guide">
<div class="roadmap-text-content for-style-guide">
<h2 class="heading-2">Lorem</h2>
</div>
<div class="roadmap-percentage">
<div class="blob-and-dotted-line"><img src="../images/section_blob3.svg" loading="lazy" alt="" class="roadmap-small-blob">
<div class="dotted-line for-style-guide">
<div class="inner-dotted-line"></div>
</div>
</div>
<div class="roadmap-percentage-text">Heading 2</div>
</div>
</div>
</div>
<div class="roadmap-item for-style-gudie">
<div class="roadmap for-style-guide">
<div class="roadmap-text-content for-style-guide">
<div class="big-text">This is some text inside of a div block.</div>
</div>
<div class="roadmap-percentage">
<div class="blob-and-dotted-line"><img src="../images/section_blob3.svg" loading="lazy" alt="" class="roadmap-small-blob">
<div class="dotted-line for-style-guide">
<div class="inner-dotted-line"></div>
</div>
</div>
<div class="roadmap-percentage-text">Big Text</div>
</div>
</div>
</div>
<div class="roadmap-item for-style-gudie">
<div class="roadmap for-style-guide">
<div class="roadmap-text-content for-style-guide">
<div class="small-text">This is some text inside of a div block.</div>
</div>
<div class="roadmap-percentage">
<div class="blob-and-dotted-line"><img src="../images/section_blob3.svg" loading="lazy" alt="" class="roadmap-small-blob">
<div class="dotted-line for-style-guide">
<div class="inner-dotted-line"></div>
</div>
</div>
<div class="roadmap-percentage-text">Small Text</div>
</div>
</div>
</div>
<div class="roadmap-item for-style-gudie">
<div class="roadmap for-style-guide">
<div class="roadmap-text-content for-style-guide">
<p class="paragraph">Tempor interdum sed nisl aliquam ut orci feugiat neque. Nibh amet proin in tristique. Ipsum morbi adipiscing faucibus eu odio in tellus risus.</p>
</div>
<div class="roadmap-percentage">
<div class="blob-and-dotted-line"><img src="../images/section_blob3.svg" loading="lazy" alt="" class="roadmap-small-blob">
<div class="dotted-line for-style-guide">
<div class="inner-dotted-line"></div>
</div>
</div>
<div class="roadmap-percentage-text">Paragraph</div>
</div>
</div>
</div>
<div class="roadmap-item for-style-gudie">
<div class="roadmap for-style-guide">
<div class="roadmap-text-content for-style-guide">
<a href="#" class="primary-button w-button">Button Text</a>
</div>
<div class="roadmap-percentage">
<div class="blob-and-dotted-line"><img src="../images/section_blob3.svg" loading="lazy" alt="" class="roadmap-small-blob"></div>
<div class="roadmap-percentage-text">Primary Button</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer wf-section"><img src="../images/wave-4_mobile.svg" loading="lazy" alt="" class="mobile-footer-image"><img src="../images/wave-4.svg" loading="lazy" alt="" class="desktop-footer-wave">
<div class="footer-inner">
<div class="wide-container relative">
<div class="footer-container">
<div class="footer-header-container">
<div class="footer-heading">
<h2 class="heading-2">Become wealthy 🚀</h2><img src="../images/section_blob4.svg" loading="lazy" alt="" class="footer-blob-image">
</div>
<div class="section-name for-footer">
<div class="section-name-text">Navigation</div><img src="../images/section_blob4.svg" loading="lazy" alt="" class="section-blob">
</div>
</div>
<div class="footer-top-divider"></div>
<div class="footer-main-links">
<div class="socials">
<a href="https://discord.com/" target="_blank" class="footer-link w-inline-block">
<div class="footer-link-text">Discord</div><img src="../images/section_blob4.svg" loading="lazy" alt="" class="link-blob">
</a>
<a href="https://twitter.com/home" target="_blank" class="footer-link w-inline-block">
<div class="footer-link-text">Twitter</div><img src="../images/section_blob4.svg" loading="lazy" alt="" class="link-blob">
</a>
<a href="https://www.instagram.com/" target="_blank" class="footer-link w-inline-block">
<div class="footer-link-text">Instagram</div><img src="../images/section_blob4.svg" loading="lazy" alt="" class="link-blob">
</a>
<a href="https://www.facebook.com/" target="_blank" class="footer-link w-inline-block">
<div class="footer-link-text">Facebook</div><img src="../images/section_blob4.svg" loading="lazy" alt="" class="link-blob">
</a>
</div>
<div class="footer-heading for-mobile">
<h2 class="heading-2">Navigation</h2><img src="../images/section_blob4.svg" loading="lazy" alt="" class="footer-blob-image">
</div>
<div class="footer-top-divider for-mobile"></div>
<div class="navigation-links">
<a href="../index.html" class="footer-link navigation-link w-inline-block">
<div class="footer-link-text">Home</div><img src="../images/section_blob4.svg" loading="lazy" alt="" class="link-blob">
</a>
<a href="../template/style-guide.html" aria-current="page" class="footer-link navigation-link w-inline-block w--current">
<div class="footer-link-text">Style Guide</div><img src="../images/section_blob4.svg" loading="lazy" alt="" class="link-blob">
</a>
<a href="../template/licenses.html" class="footer-link navigation-link w-inline-block">
<div class="footer-link-text">Licenses</div><img src="../images/section_blob4.svg" loading="lazy" alt="" class="link-blob">
</a>
<a href="../template/changelog.html" class="footer-link navigation-link w-inline-block">
<div class="footer-link-text">Changelog</div><img src="../images/section_blob4.svg" loading="lazy" alt="" class="link-blob">
</a>
</div><img src="../images/pattern1.svg" loading="lazy" alt="" class="pattern-1 for-footer-2">
</div>
<div class="footer-bottom-divider"></div>
<div class="copyright-links">
<div class="copyright-text">Made by <a href="https://portfolio-533c2b.webflow.io/" target="_blank" class="bold-link">Omar Najjar🤘</a>
</div>
</div>
</div><img src="../images/pattern1.svg" loading="lazy" alt="" class="pattern-1 for-footer">
</div>
</div>
</div>
<div data-w-id="17455af9-c94a-9952-be86-c34eab95daec" class="loader">
<div class="loader-inner first">
<div class="huge-text">Bored NFT Peeps</div>
</div>
<div class="loader-inner second">
<div class="huge-text pink">Bored NFT Peeps</div>
</div>
<div class="loader-inner third">
<div class="huge-text purple">Bored NFT Peeps</div>
</div><img src="../images/pattern1.svg" loading="lazy" alt="" class="pattern-1 loader-pattern top"><img src="../images/pattern1.svg" loading="lazy" alt="" class="pattern-1 loader-pattern bottom">
</div>
</div>
<script src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.5.1.min.dc5e7f18c8.js?site=631e4c55f265cf0615cde885" type="text/javascript" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="../js/webflow.js" type="text/javascript"></script>
<!-- [if lte IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/placeholders/3.0.2/placeholders.min.js"></script><![endif] -->
</body>
</html>