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

Coding Help
,
#1 
<!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:

image
image1919Ă—977 30.2 KB

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.

#2

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

#3

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
#4

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

1 Like
#5

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

#6

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

#7

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
#8

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?

#9

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