Leocchi 's Blog

1/16/2021

Charge for plastic shopping bags to reduce plastic waste　The government charges for plastic shopping bags at supermarkets and convenience stores nationwide

The government charges for plastic shopping bags at

supermarkets and convenience stores nationwide.

Most of the plastic bags makes like 3 or 5 yen.

I think this is good, it is some eco.

ByE

1/14/2021

Lecture spreads due to black assault death

May 25th, a white police strangled a black person and killed.

This was on a camera, and did a lecture "Black Lives Matter".

Many black people died.

Bye~!

1/13/2021

Demon slayer Mugen Train gets 10 billion

Demon slayer Mugen Train gets more than 10 billion.

This movie gets the Fastest in Japan's best movie.

I like Demon Slayer, It is really fun.

A boy called Tanjiro was in Taisho period.

And his family was been killed by an demon, and her sister became an demon.

Tanjiro becomes a demon slayer corps.

Bye!!!

1/07/2021

Prime Minister changes in 7 years 9 months

August, 28th, Prime Minister Abe (66 years old) has open the Liberal Democratic Party presidential election.

Suga Yoshihide (71years old) was to be elected.

I knew that Prime minister is really hard to do it.

Corona Virus out break

Now in the world, Corona Virus is out breaking.

Olympic has postponed, and takes many lives.

Maybe I have the virus now, maybe you have.

I really hate the virus, I want the world to be peace.

My site

Hello!

Today I'll show you my website!

leo.pro

This is my site!

Cool, right?

I want to make more changes!

And this is my code.

Index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <script src="./script.js" defer></script>
    <link rel="stylesheet" href="style.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Leo618 - Top</title>
</head>

<body>
    <header>
        <h1 class="title">Leo618's Website</h1>
    </header>
    <section>
        <img class="big-image" src="big_image.png" alt="image of Leo618">
    </section>
    <section>
        <h2 class="center">About me</h2>
        <div class="about-me">
            <div class="about-me-introduction">
                <h3>Leo618</h3>
                <p>I am Leo618. I have many user names : Leo618, Leocchi, Leocody and Cameleon! </p>
                <p>I am a 10-year-old boy, love games like Smash Bros. I also like to play VR, like Population:1. I also
                    like Among us in games!
                </p>
                <p>I live in Osaka, Japan. I like sports, among them soccer the best!</p>
                <p>I usually use Python in proggraming!</p>
                <p>This site is really bad(because I made it), but I love my own site!</p>
                <p>So, welcome to my site and have a good day!😄</p>
            </div>
            <div class="about-me-image">
                <img class="icon" src="logo.png" alt="logo 4">
            </div>
        </div>
    </section>
    <section>
        <h2 class="follow-me">Follow me on SNS!</h2>
        <div class="textbox">
            <div class="tt-img">
                <a href="https://twitter.com/Leocchi618" target="_blank">
                    <img class="logo" src="twitter.png" alt="twitter">
                </a>
            </div>
            <div class="sc-img">
                <a href="https://scratch.mit.edu/users/Leo618/ " target="_blank">
                    <img class="logo" src="scratch.png" alt="scratch">
                </a>
            </div>
            <div class="yt-img">
                <a href="https://www.youtube.com/channel/UCppA28FmxiFtHKCqSJx2ybg" target="_blank">
                    <img class="logo" src="youtube.png" alt="youtube">
                </a>
            </div>
        </div>
    </section>
</body>

</html>

style.css

html, body {
    width: 100%;
}

body {
    font-family: Arial, Helvetica, sans-serif;
}

.center {
    text-align: center;
    border: tomato;
}

h2 {
    font-size: 46px;
}

.about-me-introduction {
    width: 50%;
}

.big-image {
    width: 100%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.about-me {
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    max-width: 50rem;
    margin-bottom: 100px;
}

.about-me-image {
    display: flex;
    /* right and left align */
    justify-content: center;
    /* top and bottom align */
    align-items: center;
    width: 50%;
}

.icon {
    width: 15rem;
    height: 15rem;
}

.title {
    font-weight: bold;
    text-align: center;
    font-size: 70px;
    margin: 30px;
}

.about-me-introduction h3 {
    font-size: 34px;
}

.about-me-introduction p {
    font-size: 20px;
}

.follow-me {
    text-align: center;
}

.textbox {
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    max-width: 50rem;
    margin-bottom: 100px;
}

.yt-img {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50%;
}

.tt-img {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50%;
}

.sc-img {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50%;
}

.logo {
    width: 5rem;
    height: 5rem;
}