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;
}

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

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

#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;

}

Сделаю на js:

let login_href = document.getElementById(“login”);
let reg_href = document.getElementBy(“reg”);
let reg_modal = document.getElementBy(“reg_modal”);
let login_modal =  document.getElementBy(“login_modal”);

login_href.addEventListener(“click”, function() {
login_modal.style.display = “block”;
reg_modal.style.display = “none”;
});
//а дальше логично

Тебе нужно дальше дописать или сам сможешь?)

Зачем здесь css?
Напишу пример очень простой:

var tab = document.getElementById(“tab”);
var tab2 = document.getElementById(“tab2”);
var tab3 = document.getElementById(“tab3”);

var content = document.getElementById(“tab_content”);
var content2 = document.getElementById(“tab_content2”);
var content3 = document.getElementById(“tab_content3”);

tab.addEventListener(“click”, function() {
content.style.display = “block”;

content3.style.display = “none”;
content2.style.display = “none”;
}

// и дальше сам

И так с каждым табом. Разве не логично ?)

Не знаю как вы сверстали шаблон без этого знания..)
класс :hover в css вам поможет!

#имя-елемента {
background-color: green;
transition: 0.3s; /*Плавность*/
}
#имя-елемента :hover {
background-color: black;
transition: 0.3s; /*Плавность*/
}

Вот и все!0)