Project Based on the Html and Css on the Photographer Portfolio (Project-4)
This was also an Responsive website for the photos portfolio. But here i am taking the same size photos which will change according to their screen size .
While you run this you need to add the your images address in the source attribute (src).
while run this program it will only change the sizes of the elements based on the screen size . but it will change the element location.
You need to take the same size (width and height ) then only it will work .
<!DOCTYPE html>
<html lang="en">
<head>
<link href="portfolio.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Girassol&display=swap" rel="stylesheet">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio</title>
</head>
<body>
<div>Madhu Photo Portfolio</div>
<img src="1.jpg" alt="a"><img
src="2.jpg" alt="b"><img
src="3.jpg" alt="c"><img
src="4.jpg" alt="d"><img
src="5.jpg" alt="e"><img
src="6.jpg" alt="f"><img
src="7.jpg" alt="g"><img
src="8.jpg" alt="h"><img
src="9.jpg" alt="i">
</body>
</html>
<style>
img{
width:30%;
margin:1.6666%;
}
div{
text-transform: uppercase;
border-bottom: 2px solid #f1f1f1;
width:30%;
margin-left:1.5%;
padding: 1.2em 0;
font-family: 'Girassol', cursive;
font-size:1.2em;
}
</style>
0 comments:
Post a Comment