Style_tag_change_to_class(css)

app/static/css/style.css

@@ -60,7 +60,10 @@ body {
     }
   }
 
-  
+.market_each_bid_image_size {
+  width:250px;
+  height:250px;
+}
   
 /*--------------------------------------------------------------
 # Navbar
@@ -101,6 +104,9 @@ body {
     right: 100px;
 }
 
+.navbar-colour{
+  background-color: #8064a2bd
+}
 /*--------------------------------------------------------------
 # Market.html Current bid & Creator & Gril System
 --------------------------------------------------------------*/
@@ -258,6 +264,30 @@ input.create_art-input {
 .upload_Create_art_position {
   margin-left:100px;
 }
+
+.hr_size{
+  border: 2px solid rgb(177, 176, 176);
+  width:327px;
+  border-radius: 5px;
+}
+.Choose-Time-for-Auction-ends {
+  height:47px; 
+  width:175px;
+}
+
+.Closing-date-input-size {
+  height:47px; 
+  width:220px;
+}
+
+.tips_location {
+  margin-left:25px;
+}
+
+.word_OR_location {
+  margin-top: 10px;
+  font-size: 20px;
+}
 /*--------------------------------------------------------------
 # profile.html 
 --------------------------------------------------------------*/
@@ -294,3 +324,49 @@ input.create_art-input {
   color: white;
   background: #846add;
 }
+
+.image_bid_item_size {
+  width:200px; 
+  height:200px;
+}
+
+.user_profile_image_size {
+  width:150px;
+}
+
+.change_password_location {
+  position:relative;
+  left:20px;
+}
+/*--------------------------------------------------------------
+# base.html
+--------------------------------------------------------------*/
+.flash_message_size{
+  width: 300px;
+}
+
+.flash.message_z-index{
+  z-index: 2;
+}
+
+/*--------------------------------------------------------------
+# all detail_*.html
+--------------------------------------------------------------*/
+.bidding_price_size {
+  max-width: 15rem
+}
+
+/*--------------------------------------------------------------
+# login & Register .html
+--------------------------------------------------------------*/
+.login_Register_Bg_colour{
+  border-radius: 1rem; 
+  background: #846add;
+}
+
+/*--------------------------------------------------------------
+# Register .html
+--------------------------------------------------------------*/
+.tips_8characters {
+  color:white;
+}

app/templates/base.html

@@ -39,7 +39,7 @@
         <ul class="navbar-nav-right">
             <li class="nav-item">
                 <a type="button" class="btn btn-light a-font" href="/profile">Profile</a>
-                <a type="button" class="btn btn-light a-font" style="background-color: #8064a2bd" href="/logout">Logout</a>
+                <a type="button" class="btn btn-light a-font navbar-colour" href="/logout">Logout</a>
             </li>
         </ul>
         {% else %}
@@ -49,13 +49,13 @@
         </ul>
         <ul class="navbar-nav-right">
             <li class="nav-item">
-                <a type="button" class="btn btn-light a-font" style="background-color: #8064a2bd" href="/register">Register</a>
-                <a type="button" class="btn btn-light a-font" style="background-color: #8064a2bd" href="/login">Login</a>
+                <a type="button" class="btn btn-light a-font navbar-colour" href="/register">Register</a>
+                <a type="button" class="btn btn-light a-font navbar-colour" href="/login">Login</a>
             </li>
         </ul>
         {% endif %}
         </ul>
-        <div class="input-group navbar-nav-middle" style="width:300px">
+        <div class="input-group navbar-nav-middle flash_message_size">
             <input type="text" class="form-control" placeholder="Search Art">
             <div class="input-group-append">
                 <button class="btn btn-secondary" type="button">
@@ -69,14 +69,14 @@
     {% if messages %}
         {% for category, message in messages %}
             {% if category == 'error' %}
-            <div class="alert alert-danger alter-dismissable fade show", role="alert" style="z-index:2;">
+            <div class="alert alert-danger alter-dismissable fade show flash.message_z-index", role="alert">
                 {{ message }}
                 <button type="button" class="close" data-dismiss="alert">
                     <span aria-hidden="true">&times;</span> <!-- fancy button styling-->
                 </button>
             </div>
             {% else %}
-            <div class="alert alert-success alter-dismissable fade show", role="alert" style="z-index:2;">
+            <div class="alert alert-success alter-dismissable fade show flash.message_z-index", role="alert">
                 {{ message }}
                 <button type="button" class="close" data-dismiss="alert">
                     <span aria-hidden="true">&times;</span> <!-- fancy button styling-->

app/templates/create_art.html

@@ -80,7 +80,7 @@ $(function(){
         <textarea type="description" class="form-control create_art-input description_size" id="description" name="description" placeholder="     Enter Description"></textarea>
       </div>
       <!--Upload Art or choose what they bought before-->
-      <hr style="border: 2px solid rgb(177, 176, 176); width:327px; border-radius: 5px;">
+      <hr class="hr_size">
       <div class="row">
         <div class="col input-group-prepend">
           <label class="input-group-text">File upload</label>
@@ -96,33 +96,33 @@ $(function(){
         </div>
         <p class="upload_Create_art_position">**Accept Only <b>PNG's</b>, <b>JPEG's</b>**</p>
       </div>
-      <p class="body-column-create_art" style="margin-top: 10px; font-size: 20px;"><b>OR</b></p>
+      <p class="body-column-create_art word_OR_location"><b>OR</b></p>
       <!-- Dropdown Menu-->
       <div class="row">
         <div class="col input-group-prepend">  
           <span class="input-group-text">Select Art in Platform</span>  
-          <select class="btn btn-secondary dropdown-toggle" name="web_group" style="height:47px; width:220px" required aria-invalid="false"> 
+          <select class="btn btn-secondary dropdown-toggle Closing-date-input-size" name="web_group" required aria-invalid="false"> 
             <option value="cng-555">Select here</option>
             <option name="web_group" value="bought_art">bought_Art</option>
           </select>
         </div>
       </div>
-      <hr style="border: 2px solid rgb(177, 176, 176); width:327px; border-radius: 5px;">
+      <hr class="hr_size">
       <!--Choose Time for Auction ends (I will check how I can limit the user 14days)-->
       <div class="row">
         <div class="col input-group-prepend">  
-          <span class="input-group-text" style="height:47px; width:175px">Auction End Date</span>
-          <input type="date" id="closing_date" name="closing_date" class="body-column-create_art" style="height:47px; width:220px">
+          <span class="input-group-text Choose-Time-for-Auction-ends">Auction End Date</span>
+          <input type="date" id="closing_date" name="closing_date" class="body-column-create_art Closing-date-input-size">
         </div>
       </div>
       <!-- Tips for the date to let user know-->
-      <div class="row" style="margin-left:2px">
+      <div class="row tips_location">
         <small>Tips:</small>
       </div>
-      <div class="row" style="margin-left:25px">
+      <div class="row tips_location">
         <small>- The maximum Auction time is 14 days</small>
       </div>
-      <div class="row" style="margin-left:25px">
+      <div class="row tips_location">
         <small>- The exact time of closing is 0000 hrs of that date</small>
       </div>
       <!-- Button for create Auction-->

app/templates/detail_art_for_market.html

@@ -33,11 +33,10 @@
                     <form method="POST">
                       <input 
                       type="text" 
-                      class="form-control text-center me-3" 
+                      class="form-control text-center me-3 bidding_price_size" 
                       id="bidding_price"
                       name="bidding_price"
                       placeholder="Enter Bidding Price"
-                      style="max-width: 15rem"
                       />
                       <label for="Bidding Price"></label>
                       <button class="btn btn-dark flex-shrink-0 input-submit" type="submit">Bid</button>

app/templates/detail_art_for_search.html

@@ -33,11 +33,10 @@
                     <form method="POST">
                       <input 
                       type="text" 
-                      class="form-control text-center me-3" 
+                      class="form-control text-center me-3 bidding_price_size" 
                       id="bidding_price"
                       name="bidding_price"
                       placeholder="Enter Bidding Price"
-                      style="max-width: 15rem"
                       />
                       <label for="Bidding Price"></label>
                       <button class="btn btn-dark flex-shrink-0 input-submit" type="submit">Bid</button>

app/templates/login.html

@@ -7,7 +7,7 @@
     <div class="container py-5 h-100">
       <div class="row d-flex justify-content-center align-items-center h-100">
         <div class="col-12 col-md-8 col-lg-6 col-xl-5">
-          <div class="card text-white" style="border-radius: 1rem; background: #846add;">
+          <div class="card text-white login_Register_Bg_colour">
             <div class="card-body p-5 text-center">
               <div class="mb-md-5 mt-md-4 pb-5">
                 <h2 class="fw-bold mb-2 text-uppercase">Login</h2>

app/templates/market.html

@@ -15,7 +15,7 @@
     <div class="row row-cols-4">
         {% for art in listings %}
         <div class="card col-md-3 grid-item shadow p-3 mb-5 bg-white rounded"  type="button" onclick="window.location.href='{{ url_for('dashboards.modal_home')}}'">
-            <img style="width:250px; height:250px;" src="static/repository/{{art[4]}}">
+            <img class="market_each_bid_image_size" src="static/repository/{{art[4]}}">
             <div class="row" id="market_item_name_left">
                 <b>{{art[0]}}</b>
             </div>

app/templates/profile.html

@@ -10,9 +10,9 @@
                     <div class="card-body">
                         <div class="d-flex flex-column align-items-center text-center">
                             {% if user.profile_image %}
-                            <img src="static/uploads/{{ user.profile_image }}" style="width:150px">
+                            <img src="static/uploads/{{ user.profile_image }}" class="user_profile_image_size">
                             {% else %}
-                            <img src="static/templates/defaultprofileimg.png" style="width:150px">
+                            <img src="static/templates/defaultprofileimg.png" class="user_profile_image_size">
                             {% endif %}
                             <div class="mt-3">
                                 <h4>{{ user.username }}</h4>
@@ -39,10 +39,10 @@
                             <!------  Change Password ---------->
                             <form method="POST">
                                 <div class="card-body">
-                                    <hr style="border: 3px solid rgb(177, 176, 176); width:327px; border-radius: 5px;">
+                                    <hr class="hr_size">
                                     <p><b>Change Password</b></p><br>
                                         <div class="row">
-                                            <div class="col-sm-3" style='position:relative; left:20px'>
+                                            <div class="col-sm-3" class="change_password_location">
                                                 <h6 class="mb-0"><label for="password">Password</label></h6><br>
                                             </div>
                                             <div class="col-sm-9 text-secondary">
@@ -50,7 +50,7 @@
                                             </div>
                                         </div>
                                     <div class="row">
-                                        <div class="col-sm-3" style='position:relative; left:20px'>
+                                        <div class="col-sm-3" class="change_password_location">
                                             <h6 class="mb-0"><label for="password_confirm">Password<br>(Confirm)</label></h6><br>
                                         </div>
                                         <div class="col-sm-9 text-secondary">
@@ -62,7 +62,7 @@
                                             <input type="submit" value="Submit" class="btn btn-grey update_password-form-btn"></a>
                                         </div>
                                     </div>
-                                    <hr style="border: 3px solid rgb(177, 176, 176); width:327px; border-radius: 5px;">
+                                    <hr class="hr_size">
                                     <p><b>Security(Show 2FA. If the user turns on it, it will show a green tick. If not, it will show a red tick.)</b></p><br>
                                     <div class="row">
                                         <div class="col">
@@ -99,7 +99,7 @@
                                 <div class="row row-cols-3">
                                 {%for art in my_art%}
                                     <div class="card col-md-4 shadow p-3 mb-5 bg-white rounded"  type="button" onclick="window.location.href='{{ url_for('dashboards.modal_profile')}}'">
-                                        <img style="width:200px; height:200px;" src="static/repository/{{art.dname}}">
+                                        <img class="image_bid_item_size" src="static/repository/{{art.dname}}">
                                             <div class="row" id="market_item_name_left">
                                             <b>{{art.name}}</b>
                                             </div>
@@ -111,7 +111,7 @@
                                 <div class="row row-cols-3">
                                     {%for art in my_creation%}
                                     <div class="card col-md-4 shadow p-3 mb-5 bg-white rounded"  type="button" onclick="window.location.href='{{ url_for('dashboards.modal_profile')}}'">
-                                        <img style="width:200px; height:200px;" src="static/repository/{{art.dname}}">
+                                        <img class="image_bid_item_size" src="static/repository/{{art.dname}}">
                                             <div class="row" id="market_item_name_left">
                                                 <b>{{art.name}}</b>
                                             </div>

app/templates/register.html

@@ -7,7 +7,7 @@
     <div class="container py-5 h-100">
       <div class="row d-flex justify-content-center align-items-center h-100">
         <div class="col-12 col-md-8 col-lg-6 col-xl-5">
-          <div class="card text-white" style="border-radius: 1rem; background: #846add;">
+          <div class="card text-white login_Register_Bg_colour">
             <div class="card-body p-5 text-center">
               <div class="mb-md-5 mt-md-4 pb-5">
                 <h2 class="fw-bold mb-2 text-uppercase">Sign up</h2>
@@ -43,7 +43,7 @@
                     name="passwd_1"
                     placeholder="Enter Password"
                   />
-                  <p style="color:white;">*Use 8 or more characters</p>
+                  <p class="tips_8characters">*Use 8 or more characters</p>
                 </div>
                 <!--Input: Password Confirm-->
                 <div class="form-outline form-white mb-3">

app/templates/search.html

@@ -7,7 +7,7 @@
     <div class="row row-cols-4">
 
         <div class="card col-md-3 grid-item shadow p-3 mb-5 bg-white rounded"  type="button" onclick="window.location.href='{{ url_for('dashboards.modal_search')}}'">
-            <img style="width:250px; height:250px;" src="static/repository/">
+            <img class="market_each_bid_image_size" src="static/repository/">
             <div class="row" id="market_item_name_left">
                 <b></b>
             </div>