FSR060523 :- Create Sticky Sidebar

Output :-

1 Like
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sticky Sidebar</title>
  <link rel="stylesheet" href="styles.css">
</head>
<style>
    * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  display: flex;
  overflow: hidden;
}

.sidebar {
  position: sticky;
  top: 0;
  height: auto;
  width: 200px;
  background-color: #333;
  color: #fff;
  z-index: 2;
  transition: all 0.3s ease;
}

.sidebar ul {
  list-style: none;
  padding: 20px;
}

.sidebar li {
  margin-bottom: 10px;
}

.sidebar a {
  text-decoration: none;
  color: #fff;
  transition: color 0.3s ease;
}

.sidebar a:hover {
  color: #ff8c00;
}

.content {
  flex: 1;
  padding: 20px;
}

section {
  margin-bottom: 50px;
}

section h2 {
  font-size: 24px;
  margin-bottom: 10px;
}

section p {
  font-size: 16px;
  line-height: 1.5;
}

</style>
<body>
  <div class="container">
    <div class="sidebar">
      <ul>
        <li><a href="#section1">Section 1</a></li>
        <li><a href="#section2">Section 2</a></li>
        <li><a href="#section3">Section 3</a></li>
        <li><a href="#section4">Section 4</a></li>
        <li><a href="#section5">Section 5</a></li>
        <li><a href="#section6">Section 6</a></li>
        <li><a href="#section7">Section 7</a></li>
        <li><a href="#section8">Section 8</a></li>
        <li><a href="#section9">Section 9</a></li>
      </ul>
    </div>
    <div class="content">
      <section id="section1">
        <h2>Section 1</h2>
        <p>Mercury is the closest planet to the Sun and the smallest planet in our solar system. It has a barren and rocky surface with extreme temperatures, ranging from scorching hot during the day to freezing cold at night.</p>
      </section>
      <section id="section2">
        <h2>Section 2</h2>
        <p>Venus is often referred to as Earth's "twin" due to its similar size and proximity. It has a thick atmosphere composed mainly of carbon dioxide, creating a runaway greenhouse effect that makes it the hottest planet in our solar system.</p>
      </section>
      <section id="section3">
        <h2>Section 3</h2>
        <p> Earth is our home planet and the only known planet to support life. It has a diverse range of ecosystems, abundant water, and a protective atmosphere. Earth is characterized by its blue oceans, green landmasses, and the presence of life in various forms.</p>
      </section>
      <section id="section4">
        <h2>Section 4</h2>
        <p>Mars, also known as the "Red Planet," has a reddish appearance due to iron oxide on its surface. It has polar ice caps, a thin atmosphere, and a history of flowing water.</p>
      </section>
      <section id="section5">
        <h2>Section 5</h2>
        <p>Jupiter is the largest planet in our solar system, known for its distinctive bands of clouds and the Great Red Spot, a giant storm. It is composed mostly of hydrogen and helium and has numerous moons.</p>
      </section>
      <section id="section6">
        <h2>Section 6</h2>
        <p>Saturn is famous for its magnificent ring system made up of ice particles and debris. It is the second-largest planet and has a similar composition to Jupiter, with hydrogen and helium as its main components.</p>
      </section>
      <section id="section7">
        <h2>Section 7</h2>
        <p>Uranus is an ice giant planet characterized by its unique feature of being tilted on its side. It has a blue-green appearance due to the presence of methane in its atmosphere. </p>
      </section>
      <section id="section8">
        <h2>Section 8</h2>
        <p>Neptune is the farthest planet from the Sun and is also an ice giant. It has a deep blue coloration, again due to methane in its atmosphere. Neptune is known for its strong winds and active weather patterns.</p>
      </section>
      <section id="section9">
        <h2>Section 9</h2>
        <p>Although no longer classified as a planet, Pluto is a dwarf planet located in the outer regions of the solar system. It is a small and icy world with a reddish hue and a complex orbit that takes it inside the orbit of Neptune. </p>
      </section>
    </div>
  </div>
</body>
</html>

