HTML & CSS moving text and embeded video

betta · Jun 28, 2021

Hello,

I am trying to adjust this 'home page' in which I would put the index with link texts on the up left of the page (vertical) and the you tube video centered on the right.
At the moment I can get the video on the up right of the page, and 'below' this video line, the index which I want to put upper basically.

Thanks in advance for your help, I am pretty new o this coding thing!

Elisabetta.

screenshot

betta · Jun 28, 2021

Apologies, here attached a screenshot of the page!

Mutiny · Jun 28, 2021

When you say you want the video centered on the right, do you mean centered vertically?

What does your code look like? There's many potential ways to do this, so it will be helpful to see what you're working with.

Ghost · Jun 29, 2021

As they said, there's multiple ways to do this.
Here's one way:

CSS:

transform:translate(-50%,-50%);
left:50%;
top:50%;
position:absolute;

It all depends on your current HTML and CSS. While the solution above will work for some, it will not work for others. It can depend on what element the target element is in, such as what the parent div's CSS is... It can also depend on what is around it, such as below, above, or to the side.

Also, it appears that your links on the left column and right side video columns may not actually be appearing side by side, but instead just off to the left/right but on 'new lines'. Can you post your code?

betta · Jun 30, 2021

Mutiny said:
When you say you want the video centered on the right, do you mean centered vertically?

What does your code look like? There's many potential ways to do this, so it will be helpful to see what you're working with

betta · Jun 30, 2021

Yes I do, basically I would be 'free' to move things where I want to (centered, left, right on both axes xy)

Here below the link to my home page in which I am working on, now I am trying to put texts link up left.

http://elisabettasenesi.me/me.html

I also attached the entire coding lines, hope that is clear (I am using dreamweaver 6 on my old laptop)

Thanks in advance!

[CODE lang="html" title="me.html"]1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
5
6 <style type="text/css">
7
8 </style>
9 <style type="text/css">
10 ---->
11 #color {
12 font-family:Tahoma, Geneva, sans-serif
13 }
14 body,td,th {
15 top: 10px;
16 left: 10px;
17 font-family:Tahoma, Geneva, sans-serif;
18 font-size:20px;
19 background: #FF3;
20
21 }
22 </style>
23
24 </head
25 ><body>
26 <div align="right">
27 <iframe width="713" height="410" src="https://www.youtube.com/embed/PqiEmPf0QlE"
title="YouTube video player" frameborder="0" allow="accelerometer; autoplay;
clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe> </div>
28 <p>
29 <p>
30
31 <div align="right">
32 <iframe width="43%" height="200" scrolling="no" frameborder="no" allow="autoplay"
src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/
1052516986&color=
%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&sh
ow_reposts=false&show_teaser=true&visual=true"></iframe><div style="font-size:
10px; color: #cccccc;line-break: anywhere;word-break: normal;overflow: hidden;whi
te-space: nowrap;text-overflow: ellipsis; font-family: Interstate,Lucida
Grande,Lucida Sans Unicode,Lucida Sans,Garuda,Verdana,Tahoma,sans-serif;fontweight:
100;"><a href="https://soundcloud.com/n-n-n-s-1" title="SpokenWeb
Symposium" target="_blank" style="color: #cccccc; text-decoration: none;">SpokenW
eb Symposium</a> · <a href="https://soundcloud.com/n-n-n-s-1/elisabetta-senesisoundwalk-
may-20-2021" title="Elisabetta Senesi, Soundwalk, May 20, 2021" target=
"_blank" style="color: #cccccc; text-decoration: none;">Elisabetta Senesi,
Soundwalk, May 20, 2021</a></div>
33 <p>
34
HD 500:Users:elisabettasenesi

esktop:desktop_12_2019_back_up:sito:me.html: 1/2
35 <p align="left">
36 <div id="color">
37 <div align="justify"class="Stile2">
38 <div align="left">
39 <p> <a href="https://spokenweb.tumblr.com/">SPOKEN WEB SYMPOSIA</a><p> <a href="
http://streams.soundtent.org/2021/streams/utc2_florence"> REVEIL 8 LIVE STREAM</a
>
40 <p> <a href="https://citiesandmemory.com/travel/" > UNTIL WE TRAVEL AUDIO </a>
41 <p> <a href="https://walklistencreate.org/forums/users/elisabetta-senesi/?
sub=events" target="_blank">FIESOLE SOUNDWALKS</a>
42 <p><a href="https://www.dropbox.com/s/7wuofltwow6zm17/5%20Ottobre.mp4?dl=0"
target="_blank"> FLORENCE SILENT WALK</a></p>
43 <p><a href="https://www.dropbox.com/s/pq3xy0gfz7vgkat/4%20Ottobre.mp4?dl=0"
target="_blank">CASCINE SILENT SOUNDWALK </a></p>
44 <p><a href="https://drive.google.com/file/d/1ekMQOXZS8QILSmYPI2lGi0HCLj7Zgbbz/
view?usp=sharing" target="_blank">SIENA LISTENING WALK</a>
45 <p> <a href="https://drive.google.com/file/d/1ZPmv4bbidgjy14cs75MQm_0vv6wooBg5/
view?usp=sharing" target="_blank"> VALDARNO SOUNDWALK</a>
46 <p> <a href="https://www.youtube.com/watch?v=xdQ835sPQs4" target="_blank"> STILL
HOMESCAPE</a>
47 <p><a href="https://vimeo.com/97237206" target="_blank">NOISE CALM ZONE</a>
48 <p><a href="https://vimeo.com/16530498" target="_blank">SONIC GARDEN</a>
49 <p><a href=" https://vimeo.com/7763171" target="_blank">HANDLE WITH CARE</a>
50 <p><a href="sonic_install.html"target="_blank">INSTALLATIONS</a>
51 <p><a href="https://www.mixcloud.com/betta-senesi/">AUDIO WORKS</a>
52 <p><a href="https://soundcloud.com/betta77" target="_blank">RADIO PIECES</a>
53 <p><a href="http://tabsil.wordpress.com/" target="_blank">BLOG</a>
54 <p><a href="ISSUES.html" target="_blank">ISSUES</a>
55 <p><a href="CV_2014.html" target="_blank">CV</a>
56 <p><a href="bio.html" target="_blank">BIO</a>
57 <p><a href="https://goldsmiths.academia.edu/ElisabettaSenesi" target="_blank">ACA
DEMIC</a>
58 <p><a href="mailto:[email protected]" target="_blank">DROP ME A LINE</a>
59 </div>
60 </body>
61 </html>
62 <div align="right">
63 <iframe width="713" height="410" src="https://www.youtube.com/embed/xdQ835sPQs4"
title="YouTube video player" frameborder="0" allow="accelerometer; autoplay;
clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>
64
65
66
67
68
69
70
HD 500:Users:elisabettasenesi

esktop:desktop_12_2019_back_up:sito:me.html: 2/2[/CODE]

Code:

betta · Jun 30, 2021

Ghost said:
As they said, there's multiple ways to do this.
Here's one way:

CSS:

transform:translate(-50%,-50%); left:50%; top:50%; position:absolute;

It all depends on your current HTML and CSS. While the solution above will work for some, it will not work for others. It can depend on what element the target element is in, such as what the parent div's CSS is... It can also depend on what is around it, such as below, above, or to the side.

Also, it appears that your links on the left column and right side video columns may not actually be appearing side by side, but instead just off to the left/right but on 'new lines'. Can you post your code?

Thank you, helpful suggestions.

Ghost said:
As they said, there's multiple ways to do this.
Here's one way:

CSS:

transform:translate(-50%,-50%); left:50%; top:50%; position:absolute;

It all depends on your current HTML and CSS. While the solution above will work for some, it will not work for others. It can depend on what element the target element is in, such as what the parent div's CSS is... It can also depend on what is around it, such as below, above, or to the side.

