Add og_image, code formating.

iamlostshe · Dec 18, 2024 · 5a1ca46 · 5a1ca46
1 parent bc9138b
commit 5a1ca46
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 30 deletions.
diff --git a/README.md b/README.md
@@ -1,2 +1,3 @@
 # chemistry
-Проект создан для практики HTML, CSS, JS. Думаю прогресс уже чувствуется)
+
+Проект создан для практики HTML, CSS, JS.
diff --git a/arrow.svg b/arrow.svg
diff --git a/images/og_image.png b/images/og_image.png
diff --git a/index.html b/index.html
@@ -1,35 +1,39 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Мельчиков Иван | Минеральные фосфорные удобрения</title>
+    <title>Минеральные фосфорные удобрения | Мельчиков Иван | Школьный проект</title>
     <link rel="stylesheet" href="style.css">
-
+    <meta property="og:title" content="Минеральные фосфорные удобрения">
+    <meta property="og:type" content="article">
+    <meta property="og:image" content="images/og_image.png">
+
 </head>
+
 <body>
     <div class="substrat_title">
         <h1>Минеральные фосфорные удобрения:</h1>
     </div>
 
     <div class="substrat">
-        
+
         <div class="dropdown">
             <button onclick="myFunction1()" class="dropbtn">
                 <div class="hide">
-                    <svg width="35" height="" viewBox="0 0 3117 1851" fill="none" xmlns="http://www.w3.org/2000/svg">
-                        <path d="M225.5 225.5L1564.5 1625.5L2892 225.5" stroke="white" stroke-width="450" stroke-linecap="round" stroke-linejoin="round"/>
-                    </svg>                
+                    <img alt="🠷" src="arrow.svg">
                 </div>
 
             </button>
-              <div id="myDropdown1" class="dropdown-content">
+            <div id="myDropdown1" class="dropdown-content">
                 <p>
                     <strong>Фосфор</strong> является важным элементом для развития растений.
                 </p>
                 <p>
-                    Он контролирует обменные процессы, способствуют росту корневой системы и повышают урожайность. 
-                    Избыток <strong>фосфора</strong> в почве не причиняет вреда растениям, так как они усваивают его в необходимом количестве.
+                    Он контролирует обменные процессы, способствуют росту корневой системы и повышают урожайность.
+                    Избыток <strong>фосфора</strong> в почве не причиняет вреда растениям, так как они усваивают его в
+                    необходимом количестве.
                 </p>
                 <p>
                     Признаки недостатка <strong>фосфора</strong>:
@@ -44,24 +48,22 @@ <h1>Минеральные фосфорные удобрения:</h1>
                     • Деформация листьев.
                 </p>
                 <p>
-                    <strong>Фосфорные</strong> удобрения рекомендуется вносить осенью под перекопку. 
+                    <strong>Фосфорные</strong> удобрения рекомендуется вносить осенью под перекопку.
                 </p>
                 <img src="images/image_1.jpg" alt="Фосфорные удобрения, красивая фотография">
-              </div>
             </div>
+        </div>
         <h3 id="myDropdown-text1">Свойства</h3>
     </div>
 
     <div class="substrat">
         <div class="dropdown">
             <button onclick="myFunction2()" class="dropbtn">
                 <div class="hide">
-                    <svg width="35" height="" viewBox="0 0 3117 1851" fill="none" xmlns="http://www.w3.org/2000/svg">
-                        <path d="M225.5 225.5L1564.5 1625.5L2892 225.5" stroke="white" stroke-width="450" stroke-linecap="round" stroke-linejoin="round"/>
-                    </svg>                
+                    <img alt="🠷" src="arrow.svg">
                 </div>
             </button>
-              <div id="myDropdown2" class="dropdown-content">
+            <div id="myDropdown2" class="dropdown-content">
                 <p>
                     <strong>1. Суперфосфат простой</strong>
                 </p>
@@ -84,20 +86,18 @@ <h3 id="myDropdown-text1">Свойства</h3>
                 </p>
                 <img src="images/image_3.jpg" alt="Фосфорные удобрения, красивая фотография">
             </div>
