study-second#project-styling

skifsky · Sep 1, 2024 · cdca0b3 · cdca0b3
1 parent e0f2765
commit cdca0b3
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 11 deletions.
diff --git a/contents/Tribute_Page/styles.css b/contents/Tribute_Page/styles.css
@@ -1,15 +1,16 @@
 /* GENERAL SELECTORS */
 
 html {
-    background-color: whitesmoke;
+    background-color: #F0F0F5; /* Немного более тёмный оттенок для контраста */
 }
 
 body {
-    background-color: rgb(235, 235, 235);
+    background-color: #FFFFFF; /* Белый цвет для более чистого вида */
     font-family: 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
     margin: 2% 1%;
     border: 2px solid transparent;
     border-radius: 10px;
+    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); /* Лёгкая тень вокруг страницы */
 }
 
 /* TITLE SELECTORS */
@@ -35,6 +36,9 @@ body {
     flex-direction: row;
     flex-wrap: wrap;
     justify-content: center;
+    border: 2px solid transparent;
+    border-radius: 40px;
+    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Тень вокруг изображения */
 }
 
 .image figcaption {
@@ -55,6 +59,8 @@ body {
 h3 {
     text-align: center;
     margin: 3rem auto;
+    font-weight: 600;
+    font-size: 1.25rem;
 }
 
 .biography {
@@ -63,28 +69,32 @@ h3 {
 
 ul > li {
     margin: 1rem auto;
-    line-height: 1.5;
+    line-height: 1.75;
 }
 
 blockquote {
     font-style: italic;
     margin: 2rem auto;
+    font-size: 1.2rem;
+    color: #555;
 }
 
 /* REFERNCE SELECTOR */
 
 a {
-    color: whitesmoke;
+    color: #0077FF; 
+    text-decoration: none;
 }
 
-a:active {
-    color:lightsteelblue;
+a:visited {
+    color: #0055CC;
 }
 
 a:hover {
-    color: lightsteelblue;
+    color: #33A1FF;
+    text-decoration: underline; 
 }
 
-a:visited {
-    color: lightsteelblue;
-}
+a:active {
+    color: #003399;
+}
diff --git a/index.html b/index.html
@@ -1,5 +1,4 @@
 <!DOCTYPE html>
-
 <html lang="ru">
     <head>
         <meta charset="utf-8">

diff --git a/styles.css b/styles.css
@@ -9,6 +9,7 @@ body {
 header img {
     display: block;
     margin: 0 auto;
+    min-width: 10%;
     width: 10%;
     border: 2px solid bisque;
 }