Hi everybody,

I'm trying to make a CSS Grid to show img, but I have a problem with layout.

my CSS

.gallery {
  position: relative;
  display: grid;
  grid-gap: 100px;
  grid-template-columns: 25% 30%;
}

.first_img {
  grid-column:1;
  grid-row: 1 / span 2;
}

.second_img {
  grid-column: 2;
  grid-row: 1;
  height: 20px;
}

.third_img {
  grid-column: 2;
  grid-row: 2;
  height: 20px;
}

my HTML

<div class="gallery">
 <div class="first_img"><a href="Res/Herman.png" target="blank">
           <img src="Res/herman01[thumbnails].png" class="main_img" alt="Herman"></a>
 </div>
 <div class="second_img" id="up_img"><a href="Res/Herman2.png" target="blank">
          <img src="Res/herman02[thumbnails].png" class="others_img" alt="Herman2"></a>
 </div>
 <div class="third_img" id="down_img"><a href="Res/Herman3.png" target="blank">
   <img src="Res/herman03[thumbnails].png" class="others_img" alt="Herman3"></a>
 </div>
</div>

My images are correctly positionned but the two on the right are the same size as the left pictures.

I would like a big img on the left and two small on the right, like this

https://ibb.co/k0Grqmm

Thank you in advance for your help

Hi all,

I'm building this site in Wordpress using the Avada theme and only know enough CSS to get myself in trouble. I'm trying to figure out how to make the transition to the sticky header less clunky -- there's no transition option within the theme itself that I can find so am curious if I'd be able to do this with CSS. I've spent the last few hours googling/troubleshooting and haven't found a solution. Any insight would be appreciated! Thank you!

So even though some changes can be fine-tuned individually for desktop and mobile with Squarespace 7.1 templates, it turns out this specific change can’t.

My website has a full-bleed video playing in the first section of the website. When I adjust the height of it to fit properly for desktop (to avoid cropping due to mismatch in aspect ratio vs size of the section), it won’t let me set a different height for mobile and it ends up being way too much height on the mobile version.

I’ve seen some people post CSS code that should fix this, but when I tried using the same code and just edit parts of it, it only worked halfway. I can’t seem to understand exactly how to adjust it to my liking.

Is there anyone here who could help me out and hopefully explain briefly how the different lines of code works? I would be super, super grateful for all help I can get.

Thanks in advance!

I have created an Editor and I want my Page on which the User writes to behave like in Word (It's a Rust Application). It should stay static in an A4 format and if the window gets too small to fit the whole page on it, the page should extend beyond the bottom and right side if necessary (so just like in word). Right now I'm kinda stuck, so any help is appreciated. Thanks in advance.
My code:

:root {
    --base: #141414;
    --border: #000000;
    --surface0: #222222;
    --surface1: #2d2d2d;
    --overlay0: #636363;
    --text: #e0e0e0;
    --font-size: 16px;
    --line-height: 1.5;
    --aspect-ratio: 1.0;
}


body {
    margin: 0;
    padding: 0;
    background-color: var(--base);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    font-family: Arial, sans-serif;
    padding-top: 20px;
    padding-bottom: 20px;
}


.toolbar {
    height: 25px;
    background-color: var(--surface0);
    color: var(--text);
    display: flex;
    align-items: center;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding: 0 10px;
    border-bottom: 1px solid var(--border);
}


.menubar {
    height: 45px;
    background-color: var(--surface0);
    color: var(--text);
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    position: fixed;
    top: 25px;
    left: 0;
    right: 0;
    padding: 0 20px;
    border-bottom: 1px solid var(--border);
}


.sidebar {
    width: 300px;
    background-color: var(--surface0);
    color: var(--text);
    overflow-y: auto;
    position: fixed;
    left: 0;
    top: 70px;
    bottom: 20px;
    padding: 20px;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.2);
}


.bottombar {
    height: 30px;
    background-color: var(--surface0);
    color: var(--text);
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0 20px;
    border-top: 1px solid var(--border);
}