Also, it appears that your links on the left column and right side video columns may not actually be appearing side by side, but instead just off to the left/right but on 'new lines'. Can you post your code?

Thanks, helpful suggestions.

Here below the link to the home page I am working on to have a clearer iidea of what I reached by now.

http://elisabettasenesi.me/me.html

+ also please find attached the code I am using.

[CODE lang="html" title="me.html"]1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
5
6 <style type="text/css">
7
8 </style>
9 <style type="text/css">
10 ---->
11 #color {
12 font-family:Tahoma, Geneva, sans-serif
13 }
14 body,td,th {
15 top: 10px;
16 left: 10px;
17 font-family:Tahoma, Geneva, sans-serif;
18 font-size:20px;
19 background: #FF3;
20
21 }
22 </style>
23
24 </head
25 ><body>
26 <div align="right">
27 <iframe width="713" height="410" src="https://www.youtube.com/embed/PqiEmPf0QlE"
title="YouTube video player" frameborder="0" allow="accelerometer; autoplay;
clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe> </div>
28 <p>
29 <p>
30
31 <div align="right">
32 <iframe width="43%" height="200" scrolling="no" frameborder="no" allow="autoplay"
src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/
1052516986&color=
%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&sh
ow_reposts=false&show_teaser=true&visual=true"></iframe><div style="font-size:
10px; color: #cccccc;line-break: anywhere;word-break: normal;overflow: hidden;whi
te-space: nowrap;text-overflow: ellipsis; font-family: Interstate,Lucida
Grande,Lucida Sans Unicode,Lucida Sans,Garuda,Verdana,Tahoma,sans-serif;fontweight:
100;"><a href="https://soundcloud.com/n-n-n-s-1" title="SpokenWeb
Symposium" target="_blank" style="color: #cccccc; text-decoration: none;">SpokenW
eb Symposium</a> · <a href="https://soundcloud.com/n-n-n-s-1/elisabetta-senesisoundwalk-
may-20-2021" title="Elisabetta Senesi, Soundwalk, May 20, 2021" target=
"_blank" style="color: #cccccc; text-decoration: none;">Elisabetta Senesi,
Soundwalk, May 20, 2021</a></div>
33 <p>
34
HD 500:Users:elisabettasenesi

esktop:desktop_12_2019_back_up:sito:me.html: 1/2
35 <p align="left">
36 <div id="color">
37 <div align="justify"class="Stile2">
38 <div align="left">
39 <p> <a href="https://spokenweb.tumblr.com/">SPOKEN WEB SYMPOSIA</a><p> <a href="
http://streams.soundtent.org/2021/streams/utc2_florence"> REVEIL 8 LIVE STREAM</a
>
40 <p> <a href="https://citiesandmemory.com/travel/" > UNTIL WE TRAVEL AUDIO </a>
41 <p> <a href="https://walklistencreate.org/forums/users/elisabetta-senesi/?
sub=events" target="_blank">FIESOLE SOUNDWALKS</a>
42 <p><a href="https://www.dropbox.com/s/7wuofltwow6zm17/5%20Ottobre.mp4?dl=0"
target="_blank"> FLORENCE SILENT WALK</a></p>
43 <p><a href="https://www.dropbox.com/s/pq3xy0gfz7vgkat/4%20Ottobre.mp4?dl=0"
target="_blank">CASCINE SILENT SOUNDWALK </a></p>
44 <p><a href="https://drive.google.com/file/d/1ekMQOXZS8QILSmYPI2lGi0HCLj7Zgbbz/
view?usp=sharing" target="_blank">SIENA LISTENING WALK</a>
45 <p> <a href="https://drive.google.com/file/d/1ZPmv4bbidgjy14cs75MQm_0vv6wooBg5/
view?usp=sharing" target="_blank"> VALDARNO SOUNDWALK</a>
46 <p> <a href="https://www.youtube.com/watch?v=xdQ835sPQs4" target="_blank"> STILL
HOMESCAPE</a>
47 <p><a href="https://vimeo.com/97237206" target="_blank">NOISE CALM ZONE</a>
48 <p><a href="https://vimeo.com/16530498" target="_blank">SONIC GARDEN</a>
49 <p><a href=" https://vimeo.com/7763171" target="_blank">HANDLE WITH CARE</a>
50 <p><a href="sonic_install.html"target="_blank">INSTALLATIONS</a>
51 <p><a href="https://www.mixcloud.com/betta-senesi/">AUDIO WORKS</a>
52 <p><a href="https://soundcloud.com/betta77" target="_blank">RADIO PIECES</a>
53 <p><a href="http://tabsil.wordpress.com/" target="_blank">BLOG</a>
54 <p><a href="ISSUES.html" target="_blank">ISSUES</a>
55 <p><a href="CV_2014.html" target="_blank">CV</a>
56 <p><a href="bio.html" target="_blank">BIO</a>
57 <p><a href="https://goldsmiths.academia.edu/ElisabettaSenesi" target="_blank">ACA
DEMIC</a>
58 <p><a href="mailto:[email protected]" target="_blank">DROP ME A LINE</a>
59 </div>
60 </body>
61 </html>
62 <div align="right">
63 <iframe width="713" height="410" src="https://www.youtube.com/embed/xdQ835sPQs4"
title="YouTube video player" frameborder="0" allow="accelerometer; autoplay;
clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>
64
65
66
67
68
69
70
HD 500:Users:elisabettasenesi