-            </div>
+        </div>
         <h3 id="myDropdown-text2">Водорастворимые фосфаты</h3>
     </div>
 
     <div class="substrat">
         <div class="dropdown">
             <button onclick="myFunction3()" class="dropbtn">
                 <div class="hide">
-                    <svg width="35" height="" viewBox="0 0 3117 1851" fill="none" xmlns="http://www.w3.org/2000/svg">
-                        <path d="M225.5 225.5L1564.5 1625.5L2892 225.5" stroke="white" stroke-width="450" stroke-linecap="round" stroke-linejoin="round"/>
-                    </svg>                
+                    <img alt="🠷" src="arrow.svg">
                 </div>
             </button>
-              <div id="myDropdown3" class="dropdown-content">
+            <div id="myDropdown3" class="dropdown-content">
                 <p>
                     <strong>1. Преципитат</strong>
                 </p>
@@ -126,24 +126,22 @@ <h3 id="myDropdown-text2">Водорастворимые фосфаты</h3>
                     <strong>5. Плавленный фосфат магния</strong>
                 </p>
                 <p>
-                20% P₂O₅, 12% MgO
+                    20% P₂O₅, 12% MgO
                 </p>
                 <img src="images/image_2.jpg" alt="Фосфорные удобрения, красивая фотография">
             </div>
-            </div>
+        </div>
         <h3 id="myDropdown-text3">Фосфаты нерастворимые в воде</h3>
     </div>
 
     <div class="substrat">
         <div class="dropdown">
             <button onclick="myFunction4()" class="dropbtn">
                 <div class="hide">
-                    <svg width="35" height="" viewBox="0 0 3117 1851" fill="none" xmlns="http://www.w3.org/2000/svg">
-                        <path d="M225.5 225.5L1564.5 1625.5L2892 225.5" stroke="white" stroke-width="450" stroke-linecap="round" stroke-linejoin="round"/>
-                    </svg>                
+                    <img alt="🠷" src="arrow.svg">
                 </div>
             </button>
-              <div id="myDropdown4" class="dropdown-content">
+            <div id="myDropdown4" class="dropdown-content">
                 <p>
                     <strong>1. Фосфорная мука</strong>
                 </p>
@@ -166,12 +164,13 @@ <h3 id="myDropdown-text3">Фосфаты нерастворимые в воде<
                     Fe₃(PO₄)₂8H₂O - 28% P₂O₅
                 </p>
                 <img src="images/image_4.jpg" alt="Фосфорные удобрения, красивая фотография">
-              </div>
             </div>
+        </div>
         <h3 id="myDropdown-text4">Фосфаты нерастворимые в воде и слабых кислотах</h3>
     </div>
     <p>Разработчик - Мельчиков Иван, тестовая версия</p>
 
     <script src="script.js"></script>
 </body>
-</html>
+
+</html>
diff --git a/style.css b/style.css
@@ -2,47 +2,56 @@ body {
     background-color: rgb(31, 31, 31);
 
 }
+
 img {
     width: 100%;
     border-radius: 10px;
 }
+
 p {
     font-family: Arial, Helvetica, sans-serif;
     color: rgb(255, 255, 255);
 }
+
 h1 {
     padding-left: 4%;
     font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
     color: white;
 }
+
 h3 {
     padding-left: 3%;
     padding-right: 20%;
     font-family: Arial, Helvetica, sans-serif;
     color: white;
     display: flex;
 }
+
 .substrat {
     background-color: rgb(50, 50, 50);
     padding: 5px;
     margin: 4%;
     border-radius: 10px;
     display: flex;
 }
+
 .hide {
     background-color: rgb(31, 31, 31);
     padding: 5px;
     border-radius: 10px;
 }
+
 button {
     background: transparent;
     border: none !important;
     font-size:0;
 }
+
 .dropdown {
     position: relative;
     display: flex;
 }
+
 .dropdown-content {
     display: none;
     padding-left: 3%;
@@ -54,6 +63,7 @@ button {
     color: white;
     border-radius: 10px;
 }
+
 .show {display: block;}
 
 @media (min-width: 0px) {
@@ -65,7 +75,6 @@ button {
     }
 }
 
-
 @media (min-width: 900px) {
     .show-text {display: block;}
     .dropdown-content {