.notepad-container {
    margin-top: 80px;
    margin-bottom: 40px;
    margin-right: 30px;
    margin-left: 330px;
    height: calc(100vh - 160px);
    width: calc((100vh - 160px) / 1.414);
    background-color: var(--surface1);
    border: 1px solid #444444;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}


.notepad-wrapper {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    white-space: pre-wrap;
}


.notepad-textarea {
    width: 100%;
    height: 100%;
    padding: 10px;
    font-size: 16px;
    border: none;
    outline: none;
    resize: none;
    background-color: var(--surface1);
    color: var(--text);
    font-size: var(--font-size);
    overflow-y: auto;
}I have created an Editor and I want my Page on which the User writes to behave like in Word (It's a Rust Application). It should stay static in an A4 format  and if the window gets too small to fit the whole page on it, the page should extend beyond the bottom and right side if necessary (so just like in word). Right now I'm kinda stuck, so any help is appreciated. Thanks in advance.
My code::root {
    --base: #141414;
    --border: #000000;
    --surface0: #222222;
    --surface1: #2d2d2d;
    --overlay0: #636363;
    --text: #e0e0e0;
    --font-size: 16px;
    --line-height: 1.5;
    --aspect-ratio: 1.0;
}


body {
    margin: 0;
    padding: 0;
    background-color: var(--base);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    font-family: Arial, sans-serif;
    padding-top: 20px;
    padding-bottom: 20px;
}


.toolbar {
    height: 25px;
    background-color: var(--surface0);
    color: var(--text);
    display: flex;
    align-items: center;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding: 0 10px;
    border-bottom: 1px solid var(--border);
}


.menubar {
    height: 45px;
    background-color: var(--surface0);
    color: var(--text);
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    position: fixed;
    top: 25px;
    left: 0;
    right: 0;
    padding: 0 20px;
    border-bottom: 1px solid var(--border);
}


.sidebar {
    width: 300px;
    background-color: var(--surface0);
    color: var(--text);
    overflow-y: auto;
    position: fixed;
    left: 0;
    top: 70px;
    bottom: 20px;
    padding: 20px;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.2);
}


.bottombar {
    height: 30px;
    background-color: var(--surface0);
    color: var(--text);
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0 20px;
    border-top: 1px solid var(--border);
}


.notepad-container {
    margin-top: 80px;
    margin-bottom: 40px;
    margin-right: 30px;
    margin-left: 330px;
    height: calc(100vh - 160px);
    width: calc((100vh - 160px) / 1.414);
    background-color: var(--surface1);
    border: 1px solid #444444;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}


.notepad-wrapper {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    white-space: pre-wrap;
}


.notepad-textarea {
    width: 100%;
    height: 100%;
    padding: 10px;
    font-size: 16px;
    border: none;
    outline: none;
    resize: none;
    background-color: var(--surface1);
    color: var(--text);
    font-size: var(--font-size);
    overflow-y: auto;
}

Using Naut from GitHub with some of the add-ons from there, no other changes done to it. I want to make the flair list pane that shows when selecting a flair while posting to have two or three columns instead of one long scrollable list.

Subreddit is r/LeeHi

Hello, for this site I want to write custom CSS and replace the banner picture for single game but I don't know which selectors to use. If I do .absolute.rounded it replaces the banners for all other games as well. In a parent node there is a reference to the specific title for each game e.g. for the game Ark Nova: href="/gamepanel?game=arknova"but putting that as a selector doesn't work.

Any help is appreciated.

I'm trying to use this on A03, so it does some weird stuff like automatically add <p> when it thinks its neccessry.

What I used was

#workskin .textbehind {
  position: relative;
  color: grey;
  opacity: 0.3;
  bottom: 27px;
}

and put the text a line under to make it overlap, but that means I have to have a line under it empty and cant have it in a wall of text

so I tried having it in the position:absolute in a relative div, but ao3 automatically gives it 3 <p> making the "text I want to have below 'Text in front'" with 3 empty spaces, when I want it right below

#workskin div.textbehind2 {
  position: absolute;
  color: grey;
  opacity: 0.3;
  bottom: 27px;
  height: 25;
  width: 1000;
}

#workskin div.relative {
  position: relative;
  width: 1111px;
  height: 25px;
}

from:

text in front<br />

Text behind</div></div>Text I want to have below 'Text in front'

to:

Is there a way to have text overlap other text, while allowing there to be text below above and at the sides?

(also I have no idea why it needs the width and height if its a div, but it wouldn't show otherwise)

here is my html file, can you plz fix it?

it is the id="import-export"

i left a coment : <!-- here --!>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Library Management</title>
   <style>
    body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 20px;
    background-color: #0f0f0f;
    width: 50%;
    line-height: 1.6;
    align-content: center;
    color: white;
    margin: auto;

}

h1 {
    color: #cccccc;
    margin-bottom: 20px;
}

h2 {
    color: #bbbbbb;
}

form {
    background-color: #000000;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
    margin-bottom: 20px;
}

label {
    display: block;
    margin-bottom: 10px;
}

input[type="text"],
textarea,
select {
    width: calc(100% - 10px);
    padding: 8px;
    font-size: 14px;
    border: 1px solid #333333;
    border-radius: 4px;
    width: 50%;
}

input[type="checkbox"] {
    margin-right: 5px;
    vertical-align: middle;
}

button {
    padding: 10px 15px;
    font-size: 14px;
    cursor: pointer;
    background-color: #0000ff;
    color: #000000;
    border: none;
    border-radius: 4px;
    width: 45%;
}

button:hover {
    background-color: #0000a3;
}

#book-list {
    margin-top: 20px;
}

.book {
    background-color: #000000;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #333333;
    border-radius: 4px;
}

.book .edit-icon {
    float: right;
    cursor: pointer;
    color: #000000;
    font-size: 18px;
}

.book .book-title {
    font-size: 18px;
    font-weight: bold;
    color: #cccccc;
    margin-bottom: 5px;
}

.book .book-details {
    margin-bottom: 3px;
    font-size: 14px;
    color: #999999;
}

#overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.5);
    z-index: 1000;
}

#edit-modal {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #000000;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
    z-index: 1001;
}

#edit-modal.active,
#overlay.active {
    display: block;
}

#import-export{
    display: alw;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #000000;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
    z-index: 1001;
}

#xml-file{
    padding: 10px 15px;
    font-size: 14px;
    cursor: pointer;
    background-color: #0000ff;
    color: #000000;
    border: none;
    border-radius: 4px;
    width: 45%;
}

   </style>
