bugfix> javascript > 投稿

そこで、ボタンを作成するためのhtmlコードを特定の行の後にメインのindex.htmlファイルに貼り付けたいと思いました。やってみましたが。ボタンは出力されますが、ウェブページのホームページが突然消えてしまいます。理由はわかりません。

これはボタンのHTMLおよびCSSコードです。

@import url("https://fonts.googleapis.com/css?family=Mukta:700");
* {
  box-sizing: border-box;
}
*::before,
*::after {
  box-sizing: border-box;
}
body {
  font-family: "Mukta", sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  min-height: 100vh;
  background: #f3f8fa;
}
button {
  position: relative;
  display: inline-block;
  cursor: pointer;
  outline: none;
  border: 0;
  vertical-align: middle;
  text-decoration: none;
  background: transparent;
  padding: 0;
  font-size: inherit;
  font-family: inherit;
}
button.learn-more {
  width: 12rem;
  height: auto;
}
button.learn-more .circle {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: relative;
  right: 25px;
  display: block;
  margin: 0;
  width: 3rem;
  height: 3rem;
  background: #282936;
  border-radius: 1.625rem;
}
button.learn-more .circle .icon {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  background: #fff;
}
button.learn-more .circle .icon.arrow {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  left: 0.625rem;
  width: 1.125rem;
  height: 0.125rem;
  background: none;
}
button.learn-more .circle .icon.arrow::before {
  position: absolute;
  content: "";
  top: -0.25rem;
  right: 0.0625rem;
  width: 0.625rem;
  height: 0.625rem;
  border-top: 0.125rem solid #fff;
  border-right: 0.125rem solid #fff;
  transform: rotate(45deg);
}
button.learn-more .button-text {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.75rem 0;
  margin: 0 0 0 1.85rem;
  color: #282936;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
  text-transform: uppercase;
}
button:hover .circle {
  width: 125%;
}
button:hover .circle .icon.arrow {
  background: #fff;
  transform: translate(1rem, 0);
}
button:hover .button-text {
  color: #fff;
}
@supports (display: grid) {
  body {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 0.625rem;
    grid-template-areas: ". main main ." ". main main .";
  }
  #yes {
    grid-area: main;
    align-self: center;
    justify-self: center;
  }
}

<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>

上記のコードを別のソースから使用しましたが、メインのindex.htmlファイルに上記のコードを貼り付けたいと思います。

ボタンのhtmlコードは、「退屈しているときにこれが私の新しいお気に入りのことです:)疑問に思うかもしれません...」と表示された直後に表示されるようにしたいと思います。メインのindex.htmlファイルをスクロールします。自分で行の後にhtmlコードを入れてみましたが、前述のようにボタンは表示されませんが、ホームページまたはWebサイトの「ヒーロー」セクション(上部にあります)が消えます。助けてくれませんか?

<!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>
  <meta content="" name="descriptison">
  <meta content="" name="keywords">
  <link href="assets/img/favicon.png" rel="icon">
  <link href="assets/img/apple-touch-icon.png" rel="apple-touch-icon">
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Raleway:300,300i,400,400i,500,500i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet">
  <link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <link href="assets/vendor/icofont/icofont.min.css" rel="stylesheet">
  <link href="assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
  <link href="assets/vendor/venobox/venobox.css" rel="stylesheet">
  <link href="assets/vendor/owl.carousel/assets/owl.carousel.min.css" rel="stylesheet">
  <link href="assets/vendor/aos/aos.css" rel="stylesheet">
  <link href="assets/css/style.css" rel="stylesheet">
  <!-- Global site tag (gtag.js) - Google Analytics -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-180664536-1">
  </script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag() {
      dataLayer.push(arguments);
    }
    gtag('js', new Date());
    gtag('config', 'UA-180664536-1');
  </script>
