How can I make this look better by adding custom css?

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Twintails🎀 - Search Husbando</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <link rel="shortcut icon" href="https://i.imgur.com/NgV0KSf.png">
    <style>
        .gradient {
            background: linear-gradient(90deg, #bee1fd 0%, rgb(124, 111, 241) 100%);
        }
    </style>
    <style>

        .topnav {
          background-color:rgb(255, 146, 250);
          overflow: hidden;
        }
        
        /* Style the links inside the navigation bar */
        .topnav a {
          float: left;
          color: #ffffff;
          text-align: center;
          padding: 14px 16px;
          text-decoration: none;
          font-size: 17px;
        }
        
        /* Change the color of links on hover */
        .topnav a:hover {
          background-color: rgb(255, 255, 255);
          color: black;
        }
        
        /* Add a color to the active/current link */
        .topnav a.active {
          background-color: rgb(255, 146, 250);
          color: white;
        }
        
            </style>
        
        <div class="topnav gradient"> <!--Remove gradient for unblend-->
          <a href="/">Home</a>
          <a href="/search">Waifu Search</a>
          <a href="/addcharacter">Add Character</a>
        </div> 
</head>
<style>
    #myImg {
      border-radius: 8px;
      cursor: pointer;
      transition: 0.3s;
    }
    
    #myImg:hover {opacity: 0.7;}
    
    /* The Modal (background) */
    .modal {
      display: none; /* Hidden by default */
      position: fixed; /* Stay in place */
      z-index: 1; /* Sit on top */
      padding-top: 100px; /* Location of the box */
      left: 0;
      top: 0;
      width: 100%; /* Full width */
      height: 100%; /* Full height */
      overflow: auto; /* Enable scroll if needed */
      background-color: rgb(0,0,0); /* Fallback color */
      background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
    }
    
    /* Modal Content (image) */
    .modal-content {
      margin: auto;
      display: block;
      width: 80%;
      max-width: 700px;
    }
    
    /* Caption of Modal Image */
    #caption {
      margin: auto;
      display: block;
      width: 80%;
      max-width: 700px;
      text-align: center;
      color: #ccc;
      padding: 10px 0;
      height: 150px;
    }
    
    /* Add Animation */
    .modal-content, #caption {  
      animation-name: zoom;
      animation-duration: 0.6s;
    }
    
    @keyframes zoom {
      from {transform: scale(0.1)} 
      to {transform: scale(1)}
    }
    
    /* The Close Button */
    .close {
      position: absolute;
      top: 15px;
      right: 35px;
      color: #f1f1f1;
      font-size: 40px;
      font-weight: bold;
      transition: 0.3s;
    }
    
    .close:hover,
    .close:focus {
      color: #bbb;
      text-decoration: none;
      cursor: pointer;
    }
    
    /* 100% Image Width on Smaller Screens */
    @media only screen and (max-width: 700px){
      .modal-content {
        width: 100%;
      }
    }

    :root {
  --main-bg-color: brown;
}
    </style>
    <style>

      @import url(https://fonts.googleapis.com/css?family=Open+Sans);
      
      body{
        background: #f2f2f2;
        font-family: 'Open Sans', sans-serif;
      }
      
        </style>

<body class="gradient"">

  <div class="container">
    <h2>Search husbandos in the database</h2>
    <form>
      <div class="form-group">
        <label for="exampleInputEmail1">Search Husbando</label>
        <input type="email" onkeyup="getwaifu(this.value)" oninvalid="this.setCustomValidity('Type a husbando name pls')" onvalid="this.setCustomValidity('')" class="form-control"id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter a keyword">
        <small id="emailHelp" class="form-text text-muted">Enter a husbando name.</small>
      </div>
      <div id="results"></div>
    </form>
  </div>
  <script>

function getwaifu(keyword) {

    let showResults = document.querySelector('#results')

    if (keyword != '') {

        fetch('http://localhost:8080/database/v1/husbandodb')
        .then(res => res.json())
        .then((out) => {

            let output = Object.values(out.husbandoID).find(husbando => husbando.names.toLowerCase().includes(keyword.toLowerCase()))
            if (output != undefined) {
                showResults.innerHTML = "<a href='" + output.img_url + "'> <img id='myImg' style='' alt='husbando' height='200' src='" + output.img_url +  " '></a> " + "<br>" + "<p1 style='font-size:30px'>" + output.names + "</p1>" ;
            } else {
                showResults.innerHTML = 'No Results found.'
            }
        }).catch(err => console.error(err));
    } else {
        showResults.innerHTML = 'Please enter a keyword to search!'
    }

}

      </script>

      <style>

.fixed-header, .fixed-footer{
        width: 100%;
        position: fixed;        
        background: #333;
        padding: 10px 0;
        color: #fff;
    }
    .fixed-header{
        top: 0;
    }
    .fixed-footer{
        bottom: 0;
        text-align: center;
    }    

          </style>

<div class="fixed-footer">
    <div class="container">If you're husbando isn't there, you can add it by pressing the "Add Character" button in the top left.</div>        
</div>

        </body>

</html>

I have this code which looks like:

I want to make it look more asthethic but idk how to because all the css is premade, I want to make it so I can freely customize it.

Are you asking how to add more css? You can edit the <style> tags and check out this tutorial on CSS: https://www.w3schools.com/css/default.asp

You could add functions in js to freely customize:

function changeToRadical() {
document.querySelector("body").style.background = linearGradient(45deg, #FFC09F, #FFEE93);
}

You can also use this instead of querySelector:

document.getElementsByClassName()

and finally css variables (add – at beginning like --hello: #000;)

1 Like

Today I learned that querySelector is a better way of getting body instead of getElementsByTagName()[0] :ok_hand:

1 Like

Mmhmm. There is also document.getElementById(“id here”)

That means you would have to add an id attr to … is that good practice?

Sort of. Buttons need ids. But, you can add the event attributes, in case if you need them.

You just do it with: document.getElementById(“id”).onclick = function () {alert(“Hello”)}

1 Like

Oops! I meant to write that I "would have to add an id attr to <body> " but it disappeared because I didn’t escape it. Is it good practice to edit the html and body tags?

for css yes but maybe not the best practice for js unless if your changing properties like backgrounds and that stuff

if your using parallax scrolling then no

1 Like