Just continuing with my HTML & CSS course today https://www.youtube.com/watch?v=G3e-cpL7ofc
Let’s go!
My Code
Besides the code, today we looked at the ‘inspect’ feature of Google Chrome. Turn’s out it’s more powerful than I knew. I love the ‘select element in the page to inspect it’ feature. I already see myself inspecting all kinds of websites going forward 😂
Also we looked at padding, borders, and margin. I knew the basics before, but the most interesting insight I had this time is that if I want to align objects with different or no borders, I need to adjust the padding. In the code below for example SUBSCRIBE has no border and 10px padding. So that means the JOIN button, which has a 1px border, then only needs 9px padding to be aligned. 💡 - Kind of logical, I just never thought about it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Subscribe Button</title>
<style>
.subscribe-button {
background-color: rgb(200, 0, 0);
color: white;
border: none;
border-radius: 2px;
cursor: pointer;
margin-right: 8px;
padding: 10px 16px;
transition: opacity 0.15s;
}
.subscribe-button:hover {
opacity: 0.8;
}
.subscribe-button:active {
opacity: 0.6;
}
.join-button {
background-color: white;
border: rgb(41, 118, 211);
border-style: solid;
border-width: 1px;
color: rgb(41, 118, 211);
border-radius: 2px;
cursor: pointer;
margin-right: 8px;
padding: 9px 16px;
transition: background-color 0.15s, color 0.15s;
}
.join-button:hover {
background-color: rgb(41, 118, 211);
color: white;
}
.join-button:active {
opacity: 0.7;
}
.tweet-button {
background-color: rgb(6, 155, 224);
color: white;
border: none;
border-radius: 18px;
font-weight: bold;
font-size: 15px;
cursor: pointer;
padding: 10px 16px;
transition: box-shadow 0.15s;
}
.tweet-button:hover {
box-shadow: 5px 5px 10px rgba(0, 0, 0, .15);
}
</style>
</head>
<body>
<button class="subscribe-button">SUBSCRIBE TODAY</button>
<button class="join-button">JOIN ME NOW</button>
<button class="tweet-button">Tweet This</button>
</body>
</html>
Alright that’s it again for today :)
Top comments (0)