In module-2 I learned CSS.The topics that I covered:
1)3 way of CSS
2)CSS Syntex
3)Text-alignment
4)CSS Structure
5)CSS Selectors
6)ID vs Class
7)CSS Background Image
8)CSS Margin and Padding
9)CSS Box Shadow
10)CSS Box Model
11)Display: Inline, Block, Inline-block
I practised this by my own:
This the practise code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Reading List</title>
<link rel="shortcut icon" href="./images/book.png" type="image/x-icon">
<link rel="stylesheet" href="./styles/book.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Playwrite+US+Modern:wght@100..400&display=swap" rel="stylesheet">
</head>
<body>
<div id="portion_1">
<div class="section_1">
<h1 id="name">Hi, I'm Shemanto Sharkar 👋</h1>
<p id="welcome">welcome to my website of Book List!</p>
</div>
<div class="section_2">
<button class="button"><a href="">My LinedIn</a></button>
<button class="button"><a href="">My Facebook</a></button>
<button class="button"><a href="">My Youtube</a></button>
</div>
<div class="section_3">
<img id="profile" src="./images/profile.png" alt="">
</div>
</div>
<div id="portion_2">
<p>I am studying Energy Science and Engineering at KUET. I am in my last year.Now I am taking web development couse by programming Hero.I took this course becouse it is by Jhonkar Mahbub bhai.It will help me to get a job after I am graduated in 2025.</p>
</div>
<div id="portion_3">
<img class="book" src="./images/download (1).jfif" alt="">
<img class="book" src="./images/download.jfif" alt="">
<img class="book" src="./images/images.jfif" alt="">
</div>
</body>
</html>
name {
font-family: "Playwrite US Modern", cursive;
text-align: center;
color: #000000;
font-weight: bold;
font-size: 40px;
margin-bottom: 0%;
}
welcome{
text-align: center;
font-family: "Poppins", sans-serif;
font-weight: bold;
color: #595959;
margin-top: 0%;
font-size: 30px;
}
.section_2{
text-align: center;
margin: 5%;
}
.button{
background-color: #ffea3d;
color: #ffffff;
font-family: "Poppins", sans-serif;
font-weight: bold;
font-size: 20px;
padding: 10px 20px;
border: none;
border-radius: 10px;
cursor:pointer;
}
a{
text-decoration: none;
color: #000000;
}
profile{
display: block;
width: 300px;
margin: 0 auto;
}
portion_2{
background-color: #ffea3d;
font-family: "Poppins", sans-serif;
font-size: medium;
padding: 2%;
margin: 5%;
border-radius: 10px;
text-align: center;
}
.book{
display: inline-block;
width: 200px;
padding: 10px;
margin-left: auto;
margin-right: auto;
border: 10px solid #ffea3d;
border-radius: 5%;
}
portion_3{
text-align: center;
}
Top comments (0)