HTML та CSS

Це міні-проект HTML, що включає деякі стилі CSS для динамічності.

[

On Read

fb40d38e-43b5-4394-852e-5d80f27861b9-00-2jjuzgcuk9kpw.janeway.replit.dev

](https://fb40d38e-43b5-4394-852e-5d80f27861b9-00-2jjuzgcuk9kpw.janeway.replit.dev/?source=post_page-----6bee8655bb2b--------------------------------)

HomePage (Веб-сторінка 1)

<html>
  <head>
    <title>On Read</title>
  </head>
  <body>
    <h1>Books and Audiobooks as much as you like!</h1>
    <button>SIGN IN</button>
  </body>
</html>

Веб-сторінка 2
<html> <body> <h2>Login</h2> <button>Dive In</button> </body> </html>
Веб-сторінка 3
<html> <body> <h3>Select A Genre</h3> </body> </html>

Ось CSS для кожної з попередніх сторінок:

.ti {   
  background-image: url('Beige Read A Book Motivational Quote Your Story-2.png');     
  background-attachment: fixed;;
  background-size: cover;    
  background-position: center;     
  color: black;     
  font-style: italic;    
  font-family: Georgia;     
  font-size: 80px;     
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);    
  display: flex;    
  align-items: center;    
  justify-content: center;    
  background-repeat: no-repeat;     
  height: 300vh;    
  width: 200vh;     
  text-align: center;    
  flex-direction: column;    
  gap: 5px;   
}   
.link1{    
  text-align: center;    
  font-size: 70px;    
  color: brown    
}         
.login-form {    
  background-image: url('Beige Read A Book Motivational Quote Your Story-3.png');    
  background-attachment: fixed;    
  background-size: cover;    
  background-position: center;     
  text-align: center;     
  display: flex;    
  height: 300vh;     
  flex-direction: column;    
  align-items: center; /* Centers items horizontally */    
  justify-content: center; /* Centers items vertically if needed */    
  width: 200vh; /* Optional: Form width */    
  margin: 0 auto; /* Center form on the page */    
  gap: 20px;   
}      
.login-form input {    
  width: 100%; /* Input fields stretch to the form's width */    
  padding: 10px; /* Adds padding inside the fields */    
  font-size: 16px; /* Increases text size */    
  margin-bottom: 20px;         
}      
.login-form button {    
  width: 50%; /* Button stretches to the form's width */    
  padding: 10px; /* Adds padding inside the button */    
  background-color: #b51a00; /* Button background color */    
  color: white; /* Button text color */    
  border: none; /* Removes border */    
  border-radius: 5px; /* Optional: Rounded corners */    
  cursor: pointer; /* Adds pointer effect on hover */   
}      
.login-form button:hover {    
  background-color: #5c0700;   
}   
.link2 {    
  color: brown;    
  font-size: 60px;    
  text-align: center;   
}   
.genres {    
  font-size: 50px;
}

font-style: italic;  
 font-family: Georgia;  
 color: rosybrown;  
 text-align: center;  
 background-color: lightgray;   
 background-size: cover;  
 width: 220vh;  
 height: 38%;  
 padding: 20px; /* Додає відступи всередині блоку */  
 border-radius: 8px; /* Необов'язково: округлені кути */  
 position: relative; /* Для забезпечення відсутності втручання з абсолютним позиціонуванням */  
}  
.choices {  
 background-color: lightgray;   
 background-size: cover;  
 width: 220vh;  
 height: 150vh;  
 align-items: center;  
 justify-content: center;  
 padding: 20px; /* Додає відступи всередині блоку */  
 border-radius: 8px; /* Необов'язково: округлені кути */  
 position: relative; /* Для забезпечення відсутності втручання з абсолютним позиціонуванням */  
 display: flex;  
 flex-direction: row;  
 gap: 450px;  
}  
.hover-image {  
 transition: transform 0.3s ease, opacity 0.3s ease; /* Плавний ефект при наведенні */  
}  

/* При наведенні */  
.hover-image:hover {  
 transform: scale(1.1); /* Легке збільшення зображення */  
 opacity: 0.8; /* Зменшення прозорості */  
}




Перекладено з: [HTML & CSS](https://medium.com/@Kenzy_Haggag/html-css-6bee8655bb2b)

Leave a Reply