haciyevmayis/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Scroll To Text Fragment</title>
    <style>
      * {
        box-sizing: border-box;
      }
      html {
        font-size: 24px;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
        font-weight: 100;
        line-height: 1.7;
        scroll-behavior: smooth;
      }
      body {
        padding: 0;
        margin: 0;
      }
      header {
        background-color: cornflowerblue;
        color: white;
        padding: 3rem 1rem;
      }
      nav,
      main {
        padding: 1rem;
      }
      h1 {
        font-size: 3.6rem;
      }
      h2 {
        font-size: 2.4rem;
      }
      h3 {
        font-size: 2rem;
      }
      p {
        font-size: 1.2rem;
      }

      :target {
        font-weight: 900;
        background-color: crimson;
        color: white;
      }
    </style>
  </head>
  <body>
    <header id="masthead">
      <h1 id="first">scroll to text fragment</h1>
    </header>
    <nav>
      <a href="two.html">NAV Page</a>
    </nav>
    <main id="main">
      <h2 id="second">text fragments</h2>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit eaque
        aliquid quae, exercitationem animi quos est delectus molestiae
        voluptates magni enim voluptatum natus quasi ullam dolorum illo
        recusandae suscipit dicta.
      </p>
      <p>Franks and beans.</p>
      <p>
        Totam veritatis, exercitationem placeat animi qui, alias adipisci
        necessitatibus accusantium culpa eius quibusdam minus enim repudiandae
        fuga ipsum nulla dolore doloremque minima in! Labore ratione expedita,
        laudantium modi nisi rem!
      </p>
      <p>
        Asperiores excepturi iure accusantium facilis quasi, nulla rem aliquid
        perspiciatis, magni nisi alias voluptatum quisquam veritatis qui
        consequuntur id pariatur dolorum cupiditate. Beatae exercitationem sit
        delectus natus. Eos, esse numquam.
      </p>
      <h3 id="third">Third heading</h3>
      <p>
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quo voluptatum
        dolor, sequi necessitatibus odio tempore enim recusandae expedita harum
        mollitia. Voluptatum accusamus id dignissimos quisquam doloremque
        accusantium beatae corrupti eaque?
      </p>
      <p>
        Quos praesentium illum harum dolor obcaecati excepturi sequi, itaque
        porro sed quibusdam aspernatur quo ducimus, neque nobis dolorum facere,
        magnam repellendus quas inventore deserunt. Eos porro molestias error ea
        quaerat?
      </p>
      <p>
        Hic odit distinctio dolore accusantium harum facere! Dignissimos ut
        excepturi veritatis velit non sequi placeat architecto aliquid
        consequuntur aspernatur, ad magni voluptatibus, quo vero, distinctio
        exercitationem. Sint assumenda quaerat aperiam.
      </p>
      <p>
        Nemo consectetur qui reiciendis laborum adipisci quasi quis optio
        temporibus aspernatur inventore cum pariatur quibusdam porro voluptas
        rerum tempora debitis facere non, deserunt quod neque cumque ipsum?
        Eius, dolorum amet.
      </p>
    </main>
  </body>
</html>

## two.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        box-sizing: border-box;
      }
      html {
        font-size: 24px;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
        font-weight: 100;
        line-height: 1.7;
        scroll-behavior: smooth;
      }
      body {
        padding: 0;
        margin: 0;
      }
      li {
        list-style: none;
        font-size: 1.2rem;
      }
      li > a {
        color: orange;
        font-weight: 500;
      }
      :target {
        background-color: crimson;
        color: white;
        font-weight: 500;
      }
    </style>
  </head>
  <body>
    <nav>
      <ul>
        <li><a href="index.html#third">index.html#third</a></li>
        <li>
          <a href="index.html#:~:text=Franks">index.html#:~:text=Franks</a>
        </li>
        <li>
          <a href="index.html#:~:text=franks,beans"
            >index.html#:~:text=franks,beans</a
          >
        </li>
        <li>
          <a href="index.html#:~:text=culpa%20eius,ipsum%20nulla,-dolore"
            >index.html#:~:text=culpa%20eius,ipsum%20nulla,-dolore</a
          >
        </li>
        <li>
          <a
            href="index.html#:~:text=exercitationem-,animi%20quos,natus%20quasi,-ullam"
            >index.html#:~:text=exercitationem-,animi%20quos,natus%20quasi,-ullam</a
          >
        </li>
      </ul>
    </nav>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Scroll To Text Fragment</title>
	<style>
	* {
	box-sizing: border-box;
	}
	html {
	font-size: 24px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
	Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
	font-weight: 100;
	line-height: 1.7;
	scroll-behavior: smooth;
	}
	body {
	padding: 0;
	margin: 0;
	}
	header {
	background-color: cornflowerblue;
	color: white;
	padding: 3rem 1rem;
	}
	nav,
	main {
	padding: 1rem;
	}
	h1 {
	font-size: 3.6rem;
	}
	h2 {
	font-size: 2.4rem;
	}
	h3 {
	font-size: 2rem;
	}
	p {
	font-size: 1.2rem;
	}

	:target {
	font-weight: 900;
	background-color: crimson;
	color: white;
	}
	</style>
	</head>
	<body>
	<header id="masthead">
	<h1 id="first">scroll to text fragment</h1>
	</header>
	<nav>
	<a href="two.html">NAV Page</a>
	</nav>
	<main id="main">
	<h2 id="second">text fragments</h2>
	<p>
	Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit eaque
	aliquid quae, exercitationem animi quos est delectus molestiae
	voluptates magni enim voluptatum natus quasi ullam dolorum illo
	recusandae suscipit dicta.
	</p>
	<p>Franks and beans.</p>
	<p>
	Totam veritatis, exercitationem placeat animi qui, alias adipisci
	necessitatibus accusantium culpa eius quibusdam minus enim repudiandae
	fuga ipsum nulla dolore doloremque minima in! Labore ratione expedita,
	laudantium modi nisi rem!
	</p>
	<p>
	Asperiores excepturi iure accusantium facilis quasi, nulla rem aliquid
	perspiciatis, magni nisi alias voluptatum quisquam veritatis qui
	consequuntur id pariatur dolorum cupiditate. Beatae exercitationem sit
	delectus natus. Eos, esse numquam.
	</p>
	<h3 id="third">Third heading</h3>
	<p>
	Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quo voluptatum
	dolor, sequi necessitatibus odio tempore enim recusandae expedita harum
	mollitia. Voluptatum accusamus id dignissimos quisquam doloremque
	accusantium beatae corrupti eaque?
	</p>
	<p>
	Quos praesentium illum harum dolor obcaecati excepturi sequi, itaque
	porro sed quibusdam aspernatur quo ducimus, neque nobis dolorum facere,
	magnam repellendus quas inventore deserunt. Eos porro molestias error ea
	quaerat?
	</p>
	<p>
	Hic odit distinctio dolore accusantium harum facere! Dignissimos ut
	excepturi veritatis velit non sequi placeat architecto aliquid
	consequuntur aspernatur, ad magni voluptatibus, quo vero, distinctio
	exercitationem. Sint assumenda quaerat aperiam.
	</p>
	<p>
	Nemo consectetur qui reiciendis laborum adipisci quasi quis optio
	temporibus aspernatur inventore cum pariatur quibusdam porro voluptas
	rerum tempora debitis facere non, deserunt quod neque cumque ipsum?
	Eius, dolorum amet.
	</p>
	</main>
	</body>
	</html>