new file: valitovgaziz/html/images/ValitovGaziz/valitovgaziz.jpg

modified:   valitovgaziz/html/index.html
	modified:   valitovgaziz/html/style.css
	new file:   valitovgaziz/html/style/about.css
add photo on flex box css

valitovgaziz/html/index.html

@@ -55,13 +55,13 @@
     <header>
       <h1>Валитов Газиз Камилевич</h1>
       <p>Fullstack-разработчик</p>
-      <img src="" alt="">
+      <img src="" alt="" />
       <div class="contact-info">
         <span id="phone">+7(904)451-34-47</span>
         <span id="email">valitovgaziz@yandex.ru</span>
-        <span id="telegram"
+        <span id="telegram">
-          ><a href="https://t.me/valitovgaziz">telegram</a></span
+          <a href="https://t.me/valitovgaziz">telegram</a>
-        >
+          </span>
         <span id="city">Уфа, Россия</span>
       </div>
       <button id="saveContactBtn" onclick="saveContact()">
@@ -72,17 +72,27 @@
       </button>
     </header>
 
-    <div class="section">
+    <div class="section about">
-      <h2>Обо мне</h2>
+      <div class="about-valitovgaziz-photo-box">
-      <p>
+        <img
-        Опытный Fullstack-разработчик с более чем 7-летним стажем.
+          src="./images/ValitovGaziz/valitovgaziz.jpg"
-        Специализируюсь на создании веб-приложений с использованием современных
+          alt="Valitov Gaziz"
-        технологий. Готов к переезду в Казань, Москву или Санкт-Петербург.
+          id="valitovgaziz-photo-img"
-      </p>
+        />
-      <p>
+      </div>
-        <strong>Девиз:</strong> "Век живи, век учись. Краткость — сестра
+      <div class="about-text">
-        таланта."
+        <h2>Обо мне</h2>
-      </p>
+        <p>
+          Опытный Fullstack-разработчик с более чем 7-летним стажем.
+          Специализируюсь на создании веб-приложений с использованием
+          современных технологий. Готов к переезду в Казань, Москву или
+          Санкт-Петербург.
+        </p>
+        <p>
+          <strong>Девиз:</strong> "Век живи, век учись. Краткость — сестра
+          таланта."
+        </p>
+      </div>
     </div>
 
     <div class="section">

valitovgaziz/html/style.css

@@ -1,5 +1,6 @@
 @import url("saveContactsButtonStyle.css");
 @import url("darkTheme.css");
+@import url("./style/about.css");
 
 :root {
   --primary: #2c3e50;

valitovgaziz/html/style/about.css

@@ -0,0 +1,40 @@
+.about {
+  display: flex;
+  width: inherit;
+  height: auto;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-around;
+}
+
+.about-valitovgaziz-photo-box {
+  max-width: 300px;
+  width: 100%;
+  height: auto;
+  @media (max-width: 768px) {
+    width: 100%;
+  }
+}
+
+.about-valitovgaziz-photo-box img {
+  width: 100%;
+  height: auto;
+  object-fit: cover;
+  border-radius: 1em;
+  -webkit-box-shadow: 4px 4px 8px 9px rgba(34, 60, 80, 0.2);
+  -moz-box-shadow: 4px 4px 8px 9px rgba(34, 60, 80, 0.2);
+  box-shadow: 4px 4px 8px 9px rgba(34, 60, 80, 0.2);
+}
+
+#about-valitovgaziz-photo-img {
+  max-width: 600px;
+  height: auto;
+}
+
+.about-text {
+  max-width: 600px;
+  width: 50%;
+  @media (max-width: 768px) {
+    width: 100%;
+  }
+}