Scribd
Upload
3 views27 pages

8

The document provides an overview of frontend web development focusing on CSS properties such as float, flexbox, and grid. It explains how the float property is used for positioning elements, introduces flexbox for flexible layouts, and discusses CSS combinators for selecting elements. Additionally, it includes code examples demonstrating the use of these CSS features.

Uploaded by

Sümeyye Öztürk
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
3 views27 pages

8

The document provides an overview of frontend web development focusing on CSS properties such as float, flexbox, and grid. It explains how the float property is used for positioning elements, introduces flexbox for flexible layouts, and discusses CSS combinators for selecting elements. Additionally, it includes code examples demonstrating the use of these CSS features.

Uploaded by

Sümeyye Öztürk
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 27

04/13/2025

Internet Based Programming


Frontend web development: CSS (float, flexbox, grid, CSS lists, CSS combinators, CSS pseudo-
classes, CSS pseudo-elements, overflow property, shadow property, CSS Transitions)

Asst. Prof. Dr. İnan KAZANCI


[email protected]

Frontend web development- CSS: float property


• The CSS float property specifies how an element should float. Is used for positioning and
formatting content e.g. let an image float left to the text in a container.
• The float property can have one of the following values:
left - The element floats to the left.
right - The element floats to the right.
none - The element does not float (will be displayed just where it occurs in the text).
This is default.
inherit - The element inherits the float value of its parent.

04/13/2025 2

1
04/13/2025

Frontend web development- CSS: float property


<!DOCTYPE html>
<html>
<head>
<style>
img {float: none;
width:170px;height:170px;
margin:0px 5px 0px 5px}
</style>
</head>
<body>
<h2>Float None</h2>
<p><img src="Pics/CS.png" alt="CS">
Computer science is the study of computer
hardware and software. Those who study computer science,
consequently, can
specialize in a wide range of interrelated
subfields, from artificial intelligence and cryptography
to computer
engneering and software development.</p>
</body>
</html>

04/13/2025 3

Frontend web development- CSS: float property


<!DOCTYPE html>
<html>
<head>
<style>
img {float: left;
width:170px;height:170px;
margin:0px 5px 0px 5px}
</style>
</head>
<body>
<h2>Float None</h2>
<p><img src="Pics/CS.png" alt="CS">
Computer science is the study of computer
hardware and software. Those who study computer science,
consequently, can
specialize in a wide range of interrelated
subfields, from artificial intelligence and cryptography
to computer
engneering and software development.</p>
</body>
</html>

04/13/2025 4

2
04/13/2025

Frontend web development- CSS: float property


<!DOCTYPE html>
<html>
<head>
<style>
img {float: right;
width:170px;height:170px;
margin:0px 5px 0px 5px}
</style>
</head>
<body>
<h2>Float None</h2>
<p><img src="Pics/CS.png" alt="CS">
Computer science is the study of computer
hardware and software. Those who study computer science,
consequently, can
specialize in a wide range of interrelated
subfields, from artificial intelligence and cryptography
to computer
engneering and software development.</p>
</body>
</html>

04/13/2025 5

Frontend web development- CSS: float property


• Note:\ We can use float property to float elements next to each other:-
<!DOCTYPE html>
<html>
<head>
<style>
div {
float: none;
padding: 15px;
}
.div1 {background: red;}
.div2 {background: yellow;}
.div3 {background: green;}
</style>
</head>
<body>
<div class="div1">Div 1</div>
<div class="div2">Div 2</div>
<div class="div3">Div 3</div>
</body>
</html>

04/13/2025 6

3
04/13/2025

Frontend web development- CSS: float property


• Note:\ we can use float property to float next to each other:-
<!DOCTYPE html>
<html>
<head>
<style>
div {
float: left;
padding: 15px;
}
.div1 {background: red;}
.div2 {background: yellow;}
.div3 {background: green;}
</style>
</head>
<body>
<div class="div1">Div 1</div>
<div class="div2">Div 2</div>
<div class="div3">Div 3</div>
</body>
</html>

04/13/2025 7

Frontend web development- CSS: Flexbox


• Flexbox: the main idea behind the flex layout is to give the container the ability to alter
its items’ width/height (and order) to best fill the available space. A flex container
expands items to fill available free space or shrinks them to prevent overflow.
• Q: Why choose flexbox?
• A: the reason you'd choose to use flexbox is because you want to lay a collection of
items out in one direction or another (one dimension).
• Flexbox can automatically stretch boxes in a container to be as long as the longest box.
• Parent Element (Container): the flex container becomes flexible by setting
the display property to flex.

04/13/2025 8

4
04/13/2025

Frontend web development- CSS: Flexbox


<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
background-color:Blue;}
.flex-container>div {background-color: white;
margin: 10px;
padding: 20px;
font-size: 30px;}
</style>
</head>
<body>
<h1>Create a Flex Container</h1>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>

04/13/2025 9

Frontend web development- CSS: Flexbox


<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {display: flex;
background-color:Blue;}
.flex-container>div {background-color: white;
margin: 10px;
padding: 20px;
font-size: 30px;}
</style>
</head>
<body>
<h1>Create a Flex Container</h1>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>

04/13/2025 10

5
04/13/2025

Frontend web development- CSS: Flexbox


• The flex container properties are:
flex-direction: the flex-direction property defines in which direction the container
wants to stack the flex items.
flex-wrap: the flex-wrap property specifies whether the flex items should wrap or not.
justify-content: the justify-content property is used to align the flex items
(horizontally).
align-items: the align-items property is used to align the flex items (vertically).
align-content: the align-content property is used to align the flex lines.

04/13/2025 11

Frontend web development- CSS: Flexbox


<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {display: flex;
flex-direction: column;
background-color: Blue;}
.flex-container>div {
background-color: white;
margin: 10px;
padding: 20px;
width: 50px;
font-size: 30px;}
</style>
</head>
<body>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>

04/13/2025 12

6
04/13/2025

Frontend web development- CSS: Flexbox


flex-direction: column-reverse;

flex-direction: row;

flex-direction: row-reverse;

04/13/2025 13

Frontend web development- CSS: Flexbox


flex-wrap: wrap;

flex-wrap: nowrap;

flex-wrap: wrap-reverse;

04/13/2025 14

7
04/13/2025

Frontend web development- CSS: Flexbox


justify-content: center;
justify-content: space-between;

justify-content: start;

justify-content: space-around;

justify-content: end;

04/13/2025 15

Frontend web development- CSS: Flexbox


align-items: center; align-items: flex-end;

align-items: stretch;

align-items: flex-start;

align-items: baseline;

04/13/2025 16

8
04/13/2025

Frontend web development- CSS: Flexbox


align-content: space-between; align-content: center;

align-content: stretch;

04/13/2025 17

Frontend web development- CSS: grid


The basic difference between CSS grid layout and CSS flexbox layout is that flexbox
was designed for layout in one dimension - either a row or a column. Grid was
designed for two-dimensional layout - rows, and columns at the same time.

04/13/2025 18

9
04/13/2025

Frontend web development- CSS: CSS Lists


• The list-style-type property specifies the type of list item marker.
<ul class="a">
<!DOCTYPE html> <li>Coffee</li>
<html> <li>Tea</li>
</ul>
<head>
<ul class="b">
<style> <li>Coffee</li>
ul.a {list-style-type: circle;} <li>Tea</li>
ul.b {list-style-type: square;} </ul>
ol.c {list-style-type: upper-roman;} <p>Example of ordered lists:</p>
ol.d {list-style-type: lower-alpha;} <ol class="c">
</style> <li>Coffee</li>
<li>Tea</li>
</head>
</ol>
<body> <ol class="d">
<h1>The list-style-type Property</h1> <li>Coffee</li>
<p>Example of unordered lists:</p> <li>Tea</li>
</ol>
</body>
</html>
04/13/2025 19

Frontend web development- CSS: CSS Lists


• The list-style-image property specifies an image as the list item marker
<!DOCTYPE html>
<html>
<head>
<style>
.a {list-style-image: url('Pics/icon.png');}
</style>
</head>
<body>
<ul class="a">
<li>Coffee</li>
<li>Tea</li>
</ul>

</body>
</html>

04/13/2025 20

10
04/13/2025

Frontend web development- CSS: CSS Lists


• The list-style-type:none property can also be used to remove the markers/bullets. Note that the
list also has default margin and padding. To remove this, add margin:0 and padding:0 to <ul> or
<ol>
<!DOCTYPE html>
<html>
<head>
<style>
.a {list-style-type: none; margin: 0;padding: 0;}
</style>
</head>
<body>
<ul class="a">
<li>Coffee</li>
<li>Tea</li>
</ul>
</body>
</html>

04/13/2025 21

Frontend web development- CSS: CSS Lists


• Styling List With Colors
<!DOCTYPE html> <body>
<html> <h1>Styling Lists With Colors</h1>
<head> <ol>
<style> <li>Coffee</li>
ol { <li>Tea</li>
background: red;} </ol>
ul { <ul>
background: green; <li>Coffee</li>
padding: 20px;} <li>Tea</li>
ol>li { </ul>
background: orange; </body>
color: darkred;} </html>
ul>li {
background: yellow;
color: darkblue;}
</style>
</head>

04/13/2025 22

11
04/13/2025

Frontend web development- CSS: CSS Combinators


• A CSS selector can contain (combine) more than one simple selector. Between the simple
selectors, we can include a combinator.
 descendant selector (space): matches all elements that are descendants of a specified
element.
 child selector (>): selects all elements that are the direct children of a specified element.
 adjacent sibling selector (+): is used to select an element that is directly after another specific
element. Sibling elements must have the same parent element, and "adjacent" means
"immediately following".
 general sibling selector (~): selects all elements that are next siblings of a specified element.

04/13/2025 23

Frontend web development- CSS: CSS Combinators


<!DOCTYPE html>
<html>
<head>
<style>
div p {background-color: yellow;}
</style>
</head>
<body>
<h2>Descendant Selector (<b>Space</b>)</h2>
<div>
<p>Paragraph 1 in the div.</p>
<span>
<p>Paragraph 2 in the div inside span.</p>
</span>
</div>
<p>Paragraph 3. Not in a div.</p>
</body>
</html>

04/13/2025 24

12
04/13/2025

Frontend web development- CSS: CSS Combinators


<!DOCTYPE html>
<html>
<head>
<style>
div>p {background-color: yellow;}
</style>
</head>
<body>
<h2>Child Selector (<b>></b>)</h2>
<div>
<p>Paragraph 1 in the div.</p>
<span>
<p>Paragraph 2 in the div inside span.</p>
</span>
</div>
<p>Paragraph 3. Not in div.</p>
</body>
</html>

04/13/2025 25

Frontend web development- CSS: CSS Combinators


<!DOCTYPE html>
<html>
<head>
<style>
div+p {background-color: yellow;}
</style>
</head>
<body>
<h2>Adjacent Sibling Selector (<b>+</b>)</h2>
<div>
<p>Paragraph 1 in the div.</p>
<span>
<p>Paragraph 2 in the div inside span.</p>
</span>
</div>
<p>Paragraph 3. Not in div.</p>
<p>Paragraph 4. Not in div.</p>
</body>
</html>

04/13/2025 26

13
04/13/2025

Frontend web development- CSS: CSS Combinators


<!DOCTYPE html>
<html>
<head>
<style>
div~p {background-color: yellow;}
</style>
</head>
<body>
<h2>General Sibling Selector (<b>~</b>)</h2>
<div>
<p>Paragraph 1 in the div.</p>
<span>
<p>Paragraph 2 in the div inside span.</p>
</span>
</div>
<p>Paragraph 3. Not in div.</p>
<p>Paragraph 4. Not in div.</p>
</body>
</html>
04/13/2025 27

Frontend web development- CSS: CSS Combinators


<!DOCTYPE html>
<html>
<head>
<style>
div~p {background-color: yellow;}
</style>
</head>
<body>
<h2>General Sibling Selector (<b>~</b>)</h2>
<div>
<p>Paragraph 1 in the div.</p>
<span>
<p>Paragraph 2 in the div inside span.</p>
</span>
</div>
<p>Paragraph 3. Not in div.</p>
<span><p>Paragraph 4. Not in div.</p></span>
<p>Paragraph 5. Not in div.</p>
</body>
</html>
04/13/2025 28

14
04/13/2025

Frontend web development- CSS: CSS Pseudo-Classes


• What are Pseudo-classes? a pseudo-class is used to define a special state of an element.
For example, it can be used to:
 Style an element when a user mouses over it.
 Style visited and unvisited links differently.
 Style an element when it gets focus.
• Syntax:

selector:pseudo-class {
property: value;}

04/13/2025 29

Frontend web development- CSS: CSS Pseudo-Classes


• Anchor Pseudo-classes: Links can be displayed in different ways:
<!DOCTYPE html>
<html>
<head>
<style>
a{color: white;}
/* unvisited link */
a:link {background-color: red;}
/* visited link */
a:visited {background-color: green;}
/* mouse over link */
a:hover {background-color: blue;}
/* selected link */
a:active {background-color: yellowgreen;}
</style>
</head>
<body>
<h2>Styling a link depending on state</h2>
<p><b><a href="https://www.youtube.com/">This is a link</a></b></p>
</body>
</html>

04/13/2025 30

15
04/13/2025

Frontend web development- CSS: CSS Pseudo-Classes


• Pseudo-classes and HTML Classes: Pseudo-classes can be combined with HTML classes:
<!DOCTYPE html>
<html>
<head>
<style>
.highlight {
background-color: green;
color: white;
padding: 25px;
text-align: center;}
.highlight:hover {
background-color: blue;}
</style>
</head>
<body>
<p>Mouse over the div element below to change its background color:</p>
<div class = "highlight">Mouse Over Me</div>
</body>
</html>

04/13/2025 31

Frontend web development- CSS: CSS Pseudo-Classes


• Simple Tooltip Hover:
<!DOCTYPE html>
<html>
<head>
<style>
p {
display: none;
background-color: yellow;
padding: 20px;}
div:hover p {
display: block;}
</style>
</head>
<body>
<div>Hover over this div element to show the p element
<p>Tada! Here I am!</p>
</div>
</body>

04/13/2025 32

16
04/13/2025

Frontend web development- CSS: CSS Pseudo-elements


• What are Pseudo-Elements? a CSS pseudo-element is used to style specified parts of an
element. For example, it can be used to:
 Style the first letter, or line, of an element.
 Insert content before, or after, the content of an element.
• Syntax:

selector::pseudo-element {
property: value;}

04/13/2025 33

Frontend web development- CSS: CSS Pseudo-elements


