Added indents and containers

Update 1.2 Fixed the position of the elements Fixed bugs
KirillKapteily · Jun 3, 2024 · ff625dd · ff625dd
1 parent 527a8ce
commit ff625dd
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 3 deletions.
diff --git a/images/logo.png b/images/logo.png
diff --git a/images/logoor.png b/images/logoor.png
diff --git a/index.html b/index.html
@@ -16,7 +16,9 @@
 </head>
 
 <body>
+    <div class="container">
     <header>
+        <img src="images/logo.png" alt="Antools">
         <a href="index.html" class="antools">antools.</a>
         <nav>
             <ul class="header-list">
@@ -31,6 +33,8 @@
             <li class="header-item"><button type="button" class="sign-up">Sign Up</button></li>
         </ul>
     </header>
+</div>
+<div class="container">
     <section class="ilustratin">
         <main>
             <h1 class="main-title">
@@ -56,7 +60,7 @@ <h1 class="main-titlee">Most Popular Tools</h1>
             <li class="pop-tool-item">
                 <img src="images/figma.png" alt="figma">
                 <h3 class="card-title">FIGMA</h3>
-                <p class="card-par">Free</p>
+                <p class="card-par">Free</p>               
                 <p class="card-desctip">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                 <div class="like"></div>
                 <div class="folder"></div>
@@ -101,13 +105,15 @@ <h3 class="card-title">Invision</h3>
         <button type="button" class="load-more-button">Load more</button>
     </section>
     <section class="brands-sub">
+        <div class="band-wrap">
         <h2 class="main-titlee2">Trusted more than 150+ brand</h2>
         <ul class="trus-brands-list">
             <li class="trus-brands-item"><img src="images/microsoft.png" alt="Microsoft"></li>
             <li class="trus-brands-item"><img src="images/google.png" alt="Google"></li>
             <li class="trus-brands-item"><img src="images/slackl.png" alt="Slack"></li>
             <li class="trus-brands-item"><img src="images/wordpress.png" alt="WordPress"></li>
         </ul>
+    </div>
     </section>
     <section>
         <h1 class="main-titlee3">Newcomer Tools</h1>
@@ -158,11 +164,16 @@ <h1 class="name">
     <section class="footin">
         <h1 class="main-titlee">Become a contributor?</h1>
         <p class="main-para">Join us and get tips & tricks to become a great Designer and Developer</p>
+        <div class="email-center">
         <input autofocus="text" id="email" name="email" placeholder="Enter your email..."  class="footer-input">
         <button type="button" class="joinus-button">Join Us</button>
+    </div>
     </section>
     </main>
+</div>
+<div class="container">
     <footer>
+        <img src="images/logoor.png" alt="Antools">
         <a href="index.html" class="antools">antools.</a>
         <ul class="footer-list">
             <li><b class="copyright">Copyright 2021. Antools</b></li>
@@ -192,6 +203,7 @@ <h1 class="main-titlee">Become a contributor?</h1>
 
 
     </footer>
+</div>
 </body>
 
 </html>
diff --git a/style.css b/style.css
@@ -28,6 +28,7 @@ text-decoration: none;
     display: flex;
     justify-content: center;
     margin-bottom: -80px;
+
 }
 
 .header-list-log{
@@ -90,6 +91,10 @@ height: 48px;
     border: #283036;
 }
 
+footer{
+    margin-top: 240px;
+}
+
 .footer-input{
     width: 497.66px;
     height: 64px;
@@ -161,13 +166,15 @@ margin-bottom: 60px;
 .main-list{
     list-style: none;
     display: flex;
-    gap: 8px;
+    gap: 16px;
 }
 
 .pop-tool-list{
 display: flex;
+padding-left: 0px;
 flex-wrap: wrap;
 gap:25px;
+margin-bottom: 200px;
 }
 
 .explore-more-button{
@@ -191,8 +198,14 @@ margin: 0 auto;
 gap:107px;
 }
 
+.band-wrap{
+    padding-top: 55px;
+    margin-top: 100px;
+}
+
 .trus-brands-item{
     list-style: none;
+    margin-bottom: 55px;
 
 }
 
@@ -205,6 +218,7 @@ body{
 font-family: "Poppins";
 font-size: 48px;
 font-weight: 500;
+margin-top: 200px;
 line-height: 130%;
 letter-spacing: 0%;
 text-align: center;
@@ -224,6 +238,7 @@ font-family: "Poppins";
 font-size: 48px;
 font-weight: 500;
 line-height: 130%;
+margin-top: 100px;
 }
 
 .main-para{
@@ -232,6 +247,7 @@ font-family: "Poppins";
 font-size: 18px;
 font-weight: 500;
 line-height: 30px;
+margin-bottom: 90px;
 letter-spacing: 0%;
 text-align: center;
 }
@@ -243,6 +259,12 @@ font-size: 24px;
 font-weight: 500;
 line-height: 36px;
 letter-spacing: 0%;
+
+}
+
+.email-center{
+    display: flex;
+    justify-content: center;
 }
 
 .card-title2{
@@ -288,6 +310,7 @@ font-weight: 400;
     display: flex;
     flex-wrap: wrap;
     list-style: none;
+    margin-bottom: 200px;
 }
 
  .newcomer-tools-item{
@@ -296,6 +319,7 @@ height: 284px;
  }
 
  .pop-tool-item{
+    outline: #ff6e30 0.1px solid;
     width: 392px;
 height: 294px;
 list-style: none;
@@ -362,5 +386,11 @@ text-decoration: none;
 
  .footer-list{
     list-style: none;
-
+    padding-left: 0px;
+ }
+
+ .container{
+    width: 1224px;
+    margin: 0 auto;
+    outline: solid red;
  }