artemsheludko

$columns: 12;
$container-base-width: 1200px;
$container-big-width: 1600px;
$container-offset: 20px;

$desktop: 992px;
$tablet:  768px;
$mobile:  576px;

$mq: ( $mobile:$columns, $tablet:$columns, $desktop:$columns );

artemsheludko

{{#get "posts" filter="featured:true" include="tags,authors"}}
  {{#if posts}}
    <!-- Start Featured Post -->
    {{#foreach posts}}
      <article>
        {{#if feature_image}}
        <img src="{{feature_image}}" alt="{{title}}">
        {{/if}}
        <h2>{{title}}</h2>
        {{excerpt words="33"}}

artemsheludko

{"lastUpload":"2020-03-10T07:20:15.106Z","extensionVersion":"v3.4.3"}

artemsheludko

<ul>
    <li><a href="">First item</a></li>
    <li>Second item</li>
    <li><a href="">Test</a></li>
    <li><a href="">Test</a></li>
    <li><a href="">Pre-last item</a></li>
    <li><a href="">Last item</a></li>
</ul>

artemsheludko

GENERATORS:

• Text Content Generator - http://www.lipsum.com
• Favicon Generator - http://tools.dynamicdrive.com/favicon
• Data Generator - https://mockaroo.com/
• Mobile Mockup Generator - https://mockuphone.com
• Logo Generator - https://www.logaster.com
• UUID Generator - https://www.uuidgenerator.net/
• Hash Generator - https://passwordsgenerator.net/sha256-hash-generator/

IMAGE RESOURCES:

artemsheludko

<!--  HTML  -->
<div class="c-top" title="Top" data-icon="ei-chevron-up" data-size="s"></div>

<!--  SCSS  -->
.c-top {
  position: fixed;
  bottom: 25px;
  right: -100px;
	z-index: 10;
	width: 50px;

artemsheludko

// HTML
<form action="" autocomplete="off">
  <div class="form-item">
    <input placeholder="Name" type="text" name="email" id="name" autocomplete="off" required>
    <label for="email">Name:</label>
  </div>
  <div class="form-item">
    <input placeholder="Email" type="email" name="email" id="email" autocomplete="off">
    <label for="email">Email:</label>
  </div>

artemsheludko

// G R I D
$columns: 12
$container-offset: $base-spacing-unit

.o-container
  width: 100%
  padding-left: $container-offset
  padding-right: $container-offset
  margin: 0 auto

artemsheludko

# Установка Jekyll
gem install bundler jekyll
jekyll new my-awesome-site
cd my-awesome-site
bundle exec jekyll serve

# Лимит вывода
{% for article in site.articles limit:3 %}

{% endfor  %}

artemsheludko

// HTML
<div class="triangle"></div>

// CSS
.triangle {
  width: 0;
  height: 0;
  border-top: 20px solid #333;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;