Updates on alignment

Harish141103 · Oct 1, 2023 · 05e072e · 05e072e
1 parent ecb5d6b
commit 05e072e
Show file tree

Hide file tree

Showing 10 changed files with 197 additions and 176 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
diff --git a/css files/dayquote.css b/css files/dayquote.css
@@ -27,6 +27,34 @@ body {
 text-align: center;
 padding:.5em;
     }
+
+    .gradient-border{
+        margin-bottom: 1em;
+        height: 1em;
+        width:80%;
+
+        --angle: 0deg;
+        width: fit-content;
+        height: fit-content;
+        border: 4px solid;
+        border-image: conic-gradient(from var(--angle), red, yellow, lime, aqua, blue, magenta, red) 1;
+        animation: 3s rotates linear infinite;
+        background-color: gold;
+    }
+
+    @keyframes rotates {
+        to {
+            --angle: 360deg;
+        }
+    }
+    @property --angle { 
+      syntax: '<angle>';
+      initial-value: 0deg;
+      inherits: false;
+    } 
+
+
+
     main{
         max-width: 100vw;
 min-height: 80vh;
@@ -162,7 +190,7 @@ flex-direction: column;
         text-align: center;
         width: 300px;
         height: 250px;
-        margin:0 auto;
+        /* margin:0 auto; */
         background-color: aliceblue;
         border-radius: 3%;
     }
@@ -182,30 +210,6 @@ justify-content: center;
 .box-name p{margin:0}
 
 
-.gradient-border{
-    margin-bottom: 1em;
-    height: 1em;
-    width:80%;
-
-    --angle: 0deg;
-    width: fit-content;
-    height: fit-content;
-    border: 4px solid;
-    border-image: conic-gradient(from var(--angle), red, yellow, lime, aqua, blue, magenta, red) 1;
-    animation: 3s rotate linear infinite;
-}
-
-@keyframes rotate {
-    to {
-        --angle: 360deg;
-    }
-}
-@property --angle { 
-  syntax: '<angle>';
-  initial-value: 0deg;
-  inherits: false;
-} 
-
 
 
 @media(max-width:650px){
@@ -272,7 +276,7 @@ justify-content: center;
         }
         .box-name{
             margin:0;
-            margin-top: .1em;
+            /* margin-top: .1em; */
             padding:.1em;
             font-size: 1em;
     width:140px;

diff --git a/css files/picture.css b/css files/picture.css
@@ -63,6 +63,10 @@ body{
       text-align: center;
       background-color:gold;
       color:black;
+      display:flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
     }
     h1{
         font-size: 40px;
@@ -76,6 +80,7 @@ body{
     cursor: pointer;
     /* border-radius: 0.50rem; */
     font-size: 20px;
+    margin:auto;
     }
     .view-more-btn:hover {
     background-color:red;
@@ -92,6 +97,8 @@ body{
       border: 4px solid;
       border-image: conic-gradient(from var(--angle), red, yellow, lime, aqua, blue, magenta, red) 1;
       animation: 3s rotate linear infinite;
+    background-color:#0069d9;
+
   }
 
   @keyframes rotate {

diff --git a/css files/spinemotion.css b/css files/spinemotion.css
@@ -124,12 +124,20 @@
     font-weight: bold;
     font-size: 22px;
     cursor: pointer;
+    animation:expand .5s ease-in-out 0s  infinite alternate;
   }
   .spin:active{
-    width: 70px;
-    height: 70px;
     font-size: 20px;
   }
+
+      @keyframes expand{
+      from {width: 75px;height:75px;font-size:22px;}
+      to {
+        background-color:red;
+        width: 85px;
+      height:85px;
+    font-size:25px;}
+       }
 
   /* .mainbox.animate:after{ 
     animation: animateArrow 0.7s ease infinite;
@@ -144,8 +152,10 @@
   font-size: 30px;
   font-weight: bold;
   color: #333;
-  display:block;
-
+  /* display:block; */
+  display:flex;
+  flex-direction:column;
+  align-items: center;
   }
   .result {
   width: 400px;
@@ -172,12 +182,12 @@
   padding: 10px 20px;
   /* border-radius: 5px; */
   cursor: pointer;
-  margin-top: .5em;
+  /* margin-top: .5em; */
   padding: 10px 20px;
   border:none;
   background-color:#0069d9;
   color: #fff;
-  border-radius: 0.50rem;
+  /* border-radius: 0.50rem; */
   }
   #quote:hover{
     background-color:red;
@@ -202,7 +212,8 @@
 
 
   .gradient-border{
-    margin-bottom: 1em;
+
+    margin-top: .5em;
     height: 1em;
     width:80%;
 
@@ -212,6 +223,7 @@
     border: 4px solid;
     border-image: conic-gradient(from var(--angle), red, yellow, lime, aqua, blue, magenta, red) 1;
     animation: 3s rotate linear infinite;
+    background-color:#0069d9;
 }
 
 @keyframes rotate {
@@ -264,7 +276,14 @@
       height: 50px;
       font-size: 15px;
     }
-
+    @keyframes expand{
+      from {width: 50px;height:50px;}
+      to {
+        background-color:red;
+        width: 60px;
+      height:60px;
+    font-size:18px;}
+       }
       .result {
       width: 200px;
 

diff --git a/css files/userquotes.css b/css files/userquotes.css
@@ -6027,4 +6027,28 @@
     .table-bordered th,
     .table-bordered td {
       border: 1px solid #ddd !important; } }
-
+
+
+      .gradient-border{
+        margin-bottom: 1em;
+        /* height: 1em; */
+        /* width:80%; */
+
+        --angle: 0deg;
+        /* width: fit-content; */
+        /* height: fit-content; */
+        border: 4px solid;
+        border-image: conic-gradient(from var(--angle), red, yellow, lime, aqua, blue, magenta, red) 1;
+        animation: 3s rotate linear infinite;
+    }
+
+    @keyframes rotate {
+        to {
+            --angle: 360deg;
+        }
+    }
+ @property --angle { 
+      syntax: '<angle>';
+      initial-value: 0deg;
+      inherits: false;
+        } 
diff --git a/html files/dayquote.htm b/html files/dayquote.htm
@@ -10,7 +10,7 @@
 <body>
     <header>
     <h1>QUOTE OF THIS DAY</h1>
-    <div class="gradient-border" id="box" > 
+    <div class="gradient-border" id="box1" > 
         <div class="box-name">
                 <p>For You_ </p><p id="greeting"></p>
             </div>

diff --git a/html files/spinemotion.htm b/html files/spinemotion.htm
@@ -33,7 +33,7 @@ <h1>Spin To See Emotion Quotes</h1>
       </div>
     </div> 
 
-      <button class="spin" onclick="rotateFunction()"><div class="gradient-border" id="box" > SPIN</div></button>
+      <button class="spin" onclick="rotateFunction()">SPIN</button>
 
   </div>
 
@@ -42,9 +42,7 @@ <h1>Spin To See Emotion Quotes</h1>
     <img id="image" />
     <h2 id="name"><p id="greeting"></p></h2>
     <br>
-    <div class="gradient-border" id="box" > 
       <button id="quote">View Quote</button>
-    </div>
   </div>
 </div>