</head>
<body>
    <div id="body">
    <h1>Library Management</h1>
    <div>
        <h2>Add Book</h2>
        <form id="add-book-form">
            <label>
                Title:
                <input type="text" id="title" required>
            </label><br>
            <label>
                Author:
                <input type="text" id="author" required>
            </label><br>
            <label>
                Publishing House:
                <input type="text" id="publishing-house" required>
            </label><br>
            <label>
                Media Type:
                <select id="media-type" required>
                    <option value="" disabled selected>Select Media Type</option>
                    <option value="Book">Book</option>
                    <option value="Movie">Movie</option>
                    <option value="Video Game">Video Game</option>
                    <option value="Record">Record</option>
                    <option value="CD">CD</option>
                    <!-- Add more options for other media types if needed -->
                </select>
            </label><br>
            <label>
                Genre:
                <select id="genre" required>
                    <option value="" disabled selected>Select Genre</option>
                    <!-- Fiction Genres -->
                    <optgroup label="Book: Fiction Genres">
                        <option value="Literary Fiction">Literary Fiction</option>
                        <option value="Science Fiction">Science Fiction (Sci-Fi)</option>
                        <option value="Fantasy">Fantasy</option>
                        <option value="Mystery">Mystery</option>
                        <option value="Thriller">Thriller</option>
                        <option value="Horror">Horror</option>
                        <option value="Romance">Romance</option>
                        <option value="Historical Fiction">Historical Fiction</option>
                        <option value="Adventure">Adventure</option>
                        <option value="Satire">Satire</option>
                        <option value="Humor">Humor</option>
                        <option value="Urban Fiction">Urban Fiction</option>
                        <option value="Paranormal">Paranormal</option>
                        <option value="Dystopian">Dystopian</option>
                        <option value="Erotica">Erotica</option>
                    </optgroup>
                    <!-- Non-fiction Genres -->
                    <optgroup label="Book: Non-fiction Genres">
                        <option value="Biography/Autobiography">Biography/Autobiography</option>
                        <option value="Memoir">Memoir</option>
                        <option value="Self-Help">Self-Help</option>
                        <option value="Business/Personal Finance">Business/Personal Finance</option>
                        <option value="History">History</option>
                        <option value="Travel">Travel</option>
                        <option value="Essay">Essay</option>
                        <option value="Journalism">Journalism</option>
                        <option value="True Crime">True Crime</option>
                        <option value="Philosophy">Philosophy</option>
                        <option value="Psychology">Psychology</option>
                        <option value="Science/Nature">Science/Nature</option>
                        <option value="Health/Fitness">Health/Fitness</option>
                        <option value="Cooking/Food">Cooking/Food</option>
                        <option value="Art/Photography">Art/Photography</option>
                        <option value="Politics">Politics</option>
                        <option value="Religion/Spirituality">Religion/Spirituality</option>
                        <option value="Technology">Technology</option>
                    </optgroup>
                    <!-- Children's Genres -->
                    <optgroup label="Book: Children's Genres">
                        <option value="Picture Books">Picture Books</option>
                        <option value="Early Reader">Early Reader</option>
                        <option value="Middle Grade">Middle Grade</option>
                        <option value="Young Adult (YA)">Young Adult (YA)</option>
                    </optgroup>
                    <!-- Poetry Genres -->
                    <optgroup label="Book: Poetry Genres">
                        <option value="Lyric">Lyric</option>
                        <option value="Narrative">Narrative</option>
                        <option value="Epic">Epic</option>
                        <option value="Dramatic">Dramatic</option>
                        <option value="Satirical">Satirical</option>
                        <option value="Prose">Prose</option>
                        <option value="Haiku">Haiku</option>
                        <option value="Sonnet">Sonnet</option>
                        <option value="Free Verse">Free Verse</option>
                        <option value="Limerick">Limerick</option>
                        <option value="Ode">Ode</option>
                        <option value="Elegy">Elegy</option>
                        <option value="Pastoral">Pastoral</option>
                        <option value="Ballad">Ballad</option>
                        <option value="Blank Verse">Blank Verse</option>
                    </optgroup>

                    <optgroup label="Video Game Genre">
                        <option value="Adventure">Adventure</option>
                        <option value="Roll Playing">Roll Playing</option>
                        <option value="RPG">RPG</option>
                        <option value="Action">Action</option>
                        <option value="Simulation">Simulation</option>
                        <option value="Strategy">Strategy</option>
                        <option value="Sports">Sports</option>
                        <option value="Puzzle">Puzzle</option>
                        <option value="Shooter">Shooter</option>
                        <option value="Fighting">Fighting</option>
                        <option value="Horror">Horror</option>
                        <option value="Platformer">Platformer</option>
                        <option value="Racing">Racing</option>
                        <option value="MMO">MMO</option>
                        <option value="Educational">Educational</option>
                        <option value="Music/Rhythm">Music/Rhythm</option>
                        <option value="Sandbox/Open World">Sandbox/Open World</option>
                        <option value="Visual Novel">Visual Novel</option>
                        <option value="Party/Board Games">Party/Board Games</option>
                    </optgroup>

                    <optgroup label="Music Genre">
                        <option value="Pop">Pop</option>
                        <option value="Rock">Rock</option>
                        <option value="Alternative">Alternative</option>
                        <option value="Hip Hop/Rap">Hip Hop/Rap</option>
                        <option value="Electronic">Electronic</option>
                        <option value="R&B/Soul">R&B/Soul</option>
                        <option value="Jazz">Jazz</option>
                        <option value="Classical">Classical</option>
                        <option value="Country">Country</option>
                        <option value="Folk">Folk</option>
                        <option value="Blues">Blues</option>
                        <option value="Reggae">Reggae</option>
                        <option value="Metal">Metal</option>
                        <option value="Punk">Punk</option>
                        <option value="Gospel">Gospel</option>
                        <option value="Funk">Funk</option>
                        <option value="Disco">Disco</option>
                        <option value="World">World</option>
                        <option value="Opera">Opera</option>
                        <option value="Experimental/Avant-Garde">Experimental/Avant-Garde</option>
                    </optgroup>

                    <optgroup label="Movie Genre">
                        <option value="Action">Action</option>
                        <option value="Adventure">Adventure</option>
                        <option value="Comedy">Comedy</option>
                        <option value="Drama">Drama</option>
                        <option value="Horror">Horror</option>
                        <option value="Thriller">Thriller</option>
                        <option value="Sci-Fi">Sci-Fi</option>
                        <option value="Fantasy">Fantasy</option>
                        <option value="Mystery">Mystery</option>
                        <option value="Romance">Romance</option>
                        <option value="Musical">Musical</option>
                        <option value="Animation">Animation</option>
                        <option value="Family">Family</option>
                        <option value="War">War</option>
                        <option value="Western">Western</option>
                        <option value="Historical">Historical</option>
                        <option value="Documentary">Documentary</option>
                        <option value="Biography">Biography</option>
                        <option value="Sports">Sports</option>
                        <option value="Thriller">Thriller</option>
                    </optgroup>
                </select>
            </label><br>
            <label>
                Comments:
                <textarea id="comments">[ISBN_CODE],</textarea>
            </label><br>
            <label>
                Read:
                <input type="checkbox" id="read">
            </label><br>
            <button type="button" onclick="addBook()">Add Book</button>
        </form>
    </div>
    <div>
        <h2>Search Books</h2>
        <form id="search-form">
            <label>
                Search:
                <input type="text" id="search-query">
            </label><br>
            <label>
                <input type="checkbox" id="search-title"> Title
            </label>
            <label>
                <input type="checkbox" id="search-author"> Author
            </label>
            <label>
                <input type="checkbox" id="search-publishing-house"> Publishing House
            </label>
            <label>
                <input type="checkbox" id="search-comments"> Comments
            </label>
            <button type="button" onclick="searchBooks()">Search</button>
        </form>
    </div>
    <div>
        <h2>Filter Books</h2>
        <form id="filter-form">
            <label>
                Media Type:
                <select id="filter-media-type">
                    <option value="">All Media Types</option>
                    <option value="Book">Book</option>
                    <option value="Movie">Movie</option>
                    <option value="Video Game">Video Game</option>
                    <option value="Record">Record</option>
                    <option value="CD">CD</option>
                </select>
            </label>
            <label>
                Read Status:
                <select id="filter-read">
                    <option value="">All</option>
                    <option value="true">Read</option>
                    <option value="false">Unread</option>
                </select>
            </label>
            <button type="button" onclick="applyFilters()">Apply Filters</button>
            <button type="button" onclick="resetFilters()">Reset Filters</button>
        </form>
    </div>    
    <div id="book-list"></div>

    <div id="overlay"></div>
    <div id="edit-modal">
        <h2>Edit Book</h2>
        <form id="edit-book-form">
            <label>
                Title:
                <input type="text" id="edit-title" required>
            </label><br>
            <label>
                Author:
                <input type="text" id="edit-author" required>
            </label><br>
            <label>
                Publishing House:
                <input type="text" id="edit-publishing-house" required>
            </label><br>
            <label>
                Media Type:
                <select id="media-type" required>
                    <option value="" disabled selected>Select Media Type</option>
                    <option value="Book">Book</option>
                    <option value="Movie">Movie</option>
                    <option value="Video Game">Video Game</option>
                    <option value="Record">Record</option>
                    <option value="CD">CD</option>
                    <!-- Add more options for other media types if needed -->
                </select>
            </label><br>
            <label>
                Genre:
                <select id="edit-genre" required>
                    <option value="" disabled selected>Select Genre</option>
                    <!-- Fiction Genres -->
                    <optgroup label="Book: Fiction Genres">
                        <option value="Literary Fiction">Literary Fiction</option>
                        <option value="Science Fiction">Science Fiction (Sci-Fi)</option>
                        <option value="Fantasy">Fantasy</option>
                        <option value="Mystery">Mystery</option>
                        <option value="Thriller">Thriller</option>
                        <option value="Horror">Horror</option>
                        <option value="Romance">Romance</option>
                        <option value="Historical Fiction">Historical Fiction</option>
                        <option value="Adventure">Adventure</option>
                        <option value="Satire">Satire</option>
                        <option value="Humor">Humor</option>
                        <option value="Urban Fiction">Urban Fiction</option>
                        <option value="Paranormal">Paranormal</option>
                        <option value="Dystopian">Dystopian</option>
                        <option value="Erotica">Erotica</option>
                    </optgroup>
                    <!-- Non-fiction Genres -->
                    <optgroup label="Book: Non-fiction Genres">
                        <option value="Biography/Autobiography">Biography/Autobiography</option>
                        <option value="Memoir">Memoir</option>
                        <option value="Self-Help">Self-Help</option>
                        <option value="Business/Personal Finance">Business/Personal Finance</option>
                        <option value="History">History</option>
                        <option value="Travel">Travel</option>
                        <option value="Essay">Essay</option>
                        <option value="Journalism">Journalism</option>
                        <option value="True Crime">True Crime</option>
                        <option value="Philosophy">Philosophy</option>
                        <option value="Psychology">Psychology</option>
                        <option value="Science/Nature">Science/Nature</option>
                        <option value="Health/Fitness">Health/Fitness</option>
                        <option value="Cooking/Food">Cooking/Food</option>
                        <option value="Art/Photography">Art/Photography</option>
                        <option value="Politics">Politics</option>
                        <option value="Religion/Spirituality">Religion/Spirituality</option>
                        <option value="Technology">Technology</option>
                    </optgroup>
                    <!-- Children's Genres -->
                    <optgroup label="Book: Children's Genres">
                        <option value="Picture Books">Picture Books</option>
                        <option value="Early Reader">Early Reader</option>
                        <option value="Middle Grade">Middle Grade</option>
                        <option value="Young Adult (YA)">Young Adult (YA)</option>
                    </optgroup>
                    <!-- Poetry Genres -->
                    <optgroup label="Book: Poetry Genres">
                        <option value="Lyric">Lyric</option>
                        <option value="Narrative">Narrative</option>
                        <option value="Epic">Epic</option>
                        <option value="Dramatic">Dramatic</option>
                        <option value="Satirical">Satirical</option>
                        <option value="Prose">Prose</option>
                        <option value="Haiku">Haiku</option>
                        <option value="Sonnet">Sonnet</option>
                        <option value="Free Verse">Free Verse</option>
                        <option value="Limerick">Limerick</option>
                        <option value="Ode">Ode</option>
                        <option value="Elegy">Elegy</option>
                        <option value="Pastoral">Pastoral</option>
                        <option value="Ballad">Ballad</option>
                        <option value="Blank Verse">Blank Verse</option>
                    </optgroup>

                    <optgroup label="Video Game Genre">
                        <option value="Adventure">Adventure</option>
                        <option value="Roll Playing">Roll Playing</option>
                        <option value="RPG">RPG</option>
                        <option value="Action">Action</option>
                        <option value="Simulation">Simulation</option>
                        <option value="Strategy">Strategy</option>
                        <option value="Sports">Sports</option>
                        <option value="Puzzle">Puzzle</option>
                        <option value="Shooter">Shooter</option>
                        <option value="Fighting">Fighting</option>
                        <option value="Horror">Horror</option>
                        <option value="Platformer">Platformer</option>
                        <option value="Racing">Racing</option>
                        <option value="MMO">MMO</option>
                        <option value="Educational">Educational</option>
                        <option value="Music/Rhythm">Music/Rhythm</option>
                        <option value="Sandbox/Open World">Sandbox/Open World</option>
                        <option value="Visual Novel">Visual Novel</option>
                        <option value="Party/Board Games">Party/Board Games</option>
                    </optgroup>

                    <optgroup label="Music Genre">
                        <option value="Pop">Pop</option>
                        <option value="Rock">Rock</option>
                        <option value="Alternative">Alternative</option>
                        <option value="Hip Hop/Rap">Hip Hop/Rap</option>
                        <option value="Electronic">Electronic</option>
                        <option value="R&B/Soul">R&B/Soul</option>
                        <option value="Jazz">Jazz</option>
                        <option value="Classical">Classical</option>
                        <option value="Country">Country</option>
                        <option value="Folk">Folk</option>
                        <option value="Blues">Blues</option>
                        <option value="Reggae">Reggae</option>
                        <option value="Metal">Metal</option>
                        <option value="Punk">Punk</option>
                        <option value="Gospel">Gospel</option>
                        <option value="Funk">Funk</option>
                        <option value="Disco">Disco</option>
                        <option value="World">World</option>
                        <option value="Opera">Opera</option>
                        <option value="Experimental/Avant-Garde">Experimental/Avant-Garde</option>
                    </optgroup>

                    <optgroup label="Movie Genre">
                        <option value="Action">Action</option>
                        <option value="Adventure">Adventure</option>
                        <option value="Comedy">Comedy</option>
                        <option value="Drama">Drama</option>
                        <option value="Horror">Horror</option>
                        <option value="Thriller">Thriller</option>
                        <option value="Sci-Fi">Sci-Fi</option>
                        <option value="Fantasy">Fantasy</option>
                        <option value="Mystery">Mystery</option>
                        <option value="Romance">Romance</option>
                        <option value="Musical">Musical</option>
                        <option value="Animation">Animation</option>
                        <option value="Family">Family</option>
                        <option value="War">War</option>
                        <option value="Western">Western</option>
                        <option value="Historical">Historical</option>
                        <option value="Documentary">Documentary</option>6
                        <option value="Biography">Biography</option>
                        <option value="Sports">Sports</option>
                        <option value="Thriller">Thriller</option>
                    </optgroup>
                </select>
            </label><br>
            <label>
                Comments:
                <textarea id="edit-comments">[ISBN_CODE],</textarea>
            </label><br>
            <label>
                Read:
                <input type="checkbox" id="edit-read">
            </label><br>
            <button type="button" onclick="saveBookChanges()">Save Changes</button><br>

            <button type="button" onclick="closeEditModal()">Cancel</button>
        </form>
    </div>

    <div id="import-export"> <!-- here --!>
        <h2>Import/Export Books</h2>
        <button onclick="saveXML()">Export to XML</button><br>
        <input type="file" id="xml-file" accept=".xml" onchange="loadXML()">
    </div>

    <script>
        var bookList = [];

        function addBook() {
    var title = document.getElementById('title').value;
    var author = document.getElementById('author').value;
    var publishingHouse = document.getElementById('publishing-house').value;
    var genre = document.getElementById('genre').value;
    var comments = document.getElementById('comments').value.split(',').map(comment => comment.trim());
    var read = document.getElementById('read').checked;
    var mediaType = document.getElementById('media-type').value; // Get selected media type

    var book = {
        title: title,
        author: author,
        publishingHouse: publishingHouse,
        genre: genre,
        comments: comments,
        read: read,
        mediaType: mediaType  // Include media type in the book object
    };

    bookList.push(book);
    renderBookList();
}


        function renderBookList() {
            var bookListContainer = document.getElementById('book-list');
            bookListContainer.innerHTML = '';

            bookList.forEach((book, index) => {
                var bookElement = document.createElement('div');
                bookElement.className = 'book';

                bookElement.innerHTML = `
                    <span class="edit-icon" onclick="editBook(${index})">&#9998;</span>
                    <div class="book-title">${book.title} ${book.read ? '(Read)' : '(Unread)'}</div>
                    <div class="book-details"><strong>Author:</strong> ${book.author}</div>
                    <div class="book-details"><strong>Publishing House:</strong> ${book.publishingHouse}</div>
                    <div class="book-details"><strong>Genre:</strong> ${book.genre}</div>
                    <div class="book-details"><strong>Comments:</strong> ${book.comments.join(', ')}</div>
                `;

                bookListContainer.appendChild(bookElement);
            });
        }

        function searchBooks() {
            var query = document.getElementById('search-query').value.toLowerCase();
            var searchTitle = document.getElementById('search-title').checked;
            var searchAuthor = document.getElementById('search-author').checked;
            var searchPublishingHouse = document.getElementById('search-publishing-house').checked;
            var searchComments = document.getElementById('search-comments').checked;

            var filteredBooks = bookList.filter(book => {
                return (
                    (searchTitle && book.title.toLowerCase().includes(query)) ||
                    (searchAuthor && book.author.toLowerCase().includes(query)) ||
                    (searchPublishingHouse && book.publishingHouse.toLowerCase().includes(query)) ||
                    (searchComments && book.comments.some(comment => comment.toLowerCase().includes(query)))
                );
            });

            renderFilteredBookList(filteredBooks);
        }

        function renderFilteredBookList(filteredBooks) {
            var bookListContainer = document.getElementById('book-list');
            bookListContainer.innerHTML = '';

            filteredBooks.forEach((book, index) => {
                var bookElement = document.createElement('div');
                bookElement.className = 'book';

                bookElement.innerHTML = `
                    <span class="edit-icon" onclick="editBook(${index})">&#9998;</span>
                    <div class="book-title">${book.title} ${book.read ? '(Read)' : '(Unread)'}</div>
                    <div class="book-details"><strong>Author:</strong> ${book.author}</div>
                    <div class="book-details"><strong>Publishing House:</strong> ${book.publishingHouse}</div>
                    <div class="book-details"><strong>Genre:</strong> ${book.genre}</div>
                    <div class="book-details"><strong>Comments:</strong> ${book.comments.join(', ')}</div>
                `;

                bookListContainer.appendChild(bookElement);
            });
        }

        function editBook(index) {
            var book = bookList[index];
            document.getElementById('edit-title').value = book.title;
            document.getElementById('edit-author').value = book.author;
            document.getElementById('edit-publishing-house').value = book.publishingHouse;
            document.getElementById('edit-genre').value = book.genre;
            document.getElementById('edit-comments').value = book.comments.join(', ');
            document.getElementById('edit-read').checked = book.read;
            document.getElementById('edit-modal').style.display = 'block';
            document.getElementById('edit-modal').setAttribute('data-index', index);
            document.getElementById('overlay').classList.add('active');
            document.getElementById('edit-modal').classList.add('active');
        }

        function closeEditModal() {
            document.getElementById('edit-modal').style.display = 'none';
            document.getElementById('overlay').classList.remove('active');
            document.getElementById('edit-modal').classList.remove('active');
        }

        function saveBookChanges() {
            var index = document.getElementById('edit-modal').getAttribute('data-index');
            var title = document.getElementById('edit-title').value;
            var author = document.getElementById('edit-author').value;
            var publishingHouse = document.getElementById('edit-publishing-house').value;
            var genre = document.getElementById('edit-genre').value;
            var comments = document.getElementById('edit-comments').value.split(',').map(comment => comment.trim());
            var read = document.getElementById('edit-read').checked;

            var book = {
                title: title,
                author: author,
                publishingHouse: publishingHouse,
                genre: genre,
                comments: comments,
                read: read
            };

            bookList[index] = book;
            renderBookList();
            closeEditModal();
        }

        function saveXML() {
            var xmlString = '<?xml version="1.0" encoding="UTF-8"?><library>';
            bookList.forEach(book => {
                xmlString += `<book>`;
                xmlString += `<title>${book.title}</title>`;
                xmlString += `<author>${book.author}</author>`;
                xmlString += `<publishingHouse>${book.publishingHouse}</publishingHouse>`;
                xmlString += `<genre>${book.genre}</genre>`;
                xmlString += `<comments>${book.comments.map(comment => `<comment>${comment}</comment>`).join('')}</comments>`;
                xmlString += `<read>${book.read}</read>`;
                xmlString += `</book>`;
            });
            xmlString += `</library>`;

            var blob = new Blob([xmlString], { type: 'application/xml' });
            var a = document.createElement('a');
            a.href = URL.createObjectURL(blob);
            a.download = 'library.xml';
            a.click();
        }

        function loadXML() {
            var fileInput = document.getElementById('xml-file');
            var file = fileInput.files[0];
            var reader = new FileReader();
            reader.onload = function (e) {
                var parser = new DOMParser();
                var xmlDoc = parser.parseFromString(e.target.result, "application/xml");
                var books = xmlDoc.getElementsByTagName('book');
                bookList = [];
                for (var i = 0; i < books.length; i++) {
                    var book = {
                        title: books[i].getElementsByTagName('title')[0].textContent,
                        author: books[i].getElementsByTagName('author')[0].textContent,
                        publishingHouse: books[i].getElementsByTagName('publishingHouse')[0].textContent,
                        genre: books[i].getElementsByTagName('genre')[0].textContent,
                        comments: Array.from(books[i].getElementsByTagName('comment')).map(comment => comment.textContent),
                        read: books[i].getElementsByTagName('read')[0].textContent === 'true'
                    };
                    bookList.push(book);
                }
                renderBookList();
            };
            reader.readAsText(file);
        }

                // Function to apply filters
        function applyFilters() {
            var mediaTypeFilter = document.getElementById('filter-media-type').value;
            var readFilter = document.getElementById('filter-read').value;

            var filteredBooks = bookList.filter(book => {
                var matchMediaType = mediaTypeFilter === "" || book.mediaType === mediaTypeFilter;
                var matchReadStatus = readFilter === "" || book.read === (readFilter === "true");

                return matchMediaType && matchReadStatus;
            });

            renderFilteredBookList(filteredBooks);
        }

        // Function to reset filters
        function resetFilters() {
            document.getElementById('filter-media-type').value = "";
            document.getElementById('filter-read').value = "";
            renderBookList();
        }

        // Modified renderBookList function to include filtering
        function renderBookList() {
            var bookListContainer = document.getElementById('book-list');
            bookListContainer.innerHTML = '';

            bookList.forEach((book, index) => {
                var bookElement = createBookElement(book, index);
                bookListContainer.appendChild(bookElement);
            });
        }

        // Function to render filtered book list
        function renderFilteredBookList(filteredBooks) {
            var bookListContainer = document.getElementById('book-list');
            bookListContainer.innerHTML = '';

            filteredBooks.forEach((book, index) => {
                var bookElement = createBookElement(book, index);
                bookListContainer.appendChild(bookElement);
            });
        }

        // Helper function to create book HTML element
        function createBookElement(book, index) {
            var bookElement = document.createElement('div');
            bookElement.className = 'book';

            bookElement.innerHTML = `
                <span class="edit-icon" onclick="editBook(${index})">&#9998;</span>
                <div class="book-title">${book.title} ${book.read ? '(Read)' : '(Unread)'}</div>
                <div class="book-details"><strong>Author:</strong> ${book.author}</div>
                <div class="book-details"><strong>Publishing House:</strong> ${book.publishingHouse}</div>
                <div class="book-details"><strong>Genre:</strong> ${book.genre}</div>
                <div class="book-details"><strong>Comments:</strong> ${book.comments.join(', ')}</div>
            `;

            return bookElement;
        }

    </script>
