maxim

padding: ..px; //чтобы дать пространство всем краям
padding-left: ..px; //чтобы дать пространство левому краю
padding-right: ..px; //чтобы дать пространство правому краю
padding-bottom: ..px; //чтобы дать пространство нижнему краю

у inputов border: none, а чтобы сделать текст, как ты просишь:

//к примеру 
<div class="block__input">
<h1>Пример</h1>
<input>
</div>

.block__input {
display: block;
}

и сообщение на инглише не massage а message : )

.element:focus {
outline: none;
}

//Нужно сделать глобальную переменную
let num = 0; //предположим ноль 

element_first.addEventListener('click',  function() {
num = 1;
});
element_second.addEventListener('click',  function() {
num = 2;
});
// ну и так далее

Или что то не то ?

beget.com
Один месяц бесплатный.

<?php if($product['skidka'] == 0 ) : ?>
//верстка скидки
<?php else : ?>

<?php endif; ?>

Это возможно сделать на js:

element.addEventListener('mouseenter', function() {
element.style.animation = "//название, длительность в секундах и т.д";
});

Спасибо всем ребята : )
Я выбрал iskra JS, так как js уже с ним прогаю.
Закажу вот эту штукенцию - https://amperka.ru/product/iskra-js
И так же простите за тупость вопроса, так как ничего не понимал, а программировать что-то уже хотелось : \/ )

#ul_menu {
display:none;
}
#hover1 {
display:none;
}
#hover1_content {
display: none;
}

let main_menu = document.getElementById("menu"); //главная кнопка
let ul_menu = document.getElementById("ul_menu"); //список
let hover_menu1 = document.getElementById("hover1"); //к примеру какойто из них
hover_menu1_content = document.getElementById("hover1_content"); //контент

main_menu.addEventListener("mouseenter", function() {
ul_menu.style.display = "block";
});
hover_menu1.addEventListener("mouseenter", function() {
hover_menu1_content.style.display = "flex";
});

//поправь синтакс ошибки ручками пж

Ну и дальше логично

К примеру

#image {
width:150px;
height: 150px;
transition: all 0.4s ease;
}
#image :hover {
width:250px;
height: 250px;
transition: all 0.4s ease;

}