2 Likes
1 Like
1 Like

@Hiral_Khakhariya @akanshakaushik607. Mam in my code in the main there is issue in the main element. Please run the project and tell me how can I solve it. When I am calling the section, the little part of it hides behind the header.
Link: Computer_Language

**---------------------------------------------HTML------------------------------------**
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link
        href="https://fonts.googleapis.com/css2?family=Poiret+One&family=Raleway:wght@100;200;300;400;500;600;700;800;900&family=Rubik+Pixels&display=swap"
        rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="computerLanguage.css" />
    <title>Computer_Language</title>
</head>

<body>
    <header>
        <div id="logoDiv">
            <h1>MachineLanguage</h1>
        </div>
        <nav>
            <ul>
                <li><a id="home" href="#" target="_parent">Home</a></li>
                <li><a href="#html" target="_parent">HTML</a></li>
                <li><a href="#css" target="_parent">CSS</a></li>
                <li><a href="#" target="_parent">JavaScript</a></li>
            </ul>
        </nav>
        <div id="loginDiv">
            <a href="#login" target="_blank"></a>
        </div>
    </header>
    <aside>
        <h2 id="html">HTML</h2>
        <a href="#htmlHome" target="_parent">HTML Home</a>
        <a href="#htmlIntro" target="_parent">HTML Introduction</a>
        <a href="#htmlEditor" target="_parent">HTML Editors</a>
        <a href="#htmlBasics" target="_parent">HTML Basic</a>
        <a href="#htmlAttribute" target="_parent">HTML Attributes</a>
        <a href="" target="_parent">HTML Headings</a>
        <a href="" target="_parent">HTML Paragraph</a>
        <a href="" target="_parent">HTML Styles</a>
        <a href="" target="_parent">HTML Formatting</a>
        <a href="" target="_parent">HTML Quotations</a>
        <a href="" target="_parent">HTML Comments</a>
        <a href="" target="_parent">HTML Colors</a>
        <a href="" target="_parent">HTML CSS</a>
        <a href="" target="_parent">HTML Links</a>
        <a href="" target="_parent">HTML Images</a>
        <a href="" target="_parent">HTML Favicon</a>
        <a href="" target="_parent">HTML Page Title</a>
        <a href="" target="_parent">HTML Tables</a>
        <a href="" target="_parent">HTML List</a>
        <a href="" target="_parent">HTML Block & Inline</a>
        <a href="" target="_parent">HTML Classes</a>
        <a href="" target="_parent">HTML Id</a>
        <a href="" target="_parent">HTML Iframes</a>
        <a href="" target="_parent">HTML Javascript</a>
        <a href="" target="_parent">HTML File Path</a>
        <a href="" target="_parent">HTML Head</a>
        <a href="" target="_parent">HTML Layout</a>
        <a href="" target="_parent">HTML Responsive</a>
        <a href="" target="_parent">HTML Computer Codes</a>
        <a href="" target="_parent">HTML Seamntic</a>
        <a href="" target="_parent">HTML Style Guid</a>
        <a href="" target="_parent">HTML Entities</a>
        <a href="" target="_parent">HTML Symbols</a>
        <a href="" target="_parent">HTML Emojis</a>
        <a href="" target="_parent">HTML Forms</a>
        <a href="" target="_parent">HTML Media</a>
        <a href="" target="_parent">HTML APIs</a>
        <br /><br />
        <h2 id="css">CSS</h2>
        <a href="" target="_parent">CSS Home</a>
        <a href="" target="_parent">CSS Introduction</a>
        <a href="" target="_parent">CSS Syntax</a>
        <a href="" target="_parent">CSS Seletors</a>
        <a href="" target="_parent">CSS How To</a>
        <a href="" target="_parent">CSS Comments</a>
        <a href="" target="_parent">CSS Color</a>
        <a href="" target="_parent">CSS Background</a>
        <a href="" target="_parent">CSS Margin</a>
        <a href="" target="_parent">CSS Padding</a>
        <a href="" target="_parent">CSS Height/Width</a>
        <a href="" target="_parent">CSS Box Model</a>
        <a href="" target="_parent">CSS Outline</a>
        <a href="" target="_parent">CSS Text</a>
        <a href="" target="_parent">CSS Fonts</a>
        <a href="" target="_parent">CSS Icons</a>
        <a href="" target="_parent">CSS Links</a>
        <a href="" target="_parent">CSS Lists</a>
        <a href="" target="_parent">CSS Tables</a>
        <a href="" target="_parent">CSS Display</a>
        <a href="" target="_parent">CSS Position</a>
        <a href="" target="_parent">CSS Z Index</a>
        <a href="" target="_parent">CSS Overflow</a>
        <a href="" target="_parent">CSS Float</a>
        <a href="" target="_parent">CSS Inline-block</a>
        <a href="" target="_parent">CSS Align</a>
    </aside>
    <main>
        <section>
