enhanced button elements

Yojxmbo · Aug 8, 2024 · 2432e03 · 2432e03
1 parent 560783b
commit 2432e03
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 9 deletions.
diff --git a/index.html b/index.html
@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Landing Page</title>
     <link rel="stylesheet" href="style.css">
+    <script src="script.js" defer></script>
 </head>
 <body>
 
@@ -114,7 +115,7 @@ <h1>Some random information.</h1>
 
     <div class="blockThree">
         <div class="blockThree-Para">
-            <p>This is an inspiring quote, or a testimonial from a customer. Maybe it's just filling up space, or maybe people will actually read it. Who knows? All I know is that it looks nice.</p>
+            <p>This is an inspiring quote, or a testimonial from a<br> customer. Maybe it's just filling up space, or maybe<br> people will actually read it. Who knows? All I know<br> is that it looks nice.</p>
         </div>
         <div class="blockThree--thor">
             <p>- Thor, God of Thunder</p>

diff --git a/script.js b/script.js
@@ -0,0 +1,11 @@
+const buttonOneEl = document.querySelector('.buttonOne');
+const buttonTwoEl = document.querySelector('.buttonTwo');
+
+
+buttonOneEl.addEventListener('click', () => {
+    alert('Still working on some kinks');
+})
+
+buttonTwoEl.addEventListener('click', () => {
+    alert('Still working on some kinks');
+})
diff --git a/style.css b/style.css
@@ -64,6 +64,8 @@ body {
     border-color: #3882F6;
     font-weight: bold;
     padding: 3px 17px;
+    transition: background-color 0.3s ease, transform 0.1s ease;
+    cursor: pointer;
 }
 
 .imageOne {
@@ -111,18 +113,19 @@ body {
     display: flex;
     flex-direction: column;
     background-color: #E5E7EB;
-    font-size: medium;
-    font-weight: 300; /* 300 is typically the weight for "light" */
+    font-size: large;
+    font-weight: 300; 
     font-style: italic;
     color: #1F2937;
     width: 70%;
     padding: 1rem;
+    text-align: center;
 }
 
 .blockThree--thor {
     font-weight: 800;
-    text-align: end;
     font-size: small;
+    text-align: right;
 }
 
 .blockFour {
@@ -137,21 +140,36 @@ body {
 
 .bluebanner {
     display: flex;
-    justify-content: center;
+    justify-content: space-around;
     align-items:center;
     border-radius: 5px;
     background-color: #3882F6;
     color: #E5E7EB;
     width: 70%;
-    margin: 50px;
+    margin: 50px auto;
+    padding: 20px;
 }
 
 .blockFour--One {
-    font-size: small;
+    display: flex;
+    flex-direction: column;
 }
 
-.blockFour--Two {
+.blockFour--One h1 {
+    color: white;
+    font-size: 24px;
+    font-weight: bold;
+    margin-bottom: 5px;
+}
 
+.blockFour--One p {
+    color: white;
+    font-size: 16px;
+    margin-top: 10px; 
+}
+
+.blockFour--One h1, p {
+    margin: 0;
 }
 
 .buttonTwo {
@@ -162,6 +180,8 @@ body {
     border-color: #E5E7EB;
     font-weight: bold;
     padding: 3px 17px;
+    transition: background-color 0.3s ease, transform 0.1s ease;
+    cursor: pointer;
 }
 
 .footer {
@@ -173,4 +193,16 @@ body {
     font-size: 0.8em;
     font-weight: light;
     font-family: sans-serif;;
-}  
+}  
+
+
+.buttonOne:hover, .buttonTwo:hover {
+    background-color: #2b66c0; 
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); 
+    transform: scale(1.05);
+}
+
+.buttonOne:active, .buttonTwo:active {
+    background-color: #1d4a8e; 
+    transform: scale(0.98);
+}