last update

mahafujahamed · Jan 7, 2023 · 787f952 · 787f952
1 parent c4a5d54
commit 787f952
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 16 deletions.
diff --git a/index.html b/index.html
@@ -24,11 +24,11 @@ <h2 class="banner-title">All Thinks Are<br>
 
         </div>
         <div class="section-title-one">
-            <h2>My Failures of<br>previous year</h2>
+            <h1>My Failures of<br>previous year</h1>
             <p class="discription">Contary to popular belief, Lorem Ipsum is not simply random text.<br>It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock.</p>
             <p class="font-size"><img src="./images/check.png"> Contary to popular belief, is not simply.</p>
             <p class="font-size"><img src="./images/check.png"> Contary to popular belief, is not simply.</p>
-            <p class="font-size"><img src="./images/check.png"> Contary to popular belief, is not simply.</p>
+            <p class="font-size"><img src="./images/check.png"> Contrary to popular belief.</p>
             <p class="font-size"><img src="./images/check.png"> Contary to popular belief, is not simply.</p>
             <p class="font-size"><img src="./images/check.png"> Contary to popular belief, is not simply.</p>
         </div>
@@ -56,6 +56,10 @@ <h4> ecommerce</h4>
             <p>I want to develop</p>
         </div>
     </div>
+    <div class="phone">
+        <h1 class="phone-title">Always keep a positive<br>mindset</h1>
+        <button class="btn-style">Call now</button>
+    </div>    
     <footer>
         <div class="footer">
             <div class="info">
@@ -67,12 +71,11 @@ <h2>Future</h2>
                     <br>
                 <p>Email: info@gmail.com</p>
                 <br>
-                <p>Phone: 015 000 000 554</p>
+                <p class="number-title">Phone: 015 000 000 554</p>
             <div class="icon">
                 <ul class="incon-style">
-                    <li><img src="./images/icons/fb.png"
-                    </li>
-                    <li>
+                    <li><img src="./images/icons/fb.png"</li>
+                    <li id="list">
                         <img src="./images/icons/twitter.png"
                     </li>
                     <li>
@@ -82,12 +85,10 @@ <h2>Future</h2>
             </div>
             </div>
             <div class="form">
-                <h2>Subscribe</h2>
+                <h2 id="button">Subscribe</h2>
                 <br><br>
                 <input class="input" type="text" placeholder="Inter your email">
                 <button class="btn-styles">Subscribe</button>
-
-
             </div>
         </div>
     </footer>

diff --git a/styles.css b/styles.css
@@ -6,7 +6,7 @@
 /* banner styles */
 .banner-container{
     width: 100%;
-    height: 120vh;
+    height: 115vh;
     background-image: url("./images/banner/banner2.png");
     display: flex;
     justify-content: right;
@@ -50,7 +50,8 @@
     font-size: 18px;
     padding: 15px 30px;
     padding-bottom: 10px;
-    background-color: white;
+    background-color: black;
+    border: 1px solid white;
 }
 .form{
     padding: 10px;
@@ -61,21 +62,25 @@
 .section{
     display: flex;
     gap: 100px;
+    padding: 50px;
 }
 .section-title{
-   margin-left: 50px;
+   margin-left: 100px;
 }
 .bg-color{
 
-    margin-top: 80px;
+    margin-top: 100px;
+    background-color: pink;
+    width: 500px;
+    height: 500px;
+    border-radius: 300px;
 
-
 }
 .font-size{
     font-size: 12px;
 }
 .section-title-one{
-    margin-top: 350px;
+    margin-top: 225px;
 }
 /* plan */
 .plan{
@@ -98,9 +103,45 @@
 .info{
     color: white;
 }
-h2{
+#button{
     color: white;
 }
 .incon-style{
     display: flex;
+    text-decoration: none;
+    margin-right: 10px;
+
+}
+.phone{
+    background-image: url("./images/watch.png");
+    linear-gradient (rgba(0, 0, 0, 0.2),rgba(23, 14, 11, 0.3));
+    background-blend-mode: overlay;
+  width: 70%;
+  height: 40vh;
+  background-repeat: no-repeat;
+  margin: 90px 10px 90px 250px;
+
+}
+.phone-title{
+    color: white;
+    padding-left: 40px;
+    padding-top: 50px;
+}
+.number-title{
+    padding-bottom: 20px;
+}
+#list{
+    padding-left: 15px;
+    padding-right: 15px;
+
+}
+.btn-style{
+    padding: 15px 30px;
+    background-color: white;
+    border: none;
+    color: red;
+    font-size: 18px;
+    margin-right: 135px;
+    margin-top: 15px;
+    margin-left: 40px;
 }