Day-6
Attribute?
In HTML, an attribute is extra information added to an element to define its behavior, appearance, or other properties.
An attribute is always specified inside the opening tag and usually comes in the form
Example:<tagname attribute_name="attribute_value">Content</tagname>
Must Declare css ?
Because all browser already have some padding and margin .To remove all inbuild css we want to make all as 0px in style tag.
*{
padding:0px;
margin:0px;
box-sizing:border-box;
}
Difference b/w % and vh and vw?
%-Percentage vh-viewportheight vw-viewportwidth
%-Based on the parent size
vh&vw -It will choose the entire screen size not the parent
Css Grid Layout
CSS Grid Layout is a powerful layout system that allows you to create complex web page layouts with ease. It provides a grid-based layout system, with rows and columns, making it easier to design web pages
display:grid;
grid-template-columns:1fr 2fr;
fr-fractional unit or frame
Css flexbox
CSS Flexbox is a layout module designed to help align and distribute space among items in a container, even when their size is unknown or dynamic. It is particularly useful for creating responsive layouts that adapt to different screen sizes
display:flex;
flex-direction:column;---->direction to go
justify-content:center;---->always follow row direction(if not mentioned)
align-items:centerl
Project header:
code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Resume</title>
<style>
*{
padding: 0px;
margin: 0px;
box-sizing: border-box;
}
.container{
border: 1px solid red;
height:100vh;
width: 65vw;
margin:auto;
display: grid;
grid-template-columns: 1fr 2fr;
}
.left{
border: 1px solid black;
display: flex;
justify-content: center;
}
.right{
border: 1px solid blue;
}
</style>
</head>
<body>
<div class="container">
<div class="left">
<img src="profile.jpg" alt="profile image" height="150px" width="150px"><br>
</div>
<div class="right">
</div>
</div>
</body>
</html>
Output:
SOCIAL SHARE CARD GENERATOR