fix some css

Maryna-511750 · Oct 22, 2023 · 83b4e35 · 83b4e35
1 parent ac49fab
commit 83b4e35
Show file tree

Hide file tree

Showing 20 changed files with 484 additions and 571 deletions.
diff --git a/css/global.css b/css/global.css
@@ -1,8 +1,8 @@
 @import url('https://fonts.googleapis.com/css2?family=Jura:wght@600&family=Sofia+Sans:wght@200&family=Vollkorn+SC&display=swap');
 /*
-    font-family: 'Jura', sans-serif;
-    font-family: 'Sofia Sans', sans-serif;
-    font-family: 'Vollkorn SC', serif;
+font-family: 'Jura', sans-serif;
+font-family: 'Sofia Sans', sans-serif;
+font-family: 'Vollkorn SC', serif;
 */
 
 * {
@@ -33,8 +33,9 @@ img {
 }
 
 .container {
+    width: 100%;
     max-width: 1200px;
-    margin:auto;
+    margin: auto;
     padding: 30px;
 }
 

diff --git a/css/index.about-me.css b/css/index.about-me.css
@@ -1,4 +1,4 @@
-#about-me h2{
+#about-me h2 {
     margin: 20px auto;
 }
 
@@ -14,19 +14,17 @@
 }
 
 .about-me-text {
-
     padding: 30px;
 }
 
 @media (min-width: 774px) {
-
     .about-me-content {
         display: flex;
         flex-direction: row;
         justify-content: space-between;
     }
 
-    .about-me-photo{
+    .about-me-photo {
         flex: 1;
     }
     .about-me-text {
@@ -35,10 +33,10 @@
 }
 
 @media (min-width: 991px) {
-    .about-me-photo{
+    .about-me-photo {
         flex: 1;
     }
     .about-me-text {
         flex: 2;
     }
-}
+}
diff --git a/css/index.cases.css b/css/index.cases.css
@@ -2,7 +2,7 @@
     padding: 18px;
 }
 
-.cases-content{
+.cases-content {
     display: grid;
     grid-template-columns: auto auto;
     gap: 10px;
@@ -11,8 +11,7 @@
 }
 
 .cases-item-big {
-    /*grid-column: 1 / 3;*/
-    grid-row: 1 / span 2;
+    grid-column: 1 / span 2;
 }
 
 .cases-item .cases-paragraph-hidden {
@@ -21,11 +20,4 @@
 
 .cases-item-big .cases-paragraph-hidden {
     display: block;
-}
-
-/*@media (min-width: 774px) {
-    .cases-item-big {
-        grid-column: 1 / 1;
-        grid-row: 1 / span 2;
-    }
-}*/
+} 
diff --git a/css/index.contacts.css b/css/index.contacts.css
@@ -1,61 +1,63 @@
-
 .contacts-form,
 .contacts-text {
-    margin: 24px;
-    text-align: left;
+  margin: 24px;
+  text-align: left;
 }
 
 .contacts-text p,
 .contacts-text h2,
 .contacts-text h3 {
-    margin-bottom: 18px;
+  margin-bottom: 18px;
 }
 
-.contacts-form input[type=text], 
+.contacts-form input[type=text],
 .contacts-form input[type=tel],
 .contacts-form input[type=email],
 .contacts-form textarea {
-    width: 100%;
-    padding: 12px;
-    resize: vertical;
-    margin-bottom: 24px;
-    border: none;
-    border-bottom: 2px solid var(--text-color);
-    background-color: inherit;
+  width: 100%;
+  padding: 12px;
+  resize: vertical;
+  margin-bottom: 24px;
+  border: none;
+  border-bottom: 2px solid var(--text-color);
+  background-color: inherit;
 }
 
-.contacts-form input[type=text]:focus, 
-.contacts-form input[type=tel]:focus,
-.contacts-form input[type=email]:focus,
-.contacts-form textarea:focus {
-    border: none;
-    border-bottom: 2px solid var(--color-warm);
-    background-color: inherit;
-    color: var(--text-color);
+.contacts-form input[type=text]:valid,
+.contacts-form input[type=tel]:valid,
+.contacts-form input[type=email]:valid,
+.contacts-form textarea:valid {
+  border: none;
+  border-bottom: 2px solid var(--color-warm);
+  background-color: inherit;
+  color: var(--text-color);
 }
 
 .contacts-form input[type=submit] {
-    background-color: inherit;
-    font-family: var(--font-sofia);
-    position: relative;
-    border: 2px solid var(--text-color);
-    color: var(--text-color);
-    padding: 0.75rem;
+  background-color: inherit;
+  font-family: var(--font-sofia);
+  position: relative;
+  border: 2px solid var(--text-color);
+  color: var(--text-color);
+  padding: 0.75rem;
 }
 
+.contacts-form input[type=submit]:hover {
+  border: 2px solid var(--color-warm);
+  color: var(--color-warm);
+}
 
 @media (min-width: 774px) {
-
-    #contacts {
-        display: flex;
-        flex-direction: row;
-        justify-content: space-between;
-    }
-
-    .contacts-form{
-        flex: 1;
-    }
-    .contacts-text {
-        flex: 1;
-    }
-}
+  #contacts {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+  }
+
+  .contacts-form {
+    flex: 1;
+  }
+  .contacts-text {
+    flex: 1;
+  }
+}
diff --git a/css/index.footer.css b/css/index.footer.css
@@ -3,67 +3,63 @@
 .footer-menu-left,
 .footer-menu-right,
 .social_media {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;  
-}
-
-.social_media {
-    flex-direction: row;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
 }
 
-.footer_text,
 .social_media {
-    align-items: center;
+  flex-direction: row;
 }
 
 .footer_menu {
-    display: flex;
-    flex-direction: column;
-    max-width: 100%;
-    margin: 30px auto;
+  display: flex;
+  flex-direction: column;
+  max-width: 100%;
+  margin: 30px auto;
 }
 
 .footer_menu a {
-    font-size: 22px;
-    color: var(--text-color);
-    padding: 15px;
-    margin: auto;
+  font-size: 22px;
+  color: var(--text-color);
+  padding: 15px;
+  margin: auto;
 }
 
 .footer_menu a:hover {
-    color: var(--color-warm);
-    border-bottom: 2px solid var(--color-warm);
+  color: var(--color-warm);
+  border-bottom: 2px solid var(--color-warm);
 }
 
 @media (min-width: 774px) {
+  #footer,
+  .footer_menu {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+  }
 
-    #footer,
-    .footer_menu {
-        display: flex;
-        flex-direction: row;
-        justify-content: space-between;
-    }
+  .footer_menu {
+    justify-content: center;
+    align-items: center;
+  }
 
-    .footer_menu{
-        justify-content: center;
-        align-items: center;
-    }
+  .footer_text {
+    height: 300px;
+    align-items: flex-start;
+    flex: 1;
+  }
 
-    .footer_text {
-        height: 300px;
-        align-items: flex-start;
-        flex:1
-    }
+  .footer_text h2 {
+    text-align: left;
+  }
 
-    .footer_text h2 {
-        text-align: left;
-    }
+  .footer_menu {
+    flex: 3;
+  }
 
-    .footer_menu {
-        flex: 3;
-    }
-    .social_media {
-        flex: 1;
-    }
-}
+  .social_media {
+    flex: 1;
+  }
+}