<!DOCTYPE html>
<html>
<head>
	<title>My Family</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
	body {
  background-image: url('https://img.rawpixel.com/s3fs-private/rawpixel_images/website_content/v546batch3-mynt-34-badgewatercolor_1.jpg?w=800&dpr=1&fit=default&crop=default&q=65&vib=3&con=3&usm=15&bg=F4F4F3&ixlib=js-2.2.1&s=89288ef4b47127f7f34a5998b50e4470');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}
	
	
		body {
			background-color: #f5f5f5;
			font-family: Arial, sans-serif;
			font-size: 16px;
			line-height: 1.5;
			margin: 0;
			padding: 0;
		}
css
Copy code
	header {
		text-align: center;
		margin: 20px 0;
	}

	h1 {
		font-size: 36px;
		font-weight: bold;
		color: #333333;
	}
	
	p {
		margin: 10px 0;
	}
	
	.container {
		max-width: 1200px;
		margin: 0 auto;
		padding: 20px;
	}
	
	.row {
		display: flex;
		flex-wrap: wrap;
		margin: 0 -10px;
		align-items: center;
		justify-content: center;
	}
	
	.col {
		flex: 1;
		padding: 10px;
	}
	
	.col img {
		display: block;
		max-width: 100%;
		height: auto;
		margin: 0 auto;
		transform: rotate(-5deg);
	}
	
	.col h3 {
		font-size: 24px;
		font-weight: bold;
		margin-top: 20px;
		color: #333333;
		text-align: center;
	}
	
	.col p {
		font-size: 18px;
		line-height: 1.5;
		text-align: center;
		margin: 10px 0;
		color: #666666;
	}
	
	.link {
		display: inline-block;
		padding: 10px;
		background-color: #333333;
		color: #ffffff;
		text-decoration: none;
		border-radius: 5px;
		margin: 20px auto 0;
		text-align: center;
		transition: all 0.3s ease;
	}
	
	.link:hover {
		background-color: #666666;
	}
	.navbar {
    width: 100%;
    margin: auto;
    padding: 35px 0;
    display: flex;
    background-color: LightCoral;
    align-items: center;
    justify-content: space-between;
}

.navbar ul li {
    list-style: none;
    display: inline-block;
    margin: 0 20px;
    position: relative;
}

.navbar ul li a {
    text-decoration: none;
    color: #fff;
    text-transform: uppercase;
}

.navbar ul li::after{
    content: '';
    height: 3px;
    width: 0;
    background: #009688;
    position: absolute;
    left: 0;
    bottom: -10px;
    transition: 0.5s;
}

.navbar ul li:hover::after{
    width: 100%;
}
 .social-icons {
      list-style: none;
      margin: 0;
      padding: 0;
      display: relative;
	  right:60%;
      justify-content: center;

	  
    }
	
    
    .social-icons li {
      margin: 0 10px;
    }
    
    .social-icons a {
      display: block;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      text-align: center;
      line-height: 40px;
      color: #fff;
      background-color: #333;
    }
    
    .social-icons a:hover {
      background-color: #666;
    }
    
    .social-icons a i {
      font-size: 20px;
    }
</style>
</head>
<body>
	
	<div class="navbar">
                <img src="" class="">
                <ul>
                    <li><a href="#home">Home</a></li>
                    <li><a href="#fam">Family</a></li>
                    <li><a href="#pics">More Pictures</a></li>
                    <li><a href="#contact">Contact</a></li>
                </ul>
    </div>
	
	
	<div class="container">
		<h1>Meet My Family</h1>
		<p>Welcome to my family page. Here you can learn more about my family I care about the most. Below are some photos of my family members along with a brief description of who they are.</p>
		<div class="row">
			

			<div class="col">
				<img src="https://scontent.cdninstagram.com/v/t51.39111-15/333868250_207516548615725_8759701211578796086_n.jpg?stp=dst-jpg_s480x480&_nc_cat=109&ccb=1-7&_nc_sid=5a057b&_nc_ohc=GHAZbUktnP4AX-0fCG5&_nc_ad=z-m&_nc_cid=0&_nc_ht=scontent.cdninstagram.com&oh=02_AVAIObhBCE_H5PzSUbAldz814zX-jyiSZFZcdN2GGYO-6Q&oe=6402CED0&ig_cache_key=MzA0ODE0OTI3NzkwOTI4NjA1NQ%3D%3D.2-ccb7-5",">
				<h3>My Family</h3>
				<p>Allow me to introduce you to an extraordinary family who loves to embark on thrilling adventures. This family is always on the lookout for new and exciting experiences to add to their collection. From hiking through rugged terrain to camping in the middle of the mountain, they are never afraid to try something new. They have a passion for exploring new places, discovering hidden gems, and immersing themselves in different cultures. Whether it's a road trip through the mountains or a snorkling  in the ocean, this family always finds a way to inject excitement into their lives. Their love for adventure is infectious, and they inspire others to step outside their comfort zones and embrace the unknown.</p>
				<a href="#more" class="link">See more</a>
			</div>
			<ul class="social-icons">
    <li><a target="" href="https://web.facebook.com/markreynald.balatayo.1"><i class="https://cdn-icons-png.flaticon.com/128/1400/1400477.png"></i></a></li>
    <li><a target="_blank"href="https://twitter.com/kram_ming"><i class="fab fa-twitter"></i></a></li>
    <li><a target="_blank" href="https://www.instagram.com/markreynaldb/"><i class="fab fa-instagram"></i></a></li>
 
  </ul>
	
	
	
	

</body>
</html>