And once more I’m continuing with my HTML & CSS course today https://www.youtube.com/watch?v=G3e-cpL7ofc
Today the CSS was about importing and manimpulating images + how to make a search bar inputfield. All still rather basic, but very important.
Let’s go!
My Code
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>YouTube.com Clone</title> <style> .thumbnail { width: 300px; height: 300px; object-fit: contain; object-position: bottom; border: 2px; border-style: solid; border-color: blue; } </style> </head> <body> <img class="thumbnail" src="thumbnails/thumbnail-1.webp" alt=""> </body> </html> or here another version
... <style> .thumbnail { width: 300px; height: 300px; object-fit: contain; object-position: bottom; border: 2px; border-style: solid; border-color: blue; } </style> ... Ok that was images. Now the searchbar basics
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>YouTube.com Clone</title> <style> .search-bar { font-size: 20px; margin: 12px; } </style> </head> <body> <input class="search-bar" type="text" placeholder="Search"> <input type="checkbox"> </body> </html> The only new and interesting thing for me here was really how to change the behavior of images.
Alright that’s it again for today. I wish I could do a bit more but my time is really stretched these days, so I can only do these small steps. Still better than nothing!
Top comments (0)