</body>
</body>
</html>

I am trying to create a tournament chart with php and css. As you can see on photo it looks like great on PC. But when I open at mobile phone, it only looks vertical. All tours are going vertically. But I want 5 tours in horizontally and slide it on mobile. How can I do that? Here is my demo site: swissdeneme.42web.ion

Pictures

https://imgur.com/a/6RAOF24

heres the code:

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

body {
  background-color: rgb(14, 14, 14);
  display: flex;
  justify-content: center;
  overflow: hidden;
  
}


.title {
  font-family: Poppins, sans-serif;
  color: white;
  transition: color 1s;
  margin-left: 250px;
}

.title:hover {
  color: red;
}

button {
  display: inline-block;
  justify-content: center;
  align-items: center;
  border-radius: 50px;
  border: none;
  height: 50px;
  width: 150px;
  color: black;
  font-weight: bolder;
  font-size: 15px;
  transition: backround-color 1s, font-size 1s;
  cursor: pointer;
}

button:hover {
  background-color: rgb(168, 168, 168);
  font-size: 16px;
}

button:active {
  
}

.icon {
  color: white;
  display: flex;
  justify-content: right;
  font-size: 30px;
 
}

how_do_I_achieve_this

I'll try my best to explain this as best as I can. From the image, I circled what I'm trying to achieve. Basically from the left corner it starts low and then halfway it will angle upwards to the right and level off to the top right corner.