<p> content </p>
       </section>
    </main>
</body>
</html>

**----------------------------------------------C S S--------------------------------------------**
html{
    scroll-behavior: smooth;
    font-family: 'Raleway', sans-serif;
}
header{
    border-bottom: 2px solid rgb(89, 89, 89);
    width: 100%;
    height: auto;
    position: fixed;
    top: 0px;
    right: 0px;
    left: 0px;
    z-index: 0;
    background-color: white;
}
header #logoDiv{
    border: 0px solid blue;
    width: 24%;
    height: auto;
    display: inline-block;
}
header #logoDiv h1{
    display: inline-block;
    margin: 0px;
    padding: 20px 20px;
    font-family: 'Rubik Pixels', cursive;
    color: blueviolet;
}




header nav{
    border: 0px solid teal;
    width: 50%;
    display: inline-block;
    height: auto;
}
header nav ul{
    border: 0px solid yellow;
    width: 60%;
    margin: auto;
    padding: 0px;
    text-align: center;
}
header nav ul li{
    list-style-type: none;
    padding: 20px 20px;
    display: inline-block;
}
header nav ul li a{
    border: 0px solid red;
    font-size: 20px;
    text-decoration: none;
    color: black;
    font-family: 'Raleway', sans-serif;
    font-weight: 500;
}
header nav ul li #home{
    color: rgb(255, 0, 0);
    font-weight: 800;
}
header nav ul li a:hover{
    font-size: 20px;
    border-bottom: 3px solid red;
    color: black;
    font-family: 'Raleway', sans-serif;
    font-weight: 700;
}


header #loginDiv{
    border: 0px solid blue;
    width: 24%;
    display: inline-block;
    height: auto;
}

aside{
    border-right: 5px solid rgb(89, 89, 89);
    position: fixed;
    z-index: -1;
    top: 79px;
    left: 0px;
    padding: 0px;
    margin: 0px;
    width: 15%;
    height: 700px;
    overflow-y: scroll;
    scroll-behavior: smooth;
    background-color: #E7E9EB;
}
aside h2{
    border-bottom: 2px solid rebeccapurple;
    color: rebeccapurple;
    margin-top: 0px;
}
aside a{
    text-decoration: none;
    width: 86.8%;
    display: inline-block;
    color: black;
    font-weight: 500;
    padding: 3px 15px;
}
aside a:hover{
    background-color: #CCCCCC;
}
main{
    border: 0px solid green;
    width: 85%;
    height: auto;
    margin-top: 70px;
    margin-left: 14.3%;
    z-index: -1;
    position: absolute;
    padding-left: 20px;
    display: inline-block;
}
main section{
    width: 90%;
    margin: auto;
    height: auto;
    border-bottom: 2px solid gray;
    padding-bottom: 20px;
}
main section h1{
    color: blue;
}
main section table{
    border-left: 3px solid green;
    /* margin: auto; */
}


2 Likes
HTML Part
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Community Task</title>
    <link rel="stylesheet" type="text/css" href="task.css">
</head>

