Сайт-визитка . Очень подробно обо всем + скрипты

Группа в вк

https://vk.com/codegeng

Сайт-визитка.

План:
1) Покупаем домен и хост

2) Выбираем дизайн нашей визитки.
3) Полный REDESIGN вашего шаблона.
4) Ставим в интернут ваш СУПИР УЛЬТРА МЕХА САЙТ.

1. покупаем домен и хост
Заходим СЮДА , в поиске вводим желаемое имя вашего сайта , лучше всего выбирать домен .xyz потому как он дешевле . Оплатили.​

DNS-Сервера

ns1.beget.com
ns2.beget.com
ns1.beget.pro
ns2.beget.pro

Заходим СЮДА , после регистрации в "Панели управления" заходим в "Управление доменами и поддоменами" , создаем там свой домен который купили на Reg.ru . После идем в "Сайты" , и смотрим что б там было все подключено как на скриншоте

скрин

2. выбираем дизайн нашей визитки
Заходим в ЭТУ группу (не реклама) и ищем себе там подходящий дизайн.
(для редактирования сайта , нам понадобиться Visual Studio .)
3. полный REDESIGN сайта
Итак , открываем Index.html (с помощью Visual Studia) в папке вашего ранее скаченного сайта .
Видим много чего интересного .
1) Меняем текст сайта
Нажимаем CTRL+F и вводим строчки с сайта которые вы хотите изменить.
Можно начать с <title> (название вкладки) Изменяем название .

*плюшка*

*вставляем его сразу после <title> </title>

Для анимации title 1

<script>

var tit = document.title;
var c = 0;
function writetitle() {
document.title = tit.substring(0, c);
if (c == tit.length) {
c = 0; setTimeout("writetitle()", 3000)
}
else {
c++;
setTimeout("writetitle()", 400)
}
}
writetitle()
</script>

Код

<script>



var tit = document.title;

var c = 0;

function writetitle() {

document.title = tit.substring(0, c);

if (c == tit.length) {

c = 0; setTimeout("writetitle()", 3000)

}

else {

c++;

setTimeout("writetitle()", 400)

}

}

writetitle()

</script>

Для анимации title 2

<script language="javascript">
var rev = "fwd";
function titlebar(val){
var msg = "название";
var res = " ";
var speed = 100;
var pos = val;
msg = " |-"+msg+"-|";
var le = msg.length;
if(rev == "fwd"){
if(pos < le){
pos = pos+1;
scroll = msg.substr(0,pos);
document.title = scroll;
timer = window.setTimeout("titlebar("+pos+")",speed);
}
else {
rev = "bwd";
timer = window.setTimeout("titlebar("+pos+")",speed);
}
}
else {
if(pos > 0) {
pos = pos-1;
var ale = le-pos;
scrol = msg.substr(ale,le);
document.title = scrol;
timer = window.setTimeout("titlebar("+pos+")",speed);
}
else {
rev = "fwd";
timer = window.setTimeout("titlebar("+pos+")",speed);
}
}
}
titlebar(0);
</script>

Код

<script language="javascript">

var rev = "fwd";

function titlebar(val){

var msg = "название";

var res = " ";

var speed = 100;

var pos = val;

msg = " |-"+msg+"-|";

var le = msg.length;

if(rev == "fwd"){

if(pos < le){

pos = pos+1;

scroll = msg.substr(0,pos);

document.title = scroll;

timer = window.setTimeout("titlebar("+pos+")",speed);

}

else {

rev = "bwd";

timer = window.setTimeout("titlebar("+pos+")",speed);

}

}

else {

if(pos > 0) {

pos = pos-1;

var ale = le-pos;

scrol = msg.substr(ale,le);

document.title = scrol;

timer = window.setTimeout("titlebar("+pos+")",speed);

}

else {

rev = "fwd";

timer = window.setTimeout("titlebar("+pos+")",speed);

}

}

}

titlebar(0);

</script>

2) Изменяем видео или gif на заднем фоне
Во многих случаях нам придется всего лишь заменить одно видео на другое (с одним и тем же названием, либо поменять его в коде) Однако , иногда это не так , и приходиться искать ссылку на видео к коде . Это я думаю сделаем каждый ....
3) Использование Animated.css
Что же это такое ? Небольшой скрипт для анимации вашего текста на сайте
1.Скачиваем его с офф сайта (там же можно посмотреть все анимации).
2. Кидаем скрипт в папку с вашим сайтом , лучше всего кидать туда где все остальные скрипты.
3. Заходим в index и подключаем библиотеку
Код:

<link rel="stylesheet" href="css/animate.min.css">

Код

<link rel="stylesheet" href="css/animate.min.css">

4. Применяем его к тексту (слово "flesh" заменяем на любое другое , на офф сайте смотрим)
Код:

<h1 class="animated flash">Текст</h1>

Код

<h1 class="animated flash">Текст</h1>

4) Ставим картинку во вкладку
Говорить нечего , просто картинка

Код:

<link rel="shortcut icon" href="название с типом файла">

Код

<link rel="shortcut icon" href="название с типом файла">

5) Изменяем курсор на сайте
Я выбрал рок курсор (у меня и так он всегда стоит )0

1. Кидаем курсор по такому пути (ну или измените) image/cursor/
2. Заходим в index и после библиотек вставляем код .
Код:

<style>

@font-face{font-family:Pompadur;src:url(fonts/font.eot);src:local(pompadur),url(fonts/font.ttf);}h1{font-family:Pompadur,'Comic Sans MS',cursive;}
@font-face{font-family:Bazy;src:url(fonts/bazy.eot);src:local(bazy),url(fonts/bazy.ttf);}
body, a, a:link{cursor:url(image/cursor/Rock.cur), default;} a:hover {cursor:url(image/cursor/Rock.cur),pointer;}
</style>

Код

<style>



@font-face{font-family:Pompadur;src:url(fonts/font.eot);src:local(pompadur),url(fonts/font.ttf);}h1{font-family:Pompadur,'Comic Sans MS',cursive;}

@font-face{font-family:Bazy;src:url(fonts/bazy.eot);src:local(bazy),url(fonts/bazy.ttf);}

body, a, a:link{cursor:url(image/cursor/Rock.cur), default;} a:hover {cursor:url(image/cursor/Rock.cur),pointer;}

</style>

5) Добавляем музыку на ваш сайт если её там нет.
Создаем папку audio в папке с сайтом , туда кидаете ваш аудио
После пишем следующий код :
Код:

<script>

var backgroundAudio = document.getElementById("bg_music");
backgroundAudio.volume = 0.2;
</script>
<source type="audio/mpeg" src="название.mp3">
</audio>
<audio autoplay="1" loop="1"><source src="audio/audio.mp3" type="audio/mp3"></audio>

Код

<script>



var backgroundAudio = document.getElementById("bg_music");

backgroundAudio.volume = 0.2;

</script>

<source type="audio/mpeg" src="название.mp3">

</audio>

<audio autoplay="1" loop="1"><source src="audio/audio.mp3" type="audio/mp3"></audio>

5. СТАВИМ ВАШ САЙТ
Для этого скачиваем FileZilla дальше устанавливаем.
Для просмотра ip заходим на страницу управления сайтом в beget , и там есть тех инфа.
Логин и пароль вводим от аккаунта beget , хост не трогаем
После заходим в папку со своим сайтом (в проводнике) , public , туда кидаем свой сайт.
Ждем ~20 пока все привяжется и обновиться
ГОТОВО