alirezatayebinejad
diff --git a/‎design 3/images/about.jpg‎
60.2 KB b/‎design 3/images/about.jpg‎
60.2 KB
diff --git a/‎design 3/images/outline.png‎
202 Bytes b/‎design 3/images/outline.png‎
202 Bytes
diff --git a/‎design 3/index.html‎
Lines changed: 39 additions & 2 deletions b/‎design 3/index.html‎
Lines changed: 39 additions & 2 deletions
diff --git a/‎design 3/styles.css‎
Lines changed: 62 additions & 17 deletions b/‎design 3/styles.css‎
Lines changed: 62 additions & 17 deletions
@@ -5,12 +5,16 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="stylesheet" href="styles.css" />
+    <script
+      src="https://kit.fontawesome.com/0e53af926d.js"
+      crossorigin="anonymous"
+    ></script>
+
     <title>design 3</title>
   </head>
   <body>
-
     <!-- header -->
-    
+
     <header>
       <div class="header-container">
         <h1>VIBRACODE</h1>
@@ -36,5 +40,38 @@ <h2>Building Websites and Mobile Apps For Boosting Your Business</h2>
         <button>EXPLORE</button>
       </div>
     </section>
+
+    <!-- about -->
+
+    <section class="about">
+      <h2 class="about-text">ABOUT US</h2>
+      <div class="about-content">
+        <div class="picture">
+          <img src="images/about.jpg" alt="" />
+        </div>
+        <div class="about-right">
+          <h2>SPECIALIZED IN WEB DESIGN AND DEVELOPMENT</h2>
+          <hr />
+          <p>
+            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Debitis
+            temporibus nisi accusamus deleniti deserunt repellat rerum provident
+            tenetur illo blanditiis tempora cumque qui eligendi minus, inventore
+            minima maxime eaque ea! Lorem ipsum dolor sit amet consectetur
+            adipisicing elit. Suscipit itaque deleniti perspiciatis 
+          </p>
+          <ul>
+            <li>providing you solutions for all your software needs</li>
+            <li>mobile apps development</li>
+            <li>wordpress development made easy</li>
+          </ul>
+          <div class="socials">
+            <a href=""> <i class="fa-brands fa-instagram"></i></a>
+            <a href=""><i class="fa-brands fa-facebook"></i></a>
+            <a href=""><i class="fa-brands fa-twitter"></i></a>
+            <a href=""><i class="fa-brands fa-youtube"></i></a>
+          </div>
+        </div>
+      </div>
+    </section>
   </body>
 </html>
@@ -58,32 +58,77 @@
   border-bottom: 8px solid #d11414;
 }
 .showcase .showcase-content {
-    background:  rgba(256, 256, 256,0.3);
-backdrop-filter: blur(5px);
-   color: rgb(0, 0, 0);
-   border-radius: 3px;
+  background: rgba(256, 256, 256, 0.3);
+  backdrop-filter: blur(5px);
+  color: rgb(0, 0, 0);
+  border-radius: 3px;
   text-align: center;
   width: 50%;
   position: absolute;
   top: 30%;
   left: 25%;
   right: 25%;
-  
 }
 .showcase .showcase-content h2,
 p,
 button {
   margin: 20px;
 }
-.showcase .showcase-content button{
-    background-color: transparent;
-    border:1px solid black;
-    padding: 10px 25px;
-    cursor: pointer;
-}
-.showcase .showcase-content button:hover{
-    background-color: #d11414;
-    color: white;
-    border: 1px solid #d11414;
-    transition: 0.3s;
-}
+.showcase .showcase-content button {
+  background-color: transparent;
+  border: 1px solid black;
+  padding: 10px 25px;
+  cursor: pointer;
+}
+.showcase .showcase-content button:hover {
+  background-color: #d11414;
+  color: white;
+  border: 1px solid #d11414;
+  transition: 0.3s;
+}
+
+/* about */
+
+.about {
+  height: 100vh;
+  overflow: none;
+}
+.about .about-text {
+  text-align: center;
+  padding: 70px 0 50px 0;
+}
+.about .about-content {
+  display: flex;
+  width: 70%;
+  margin: auto;
+}
+
+.about .about-content .picture img {
+  width: 400px;
+  height: 500px;
+  object-fit: cover;
+}
+.about .about-content .about-right {
+  color: rgb(65, 65, 65);
+  margin-left: 100px;
+}
+.about .about-content .about-right {
+  color: rgb(65, 65, 65);
+  margin-left: 100px;
+}
+.about .about-content .about-right li {
+  list-style-position: inside;
+}
+.about .about-content .about-right li::marker {
+  color: #d11414;
+}
+.about .about-content .about-right .socials i {
+  padding: 30px 5px;
+  color: black;
+}
+.about .about-content .about-right hr {
+  height: 5px;
+  background-color: #d11414;
+  border: none;
+  width: 30%;
+}