<body>
    <div class="main_box">
        <div class="list_box">
            <ul>
                <li>Section1</li>
                <li>Section2</li>
                <li>Section3</li>
                <li>Section4</li>
                <li>Section5</li>
                <li>Section6</li>
                <li>Section7</li>
                <li>Section8</li>
                <li>Section9</li>
            </ul>
        </div>
        <div class="content_box">
            <section>
                <h1>Section 1</h1>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, quos, quod, quibusdam,
                    repellat,
                    repudiandae,
                    quaerat, quasi, quas, quae, quam, quod, quibusdam, repellat, repudiandae, quaerat, quasi, quas,
                    quae,
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, quos, quod, quibusdam,
                    repellat,
                    repudiandae,
                    quaerat, quasi, quas, quae, quam, quod, quibusdam, repellat, repudiandae, quaerat, quasi, quas,
                    quae,Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, quos, quod, quibusdam,
                    repellat,
                    repudiandae,
                    quaerat, quasi, quas, quae, quam, quod, quibusdam, repellat, repudiandae, quaerat, quasi, quas,
                    quae,Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, quos, quod, quibusdam,
                    repellat,
                    repudiandae,
                    quaerat, quasi, quas, quae, quam, quod, quibusdam, repellat, repudiandae, quaerat, quasi, quas,
                    quae,Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, quos, quod, quibusdam,
                    repellat,
                    repudiandae,
                    quaerat, quasi, quas, quae, quam, quod, quibusdam, repellat, repudiandae, quaerat, quasi, quas,
                    quae,
                </p>
            </section>
            <section>
                <h1>Section 2</h1>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, quos, quod, quibusdam,
                    repellat,
                    repudiandae,
                    quaerat, quasi, quas, quae, quam, quod, quibusdam, repellat, repudiandae, quaerat, quasi, quas,
                    quae,
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, quos, quod, quibusdam,
                    repellat,
                    repudiandae,
                    quaerat, quasi, quas, quae, quam, quod, quibusdam, repellat, repudiandae, quaerat, quasi, quas,
                    quae,Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, quos, quod, quibusdam,
                    repellat,
                    repudiandae,
                    quaerat, quasi, quas, quae, quam, quod, quibusdam, repellat, repudiandae, quaerat, quasi, quas,
                    quae,Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, quos, quod, quibusdam,
                    repellat,
                    repudiandae,
                    quaerat, quasi, quas, quae, quam, quod, quibusdam, repellat, repudiandae, quaerat, quasi, quas,
                    quae,Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, quos, quod, quibusdam,
                    repellat,
                    repudiandae,
                    quaerat, quasi, quas, quae, quam, quod, quibusdam, repellat, repudiandae, quaerat, quasi, quas,
                    quae,
                </p>
            </section>
            <section>
                <h1>Section 3</h1>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, quos, quod, quibusdam,
                    repellat,
                    repudiandae,
                    quaerat, quasi, quas, quae, quam, quod, quibusdam, repellat, repudiandae, quaerat, quasi, quas,
                    quae,
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, quos, quod, quibusdam,
                    repellat,
                    repudiandae,
                    quaerat, quasi, quas, quae, quam, quod, quibusdam, repellat, repudiandae, quaerat, quasi, quas,
                    quae,Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, quos, quod, quibusdam,
                    repellat,
                    repudiandae,
                    quaerat, quasi, quas, quae, quam, quod, quibusdam, repellat, repudiandae, quaerat, quasi, quas,
                    quae,Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, quos, quod, quibusdam,
                    repellat,
                    repudiandae,
                    quaerat, quasi, quas, quae, quam, quod, quibusdam, repellat, repudiandae, quaerat, quasi, quas,
                    quae,Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, quos, quod, quibusdam,
                    repellat,
                    repudiandae,
                    quaerat, quasi, quas, quae, quam, quod, quibusdam, repellat, repudiandae, quaerat, quasi, quas,
                    quae,
                </p>
            </section>
            <section>
                <h1>Section 4</h1>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, quos, quod, quibusdam,
                    repellat,
                    repudiandae,
                    quaerat, quasi, quas, quae, quam, quod, quibusdam, repellat, repudiandae, quaerat, quasi, quas,
                    quae,
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, quos, quod, quibusdam,
                    repellat,
                    repudiandae,
                    quaerat, quasi, quas, quae, quam, quod, quibusdam, repellat, repudiandae, quaerat, quasi, quas,
                    quae,Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, quos, quod, quibusdam,
                    repellat,
                    repudiandae,
                    quaerat, quasi, quas, quae, quam, quod, quibusdam, repellat, repudiandae, quaerat, quasi, quas,
                    quae,Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, quos, quod, quibusdam,
                    repellat,
                    repudiandae,
                    quaerat, quasi, quas, quae, quam, quod, quibusdam, repellat, repudiandae, quaerat, quasi, quas,
                    quae,Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, quos, quod, quibusdam,
                    repellat,
                    repudiandae,
                    quaerat, quasi, quas, quae, quam, quod, quibusdam, repellat, repudiandae, quaerat, quasi, quas,
                    quae,
                </p>
            </section>
            <section>
                <h1>Section 5</h1>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, quos, quod, quibusdam,
                    repellat,
                    repudiandae,
                    quaerat, quasi, quas, quae, quam, quod, quibusdam, repellat, repudiandae, quaerat, quasi, quas,
                    quae,
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, quos, quod, quibusdam,
                    repellat,
                    repudiandae,
                    quaerat, quasi, quas, quae, quam, quod, quibusdam, repellat, repudiandae, quaerat, quasi, quas,
                    quae,Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, quos, quod, quibusdam,
                    repellat,
                    repudiandae,
                    quaerat, quasi, quas, quae, quam, quod, quibusdam, repellat, repudiandae, quaerat, quasi, quas,
                    quae,Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, quos, quod, quibusdam,
                    repellat,
                    repudiandae,
                    quaerat, quasi, quas, quae, quam, quod, quibusdam, repellat, repudiandae, quaerat, quasi, quas,
                    quae,Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, quos, quod, quibusdam,
                    repellat,
                    repudiandae,
                    quaerat, quasi, quas, quae, quam, quod, quibusdam, repellat, repudiandae, quaerat, quasi, quas,
                    quae,
                </p>
            </section>
            <section>
                <h1>Section 6</h1>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, quos, quod, quibusdam,
                    repellat,
                    repudiandae,
                    quaerat, quasi, quas, quae, quam, quod, quibusdam, repellat, repudiandae, quaerat, quasi, quas,
                    quae,
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, quos, quod, quibusdam,
                    repellat,
                    repudiandae,
                    quaerat, quasi, quas, quae, quam, quod, quibusdam, repellat, repudiandae, quaerat, quasi, quas,
                    quae,Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, quos, quod, quibusdam,
                    repellat,
                    repudiandae,
                    quaerat, quasi, quas, quae, quam, quod, quibusdam, repellat, repudiandae, quaerat, quasi, quas,
                    quae,Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, quos, quod, quibusdam,
                    repellat,
                    repudiandae,
                    quaerat, quasi, quas, quae, quam, quod, quibusdam, repellat, repudiandae, quaerat, quasi, quas,
                    quae,Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, quos, quod, quibusdam,
                    repellat,
                    repudiandae,
                    quaerat, quasi, quas, quae, quam, quod, quibusdam, repellat, repudiandae, quaerat, quasi, quas,
                    quae,
                </p>
            </section>
            <section>
                <h1>Section 7</h1>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, quos, quod, quibusdam,
                    repellat,
                    repudiandae,
                    quaerat, quasi, quas, quae, quam, quod, quibusdam, repellat, repudiandae, quaerat, quasi, quas,
                    quae,
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, quos, quod, quibusdam,
                    repellat,
                    repudiandae,
                    quaerat, quasi, quas, quae, quam, quod, quibusdam, repellat, repudiandae, quaerat, quasi, quas,
                    quae,Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, quos, quod, quibusdam,
                    repellat,
                    repudiandae,
                    quaerat, quasi, quas, quae, quam, quod, quibusdam, repellat, repudiandae, quaerat, quasi, quas,
                    quae,Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, quos, quod, quibusdam,
                    repellat,
                    repudiandae,
                    quaerat, quasi, quas, quae, quam, quod, quibusdam, repellat, repudiandae, quaerat, quasi, quas,
                    quae,Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, quos, quod, quibusdam,
                    repellat,
                    repudiandae,
                    quaerat, quasi, quas, quae, quam, quod, quibusdam, repellat, repudiandae, quaerat, quasi, quas,
                    quae,
                </p>
            </section>
            <section>
                <h1>Section 8</h1>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, quos, quod, quibusdam,
                    repellat,
                    repudiandae,
                    quaerat, quasi, quas, quae, quam, quod, quibusdam, repellat, repudiandae, quaerat, quasi, quas,
                    quae,
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, quos, quod, quibusdam,
                    repellat,
                    repudiandae,
                    quaerat, quasi, quas, quae, quam, quod, quibusdam, repellat, repudiandae, quaerat, quasi, quas,
                    quae,Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, quos, quod, quibusdam,
                    repellat,
                    repudiandae,
                    quaerat, quasi, quas, quae, quam, quod, quibusdam, repellat, repudiandae, quaerat, quasi, quas,
                    quae,Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, quos, quod, quibusdam,
                    repellat,
                    repudiandae,
                    quaerat, quasi, quas, quae, quam, quod, quibusdam, repellat, repudiandae, quaerat, quasi, quas,
                    quae,Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, quos, quod, quibusdam,
                    repellat,
                    repudiandae,
                    quaerat, quasi, quas, quae, quam, quod, quibusdam, repellat, repudiandae, quaerat, quasi, quas,
                    quae,
                </p>
            </section>
            <section>
                <h1>Section 9</h1>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, quos, quod, quibusdam,
                    repellat,
                    repudiandae,
                    quaerat, quasi, quas, quae, quam, quod, quibusdam, repellat, repudiandae, quaerat, quasi, quas,
                    quae,
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, quos, quod, quibusdam,
                    repellat,
                    repudiandae,
                    quaerat, quasi, quas, quae, quam, quod, quibusdam, repellat, repudiandae, quaerat, quasi, quas,
                    quae,Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, quos, quod, quibusdam,
                    repellat,
                    repudiandae,
                    quaerat, quasi, quas, quae, quam, quod, quibusdam, repellat, repudiandae, quaerat, quasi, quas,
                    quae,Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, quos, quod, quibusdam,
                    repellat,
                    repudiandae,
                    quaerat, quasi, quas, quae, quam, quod, quibusdam, repellat, repudiandae, quaerat, quasi, quas,
                    quae,Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, quos, quod, quibusdam,
                    repellat,
                    repudiandae,
                    quaerat, quasi, quas, quae, quam, quod, quibusdam, repellat, repudiandae, quaerat, quasi, quas,
                    quae,
                </p>
            </section>
        </div>
    </div>
