106 lines
6.5 KiB
HTML
106 lines
6.5 KiB
HTML
<!DOCTYPE html><!-- This site was created in Webflow. https://www.webflow.com -->
|
||
<!-- Last Published: Wed Oct 19 2022 12:02:09 GMT+0000 (Coordinated Universal Time) -->
|
||
<html data-wf-page="62ad64fe52fa1b52a9cbd867" data-wf-site="62ad64fd52fa1b40f3cbd854">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>Styleguide</title>
|
||
<meta content="Styleguide" property="og:title">
|
||
<meta content="Styleguide" property="twitter:title">
|
||
<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/zdravo-stopalo.webflow.css" rel="stylesheet" type="text/css">
|
||
<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: ["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.ico" rel="shortcut icon" type="image/x-icon">
|
||
<link href="images/webclip.png" rel="apple-touch-icon">
|
||
</head>
|
||
<body>
|
||
<div data-collapse="medium" data-animation="default" data-duration="400" data-easing="ease" data-easing2="ease" role="banner" class="navigation w-nav">
|
||
<div class="navigation-wrap">
|
||
<a href="index.html" class="logo-link w-nav-brand"><img width="182" srcset="images/zdravostopalo-p-500.png 500w, images/zdravostopalo.png 842w" src="images/zdravostopalo.png" sizes="(max-width: 479px) 100vw, 182px" alt="" class="logo-image"></a>
|
||
<div class="menu">
|
||
<nav role="navigation" class="navigation-items w-nav-menu"></nav>
|
||
<div class="menu-button w-nav-button"><img width="22" src="images/menu-icon_1menu-icon.png" alt="" class="menu-icon"></div>
|
||
</div>
|
||
<a href="#" class="button cc-contact-us w-inline-block">
|
||
<div>REzerviši termin</div>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div class="section">
|
||
<div class="styleguide-header-wrap">
|
||
<div class="heading-jumbo">Styleguide</div>
|
||
<div class="paragraph-bigger cc-bigger-light">Source of truth of this template.</div>
|
||
</div>
|
||
<div class="container">
|
||
<div class="styleguide-content-wrap">
|
||
<div class="styleguide-block">
|
||
<div class="label cc-styleguide-label">Headings</div>
|
||
<div class="heading-jumbo">Heading Jumbo</div>
|
||
<div class="heading-jumbo-small">Heading Jumbo</div>
|
||
<div class="heading-jumbo-tiny">Heading Jumbo</div>
|
||
<h1>Heading 1</h1>
|
||
<h2>Heading 2</h2>
|
||
<h3>Heading 3</h3>
|
||
<h4>Heading 4</h4>
|
||
<h5>Heading 5</h5>
|
||
<h6>Heading 6</h6>
|
||
</div>
|
||
<div class="divider"></div>
|
||
<div class="styleguide-block">
|
||
<div class="label cc-styleguide-label">Paragraphs & Links</div>
|
||
<p class="paragraph-bigger">Paragraph-bigger</p>
|
||
<p>Paragraph</p>
|
||
<p class="paragraph-light">Paragraph-de-emphasized</p>
|
||
<p class="paragraph-small">Paragraph-smaller</p>
|
||
<p class="paragraph-tiny">Paragraph-tiny</p>
|
||
<div class="label">Label</div>
|
||
<a href="#">A text link</a>
|
||
</div>
|
||
<div class="divider"></div>
|
||
<div class="styleguide-block">
|
||
<div class="label cc-styleguide-label">Buttons & Form Elements</div>
|
||
<div class="styleguide-button-wrap">
|
||
<a href="#" class="button w-inline-block">
|
||
<div>Explore</div>
|
||
</a>
|
||
</div>
|
||
<div class="styleguide-button-wrap">
|
||
<a href="#" class="button cc-jumbo-button w-inline-block">
|
||
<div>Explore</div>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div class="divider"></div>
|
||
<div class="styleguide-block">
|
||
<div class="label cc-styleguide-label">Rich Text Element</div>
|
||
<div class="rich-text w-richtext">
|
||
<h2>What’s a Rich Text element?</h2>
|
||
<p>The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content. </p>
|
||
<blockquote>The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.</blockquote>
|
||
<h4>Static and dynamic content editing</h4>
|
||
<p>A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!</p>
|
||
<figure style="max-width:1306px" class="w-richtext-align-fullwidth w-richtext-figure-type-image">
|
||
<div><img src="images/placeholder-1.svg" alt=""></div>
|
||
</figure>
|
||
<h4>How to customize formatting for each rich text</h4>
|
||
<p>Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.</p>
|
||
<ul role="list">
|
||
<li>The rich text element allows you to create and format headings</li>
|
||
<li>Headings, paragraphs, blockquotes, figures, images, and figure captions</li>
|
||
<li>A rich text element can be used with static or dynamic content.</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<script src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.5.1.min.dc5e7f18c8.js?site=62ad64fd52fa1b40f3cbd854" 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> |