dailyBlog HTML CSS Project Souce Code Free
🚀 HTML CSS Project for Beginners | Step-by-Step Tutorial 🚀
Welcome to this beginner-friendly guide where we'll take you through the exciting journey of creating your first HTML and CSS project! 🌐✨ In this hands-on tutorial, we'll cover the basics: 🔵 Setting up your HTML file 🔵 Structuring content with essential HTML tags 🔵 Applying styles and bringing your project to life with CSS 🔵 Crafting a responsive layout for a seamless user experience 🔵 Adding a touch of interactivity with CSS magic ✨ No prior coding experience required! Whether you're a complete beginner or looking to refresh your skills, this step-by-step tutorial will empower you to build and style your own web page. Ready to dive into the world of web development? Hit play now and let's code together! 💻👩💻👨💻Weather app Free Source Code
#HTML #CSS #WebDevelopment #BeginnersGuide #CodingForAll If you found this tutorial helpful, don't forget to like, share, and subscribe for more coding adventures! 🚀✨ Happy coding! 💻🎉
Souce code:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>MiniVlog</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header>
<h3>dailyBlog</h3>
<ul>
<li>Vlog</li>
<li>My Blog</li>
<li>New Vlog</li>
</ul>
</header>
<div class="container">
<div class="card">
<img
src="https://rukminim2.flixcart.com/image/832/832/xif0q/mobile/5/y/8/-original-imagtt4mhqrzjs9r.jpeg?q=70"
alt=""
/>
<h3>Vivo t2 pro</h3>
<p>
The T2 Pro 5G smartphone features a 3D curved AMOLED screen providing
a bright display with a peak brightness of 1300 nits. Improve your
performance with the MediaTek Dimensity 7200 processor. Powered with a
64 MP main camera
</p>
<b> <span>Post by</span>Asgar Ansari </b>
</div>
<div class="card">
<img
src="https://rukminim2.flixcart.com/image/832/832/xif0q/mobile/5/y/8/-original-imagtt4mhqrzjs9r.jpeg?q=70"
alt=""
/>
<h3>Vivo t2 pro</h3>
<p>
The T2 Pro 5G smartphone features a 3D curved AMOLED screen providing
a bright display with a peak brightness of 1300 nits. Improve your
performance with the MediaTek Dimensity 7200 processor. Powered with a
64 MP main camera
</p>
<b> <span>Post by</span>Asgar Ansari </b>
</div>
<div class="card">
<img
src="https://rukminim2.flixcart.com/image/832/832/xif0q/mobile/5/y/8/-original-imagtt4mhqrzjs9r.jpeg?q=70"
alt=""
/>
<h3>Vivo t2 pro</h3>
<p>
The T2 Pro 5G smartphone features a 3D curved AMOLED screen providing
a bright display with a peak brightness of 1300 nits. Improve your
performance with the MediaTek Dimensity 7200 processor. Powered with a
64 MP main camera
</p>
<b> <span>Post by</span>Asgar Ansari </b>
</div>
<div class="card">
<img
src="https://rukminim2.flixcart.com/image/832/832/xif0q/mobile/5/y/8/-original-imagtt4mhqrzjs9r.jpeg?q=70"
alt=""
/>
<h3>Vivo t2 pro</h3>
<p>
The T2 Pro 5G smartphone features a 3D curved AMOLED screen providing
a bright display with a peak brightness of 1300 nits. Improve your
performance with the MediaTek Dimensity 7200 processor. Powered with a
64 MP main camera
</p>
<b> <span>Post by</span>Asgar Ansari </b>
</div>
<div class="card">
<img
src="https://rukminim2.flixcart.com/image/832/832/xif0q/mobile/5/y/8/-original-imagtt4mhqrzjs9r.jpeg?q=70"
alt=""
/>
<h3>Vivo t2 pro</h3>
<p>
The T2 Pro 5G smartphone features a 3D curved AMOLED screen providing
a bright display with a peak brightness of 1300 nits. Improve your
performance with the MediaTek Dimensity 7200 processor. Powered with a
64 MP main camera
</p>
<b> <span>Post by</span>Asgar Ansari </b>
</div>
<div class="card">
<img
src="https://rukminim2.flixcart.com/image/832/832/xif0q/mobile/5/y/8/-original-imagtt4mhqrzjs9r.jpeg?q=70"
alt=""
/>
<h3>Vivo t2 pro</h3>
<p>
The T2 Pro 5G smartphone features a 3D curved AMOLED screen providing
a bright display with a peak brightness of 1300 nits. Improve your
performance with the MediaTek Dimensity 7200 processor. Powered with a
64 MP main camera
</p>
<b> <span>Post by</span>Asgar Ansari </b>
</div>
<div class="card">
<img
src="https://rukminim2.flixcart.com/image/832/832/xif0q/mobile/5/y/8/-original-imagtt4mhqrzjs9r.jpeg?q=70"
alt=""
/>
<h3>Vivo t2 pro</h3>
<p>
The T2 Pro 5G smartphone features a 3D curved AMOLED screen providing
a bright display with a peak brightness of 1300 nits. Improve your
performance with the MediaTek Dimensity 7200 processor. Powered with a
64 MP main camera
</p>
<b> <span>Post by</span>Asgar Ansari </b>
</div>
</div>
</body>
</html>
CSS:
* {
margin: 0;
padding: 0;
}
header {
height: 60px;
width: 100%;
background-color: black;
color: #fff;
display: flex;
justify-content: space-around;
align-items: center;
}
ul {
display: flex;
justify-content: space-around;
width: 30%;
list-style: none;
color: yellow;
}
h3 {
color: yellowgreen;
font-weight: bolder;
}
.container {
height: 100vh;
width: auto;
margin-top: 20px;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.card {
height: 300px;
width: 400px;
/* border: 2px solid; */
text-align: center;
}
img{
height: 150px;
}
span{
color: blue;
}
No comments: