Content # 2 in appscript

# Web Site Writing Basics

# google # appscript

How to create 3 slides using HTML, CSS and input radio tags is as follows:

HTML structure

You'll start by creating a core structure in HTML, consisting of a container for encapsulating all slides, slides for each image, and labels that serve as a control button. Using the input type = "radio" tag together with the label allows you to switch images without JavaScript.

• Container: is the main part that covers all elements. Used to determine the size and position of all slides.

• Slides: Each image is placed in a div with the class that slides. Each div is positioned to overlap.

• Navigation: This section contains the input type = "radio" and the label which controls the display of the image. Each input has a unique id, and each label has a for attribute that refers to the id of the input. When the user clicks the label, the corresponding input can be selected and CSS can be used to change the image.

• Input: will be hidden with CSS

• Label: Will be designed to be a point or button that the user can see and click on.

HTML code

HTML

< div class = "slider-container" >

< div class = "slider" >

< input type = "radio" id = "slide1" name = "slider-nav" check >

< input type = "radio" id = "slide2" name = "slider-nav" >

< input type = "radio" id = "slide3" name = "slider-nav" >

< div class = "slides" >

< div class = "slide slide-1" >

< h1 > Slide 1 < / h1 >

< p > Content for first slide < / p >

< / div >

< div class = "slide slide-2" >

< h1 > Slide 2 < / h1 >

< p > Content for Second Slide < / p >

< / div >

< div class = "slide slide-3" >

< h1 > Slide 3 < / h1 >

< p > Content for third slide < / p >

< / div >

< / div >

< / div >

< div class = "dots-nav" >

< label for = "slide1" > < / label >

< label for = "slide2" > < / label >

< label for = "slide3" > < / label >

< / div >

< / div >

CSS code

CSS is an important part of making slides work.

• Positioning: Use position: relative for slider-container and position: absolute for slides so that all images overlap inside the container.

• Hiding Input: Hide input type = "radio" with display: none; or visibility: hidden;

• Visualization: Use opacity: 0; to hide all slides. And when the input is selected with: check pseudoclass, it changes the opacity of the relevant slides to 1.

• Dot Decoration: Design the label to be a circle or dot (dot) and use: check + .slides to change the color of the dot when the slide is selected.

CSS

Body {

Font-family: Arial, sans-serif;

Display: flex;

Justify-content: center;

align-items: center;

Height: 100vh;

Background-color:# f0f0f0;

Margins: 0;

}

.slider-container {

width: 80%;

Max-width: 600px;

Height: 400px;

Position: relative;

Overflow: hidden;

box-shadow: 0 4px 8px rgba (0, 0, 0, 0.2);

Border-radius: 8px;

}

.slider {

width: 100%;

Height: 100%;

Position: relative;

}

.slider input [type = "radio"] {

Display: none;

}

.slides {

width: 100%;

Height: 100%;

Position: relative;

}

. Slide {

width: 100%;

Height: 100%;

Position: absolute;

Top: 0;

Left: 0;

Opacity: 0;

Transition: opacity 0.5s ease-in-out;

Background-color:# fff;

Display: flex;

Flex-direction: column;

Justify-content: center;

align-items: center;

Text-align: center;

padding: 20px;

Box-sizing: border-box;

}

# slide1: checked ~ .slides .slides-1,

# slide2: checked ~ .slides .slides-2,

# slide3: checked: checked ~ .slides .slide-3 {

Opacity: 1;

}

.dots-nav {

Position: absolute;

Bottom: 20px;

Left: 50%;

Transform: translateX (-50%);

Display: flex;

Gap: 10px;

}

.dots-nav label {

width: 12px;

Height: 12px;

Background-color: # cc;

Border-radius: 50%;

Cursor: pointer;

Transition: background-color 0.3s ease;

}

# slide1: checked ~ .dots-nav label [for = "slide1"],

# slide2: checked ~ .dots-nav label [for = "slide2"],

# slide3: checked ~ .dots-nav label [for = "slide3"] {

Background-color: # 333;

}

Further explanation

This code uses CSS sibling combinator (~), which selects the same level address element (sibling) to change the properties of the slide when the corresponding input is selected (: checked). This method makes the slide creation work without writing any JavaScript code, which greatly reduces the complexity of the code.