How can I do this in CSS?

<html>
<head>

<title>
CSS Animations
</title>

<style>
body
{
background-color: black;
}

#main_box
{
position: absolute;
background-color: white;
width: 75%;
height: 75%;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
border-radius: 5px;
}

.animation_1
{
box-shadow: 0px 10px 10px blue, 10px 10px 10px blue, 10px -10px 10px blue, -10px -10px 10px blue;
animation: animation_1 20s infinite;
}

@keyframes animation_1
{
0% {
box-shadow: 0px 10px 10px blue, 10px 10px 10px blue, 10px -10px 10px blue, -10px -10px 10px blue, 0px 0px yellow;
}
1% {
box-shadow: 10px 10px 10px blue, 10px -10px 10px blue, -10px -10px 10px blue, 0px 10px yellow;
}
2% {
box-shadow: 10px -10px 10px blue, -10px -10px 10px blue, 0px 10px orange, 10px 10px yellow;
}
3% {
box-shadow: -10px -10px 10px blue, 0px 10px red, 10px 10px orange, 10px -10px yellow;
}
4% {
box-shadow: 0px 10px blue, 10px 10px red, 10px -10px orange, -10px -10px yellow;
}
5% {
box-shadow: 0px 10px 10px blue, 10px 10px blue, 10px -10px red, -10px -10px orange;
}
6% {
box-shadow: 0px 10px 10px blue, 10px 10px 10px blue, 10px -10px blue, -10px -10px red;
}
7% {
box-shadow: 0px 10px 10px blue, 10px 10px 10px blue, 10px -10px 10px blue, -10px -10px blue;
}
8% {
box-shadow: 0px 10px 10px blue, 10px 10px 10px blue, 10px -10px 10px blue, -10px -10px 10px blue;
}
}
</style>

