How to properly write codes and styles on this?

Pau 0
Viewed 22

I am having difficulty on how to properly display this like the real ones. Right, so here's my piece of code. You can try this on your respective IDE's to view the page because basically I cannot drag and drop here the image. I'm using html CSS, vs code. its just basically the interface of google with header, main, serach bar at the middle and those buttons and navs at the bottom of it. I'm having difficulty on trying to make this like a real google ui. :(( Just a beginner.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Google Login</title>
    <link rel="shortcut icon" href="google-logo-png-29534-32x32.ico" type="image/x- 
    icon">
</head>

<body>
<div id="header">
    <a href="#">Gmail</a>
    <a href="#">Images</a>
    <img src="pad.png">
    <img src="cs-logo.png">
</header>

<main>
    <input type="search"> 
    <img src="google-voice-search-icon.png">
    <img src="googlelogo_color_272x92dp.png">
    <button>Google Search</button>
    <button>I'm feeling lucky</button>
</main>

<p>Google offered in: <a href="#">Filipino</a> <a href="#">Cebuano</p>

</div>
</body>
</html>
alignment styling layout
1 Answers

The property src="" in the img tag will take the image from the local path or an URL to an image.

If you want, for example, the doodle's image you have two options:

  • Download the image from the Google web and then overwrite the img tag with something like this: <img src="/path/to/the/image.png"
  • Get the URL to the image in web(in this case: https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png) and then overwrite the img tag with something like this: <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"

I hope this could help.

amartinez.mav0
Related