esktop:desktop_12_2019_back_up:sito:me.html: 2/2[/CODE]

BGB · Jul 1, 2021

I just designed it what I could understand. You can change it as you want. Don't put you code outside html tag.
HTML -

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie-edge">
    <title>Elisabetta</title>
    <link type="text/css" rel="stylesheet" href="style.css" />
</head>

<body>
    <div class="container">
        <!-- Left section -->
        <nav>
            <ul class="navbar">
                <li><a href="https://spokenweb.tumblr.com/">SPOKEN WEB SYMPOSIA</a></li>
                <li><a href="http://streams.soundtent.org/2021/streams/utc2_florence">REVEIL 8 LIVE STREAM</a></li>
                <li><a href="https://citiesandmemory.com/travel/">UNTIL WE TRAVEL AUDIO</a></li>
                <li><a href="https://walklistencreate.org/forums/users/elisabetta-senesi/?sub=events" target="_blank">FIESOLE SOUNDWALKS</a></li>
                <li><a href="https://www.dropbox.com/s/7wuofltwow6zm17/5%20Ottobre.mp4?dl=0" target="_blank"> FLORENCE SILENT WALK</a></li>
                <li><a href="https://www.dropbox.com/s/pq3xy0gfz7vgkat/4%20Ottobre.mp4?dl=0" target="_blank">CASCINE SILENT SOUNDWALK</a></li>
                <li><a href="https://drive.google.com/file/d/1ekMQOXZS8QILSmYPI2lGi0HCLj7Zgbbz/view?usp=sharing" target="_blank">SIENA LISTENING WALK</a></li>
                <li><a href="https://drive.google.com/file/d/1ZPmv4bbidgjy14cs75MQm_0vv6wooBg5/view?usp=sharing" target="_blank"> VALDARNO SOUNDWALK</a></li>
                <li><a href="https://www.youtube.com/watch?v=xdQ835sPQs4" target="_blank"> STILLHOMESCAPE</a></li>
                <li><a href="https://vimeo.com/97237206" target="_blank">NOISE CALM ZONE</a></li>
                <li><a href="https://vimeo.com/16530498" target="_blank">SONIC GARDEN</a></li>
                <li><a href=" https://vimeo.com/7763171" target="_blank">HANDLE WITH CARE</a></li>
                <li><a href="sonic_install.html"target="_blank">INSTALLATIONS</a></li>
                <li><a href="https://www.mixcloud.com/betta-senesi/">AUDIO WORKS</a></li>
                <li><a href="https://soundcloud.com/betta77" target="_blank">RADIO PIECES</a></li>
                <li><a href="http://tabsil.wordpress.com/" target="_blank">BLOG</a></li>
                <li><a href="ISSUES.html" target="_blank">ISSUES</a></li>
                <li><a href="CV_2014.html" target="_blank">CV</a></li>
                <li><a href="bio.html" target="_blank">BIO</a></li>
                <li><a href="https://goldsmiths.academia.edu/ElisabettaSenesi" target="_blank">ACADEMIC</a></li>
                <li><a href="mailto:[email protected]" target="_blank">DROP ME A LINE</a></li>
            </ul>
        </nav>
        <!-- Right section -->
        <div class="section">
            <div class="yt-video">
                <iframe width="713" height="410" src="https://www.youtube.com/embed/PqiEmPf0QlE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
            </div>
            <div>
                <iframe style="width: 100%;height: 200px;" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https://api.soundcloud.com/tracks/1052516986&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"></iframe>
               
                <div style="font-size:10px; color: #cccccc;line-break: anywhere;word-break: normal;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; font-family: Interstate,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Garuda,Verdana,Tahoma,sans-serif;fontweight:100;">
                    <a href="https://soundcloud.com/n-n-n-s-1" title="SpokenWebSymposium" target="_blank" style="color: #cccccc; text-decoration: none;">SpokenWeb Symposium</a> ·
                    <a href="https://soundcloud.com/n-n-n-s-1/elisabetta-senesisoundwalk-may-20-2021" title="Elisabetta Senesi, Soundwalk, May 20, 2021" target="_blank" style="color: #cccccc; text-decoration: none;">Elisabetta Senesi, Soundwalk, May 20, 2021</a>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