<head>
<body>
<div id="main_box" class="animation_1">
</div>
</body>
</html>

So the issues are that the box shadow doesn't reach the bottom left corner, because of the commands, when it redraws, it flashes - its not smooth, and the color transition is from one side to another, not like a point that moves around the border causing the border to change color. I know this isn't simple, but I wanted to pitch it and see if someone had it in them to show me how to do it.

hello, i'm on firefox and applying my own css to all websites using userContent.css, i want to apply this cool css-path octagon to all images like this:

clip-path: polygon(20px 0%, calc(100% - 20px) 0%, 100% 20px, 100% calc(100% - 20px), calc(100% - 20px) 100%, 20px 100%, 0% calc(100% - 20px), 0% 20px);

the issue is images smaller than 40 pixels become hard to quickly make out because the clip-path overlapping on to itself and make the center of image un-seeable

ive tried applying percentages instead of flat pixel values but this makes non square images look weird

clip-path: polygon(10% 0%, 90% 0%, 100% 10%, 100% 90%, 90% 100%, 10% 100%, 0% 90%, 0% 10%);

i've also tried adding border to images or apply min-width and min-height which will work but messes up with the pages too much and destroys the spacing

any ideas?

Can't for the life of me figure out how to do that. I managed to make the elements within the sidebar smaller, however the sidebar itself still takes the same width.

