Project CSSAssessment-1

mounikaperi · mounikaperi · commit 37c9561a2711 · 2022-12-05T22:39:14.000+05:30
diff --git a/Project-CSSAssessment-1/index.html b/Project-CSSAssessment-1/index.html
@@ -11,31 +11,28 @@
 
 <body>
     <header class="container">
-        <nav aria-label="navbar">
-            <div class="navbar__image">
-                <img src="img/Logo.png" alt="Logo">
+        <section class="main-section">
+            <img src="img/Logo.png" alt="Logo">
+            <div class="main-section__items">
+                <a href="#" class="first">Home</a>
+                <a href="#">About</a>
+                <a href="#">Services</a>
+                <a href="#">Portfolio</a>
+                <a href="#">Pricing</a>
             </div>
-            <div class="list__items">
-                <li><a href="#">Home</a></li>
-                <li><a href="#">About</a></li>
-                <li><a href="#">Services</a></li>
-                <li><a href="#">Portfolio</a></li>
-                <li><a href="#">Pricing</a></li>
-                <button class="contactus">Contact Us</button>
-            </div>
-        </nav>
+            <button class="btn">Contact Us</button>
+        </section>
     </header>
-    <section aria-label="banner">
-        <article class="banner__container">
-            <h1 class="banner__heading"></h1>We Help You <span>Crush</span> Your Competition</h1>
+    <section class="grid-2-column">
+        <article class="grid-left-item">
+            <h1 class="banner__heading">We Help You <span>Crush</span> Your Competition</h1>
             <p class="banner__info">Build trust to connect your brand to nillions of users and grow your revenue through
                 SEO.</p>
-            <button class="services">See our services</button>
+            <button class="btn--services">See our services</button>
         </article>
-        <aside class="banner__image">
+        <aside class="grid-right-item">
             <img src="img/image.png" alt="image">
         </aside>
     </section>
 </body>
-
 </html>
diff --git a/Project-CSSAssessment-1/style.css b/Project-CSSAssessment-1/style.css
@@ -1,30 +1,71 @@
-nav {
+.container {
     display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin: 32px 48px;
 }
-.navbar__image {
-    margin: 50px;
-    padding: 10px;
-    text-align: center;
-}
-.list__items {
+.main-section{
     display: flex;
-    text-decoration: none;
-    list-style-type: none;
-}
-div li {
-    justify-content: space-around;
-    width: 40px;
-    height: 30px;
-    text-align: center;
-    margin: 50px;
-    text-decoration: none;
-    list-style-type: none;
 }
-.contactus {
-    display: inline-block;
+.main-section__items {
+    justify-content: center;
+    align-items: space-between;
+    padding: 20px 40px;
+}
+.main-section__items .first {
+    color: black;
+    padding-left: 4px;
+}
+.main-section__items a {
+    text-decoration: none;
+    color: #b7b5b5;
+    align-items: start;
     padding: 10px 20px;
-    border-radius: 10px;
-    border-color:rgba(45, 68, 172, 0.975); ;
-    background-color:rgba(45, 68, 172, 0.975);
+}
+.btn {
+    margin-left: 480px;
+    background-color: #9171b2;
+    border: 2px solid #9171b2;
+    color: white;
+    font-weight: 18px;
+    padding: 4px 48px;
+    border-radius: 8px;
+}
+.btn:hover,
+.btn:active {
+    background-color: #7b6491;
+    color: #fff;
+    cursor: pointer;
+    border: 2px solid #9171b2;
+}
+.grid-2-column {
+    display: grid;
+    grid-template-columns: 500px 500px;
+    grid-template-rows: 1fr 1fr;
+    column-gap: 20px;
+    row-gap: 40px;
+}
+.grid-left-item {
+    margin-left: 52px;
+}
+.grid-left-item h1 span {
+    color: #9171b2;
+}
+.banner__heading {
+    font-size: 78px;
+    margin-bottom: 32px;
+}
+.banner__info {
+    color: #b7b5b5;
+    padding: 12px;
+    font-size: 18px;
+}
+.btn--services {
+    margin-left: 12px;
+    background-color: #9171b2;
+    border: 2px solid #9171b2;
     color: white;
+    font-weight: 18px;
+    padding: 18px 48px;
+    border-radius: 8px;
 }
