![MODIFY ANSH [ ANSH MORE ]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmWVvLs7FEVRek9Z1LYcPqeorj9eXPM58b4HT-TncEKskzlNCZConjGNV9M1goCrbe1WFpZ3MF-RT2jcGqnj-ntHmNg6k_FpcrJE5KtBhE_JlZPGJb3IkiBswdJiaFK2ENL4k30BgmcxtX/s1600/20200922_134004.png)
![MODIFY ANSH [ ANSH MORE ]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxXBw9iGVYWIF2XhYkZiOS2oNIgD-Oc7bYIGHxwJslNU3-JUzkEhRSXNPPl13P_jh4euUwZ5qtb4MuoYzHm3-vO43qZLBiLuWw6aGuOJHQeCRcxKfUZBglpj9UjLciHFSspu8GTgsO9RPB/s1600/20200922_134004.png)
HTML CODE SERVICE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="navbar">
<ul>
<li>Home</li>
<li>My Intertenment</li>
<li>Find me</li>
</ul>
</div>
<div class="homepage">
<div class="right">
<h1>Welcome !</h1>
<p> Hi, I'm <span>Sit amet!</span></p>
<h3>Lorem ipsum dolor sit, amet consectetur adipisicing elit.<br> <br> Sapiente magnam unde, enim
cupiditate quae
aspernatur <br> <br> impeditcorrupti nam voluptas nostrum!</h3>
</div>
<div class="left">
<img src="vinitladki.jpg" alt="">
<div class="iner"></div>
</div>
</div>
</div>
<div class="cardds">
<div class="card">
<div class="avatar">
<img src="vinit3.jpg" alt="Avatar Image">
</div>
<div class="content">
<h2>Some of My Story</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<button>View More</button>
</div>
</div>
<div class="card">
<div class="avatar">
<img src="vinitladki.jpg" alt="Avatar Image">
</div>
<div class="content">
<h2>Some of My Story</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<button>View More</button>
</div>
</div>
<div class="card">
<div class="avatar">
<img src="vinitladki2.webp" alt="Avatar Image">
</div>
<div class="content">
<h2>Some of My Story</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<button>View More</button>
</div>
</div>
</div>
</body>
</html>
CSS CODE STARTS FROM HERE!
body{
background-color: #38598b;
color: white;
}
ul {
display: flex ;
list-style: none;
}
li {
text-decoration: none;
margin: 20px;
cursor: pointer;
font-size: 20px;
}
li:hover{
background-color: #011324;
}
.homepage{
display: flex;
background-color: #113f67;
height: 70vh;
}
.iner{
border: 5px solid black;
position: absolute;
height: 60vh;
width: 80vh;
margin-left: 9%;
top: 20%;
margin-left: 13%;
opacity: 33%;
}
img{
position: relative;
height: 60vh;
width: 80vh;
object-fit: cover;
margin-left: 30%;
margin-top: 40px;
}
h1{
text-align: center;
font-family: cursive;
margin-top: 50px;
}
p{
font-size: 25px;
margin-left: 10%;
padding-top: 50px;
}
span {
color: #d41a1a;
font-size: xx-large;
font-family: cursive;
}
h3{
margin: 50px;
font-family: monospace;
font-size: 14px;
}
.cardds{
height: 80vh;
margin-left: 30vh;
display: flex;
margin-top: 60px;
}
.card {
width: 273px;
height: 476px;
color: white;
background-color: #113f67;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
padding: 20px;
transition: all 0.3s ease;
cursor: pointer;
}
.card:hover {
width: 273px;
height: 480px;
background-color: #011324; /* Change background on hover */
transform: scale(1.05); /* Make the card slightly bigger */
}
.avatar {
width: 47vh;
height: 23vh;
border-radius: 48vh;
margin: 0 auto 20px;
overflow: hidden; /* Ensures image stays inside the circle */
}
.avatar img {
width: 101px;
height: 100px;
border-radius: 100vh;
object-fit: cover; /* Adjusts image to fill the container */
}
.content {
text-align: center;
}
h2 {
margin-bottom: 10px;
}
p {
font-size: 14px;
color: white;
line-height: 1.6;
margin-bottom: 20px;
}
button {
background-color: #38598b;
border: none;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
border-radius: 4px;
cursor: pointer;
}
0 Comments