• The ::first-line Pseudo-element: the ::first-line pseudo-element is used to add a special style to
the first line of a text.
<!DOCTYPE html>
<html>
<head>
<style>
p::first-line {
color: #ff0000;}
</style>
</head>
<body>
<p>Computer science is the study of computer hardware and
software. Those who study computer science, consequently, can
specialize in a wide range of interrelated subfields, from Note: The ::first-line pseudo-
artificial intelligence and cryptography to computer element can only be applied
engneering and software development.</p>
</body>
to block-level elements.
</html>

04/13/2025 34

17
04/13/2025

Frontend web development- CSS: CSS Pseudo-elements


• The ::first-letter Pseudo-element: the ::first-letter pseudo-element is used to add a
special style to the first letter of a text.
<!DOCTYPE html>
<html>
<head>
<style>
p::first-letter {
color: #ff0000;
font-size: xx-large;}
</style>
</head>
<body> Note: The ::first-letter pseudo-
<p>You can use the ::first-letter pseudo-element to add
a special effect to the first character of a text!</p> element can only be applied to
</body> block-level elements.
</html>

04/13/2025 35

Frontend web development- CSS: CSS Pseudo-elements


• Pseudo-elements and HTML Classes: pseudo-elements can be combined with HTML
classes:
<!DOCTYPE html>
<html>
<head>
<style>
.intro::first-letter {
color: #ff0000;
font-size: 200%;}
</style>
</head>
<body>
<p class="intro">This is an introduction.</p>
<p>This is a paragraph with some text. A bit more text even.</p>
</body>
</html>

04/13/2025 36

18
04/13/2025

Frontend web development- CSS: CSS Pseudo-elements


• Multiple Pseudo-elements: several pseudo-elements can also be combined.
<!DOCTYPE html>
<html>
<head>
<style>
.intro::first-letter {
color: #ff0000;
font-size: 200%;}
.intro::first-line{
color:blue}
</style>
</head>
<body>
<p class="intro">This is an introduction.</p>
<p>This is a paragraph with some text. A bit more text even.</p>
</body>
</html>

04/13/2025 37

Frontend web development- CSS: CSS Pseudo-elements


• CSS - The ::before Pseudo-element: the ::before pseudo-element can be used to insert
some content before the content of an element.
<!DOCTYPE html>
<html>
<head>
<style>
h1::before {
content: url(Pics/icon.png);}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>The ::before pseudo-element inserts content before the content of an element.</p>
<h1>This is a heading</h1>
</body>
</html>

04/13/2025 38

19
04/13/2025

Frontend web development- CSS: CSS Pseudo-elements


• CSS - The ::after Pseudo-element: the ::after pseudo-element can be used to insert
some content after the content of an element.
<!DOCTYPE html>
<html>
<head>
<style>
h1::after {
content: ' ';
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>The ::before pseudo-element inserts content before the content of an element.</p>
<h1>This is a heading</h1>
</body>
</html>

04/13/2025 39

Frontend web development- CSS: CSS Pseudo-elements


• CSS - The ::marker Pseudo-element: the ::marker pseudo-element selects the markers
of list items.
<!DOCTYPE html> <body>
<html> <ul>
<head> <li>Coffee</li>
<style> <li>Tea</li>
::marker {color: red; font-size: 23px;} <li>Milk</li>
</style> </ul>
</head> <ol>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ol>
</body>
</html>

04/13/2025 40

20
04/13/2025

Frontend web development- CSS: CSS Pseudo-elements


• CSS - The ::selection Pseudo-element: the ::selection pseudo-element matches the
portion of an element that is selected by a user.
<!DOCTYPE html>
<html>
<head>
<style>
::selection {color: red; background: yellow;}
</style>
</head>
<body>
<h1>Select some text on this page:</h1>
<p>This is a paragraph.</p>
<div>This is some text in a div element.</div>
</body>
</html>

04/13/2025 41

Frontend web development- CSS: Overflow Property


• The CSS overflow property controls what happens to content that is too big to fit into an
area.
• The overflow property has the following values:
 visible - Default. The overflow is not clipped. The content renders outside the element's box.
 hidden - The overflow is clipped, and the rest of the content will be invisible.
 scroll - The overflow is clipped, and a scrollbar is added to see the rest of the content.

04/13/2025 42

21
04/13/2025

Frontend web development- CSS: Overflow Property


<!DOCTYPE html>
<html>
<head>
<style>
div {background-color: coral;
width: 200px;
height: 65px;
border: 1px solid;
overflow: visible;}
</style>
</head>
<body>
<h2>Overflow: visible</h2>
<p>By default, the overflow is visible, meaning that it is not clipped and
it renders outside the element's box:</p>
<div>You can use the overflow property when you want to have better control
of the layout. The overflow property specifies what happens if content
overflows an element's box.</div>
</body>

04/13/2025 43

Frontend web development- CSS: Overflow Property


<!DOCTYPE html>
<html>
<head>
<style>
div {background-color: coral;
width: 200px;
height: 65px;
border: 1px solid;
overflow: hidden;}
</style>
</head>
<body>
<h2>Overflow: hidden</h2>
<p>By default, the overflow is visible, meaning that it is not clipped and
it renders outside the element's box:</p>
<div>You can use the overflow property when you want to have better control
of the layout. The overflow property specifies what happens if content
overflows an element's box.</div>
</body>

04/13/2025 44

22
04/13/2025

Frontend web development- CSS: Overflow Property


<!DOCTYPE html>
<html>
<head>
<style>
div {background-color: coral;
width: 200px;
height: 65px;
border: 1px solid;
overflow: scroll;}
</style>
</head>
<body>
<h2>Overflow: scroll</h2>
<p>By default, the overflow is visible, meaning that it is not clipped and
it renders outside the element's box:</p>
<div>You can use the overflow property when you want to have better control
of the layout. The overflow property specifies what happens if content
overflows an element's box.</div>
</body>

04/13/2025 45

Frontend web development- CSS: Overflow Property

• overflow-x and overflow-y: the overflow-x and overflow-y properties specifies


whether to change the overflow of content just horizontally or vertically (or
both):
 overflow-x: specifies what to do with the left/right edges of the content.
 overflow-y: specifies what to do with the top/bottom edges of the content.

04/13/2025 46

23
04/13/2025

Frontend web development- CSS: Overflow Property


<!DOCTYPE html>
<html>
<head>
<style>
div {background-color: coral;
width: 200px;
height: 65px;
border: 1px solid black;
overflow-x: hidden;
overflow-y: scroll;}
</style>
</head>
<body>
<h2>Overflow-x and overflow-y</h2>
<p>You can also change the overflow of content horizontally or vertically.</p>
<p>overflow-x specifies what to do with the left/right edges of the content.</p>
<p>overflow-y specifies what to do with the top/bottom edges of the content.</p>
<div>You can use the overflow property when you want to have better control of the layout. The overflow
property
specifies what happens if content overflows an element's box.</div>
</body>
</html>

04/13/2025 47

Frontend web development- CSS: Shadow Property

• With CSS you can add shadow to text and to elements.


text-shadow: the CSS text-shadow property applies shadow to text.
box-shadow: the CSS box-shadow property is used to apply one or more
shadows to an element.

04/13/2025 48

24
04/13/2025

Frontend web development- CSS: Shadow Property


• In its simplest use, you only specify a horizontal and a vertical shadow. The default color of the
shadow is the current text-color.
<!DOCTYPE html>
<html>
<head>
<style>
div {width: 300px;
height: 100px;
padding: 15px;
background-color: coral;
box-shadow: 10px 10px;}
</style>
</head>
<body>
<h1>The box-shadow Property</h1>
<div>This is a div element with a box-shadow</div>
</body>
</html>

04/13/2025 49

Frontend web development- CSS: Shadow Property

• The color parameter defines the color of the shadow.

<!DOCTYPE html>
<html>
<head>
<style>
div {width: 300px;
height: 100px;
padding: 15px;
background-color: coral;
box-shadow: 10px 10px lightblue;}
</style>
</head>
<body>
<h1>The box-shadow Property</h1>
<div>This is a div element with a box-shadow</div>
</body>
</html>

04/13/2025 50

25
04/13/2025

Frontend web development- CSS: Shadow Property

• The blur parameter defines the blur radius. The higher the number, the more blurred the shadow
will be.
<!DOCTYPE html>
<html>
<head>
<style>
div {width: 300px;
height: 100px;
padding: 15px;
background-color: coral;
box-shadow: 10px 10px 5px lightblue;}
</style>
</head>
<body>
<h1>The box-shadow Property</h1>
<div>This is a div element with a box-shadow</div>
</body>
</html>

04/13/2025 51

Frontend web development- CSS: Shadow Property

• An element can also have multiple shadows:

<!DOCTYPE html>
<html>
<head>
<style>
div {width: 300px;
height: 100px;
padding: 15px;
background-color: coral;
box-shadow: 5px 5px 8px blue, 10px 10px 8px red, 15px 15px 8px green;}
</style>
</head>
<body>
<h1>The box-shadow Property</h1>
<div>This is a div element with a box-shadow</div>
</body>
</html>

04/13/2025 52

26
04/13/2025

Frontend web development- CSS: CSS Transitions


• CSS transitions allows you to change property values smoothly, over a given duration.
<!DOCTYPE html>
<html>
<head>
<style>
div {width: 100px;
height: 100px;
background: red;
transition: width 5s, height 5s;}
div:hover {width: 200px; height: 200px;}
</style>
</head>
<body>
<h1>The transition Property</h1>
<p>Hover over the div element below, to see the transition effect:</p>
<div></div>
</body>
</html>

04/13/2025 53

04/13/2025 54

27

You might also like