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)