Feedback with "Project: HTML/CSS" search engine home page


#1

Hello people!

I have been trying to finish my first web page but I had some troubles since I feel very lost, I’m trying to do a little every day because I get frustrated easily. Below I will share links to my code and a screenshot of how it looks, I know it’s horrible and the colors suck (I am going to change them, I was just testing and let them like that for now). What I want to achieve, is to move my navigation bar so it can occupy the space to the left, but I don’t know how to do it. I have watched a tutorial but they have a logo on it which expands the navbar to that position, and in this case I don’t need one.

I also would like, if possible, some feedback on the rest of my code. Is there anything which is not needed? Is there something missing?

I know I’m supposed to create a Google homepage but the project is going to be exactly the same but with the DuckDuckGo logo above the search box.

HTML PrivateBin URL: https://bin.disroot.org/?71df937af3305caa#6AzeSSTpRPvHtKpXkmFkn9wkWAYyZHvCXWUFE6tLBBfc

CSS PrivateBin URL: https://bin.disroot.org/?e3d3f8db0029916b#Hfv731M6VzZRNkfJYrxswfFcVXGJMPidUTDEyjpeb8XV

Screenshot of my project: https://upload.vaa.red/2f4Tp3#9ddf91f3c7838ac96f89357acc32833b

Thanks a lot.


#2

Bump


#3

Hey, that’s a lot of code to look through, and I’m still learning myself and also working full time, so I’ll try to post in pieces as I have time to look through it. First couple of thoughts glancing at your HTML:

*You don’t need a header class. Just stylize header in the CSS since there’s only one of them. Same goes for your nav element.
*I’m also not sure why you have a separate class for every li tag. Unless you want each one styled differently, which is a bit strange IMO.
*Keep your class names consistent - all lowercase. You have some lower and some uppercase.


#4

Here is your CSS code. Just paste the code into your CSS file. Hope your problem will solve. Best of luck.

body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-color:rgb(92, 91, 91);
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 300;
}
 
.container {
    width: 80%;
    margin: 0 auto;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    background-color: rgb(127, 253, 54);
}
 
.main-content {
    margin-top: 70px;
    text-align: center;
}
 

 
nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
 
nav li {
    display: inline-block;
    padding: 20px 15px;
    cursor: pointer;
}

nav li:hover {
    background-color: blue;
}
nav li a {
    text-decoration: none;
    color: #000;
    font-weight: bold;
}

nav li a:hover {
    color: red;
}

.k-button {
    outline: none;
    border: none;
    padding: 10px 12px;
    font-size: 14px;
    font-weight: bold;
    background-color: green;
    cursor: pointer;
    margin-left: 6px;
}

.input-field{
    outline: none;
    border: none;
    padding: 10px 12px;
    font-size: 14px;
    font-weight: bold;
}

.k-button:hover {
    background-color: blue;
    color: white;
}