Клипарты

Я качаю векторные клипарты, необходимые мне для работы на данный момент.
И так как я не плачу за них выкладываю ссылку на автора.

Designed by Freepik

Подтверждение адреса

Пришел долгожданный конверт от гугл. Счастье!

PHP inside HTML

Дабы второй раз не попасть так же и не потратить уйму времени на то чтобы найти
"Почему не работает!!!"

PHP скрипты не будут отрабатываться в HTML документа. По умолчанию интерпретатором PHP обрабатываются два типа файлов

*.php
*.phtml


Любые вставки со скриптами PHP комментируются автоматически.

Выглядеть это будет так:

Другими словами, чтобы PHP скрипт работал внутри сайта, необходим изменить расширение документа .html на .php. Я использую PHP скрипт для отправки данных из формы заявки на почту. Переделывать документ в PHP желания нет. Поэтому нашел другой способ.Указать интерпретатору, чтобы он обрабатывал так же документы HTML.
Делается это следующим образом:
В корне сайта создаётся файл .htaccess
В него добавляется строка

AddType application/x-httpd-php .ext1 .php3 .html

После этого все рабоает

Ободка текста CSS

Чтобы сделать обводку, нужно сделать тени для текста со всех сторон.

text-shadow: 1px 1px 0 black,
             1px -1px 0 black,
            -1px 1px 0 black,
            -1px -1px 0 black;

Получается вот так:

Umit Can Turker's blog

Блог нашего преподавателя Umit Can Turker.
Собраны интересные и полезные статьи.
http://umitcanturker.com/

Верстка под различные размеры экранов

Инструменты для создания адаптивного дизайна. Теги @media и @import позволяют использовать отдельные менять параметры CSS для элемента в зависимости от размера экрана. Чтоб было возможно создать сайт, который будет адаптироваться под размеры экрана - от мобильного устройства до большого экрана.

@media all and (min-width:500px) { … }

Вместо точек вносятся селекторы CSS, которые специально изменены под размер такого экрана.

Более подробнее можно узнать здесь.

Простое меню на CSS

Меню в кортом при наведении на один из пунктов он подчеркивается снизу, а другие элементы меню становятся размытыми.

HTML:

<nav>
<a href="#program-link">ЦЕЛЬ</a>
<a href="#skills-link">РЕЗУЛЬТАТ</a>
<a href="#technics-link">ТЕХНИКИ</a>
<a href="#stages-link">ЭТАПЫ</a>
</nav>

CSS:

nav
{
/*left: 364px;*/
/*position: absolute;*/
float: right
}
nav {
    /*background: none repeat scroll 0 0 #202033;*/
    /* box-shadow: 0 3px 5px #555555;*/
    position: relative;
    text-align: center;
}
nav:hover a {
    color: transparent;
    text-shadow: 0 0 3px #666666;
}
nav a {
color: #B6B2B2;
display: inline-block;
font-family: tahoma;
font-size: 1.87em;
height: 54px;
line-height: 56px;
text-decoration: none;
transition: all 0.3s ease 0s;
width: 132px;
font-family: 'ubuntu condensed';
}
nav a:hover {
    border-bottom: 5px solid #91C9C0;
    color: #91C9C0;
    text-shadow: none;
}
@media screen and (max-width: 620px) {
nav a {
width: 49%;
}
}
@media screen and (max-width: 300px) {
nav a {
width: 100%;
}
}