I'm using the Stylus Chrome extension.

Should the hero portion of a website have the same margin as the body? I have a hero section and the hero section has a smaller margin, so I was wondering if I should fix it, or it's ok.

object-fit: cover;

width: 100%;

height: auto;

These are the styling I used, but they are blurry because they are oversized, I want the image to take the full width or add black bars. What's the best way to handle this?

I'm trying to create fancy silver text. The example is passing <h2 data-silver="Metallic Text"> but I want to make it to where just doing <h2> will have the same effect. I've tried everything but I can't make it just apply to H2 without the data-silver part. Is there some way to universally apply it? Unfortunately I have zero control over the code that is generating HTML. I only get to define the CSS.

Here's the code example: https://codepen.io/ueple/pen/vYYNMVJ

Could you please give advice on how to do this silver metallic effect with just <h2> in the HTML?

So I have been working on my personal website on Cargo 3 for a while and allowing for text and background to change when hovered over is an important part of the intended UI. I was using a simple

column-set:hover {

background-color: #c9ffc0;

}

in CSS, but it's applying the hover to all columns. Is there any way to apply it so that I can selectively choose when it is applied based on pages or text styles?

I am pretty new to CSS, so I apologize if my wording or questions are a bit off. Any help with this would be greatly appreciated!

I am losing my mind with this. I am creating a css effect where I need to use an image as a mask (basically the same as the base image). So to make cutouts I want to use black colour from the image and I want to use mask-mode:luminance. Everywhere it works beautiful, except safari where it scales the image mask in strange way that its impossible to control. Example in codepen. The mask-size is set to "contain" so the whole logo should be visible: https://codepen.io/WittyJack/pen/PovOrgd