</head>
<body>
  <!-- ======= Mobile nav toggle button ======= -->
  <!-- ======= Header ======= -->
  <header id="header" class="d-flex flex-column justify-content-center">
    <nav class="nav-menu">
      <ul>
        <li class="active"><a href="#hero"><i class="bx bx-home"></i> <span>Home</span></a></li>
        <li><a href="#about"><i class="bx bx-user"></i> <span>About Me</span></a></li>
        <li><a href="#resume"><i class="bx bx-file-blank"></i> <span>Resume</span></a></li>
        <li><a href="#portfolio"><i class="bx bx-book-content"></i> <span>Projects</span></a></li>
        <li><a href="#services"><i class="bx bx-server"></i> <span>Blogs</span></a></li>
        <li><a href="#services"><i class="bx bx-server"></i> <span>Skills</span></a></li>
        <li><a href="#contact"><i class="bx bx-envelope"></i> <span>Contact</span></a></li>
      </ul>
    </nav>
    <!-- .nav-menu -->
  </header>
  <!-- End Header -->
  <!-- ======= Hero Section ======= -->
  <section id="hero" class="d-flex flex-column justify-content-center">
    <div class="container" data-aos="zoom-in" data-aos-delay="100">
      <h1>Hussain Omer</h1>
      <p>I'm a <span class="typed" data-typed-items="Coder, Leader, Team-Player, Blog Writer, Adventurer"></span></p>
      <div class="social-links">
        <!--<a href="#" class="twitter"><i class="bx bxl-twitter"></i></a>
            <a href="#" class="facebook"><i class="bx bxl-facebook"></i></a>-->
        <a target="_blank" rel="noopener noreferrer" href="https://www.linkedin.com/in/kaustubh-prabhakar/" class="linkedin"><i class="bx bxl-linkedin"></i></a>
        <a target="_blank" rel="noopener noreferrer" href="https://github.com/SantaKaus" class="github"><i class="bx bxl-github"></i></a>
        <a target="_blank" rel="noopener noreferrer" href="https://www.instagram.com/h.s.z_11/" class="instagram"><i class="bx bxl-instagram"></i></a>
      </div>
    </div>
  </section>
  <!-- End Hero -->
  <main id="main">
    <!-- ======= About Section ======= -->
    <section id="about" class="about portfolio services">
      <div class="container" data-aos="fade-up">
        <div class="section-title">
          <h2>My Story</h2>
        </div>
        <div class="row portfolio-container" data-aos="fade-up" data-aos-delay="200">
          <div class="col-lg-4 col-md-6 portfolio-item filter-app">
            <div class="portfolio-wrap">
              <img src="assets/img/portfolio/portfolio-1.jpg" class="img-fluid">
              <div class="portfolio-info">
                <h4>Lahore, Pakistan (2003-2010)</h4>
                <p>I was born in Lahore, the second largest city of Pakistan. This is where I did most of my education and developed many memories. I enjoyed the very bit of the city; from the diverse culture and to the beautiful greenary. I haven't visited
                  Pakistan in over 5 years, and I hope to go back some day &#128512;
              </div>
            </div>
          </div>
          <div class="col-lg-4 col-md-6 portfolio-item filter-web">
            <div class="portfolio-wrap">
              <img src="assets/img/portfolio/portfolio-3.jpg" class="img-fluid">
              <div class="portfolio-info">
                <h4>Helsinki, Finland (2007-2010)</h4>
                <p>From a very unique and enjoyable Finnish school syst
              </div>
            </div>
          </div>
          <div class="col-lg-4 col-md-6 portfolio-item filter-web">
            <div class="portfolio-wrap">
              <img src="assets/img/portfolio/portfolio-2.jpg" class="img-fluid">
              <div class="portfolio-info">
                <h4>Helsinki, Finland (2007-2010)</h4>
                <p>From a very unique and enjoyable Finnish school syst
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="section-title">
        <h2>About ME</h2>
        <p>I am a 17 year old with a enthusiastic drive to working with technology, and using my prowess in Computers to make a positive impact on this world. </p>
      </div>
      <img src="https://mail.google.com/mail/u/1?ui=2&ik=79098a413c&attid=0.1&permmsgid=msg-f:1687893372595235455&th=176c9a145c466a7f&view=att&disp=safe&realattid=176c9a0f10e523984941" align="left" width="370" height="500">
      <!-- <div style="display:inline-block;"> to put text under something or start new -->
      <div class="aligned">
        <div class="p">
          <p>Motivated by my love for numbers, I started to explore the many ways I can use my Mathematical knowledge and implement it into different areas. I was introduced to Computer Science in my junior years of high school, and I came to know that I
            was genuinely passionated about learning it. It offers a holistic approach to solve problems which I admire, and since then, I have transformed my interest into a personal hobby!</p>
          <p>I would always like to challenge myself and learn new programming langauges to increase the size of my toolbox. I was inspired by one of my friends to take my programming skills and put it into a good use; thus, I was introduced to competitive
            programming and large coding events such as hackathons!</p>
          <p>The intellectual challenges, creativity, and logic programming offers has always further strengthened the inevitable bond between us.</p>
          <p>Challenging myself allows me to not only grow outside my comfort zone, but gives a new perspective towards life, and how there is no limitations/boundaries that halt you from growing! It is everlasting. Once you develop the growth mindset, your
            journey just never comes to a complete stop! You keep on growing outside your comfort zone, and being able to easily push through any obstacles.</p>
          <blockquote>
            Nothing Is Impossible. The Word Itself Says 'IM Possible'
            <cite>Audrey Hepburn</cite>
          </blockquote>
        </div>
    </section>
    <!-- End About Section -->
    <!-- ======= Facts Section ======= -->
    <section id="facts" class="facts">
      <div class="container" data-aos="fade-up">
        <div class="section-title">
          <h2>What I am upto &#128515;</h2>
        </div>
        <div class="row">
          <div class="col-lg-4 col-md-6 icon-box" data-aos="fade-up">
            <h4 class="title">7CUPS.com</h4>
            <p class="description">I am currently on the pursuit to make a positive impact on the world. To do this, I started volunteering with 7Cups as a trained listener to support people having emotional distress by interacting with them and resolving any concerns they
              might have. Especially in these unprecendented times (a.k.a when COVID hit), it is important to guide and support the ones that require additional assistance</p>
          </div>
          <div class="col-lg-4 col-md-6 icon-box" data-aos="fade-up" data-aos-delay="100">
            <h4 class="title">School Clubs</h4>
            <p class="description">Being part of school clubs is personally my favourite thing:) Interacting with people, coming up with ideas and implementing it with various activities is a fun on its own! I am currently an active member of over 5 clubs and hold some executive
              positions. I'am the Vice-President of my school's STEM Club while also being the Technical Team Member for our school's Student Tech Hub</p>
          </div>
          <div class="col-lg-4 col-md-6 icon-box" data-aos="fade-up" data-aos-delay="200">
            <h4 class="title">Blog Writing</h4>
            <p class="description">This is my new favourite thing to do when I am bored:) You may wonder what kind of blogs I write and specifically about what genre I write about. The answer is everything! I write about what is on my mind, and what I learn from my experiences.
              Basically self-reflections. I also tend to give general advices to people through my blogs!</p>
          </div>
        </div>
      </div>
    </section>
    <!-- End Facts Section -->

