1 Like
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Session 4</title>
<style>
.container {
display: flex;
flex-direction: row;
}
.subContainer {
width: 25%;
border-radius: 1px solid rgb(13, 83, 58);
background-color: rgb(6, 74, 70);
margin: 5px;
padding-top: 15px;
}
.content{
text-align: center;
color: #ffffff;
}
</style>
</head>
<body>
<div class="container">
<div class="subContainer">
<div class="content">
<img src="Images/user.png" alt="user">
<h1>App 1</h1>
<p>Welcome to Impact</p>
</div>
</div>
<div class="subContainer">
<div class="content">
<img src="Images/user2.png" alt="user2">
<h1>App 2</h1>
<p>Welcome to Impact</p>
</div>
</div>
<div class="subContainer">
<div class="content">
<img src="Images/user3.png" alt="user3">
<h1>App 3</h1>
<p>Welcome to Impact</p>
</div>
</div>
<div class="subContainer">
<div class="content">
<img src="Images/user4.png" alt="user4">
<h1>App 4</h1>
<p>Welcome to Impact</p>
</div>
</div>
</div>
</body>
</html>
1 Like
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Applications</title>
<style>
.demo{
background-color: rgba(251, 174, 255, 0.918);
padding: 20px;
text-align: center;
border-radius: 10px;
height:150px;
width: 200px;
}
body{
background-color: black;
}
section{
text-align: center;
display: flex;
justify-content: center;
gap: 15px;
padding: 100px;
}
</style>
</head>
<body><section>
<div class="demo">
<img src="whatsapp.png" alt="whatsapp icon">
<h2>Whatsapp </h2>
<p>bla bla bla</p>
</div>
<div class="demo">
<img src="facebook.png" alt="facebook">
<h2>Facebook</h2>
<p>bla bla bla</p>
</div>
<div class="demo">
<img src="instagram.png" alt="Instagram">
<h2>Instagram</h2>
<p>bla bla bla</p>
</div>
<div class="demo">
<img src="twitter.png" alt="twitter">
<h2>Twitter</h2>
<p>bla bla bla</p>
</div>
</section>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>
Assignment_City
</title>
<style>
.city {
background-color: rgb(225, 195, 195);
color: black;
border: 2px solid black;
text-align: center;
height: 130px;
width: 200px;
padding: 20px;
border-radius: 20px;
}
.section{
text-align: center;
display: flex;
justify-content: center;
gap: 25px;
padding: 100px;
}
body{
background-color: rgb(2, 3, 36);
}
</style>
</head>
<body >
<div class="section">
<div class="city">
<img src="island.png" alt="island">
<h2>London</h2>
<p><b>London is the capital of England.</b></p>
</div>
<div class="city" >
<img src="kaminarimon-gate.png" alt="kaminarimon-gate">
<h2>Paris</h2>
<p><b>Paris is the capital of France.</b></p>
</div>
<div class="city">
<img src="tokyo-tower.png" alt="tokyo-tower">
<h2>Tokyo</h2>
<p><b>Tokyo is the capital of Japan.</b></p>
</div>
<div class="city">
<img src="kolkata.png"alt="kolkata">
<h2>Kolkata</h2>
<p><b>Kolkata is the capital of West Bengal.</b></p>
</div>
</div>
</body>
</html>