Is there a way to make it work? Without Safari support I cannot put that out :(

Hi,

I have a problem with centering an element on Apple devices. In linked screens you can see what is happening on iOS and what is happening on Android and on a classic Windows PC. I have tried every possible method, nothing helps. Do you see a problem in my code? Any suggestions? Thank you very much for help.

Screens: https://imgur.com/a/izW1KvL

Code:

<style>
#rotatingText {
  animation-name: rotate-circle;
  animation-duration: 22s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

u/keyframes rotate-circle {
  to {
    transform: rotate(1turn);
  }
}

 .text {
      font-weight: 300;
      letter-spacing: 3.3px;
      text-transform: uppercase;
      font-family: 'Outfit';
      font-size: 14px;
      fill: white;
      text-shadow: white 1px 0 10px;;
    }

    .main {
      display: grid;
      align-items: center;
      justify-items: center;
    }
  
     .main img {
      position: absolute;
    }

    .main img {
      position: absolute;
      border-radius: 500px;
      z-index: 0;
      box-shadow: rgba(245, 72, 243, 0.3) 1px 0 50px;;
    }
    
</style>

  <a target=”_blank” href="https://9ypjmq3pbhg.typeform.com/to/vz0yqohg">
  <div class="main">
<img class="img1" src="https://polygonstudio.eu/wp-content/uploads/2024/06/imgrotate2.png" width="120" height="50">

<svg id="rotatingText" viewBox="0 0 200 200" width="200" height="200">
  <defs>
    <path id="circle" d="M 100, 100
            m -75, 0
            a 75, 75 0 1, 0 150, 0
            a 75, 75 0 1, 0 -150, 0
            ">
    </path>
  </defs>
  <text width="400">
    <textPath alignment-baseline="top" xlink:href="#circle" class="text">
      Wypełnij formularz - wypełnij formularz -
    </textPath>
  </text>
</svg>
  </div>
  </a>

Yeah the title pretty much explains it, I have a border showing up on my desktop site while viewing in browser's inspector tool and simulating my phone screen size (image 1) but not on my actual phone (image 2)

Does anyone have an idea of which property could be contributing to this somewhere in the cascade, or how I can use some mobile browser tools so I can find out?

I'm editing a design template and I can provide my codes via codepen via dm if needed for what it's worth. Been troubleshooting and on the MDN for the last few days so any help would be really appreciated.

image 1: https://imgur.com/a/ztsN3aw
image 2: https://imgur.com/a/dZ8pyy0

Thank you in advance.

On r/chihuahua I've been doing the Chi of the Week for many years now. On the new reddit they allow you to attach a clickable link to the sidebar image.

On the old reddit I've searched and can't figure out how to make it work.

Here's my existing CSS:

.side {
margin-top: 10px;
background:url(%%sun%%) no-repeat center top;
padding-top: 463px;   
}

I just want to link back to the image's original post so people can see where that image came from.

Thanks in advance!

i am trying to add water drop on glass animation over my text but i am having a hard time. Can anyone with more experience help me out. I will really appreciate any help i can get thanks.

Here is my code so far.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DARK RED</title>
    <style>
        .text-1 {
            color: darkred;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
            flex-direction: column;
            backdrop-filter: blur(7px);

        }
        .text {
            margin: 0;
            font-size: 100px;
            font-weight: bold;
            font-family: arial;
            opacity: 0;
            transform: translateY(0px);
            animation: fadeInUp 1s forwards;
            
        }
        .text-bit-1 {
            animation-delay: 0s;
        }
        .text-bit-2 {
            animation-delay: 0.3s;
        }
        .text-bit-3 {
            animation-delay: 0.5s;
        }
        .text-bit-4 {
            animation-delay: 0.7s;
        }
        .text-bit-5 {
            animation-delay: 0.9s;
        }
        .text-bit-6 {
            animation-delay: 1s;
        }
        @keyframes fadeInUp {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
    </style>
</head>
<body style="background-color: black;">
    <div class="text-1">
        <p class="text text-bit-1"><span>SOME-</span></p>
        <p class="text text-bit-2"><span>THING-</span></p>
        <p class="text text-bit-3"><span>BAD</span></p>
        <p class="text text-bit-4"><span>IS</span></p>
        <p class="text text-bit-5"><span>'BOUT</span></p>
        <p class="text text-bit-6"><span>TO</span></p>
    </div>
</body>
</html>

Hello guys. I want to remove the custom width on all @media. It looks a little weird watching on my mobile in horizontal: https://xmodels.link/example

I want to have the same width in all resolutions, just like linktree is doing: https://linktr.ee/billeeilish

For example, when we change to small resolutions the blocks width never change, only when we reach the smaller one (phone vertical).

In my site looks like this:

1200px+ width looks good 992px to 1199px it changes to a small one 768px to 991px it changes to a even smaller And less than 767px is back to normal, the same as 1200px

I just want to remove the smaller ones to not reduce the block’s width. I mean, the ones between 768px and 1199px.

I guess I need to change bootstrap.min.css, but don't know exactly what to do.

I tried this without luck:

@media (min-width: 768px) and (max-width: 1199.98px) {
.container, .container-sm, .container-md, .container-lg, .container-xl {
max-width: 100% !important;
}
}

@media (min-width: 1200px) {
.container, .container-sm, .container-md, .container-lg, .container-xl {
max-width: 1140px !important; /* Adjust this value to match your design */
}
}

@media (max-width: 767.98px) {
.container, .container-sm, .container-md, .container-lg, .container-xl {
max-width: 100% !important;
}
}

What I'm doing wrong?

.tournament_logo {
  position: absolute;
  bottom: 32px;
  left: 48%;
  transform: translateX(-50%);
  width: 268px;
  height: 162px;
  background-image: url("tournament_logo.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 9;
}

In other words, is there a way to do something like this:

https://i.imgur.com/MU9GKzT.png

​

Asking for r/Panathinaikos.

I am designing a home server and this is my first time coding with html and css I can't seem to figure out how to make the links have a vertical arrangement but not have the link click able while not over the text

Sorry for any poor wording I will elaborate if needed

The lines that streak across the screen.

https://podcastcharts.byspotify.com/

Can someone share with me the exact code?

or maybe place it in a jsfiddle?

https://jsfiddle.net/