</body>

</html>

CSS Part
.main_box {
    display: flex;
}

.list_box ul li {
    list-style-type: none;
    padding: 50px 50px 0 0;
    font-size: 20px;
    font-weight: 400;
    color: whitesmoke;
}

.list_box {
    width: 200px;
    position: sticky;
    top: 0;
    left: 0;
    z-index: 10;
    margin-right: 50px;
    height: 750px;
    background-color: rgb(47, 64, 71);
}

.content_box h1 {
    font-size: 40px;
    color: #0084ff;
    font-weight: 600;
}

.content_box p {
    font-size: 20px;
    color: red;
    font-style: italic;
}
2 Likes

https://codepen.io/yksealoj-the-styleful/pen/VwEJxRo

2 Likes
2 Likes

https://drive.google.com/drive/folders/1neqb2m9GUlurjy1WmUNtAXGRggDE0bXY?usp=sharing

sticky bar

1 Like
<title>CSS Task 1 - Position</title>
<style>
    header {
        /* border: 2px solid black; */
        background-color: gray;
        height: 30px;
        position: fixed;
        width: 100%;
        top: 0%;
        left: 0%;
        z-index: 2;
    }

    .side_bar{
        border: 2px solid black ;
        background-color: darkslategray;
        margin-top: 0%;
        padding: 10px;
        margin-left: 0%;
        width: 150px;
        height: 1000px;
        position: fixed;
        z-index: 1;
        
    }
    .list{
        list-style-type:none;
        padding: 10px;
        color: white;
        font-size: large;
    }
    .side_bar ul li a{
        text-decoration: none;
        color:white;
    }
    section{
        /* border: 2px solid black; */
        margin-top: 30px;
        top: 0;
        left: 200px;
        position: absolute;
        
    }
    main aside,section{
        display: inline-block;
    }
    .para_section{
        padding-bottom: 50px;    
    }
    
    .list:hover{
        background-color: blue;
    }
    html{
        scroll-behavior: smooth;
    }
