Hello!
Today I'll show you my website!
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;
}
It is a long code!!
I will make changes, so, look at my site!
Bye!!
0 件のコメント:
コメントを投稿