For Nina

{% if theme.image_sets.slideshow.size > 0 %}
  <div class="flexslider home-slideshow">
    <ul class="slides">
      {% for image in theme.image_sets.slideshow %}http://www.facebook.com/
        <li><img alt="Slideshow image" src="{{ image.url | constrain: 1800 }}"></li>
      {% endfor %}
    </ul>
  </div>
{% endif %}

<script type="text/javascript" src="https://code.jquery.com/jquery-1.8.2.js"></script>
<style type="text/css">
#overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
filter:alpha(opacity=70);
-moz-opacity:0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
z-index: 100;
display: none;
}
.cnt223 a{
text-decoration: none;
}
.popup{
display: none;
z-index: 101;
}
.cnt223{
width: 1000px;
height: 100%;
background: #f3f3f3;
position: absolute;
z-index: 103;
padding: 15px 35px;
border-radius: 5px;
box-shadow: 0 2px 5px #000;
}
.cnt223 p{
clear: both;
    color: #555555;
    /* text-align: justify; */
    font-size: 20px;
    font-family: sans-serif;
}
.cnt223 p a{
color: #d91900;
font-weight: bold;
}
.cnt223 .x{
float: right;
height: 35px;
left: 22px;
position: absolute;
top: -25px;
width: 34px;
}
.cnt223 .x:hover{
cursor: pointer;
}
</style>
<script type='text/javascript'>
$(function(){
var overlay = $('<div id="overlay"></div>');
overlay.show();
overlay.appendTo(document.body);
$('.popup').show();
$('.close').click(function(){
$('.popup').hide();
overlay.appendTo(document.body).remove();
return false;
});


$('.x').click(function(){
$('.popup').hide();
overlay.appendTo(document.body).remove();
return false;
});
});
</script>

<div class='popup'>
<div class='cnt223'>
<h1>Hi, Nina!</h1>
<br/>
<p>
<img src="https://i.ibb.co/JpS1LY6/60800045-295248654745616-3537788720906240000-n.jpg" alt="anoto" style="width:85%;height:85%;margin: auto">
<br/>
<a href='' class='close'>Click Here</a>
<br/>
</p>
</div>
</div>

{% if theme.featured_items > 0 %}
  {% get products from products.all limit:theme.featured_items order:theme.featured_order %}
    {% if products != blank %}
      <div class="product-list">
        {% for product in products %}
          {% assign product_status = '' %}
          {% case product.status %}
            {% when 'active' %}
              {% if product.on_sale %}{% assign product_status = 'On sale' %}{% endif %}
            {% when 'sold-out' %}
              {% assign product_status = 'Sold out' %}
            {% when 'coming-soon' %}
              {% assign product_status = 'Coming soon' %}
          {% endcase %}
          <a class="product-list-item {{ theme.show_overlay }}" href="{{ product.url }}" title="View {{ product.name | escape }}">
            <div class="product-list-item-container">
              <figure class="product-list-image-container">
                <img alt="Image of {{ product.name | escape }}" class="fade-in product-list-image {% if product.image.height > product.image.width %}image-tall{% elsif product.image.height < product.image.width %}image-wide{% else %}image-square{% endif %}" src="{{ product.image | product_image_url | constrain: 1000, 1000 }}">
              </figure>
            </div>
            <div class="product-list-item-info">
              <div class="product-list-item-background"></div>
              <div class="product-list-item-info-headers">
                {% if product_status != blank %}<div class="product-list-item-status">{{ product_status }}</div>{% endif %}
                <div class="product-list-item-name">{{ product.name }}</div>
                <div class="product-list-item-price">{{ product.default_price | money: theme.money_format }}</div>
              </div>
            </div>
          </a>
        {% endfor %}
      </div>
    {% else %}
      <div class="empty-products centered-message">No products found.</div>
    {% endif %}
  {% endget %}
{% endif %}