CSS -

CSS:

* {
    margin: 0;
    padding: 0;
}

html, body {
    font-family:Tahoma, Geneva, sans-serif;
    background: #FCE7E6;
}

li {
    list-style: none;
}

a {
    text-decoration: none;
}

.container {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

/* Nav */
nav {
    padding: 2rem;
    background-color: #FE504F;
}

.navbar li {
    margin: 10px 0;
}

.navbar a {
    color: #fff;
}

/* Section */
.section {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.yt-video {
    margin: 1rem 0 2rem 0;
}

betta · Jul 3, 2021

BGB said:

I just designed it what I could understand. You can change it as you want. Don't put you code outside html tag.
HTML -

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie-edge">
    <title>Elisabetta</title>
    <link type="text/css" rel="stylesheet" href="style.css" />
</head>

<body>
    <div class="container">
        <!-- Left section -->
        <nav>
            <ul class="navbar">
                <li><a href="https://spokenweb.tumblr.com/">SPOKEN WEB SYMPOSIA</a></li>
                <li><a href="http://streams.soundtent.org/2021/streams/utc2_florence">REVEIL 8 LIVE STREAM</a></li>
                <li><a href="https://citiesandmemory.com/travel/">UNTIL WE TRAVEL AUDIO</a></li>
                <li><a href="https://walklistencreate.org/forums/users/elisabetta-senesi/?sub=events" target="_blank">FIESOLE SOUNDWALKS</a></li>
                <li><a href="https://www.dropbox.com/s/7wuofltwow6zm17/5%20Ottobre.mp4?dl=0" target="_blank"> FLORENCE SILENT WALK</a></li>
                <li><a href="https://www.dropbox.com/s/pq3xy0gfz7vgkat/4%20Ottobre.mp4?dl=0" target="_blank">CASCINE SILENT SOUNDWALK</a></li>
                <li><a href="https://drive.google.com/file/d/1ekMQOXZS8QILSmYPI2lGi0HCLj7Zgbbz/view?usp=sharing" target="_blank">SIENA LISTENING WALK</a></li>
                <li><a href="https://drive.google.com/file/d/1ZPmv4bbidgjy14cs75MQm_0vv6wooBg5/view?usp=sharing" target="_blank"> VALDARNO SOUNDWALK</a></li>
                <li><a href="https://www.youtube.com/watch?v=xdQ835sPQs4" target="_blank"> STILLHOMESCAPE</a></li>
                <li><a href="https://vimeo.com/97237206" target="_blank">NOISE CALM ZONE</a></li>
                <li><a href="https://vimeo.com/16530498" target="_blank">SONIC GARDEN</a></li>
                <li><a href=" https://vimeo.com/7763171" target="_blank">HANDLE WITH CARE</a></li>
                <li><a href="sonic_install.html"target="_blank">INSTALLATIONS</a></li>
                <li><a href="https://www.mixcloud.com/betta-senesi/">AUDIO WORKS</a></li>
                <li><a href="https://soundcloud.com/betta77" target="_blank">RADIO PIECES</a></li>
                <li><a href="http://tabsil.wordpress.com/" target="_blank">BLOG</a></li>
                <li><a href="ISSUES.html" target="_blank">ISSUES</a></li>
                <li><a href="CV_2014.html" target="_blank">CV</a></li>
                <li><a href="bio.html" target="_blank">BIO</a></li>
                <li><a href="https://goldsmiths.academia.edu/ElisabettaSenesi" target="_blank">ACADEMIC</a></li>
                <li><a href="mailto:[email protected]" target="_blank">DROP ME A LINE</a></li>
            </ul>
        </nav>
        <!-- Right section -->
        <div class="section">
            <div class="yt-video">
                <iframe width="713" height="410" src="https://www.youtube.com/embed/PqiEmPf0QlE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
            </div>
            <div>
                <iframe style="width: 100%;height: 200px;" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https://api.soundcloud.com/tracks/1052516986&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"></iframe>
              
                <div style="font-size:10px; color: #cccccc;line-break: anywhere;word-break: normal;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; font-family: Interstate,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Garuda,Verdana,Tahoma,sans-serif;fontweight:100;">
                    <a href="https://soundcloud.com/n-n-n-s-1" title="SpokenWebSymposium" target="_blank" style="color: #cccccc; text-decoration: none;">SpokenWeb Symposium</a> ·
                    <a href="https://soundcloud.com/n-n-n-s-1/elisabetta-senesisoundwalk-may-20-2021" title="Elisabetta Senesi, Soundwalk, May 20, 2021" target="_blank" style="color: #cccccc; text-decoration: none;">Elisabetta Senesi, Soundwalk, May 20, 2021</a>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

CSS -

CSS:

* {
    margin: 0;
    padding: 0;
}

html, body {
    font-family:Tahoma, Geneva, sans-serif;
    background: #FCE7E6;
}

li {
    list-style: none;
}

a {
    text-decoration: none;
}

.container {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

/* Nav */
nav {
    padding: 2rem;
    background-color: #FE504F;
}

.navbar li {
    margin: 10px 0;
}

.navbar a {
    color: #fff;
}

/* Section */
.section {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.yt-video {
    margin: 1rem 0 2rem 0;
}

Ok, thank you! Very helpful, I am working on it and trying to change things as I add stuff on this page.

Welcome!

HTML & CSS moving text and embeded video

betta

Coder

betta

Coder

Attachments

Mutiny

Bronze Coder

Ghost

Platinum Coder

betta

Coder

betta

Coder

Attachments

betta

Coder

BGB

Silver Coder

Attachments

betta

Coder

New Threads

Latest posts

Share this page

Buy us a coffee!

About Us

Site links

We value your privacy

Welcome!

HTML & CSS moving text and embeded video

Coder

Coder

Attachments

Bronze Coder

Platinum Coder

Coder

Coder

Attachments

Coder

Silver Coder

Attachments

Coder

Log in

Share this page

Buy us a coffee!

About Us

Site links

Stay Connected

We value your privacy