I attempted to insert the HTML code for a button into my main index.html file after a specific line, but I encountered a strange issue. While the button displayed correctly, the homepage of my website suddenly vanished without any explanation.
Here is the HTML and CSS code for the button:
@import url("https://fonts.googleapis.com/css?family=Mukta:700");
* {
box-sizing: border-box;
}
/* CSS code continues... */
<link type="text/css" rel="stylesheet" href="assets/css/button.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<div id="yes">
<button class="learn-more">
<span class="circle" aria-hidden="true">
<span class="icon arrow"></span>
</span>
<span class="button-text">Check Out My Blogs!</span>
</button>
</div>Using code from another source, I wanted to add it to my main index.html file, which looks like this:
I intended to display the button code right after the text, "This is my new favorite thing to do when I am bored:)", located near the bottom of my index.html file. After trying to place the code myself, the button appeared but caused the homepage or the "hero" section of the website (located at the top) to disappear. Any suggestions on how to resolve this issue?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>Hussain Omer</title>
<!-- Head content continues... -->The above HTML code snippet is just a portion of my complete index.html file, as it is quite lengthy and locating the specific line would be challenging and confusing.