</style>
</header>
<aside class="side_bar">
    <ul>
        <li class="list"><a href="#sec1">Section 1</a></li>
        <li class="list"><a href="#sec2">Section 2</a></li>
        <li class="list"><a href="#sec3">Section 3</a></li>
        <li class="list"><a href="#sec4">Section 4</a></li>
        <li class="list"><a href="#sec5">Section 5</a></li>
        <li class="list"><a href="#sec6">Section 6</a></li>
        <li class="list"><a href="#sec7">Section 7</a></li>
        <li class="list"><a href="#sec8">Section 8</a></li>
        <li class="list"><a href="#sec9">Section 9</a></li>
    </ul>
</aside>
<main>
<section>
    <div class="para_section">
        <h1 id="sec1">Section 1</h1>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate ipsam amet culpa id! Non quisquam aliquam consectetur ut ea alias ipsam nesciunt eum esse reiciendis eius officiis earum error temporibus repellat quasi accusamus incidunt placeat beatae, excepturi consequuntur debitis facilis, corrupti nam. Ipsa placeat aliquam ipsum perferendis. Quod, enim a?</p>
    </div>
    <div class="para_section">
        <h1 id="sec2">Section 2</h1>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate ipsam amet culpa id! Non quisquam aliquam consectetur ut ea alias ipsam nesciunt eum esse reiciendis eius officiis earum error temporibus repellat quasi accusamus incidunt placeat beatae, excepturi consequuntur debitis facilis, corrupti nam. Ipsa placeat aliquam ipsum perferendis. Quod, enim a?</p>
    </div>
    <div class="para_section">
        <h1 id="sec3">Section 3</h1>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate ipsam amet culpa id! Non quisquam aliquam consectetur ut ea alias ipsam nesciunt eum esse reiciendis eius officiis earum error temporibus repellat quasi accusamus incidunt placeat beatae, excepturi consequuntur debitis facilis, corrupti nam. Ipsa placeat aliquam ipsum perferendis. Quod, enim a?</p>
    </div>
    <div class="para_section">
        <h1 id="sec4">Section 4</h1>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate ipsam amet culpa id! Non quisquam aliquam consectetur ut ea alias ipsam nesciunt eum esse reiciendis eius officiis earum error temporibus repellat quasi accusamus incidunt placeat beatae, excepturi consequuntur debitis facilis, corrupti nam. Ipsa placeat aliquam ipsum perferendis. Quod, enim a?</p>
    </div>
    <div class="para_section">
        <h1 id="sec5">Section 5</h1>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate ipsam amet culpa id! Non quisquam aliquam consectetur ut ea alias ipsam nesciunt eum esse reiciendis eius officiis earum error temporibus repellat quasi accusamus incidunt placeat beatae, excepturi consequuntur debitis facilis, corrupti nam. Ipsa placeat aliquam ipsum perferendis. Quod, enim a?</p>
    </div>
    <div class="para_section">
        <h1 id="sec6">Section 6</h1>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate ipsam amet culpa id! Non quisquam aliquam consectetur ut ea alias ipsam nesciunt eum esse reiciendis eius officiis earum error temporibus repellat quasi accusamus incidunt placeat beatae, excepturi consequuntur debitis facilis, corrupti nam. Ipsa placeat aliquam ipsum perferendis. Quod, enim a?</p>
    </div>
    <div class="para_section">
        <h1 id="sec7">Section 7</h1>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate ipsam amet culpa id! Non quisquam aliquam consectetur ut ea alias ipsam nesciunt eum esse reiciendis eius officiis earum error temporibus repellat quasi accusamus incidunt placeat beatae, excepturi consequuntur debitis facilis, corrupti nam. Ipsa placeat aliquam ipsum perferendis. Quod, enim a?</p>
    </div>
    <div class="para_section">
        <h1 id="sec8">Section 8</h1>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate ipsam amet culpa id! Non quisquam aliquam consectetur ut ea alias ipsam nesciunt eum esse reiciendis eius officiis earum error temporibus repellat quasi accusamus incidunt placeat beatae, excepturi consequuntur debitis facilis, corrupti nam. Ipsa placeat aliquam ipsum perferendis. Quod, enim a?</p>
    </div>
    <div class="para_section">
        <h1 id="sec9">Section 9</h1>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate ipsam amet culpa id! Non quisquam aliquam consectetur ut ea alias ipsam nesciunt eum esse reiciendis eius officiis earum error temporibus repellat quasi accusamus incidunt placeat beatae, excepturi consequuntur debitis facilis, corrupti nam. Ipsa placeat aliquam ipsum perferendis. Quod, enim a?</p>
    </div>