上記のこのHTMLコードは、私のファイル全体がindex.htmlではありません。これは、私のファイルが非常に長く、同時に行を見つけるのが困難で混乱するためです。

回答 1 件
  • 新しいスニペット、リンク、スクリプトを使用してコードを編集しました。左端にEDITEDで始まるコメントを残したので、どこにあるかわかります。ここで行う必要があるのは、適切なフォルダーのリンクに記載されているCSSスタイルシートを作成することだけです。

    <!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>
      <meta content="" name="descriptison">
      <meta content="" name="keywords">
      <link href="assets/img/favicon.png" rel="icon">
      <link href="assets/img/apple-touch-icon.png" rel="apple-touch-icon">
      <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Raleway:300,300i,400,400i,500,500i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet">
      <link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
      <link href="assets/vendor/icofont/icofont.min.css" rel="stylesheet">
      <link href="assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
      <link href="assets/vendor/venobox/venobox.css" rel="stylesheet">
      <link href="assets/vendor/owl.carousel/assets/owl.carousel.min.css" rel="stylesheet">
      <link href="assets/vendor/aos/aos.css" rel="stylesheet">
      <link href="assets/css/style.css" rel="stylesheet">
    <!--EDITED: new link!-->
      <link type="text/css" rel="stylesheet" href="assets/css/button.css" />
      <!-- Global site tag (gtag.js) - Google Analytics -->
      <script async src="https://www.googletagmanager.com/gtag/js?id=UA-180664536-1">
      </script>
      <script>
        window.dataLayer = window.dataLayer || [];
        function gtag() {
          dataLayer.push(arguments);
        }
        gtag('js', new Date());
        gtag('config', 'UA-180664536-1');
      </script>
    </head>
    <body>
    <!--EDITED: new Script-->  
      <script async src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
      <!-- ======= Mobile nav toggle button ======= -->
      <!-- ======= Header ======= -->
      <header id="header" class="d-flex flex-column justify-content-center">
        <nav class="nav-menu">
          <ul>
            <li class="active"><a href="#hero"><i class="bx bx-home"></i> <span>Home</span></a></li>
            <li><a href="#about"><i class="bx bx-user"></i> <span>About Me</span></a></li>
            <li><a href="#resume"><i class="bx bx-file-blank"></i> <span>Resume</span></a></li>
            <li><a href="#portfolio"><i class="bx bx-book-content"></i> <span>Projects</span></a></li>
            <li><a href="#services"><i class="bx bx-server"></i> <span>Blogs</span></a></li>
            <li><a href="#services"><i class="bx bx-server"></i> <span>Skills</span></a></li>
            <li><a href="#contact"><i class="bx bx-envelope"></i> <span>Contact</span></a></li>
          </ul>
        </nav>
        <!-- .nav-menu -->
      </header>
      <!-- End Header -->
      <!-- ======= Hero Section ======= -->
      <section id="hero" class="d-flex flex-column justify-content-center">
        <div class="container" data-aos="zoom-in" data-aos-delay="100">
          <h1>Hussain Omer</h1>
          <p>I'm a <span class="typed" data-typed-items="Coder, Leader, Team-Player, Blog Writer, Adventurer"></span></p>
          <div class="social-links">
            <!--<a href="#" class="twitter"><i class="bx bxl-twitter"></i></a>
                <a href="#" class="facebook"><i class="bx bxl-facebook"></i></a>-->
            <a target="_blank" rel="noopener noreferrer" href="https://www.linkedin.com/in/kaustubh-prabhakar/" class="linkedin"><i class="bx bxl-linkedin"></i></a>
            <a target="_blank" rel="noopener noreferrer" href="https://github.com/SantaKaus" class="github"><i class="bx bxl-github"></i></a>
            <a target="_blank" rel="noopener noreferrer" href="https://www.instagram.com/h.s.z_11/" class="instagram"><i class="bx bxl-instagram"></i></a>
          </div>
        </div>
      </section>
      <!-- End Hero -->
      <main id="main">
        <!-- ======= About Section ======= -->
        <section id="about" class="about portfolio services">
          <div class="container" data-aos="fade-up">
            <div class="section-title">
              <h2>My Story</h2>
            </div>
            <div class="row portfolio-container" data-aos="fade-up" data-aos-delay="200">
              <div class="col-lg-4 col-md-6 portfolio-item filter-app">
                <div class="portfolio-wrap">
                  <img src="assets/img/portfolio/portfolio-1.jpg" class="img-fluid">
                  <div class="portfolio-info">
                    <h4>Lahore, Pakistan (2003-2010)</h4>
                    <p>I was born in Lahore, the second largest city of Pakistan. This is where I did most of my education and developed many memories. I enjoyed the very bit of the city; from the diverse culture and to the beautiful greenary. I haven't visited
                      Pakistan in over 5 years, and I hope to go back some day &#128512;
                  </div>
                </div>
              </div>
              <div class="col-lg-4 col-md-6 portfolio-item filter-web">
                <div class="portfolio-wrap">
                  <img src="assets/img/portfolio/portfolio-3.jpg" class="img-fluid">
                  <div class="portfolio-info">
                    <h4>Helsinki, Finland (2007-2010)</h4>
                    <p>From a very unique and enjoyable Finnish school syst
                  </div>
                </div>
              </div>
              <div class="col-lg-4 col-md-6 portfolio-item filter-web">
                <div class="portfolio-wrap">
                  <img src="assets/img/portfolio/portfolio-2.jpg" class="img-fluid">
                  <div class="portfolio-info">
                    <h4>Helsinki, Finland (2007-2010)</h4>
                    <p>From a very unique and enjoyable Finnish school syst
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="section-title">
            <h2>About ME</h2>
            <p>I am a 17 year old with a enthusiastic drive to working with technology, and using my prowess in Computers to make a positive impact on this world. </p>
          </div>
          <img src="https://mail.google.com/mail/u/1?ui=2&ik=79098a413c&attid=0.1&permmsgid=msg-f:1687893372595235455&th=176c9a145c466a7f&view=att&disp=safe&realattid=176c9a0f10e523984941" align="left" width="370" height="500">
          <!-- <div style="display:inline-block;"> to put text under something or start new -->
          <div class="aligned">
            <div class="p">
              <p>Motivated by my love for numbers, I started to explore the many ways I can use my Mathematical knowledge and implement it into different areas. I was introduced to Computer Science in my junior years of high school, and I came to know that I
                was genuinely passionated about learning it. It offers a holistic approach to solve problems which I admire, and since then, I have transformed my interest into a personal hobby!</p>
              <p>I would always like to challenge myself and learn new programming langauges to increase the size of my toolbox. I was inspired by one of my friends to take my programming skills and put it into a good use; thus, I was introduced to competitive
                programming and large coding events such as hackathons!</p>
              <p>The intellectual challenges, creativity, and logic programming offers has always further strengthened the inevitable bond between us.</p>
              <p>Challenging myself allows me to not only grow outside my comfort zone, but gives a new perspective towards life, and how there is no limitations/boundaries that halt you from growing! It is everlasting. Once you develop the growth mindset, your
                journey just never comes to a complete stop! You keep on growing outside your comfort zone, and being able to easily push through any obstacles.</p>
              <blockquote>
                Nothing Is Impossible. The Word Itself Says 'IM Possible'
                <cite>Audrey Hepburn</cite>
              </blockquote>
            </div>
        </section>
        <!-- End About Section -->
        <!-- ======= Facts Section ======= -->
        <section id="facts" class="facts">
          <div class="container" data-aos="fade-up">
            <div class="section-title">
              <h2>What I am upto &#128515;</h2>
            </div>
            <div class="row">
              <div class="col-lg-4 col-md-6 icon-box" data-aos="fade-up">
                <h4 class="title">7CUPS.com</h4>
                <p class="description">I am currently on the pursuit to make a positive impact on the world. To do this, I started volunteering with 7Cups as a trained listener to support people having emotional distress by interacting with them and resolving any concerns they
                  might have. Especially in these unprecendented times (a.k.a when COVID hit), it is important to guide and support the ones that require additional assistance</p>
              </div>
              <div class="col-lg-4 col-md-6 icon-box" data-aos="fade-up" data-aos-delay="100">
                <h4 class="title">School Clubs</h4>
                <p class="description">Being part of school clubs is personally my favourite thing:) Interacting with people, coming up with ideas and implementing it with various activities is a fun on its own! I am currently an active member of over 5 clubs and hold some executive
                  positions. I'am the Vice-President of my school's STEM Club while also being the Technical Team Member for our school's Student Tech Hub</p>
              </div>
              <div class="col-lg-4 col-md-6 icon-box" data-aos="fade-up" data-aos-delay="200">
                <h4 class="title">Blog Writing</h4>
                <p class="description">This is my new favourite thing to do when I am bored:) You may wonder what kind of blogs I write and specifically about what genre I write about. The answer is everything! I write about what is on my mind, and what I learn from my experiences.
                  Basically self-reflections. I also tend to give general advices to people through my blogs!</p>
              </div>
    <!--EDITED: new Part!-->          
              <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>
            </div>
          </div>
        </section>
        <!-- End Facts Section -->
    
    

あなたの答え