Максим

Прошу прощения, догадался сразу

$dir  = 'mailfile/';
$files = scandir($dir);
foreach ($files as $file) {
    echo '<a href="mailfile/'.$file .'">test</a><br>';
}

Пример в песочнице

document.addEventListener('DOMContentLoaded', function() {
    var li = document.querySelectorAll('li');
    li[Math.floor(Math.random() * li.length)].style.display = 'list-item';
}, false);

P.S. На jQuery, если нужно судя по тегам, практически то же самое:

$(function() {
    var li = $('li');
    li.eq(Math.floor(Math.random() * li.length)).show();
});

Дополнил ваш код ссылка
Чтобы понять, что да как, просто сравните.
p.s. Рекомендую описывать элементы сверху вниз. К примеру, в вашем случае сначала родитель: "card", ниже дочерние: заголовок, цена, список, кнопка
И зачем "item-price" делать списком?

уникальный софт под мак, который ускоряет работу.

скетч же.

почитайте В чем преимущества *nix, linux перед windows (для веб разработчика)? все написанное там актуально и для OSX.
хотя описывать все плюшки у меня руки устанут.

function openbox(className){
    display = document.getElementsByClassName(className).style.display;

    if(display=='none'){
       document.getElementsByClassName(className).style.display='block';
    }else{
       document.getElementsByClassName(className).style.display='none';
    }
}

<a href="#" onclick="openbox(className); return false">Открыть</a>
<div id="className" style="display: none;">Отображаемый блок</div>

но будь аккуратней, возвращаться будут все элементы с данным классом

Пример 1. SVG SMIL

Пример 2. SVG Animation TwinMax

MorphSVGPlugin от GreenSock с примером

.scheme-wrap, .scheme-sign {  vertical-align: middle; }

Пример

js:

$(window).scroll(function(){
  if($(this).scrollTop() > 1){
    $('.nav').addClass('sticky');
  } else {
    $('.nav').removeClass('sticky');
  }
});

Знаете по началу я бы порекомендовал бы верстать без фреймворков. Так вы лучше освоитесь в адаптивной верстке. А потом использовать фреймворки.

Если просто залить контур:

.logo {fill: #ff0000;}

 <path class="logo">

#nav ul { position: relative; }

#nav ul li div.block {
    width: initial;
    ...
    position: absolute;
    left: 0;
    right: 0;
}