</section>
</main>
1 Like

HTML PART

sticky sidebar
<div class="container">
<div class="sidebar">
        <ul>
             <li><a  href="#section1">section 1</a></li>
             <li><a  href="#section1">section 2</a></li>
             <li><a  href="#section1">section 3</a></li>
             <li><a  href="#section1">section 4</a></li>
             <li><a  href="#section1">section 5</a></li>
             <li><a  href="#section1">section 6</a></li>
             <li><a  href="#section1">section 7</a></li>
             <li><a  href="#section1">section 8</a></li>
             <li><a  href="#section1">section 9</a></li>
        </ul>
</div> 

<div class="content">

    <section id="section1">
    <h3>section 1</h3>
    <p>This is the content of Section 1  </p>
    </section>

    <section id="section2">
        <h3>section 2</h3>
        <p> This is the content of Section 2  </p>
        </section>

        <section id="section3">
            <h3>section 3</h3>
            <p> This is the content of Section 3  </p>
            </section>

            <section id="section4">
                <h3>section 4</h3>
                <p> This is the content of Section 4  </p>
                </section>

                <section id="section5">
                    <h3>section 5</h3>
                    <p> This is the content of Section 5  </p>
                    </section>

                    
                    <section id="section6">
                        <h3>section 6</h3>
                        <p> This is the content of Section 6  </p>
                        </section>

                        
                        <section id="section7">
                            <h3>section 7</h3>
                            <p>  This is the content of Section 7 </p>
                            </section>

                            <section id="section8">
                                <h3>section 8</h3>
                                <p> This is the content of Section 8   </p>
                                </section>

                                <section id="section9">
                                    <h3>section 9</h3>
                                    <p>  This is the content of Section 9  </p>
    </section>
                            
</div>

CSS PART

html body {
background-color: cornsilk;
scroll-behavior: smooth;

}

.container {
display: flex;
}

.sidebar ul li {
width: 200px;
position: sticky;
top: 20px;
padding: 10px;
box-sizing: border-box;
list-style-type: none;
}
.sidebar {
width: 200px;
position: sticky;
top: 0;
left: 0;
z-index: 10;
margin-right: 50px;
height: 750px;
background-color: rgb(18, 113, 154);
}
.content {
font-size: 20px;
color: #026336f6;
font-weight: 300;
margin-left: 20px;
}

section {
margin-bottom: 50px;
}

1 Like

https://drive.google.com/file/d/13tWiADqN2OSVnr27NIdy57bfZ2ojZxGA/view?usp=sharing