How do I post HTML examples here? Every time I do it, it actually creates the images in the thread and I don’t want to do that. Very confusing. Trying to share an example of a template because I am confused on how to change a color of a button, but it won’t let me share it without basically showing the whole “site”.
When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.
You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.
See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).
I am trying to change the color of the buttons to blue but I don’t know where to do that
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3-theme-pink.css">
<title>Links website</title>
<script src="https://unpkg.com/feather-icons"></script>
<style>
body {
background: url("https://www.w3schools.com/howto/img_link_tree_template2_bg.jpg"); /* The image used for background */
}
.container {
width: 100%;
height: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.links-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 20px;
}
.links-container a {
width: 80%;
}
.w3-theme-l1:hover {
background-color: #f279a1 !important;
}
.margin-top-2 {
margin-top: 32px;
}
.bottom {
width: 100%;
text-align: center;
width: auto;
font-weight: bolder;
}
.bottom span {
color: #ed4d82;
}
.bottom svg {
stroke: #ed4d82;
fill: #ed4d82;
}
@media (min-width: 768px) {
.link {
width: 100%;
}
}
@media (min-width: 576px) {
.container {
max-width: 540px;
}
}
</style>
</head>
<body>
<!-- Content container -->
<div class="container">
<!-- Image and name container. Change to your pictue here. -->
<div style="text-align: center">
<img src="https://lh3.googleusercontent.com/5dNemF0vmWcSB1viVDMRtgPWDgpK2Sz-ovMTjsPrKAisNXmaLdHeZBC38JuBeuq7uKlrefQU31v14v2BfQE04kjGGG0a8g2vM7fRjHSBP7vjBy8mfPwY6wUgydkjvSTfW9WxecfL5sLO9s5eF6JVPLDAsXFRlPg4lDXF820_BuP-57bOt0etgbqnnLhCRUB3eMJmEwnv1qqHFeBBL382emT-lx3dr1aIBrh8TkcIgGR_1iWiHyEpzhr-svVfWfhT9X1c5Tyt1lMDVcseaqmlauCGFjVt4wn5NoBxw5HnMJT2uSKI2NHmuB7OLEd3uQ1OmYYhcx8WkbKVOtnfJVNS9pPd--hz8yBzOSW8lKg72XB1ZsRrq_6Td1uzZIDE9pEIL2clYBrV-uGAEScaNfGQ2CR3u7hBJ3nEI-1Cd7QOJmCfFXv60sEnk2debAYNaI_0zseaLyo_P5wQT2kON68yR9NUkFi8uZ-QfWJ8ZwlMwOYZFkHys23u_KNCaPALoYDz-Pl4SCxbneWopoHE1RLfFoGBwVPtl3Y_tzxHkMPiKYGpcikkk0sx_UKT3rYzEioJPCaF6dGzuHsZ-1XySfaNVU91-1VgiDctmpa0efY04kL7KNLU-qTTs37bOEKA3SnhLEnK7ADdHSraEIzPiNoyw9eiJYdeckN9VHBF_KbkAVPy4JfJBY7VUkmxVW0uV-HtGPfn2x5VllP11vdmVGACUeYonlELzGvxUlOlUiobjc4TviBqCYaa5CDPdvWH4Q=s200-no?authuser=0" class="w3-margin" alt="image" width="150px" height="150px" style="border-radius: 50%;">
<p><span class="name w3-padding w3-pink w3-round" style="font-weight: bolder;">Hi, I'm Tyler!</span></p>
<p style="font-weight: bolder;">Check out my links!</p>
</div>
<!-- Links section 1. Replace the # inside of the "" with your links. -->
<h4 class="margin-top-2" style="text-align: center;">MY SOCIAL NETWORKS</h4>
<div class="links-container">
<!-- <a href="#" class="w3-button w3-round-xlarge w3-theme-l1 w3-border link" target="_blank">Facebook</a> !-->
<!-- <a href="#" class="w3-button w3-round-xlarge w3-theme-l1 w3-border link" target="_blank">Instagram</a> !-->
<!-- <a href="#" class="w3-button w3-round-xlarge w3-theme-l1 w3-border link" target="_blank">Twitter</a> !-->
<a href="https://www.linkedin.com/in/tyler-mcmichael-44384a138/" class="w3-button w3-round-xlarge w3-theme-l1 w3-border link" target="_blank">LinkedIn</a>
</div>
<!-- Links section 2. Replace the # inside of the "" with your links. -->
<h4 class="margin-top-2" style="text-align: center;">MY CV</h4>
<div class="links-container">
<a href="#" class="w3-button w3-round-xlarge w3-theme-l1 w3-border link" target="_blank">Curriculum Vitae</a>
</div>
<!-- Links section 3. Replace the # inside of the "" with your links. -->
<h4 class="margin-top-2" style="text-align: center;">MY BLOG</h4>
<div class="links-container">
<a href="#" class="w3-button w3-round-xlarge w3-theme-l1 w3-border link" target="_blank">Hashnode</a>
</div>
<!-- Links section 3. Replace the # inside of the "" with your links. -->
<h4 class="margin-top-2" style="text-align: center;">MY BUSINESS</h4>
<div class="links-container">
<a href="#" class="w3-button w3-round-xlarge w3-theme-l1 w3-border link" target="_blank">Business</a>
</div>
<!-- Bottom section 3 -->
<div class="bottom margin-top-2 w3-padding w3-round">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-heart"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
<span style="vertical-align: 7px;"> 2021 - Jane Doe</span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-heart"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
</div>
<!-- Footer. This section contains an ad for W3Schools Spaces. You can leave it to support us. -->
<footer class="w3-container w3-center w3-padding-48">
<a class="w3-margin-bottom" href="https://www.w3schools.com/spaces" title="This website was made with W3schools Spaces. Make your own free website today!" target="_blank">
<img src="https://spaces.w3schools.com/logo_4x.png" alt="This website was made with W3schools Spaces. Make your own free website today!" width="50" height="50">
</a>
<!-- End footer -->
</footer>
</div>
<script>
feather.replace()
</script>
</body>
</html>
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.