ওয়েব ডিজাইন (পর্ব ২০) এইচটিএমএল,সিএসএস দিয়ে পারসোনাল পোর্টফোলিও ওয়েব সাইট - WikiJana.Com™
হোম
Code
Web Design

ওয়েব ডিজাইন (পর্ব ২০) এইচটিএমএল,সিএসএস দিয়ে পারসোনাল পোর্টফোলিও ওয়েব সাইট

আজকের নতুন টপিকে আপনাকে স্বাগতম! আজকে আপনাদের একটা পারসোনাল পোর্টফলিও ওয়েব সাইট বানানো দেখাবো যেখানে শুধু HTML and CSS দিয়েই করা হয়েছে। (কিছুক্ষেত্রে
Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated

আস্‌সালামু আলাইকুম! আশা করি আল্লাহ এর অশেষ রহমতে আপনারা সবাই ভালো আছেন।আমিও আপনাদের দোয়াই ভালো আছি। আজকের নতুন টপিকে আপনাকে স্বাগতম! আজকে আপনাদের একটা পারসোনাল পোর্টফলিও ওয়েব সাইট বানানো দেখাবো যেখানে শুধু HTML and CSS দিয়েই করা হয়েছে। (কিছুক্ষেত্রে Jquary ব্যবহার করা হয়েছে।)

কি কি প্রয়োজনঃ

প্রথমে একটা index.html ফাইল এবং style.css ফাইল নিয়ে নিন।

এইচ টিএম এল বেসিক কোড গুলো লিখুনঃ

index.html ফাইল টেক্স এডিটরে ওপেন করে করে বেসিক HTML কোড গুলো লিখে নিন। 


<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <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>Home | Samrat Raihan</title>
    <link rel="stylesheet" href="style.css">
<link href='https://fonts.googleapis.com/css?family=Poppins' rel='stylesheet'>
<script src="https://kit.fontawesome.com/c8e4d183c2.js" crossorigin="anonymous"></script>
</head>
<body>
	<!--Code Here-->
</body>
</html>

1. নিচের ছবির মতো মেনু বানাতে যে HTML লাগবে। 



    <section>
    <nav>
    <a href="#" class="logo">Samrat Raihan</a>
        <!-- Menu Start -->
        <ul>
            <li><a href="#" class="active">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">Team</a></li>
        </ul>
       <!-- Toggle Manu -->
        <div class="toggle"></div>
    </nav>
    </section>

এই HTML এর সিএসএস

body{
    background-color: #f6f5f5;
    margin: 0px;
    padding: 0px;
}
ul{
    list-style-type: none;
}
ul li a{
    text-decoration: none;
    margin: 30px;
    color: white;
    font-family:myriad pro regular;
    font-size: 15px;
    font-weight: 700;
}
section{
    width: 100%;
    height: 500px;
    position: relative;
}
nav{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px;
    background-color:rgb(6, 50, 84);
    box-shadow: rgb(0 0 0 / 20%) 2px 2px 12px;
    padding:0px 5%;
    width: 90%;
    position:fixed;
    z-index: 3;
}
nav ul{
    display: flex;
}
.logo{
    font-family:RoadTest;
    color:#ffffff;
    font-size: 22px;
    text-decoration: none;
}
.active{
    background-color: aliceblue;
    padding: 23px 35px;
    color: #2d2a2a;

}
.toggle{
    display: none;
}

2. নিচের ছবির মতো ব্যানার করতে এখানে একটা ট্রান্সপারেন্ট ছবি ব্যবহার করা হয়েছে(সকল ছবির লিংক নিচে দেওয়া থাকবে।)


HTML 

<div class="text-container">
        <p>Hello,</p>
        <p>I'm Samrat Raihan</p>
        <p>Freelancing with Web Designer <br>& Devolper</p>
        <button class="hire-btn">Hire me</button>
        <button class="down-cv">Download CV</button>
    </div>
    <div class="model"><img src="images/model.png" alt=""></div>

CSS

.text-container p:nth-child(1){
	font-family: calibri;
	font-weight:bold;
	color:#6d6d6d;
	font-size:22px;
}
.text-container p:nth-child(2){
	font-family:calibri;
	font-weight:bold;
	letter-spacing:1px;
	color:#1a1a1a;
	font-size:60px;
	
}
.text-container p:nth-child(3){
	font-family: myriad pro regular;
	color: #403e3e;
	font-size:30px;
	line-height:30px;
}
.model{
    height: 722px;
    position: absolute;
    transform: translateX(-75%);
    bottom: 40px;
    left: 86%;
}
.text-container p{
	margin:45px 0px 25px;
	line-height:0px;
}
.text-container{
    position: absolute;
    left: 17%;
    top:49%;
    transform: translate(-8%,-38%);
}
.hire-btn{
    border: 2px solid #063254;
    color: #063254;
    background-color: transparent;
	
}
.down-cv{
    background-color: #063254;
    color: #fff;
    border: none;
}
.text-container button{
    width: 161px;
    height: 63px;
    border-radius: 8px;
    font-family: calibri;
    font-weight: bold;
    font-size: 18px;
    outline: none;
    margin: 0px 10px;
    cursor: pointer;
}
button:active{
	transform:scale(1.1);
}

3. নিচের ছবির মতো করতে নিচের HTML আর CSS খেয়াল করুন।


HTML

<div class="about-container">
    <img src="images/about-img.png"/>
        <div class="about-text">
        <p>About Me</p>
        <p>Devolper & Designer</p>
        <p>Hello,My name is Samrat Raihan. Lorem ipsum dolor sit amet consectetur adipiscing elit suscipit, platea laoreet rhoncus fames porttitor gravida mattis. Ullamcorper pulvinar convallis proin auctor erat nibh tempus sociosqu, egestas luctus molestie aenean cursus nisl dis, quisque tellus ridiculus montes fames habitant ornare. Ultricies dis tristique venenatis id porta non nulla sagittis enim.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipiscing elit suscipit, platea laoreet rhoncus fames porttitor gravida mattis.</p>
        <button onclick="window.location.href='mailto:mail@wikijana.com'">Send e-Mail</button>
        <button onclick="window.location.href='Google Drive Link'">Download CV</button>
        </div>
    </div>

CSS

.about-container{
    width: 90%;
    height: 375px;
    background: #ffffff;
    border-radius: 7px;
    box-shadow: 2px 2px 12px rgb(0 0 0 / 23%);
    display: flex;
    margin: 181px auto 20px auto;
    position: relative;
    justify-content: space-evenly;
    align-items: center;
}
.about-container img{
	height:250px;
}
.about-text{
	width:500px;
} 
.about-text p:nth-child(1){
	color:#403e3e;
	font-family: myriad pro;
	font-weight:bold;
	font-size:23px;
	line-height:0px;
}
.about-text p:nth-child(2){
	color:#3e3d3d;
	font-size:13px;
	font-family: myriad pro;
	font-weight:bold;
	line-height:5px;
}
.about-text p:nth-child(3),.about-text p:nth-child(4){
	color:#7e7d7d;
	font-family:calibri;
	font-size:16px;
}
.about-text button{
    width: 120px;
    height: 40px;
    color: #ffffff;
    outline: none;
    border: none;
    font-family: calibri;
    background-color: #063254;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
}
button:active{
	transform:scale(1.1);
}

4. নিচের ছবির মতো নিচের কোড খেয়াল করুন।


HTML


<div class="services ">
    <!--text-->
    <div class="services-text ">
<p>Services</p>
<p>Qualites Requaid</p>
<p>if you want make a software for your bussniess conatact me.I make as soon as possibale.You really like my work, if you don&#8217;t i change this until you like if you want make a software for your bussniess conatact me.I make as soon</p>
        </div>
    <div class="box-container">
    <!--1------------->
        <div class="box-1">
        <span>1</span>
        <p class="heading">Web Design</p>
        <p class="details">if you want make a software for your bussniess conatact me.I make as soon as possibale.You really like my work, if you don&#8217;t i change this until you like if you want.</p>
        <button>Read More</button>
        </div>
   <!--2------------->
        <div class="box-2">
        <span>2</span>
        <p class="heading">Web Devoloment</p>
        <p class="details">if you want make a software for your bussniess conatact me.I make as soon as possibale.You really like my work, if you don&#8217;t i change this until you like if you want.</p>
        <button>Read More</button>
        </div>
    <!--3------------->
        <div class="box-3">
        <span>3</span>
        <p class="heading">Security SEO</p>
        <p class="details">if you want make a software for your bussniess conatact me.I make as soon as possibale.You really like my work, if you don&#8217;t i change this until you like if you want.</p>
        <button>Read More</button>
        </div>
    </div>
</div>

CSS 

.services{
	height:600px;
	background-color:#ffffff;
	padding: 2% 10% 0px 10%;
}
.services-text p:nth-child(1){
	font-family: calibri;
	font-weight:bold;
	color:#1d1c1c;
	font-size:30px;
	line-height:0px;
}
.services-text p:nth-child(2){
	font-family:calibri;
	font-weight: bold;
	color:#3e3d3d;
	font-size: 15px;
	line-height: 5px;
}
.services-text p:nth-child(3){font-family:calibri;
color:#7e7d7d;
font-size: ;}
.services-text{
	width: 500px;
	margin:50px 0px;
}
.box-container{
	display:flex;
	justify-content:space-between;
}
.box-1,.box-2,.box-3{
	width: 300px;
	height:320px;
	background-repeat: no-repeat;
	background-size: cover;
	box-shadow:2px 2px 18px rgba(0,0,0,0.3);
	align-items: center;
	justify-content: center;
	display: flex;
	flex-direction: column;
	margin: 0px 4px;
	
	
}
 
.box-1{
	background-image:url("images/services-1.png");
}
.box-2{
	background-image:url("images/services-2.png");
}
.box-3{
	background-image: url("images/servies-3.png");
}
.box-1 span,
.box-2 span,
.box-3 span{
	width:40px;
	height:40px;
	border-radius:50%;
	background-color:#ffffff;
	display: flex;
	justify-content: center;
	align-items:center;
	font-family: calibri;
	font-weight: bold;
}
.box-1 p:nth-child(2),
.box-2 p:nth-child(2),
.box-3 p:nth-child(2){
	color:#FFFFFF;
	font-family: calibri;
	font-size: 23px;
	line-height:0px;
}
.box-1 p:nth-child(3),
.box-2 p:nth-child(3),
.box-3 p:nth-child(3){
	font-family: calibri;
	color:#8F8F8F;
	text-align:center;
	width: 230px;
	margin:0px 0px 20px 0px;
}
.box-1 button,
.box-2 button,
.box-3 button{
	width:100px;
	height:30px;
	background-color:#FFFFFF;
	border:none;
	outline: none;
	border-radius:5px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	-ms-border-radius:5px;
	-o-border-radius:5px;
}

5.নিচের ছবির মতো  কোড লক্ষ করুন

HTML 

<!--contact start-->
<div class="contact-me">
    <p>If You Have Any Project In Your Mind ?</p>
    <button>Contact me</button>
</div>
<!-- Contact end -->

<!-- Footer Start -->
<footer>
 <h2>Powered by WIkiJana.Com</h2>
    <p>I makeas soon as possibale.You really like my work,if you don&#8217;t i change this until you like I give you seticfaction result</p></footer>
    <!-- contact end -->
    <!-- copyright start -->
    <p class="copyright">Copyright by Samrat Raihan</p>
    <!-- Copyright end -->

   <!--social bar start-->
   <div class="social">
   <a href="#"><i class="fab fa-facebook-f"></i></a>
   <a href="#"><i class="fab fa-twitter"></i></a>
   <a href="#"><i class="fab fa-instagram"></i></a>
   <a href="#"><i class="fab fa-youtube"></i></a>
   </div>
    <!--social bar End-->

CSS

.contact-me{
	width: 100%;
	height:280px;
	background-size:cover;
	background-repeat:no-repeat;
	background-image: url("images/contact.png");
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin: 46px 0px 20px 0px;
}
.contact-me p{
	color:#FFFFFF;
	font-size: 30px;
	font-family: calibri;
	font-weight:bold;
	border-bottom:2px solid #ffffff;
}
.contact-me button{
	width:200px;
	height:40px;
	background-color: #FFFFFF;
	border:none;
	outline:none;
	font-size:14px;
	font-weight:bold;
}
/* contact end */
/* footer start */
.copyright{
	background-color: #073353;
	color: white;
	text-align: center;
	padding: 10px;
}
footer p{
	font-family: calibri;
	text-align: center;
}
footer h2{
	text-align: center;
}

/* social start */
.social-icons a{
	width:40px;
	height:40px;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color:#e6e3e3;
	margin:20px 10px;
	border-radius:50%;
}
.social-icons{
	display: flex;
	
}
.social-icons i,.social i{
	color:#000000;
}
.social-icons a:hover{
	background-color:#000000;
	box-shadow:2px 2px 12px rgba(0,0,0,0.2);
	transition:all ease 0.5s;
}
.social-icons a:hover i,
.social a:hover i{
	color:#FFFFFF;
	transition:all ease 0.5s;
}
.social{
	position: fixed;
	top:50%;
	right:0px;
	transform:translateY(-50%);
}
.social a{
	display: flex;
	justify-content: center;
	align-items: center;
	width:50px;
	height:50px;
	margin:0px;
	padding: 0px;
	line-height:0px;
	background-color:#FFFFFF;
	border:1px solid #CBCBCB;
	box-shadow:2px 2px 12px rgba(0,0,0,0.2);
	text-decoration: none;
}
.social a:hover{
	background-color:#063254;
	transition:all ease 0.5s;
}
.social i{
	font-size:20px;
	color:#063254;
}
/* social end */

Jquery Code

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	<script type="text/javascript">
	$(document).ready(function(){
		$('.toggle').click(function(){
			$('.toggle').toggleClass('active')
			$('nav').toggleClass('active')
		})
	})
	</script>

Responsive CSS Code


@media(max-width:1000px){
	.model{
		height: 460px;
		left: 90%;
		transform: translateX(-90%);
	}
	.text-container{
		top:46%;
	}
	.text-container button{
		margin: 5px;
	}
	.about-container{
		width:90%;
		border-radius: 10px;
	}
	.about-container img{
		height: 200px;
	}
	.about-text{
		width: 400px;
	}
	.about-text p:nth-child(1){
		font-size: 20px;
	}
	.about-text p:nth-child(2){
		font-size: 10px;
	}
	
	.about-text p:nth-child(3),
	.about-text p:nth-child(4){
		font-size: 14px;
	}
	.services{
		padding: 2% 5% 0px 5%;
	}
	.box-container{
		justify-content: center;
		flex-wrap: wrap;
	}
	.services{
		height: auto;
	}
	.box-1,.box-2,.box-3{
		flex-grow: 1;
		margin: 10px;
	}
	.contact-me{
		height: 200px;
	}
	.contact-me p{
		font-size: 26px;
	}
	.contact-me button{
		font-size: 14px;
		height:35px;
		width: 160px;
	}
}
@media(max-width:750px){
	section{
		background-image:none;
		background-color:#f7f7f7;
	}
	.model{
		display: none;
	}
	.toggle{
		display: block;
	}
	.text-container p:nth-child(2){
		line-height: 40px;
		margin: 0px;
		padding: 0px;
		
	}
	.text-container{
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		width: 80%;
	}
	nav ul{
		margin: 0px;
		padding: 0px;
		background-color: #ebeef4;
		flex-direction: column;
		position: fixed;
		left: 0;
		top: 0;
		width:100%;
		height: 100vh;
		box-sizing: border-box;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 1;
		display: none;
		
	}
	nav ul li{
		padding: 10px;
	}
	nav ul li a{
		font-family: calibri;
		font-size: 1.4em;
		text-transform: uppercase;
		color:#5c5c5c;
	}
	nav ul li a:hover{
		color:#121212;
	}
	.toggle:before{
		content: '\f0c9';
		font-family: fontAwesome;
		line-height: 30px;
		z-index: 1;
		color: #f7f7f7;
	}
	.toggle.active:before{
		content: '\f00d';
		position: fixed;
		right: 25px;
		line-height: 0px;
		
	}
	nav.active ul{
		display: flex !important;
	}
	.about-container{
		top: 0px;
		flex-direction: column;
		width:90%;
		height: auto;
		padding: 30px 0px;
		align-items: center;
	}
	.about-text{
		width:90%;
		text-align: center;
	}
	.services-text{
		width: 100%;
	}
	.contact-me{
		height: 180px;
	}
	.contact-me p{
		font-size: 18px;
	}
	.contact-me button{
		width: 150px;
		height: 33px;
	}
	footer p:nth-child(2){
		width: 90%;
	}
	
}

 নিচের ছবি গুলো ডাউনলোড করে নিন।

Photo 1: model.png Download

Photo 2: about-img.png Download

Photo 3: services-1.png Download 

Photo 4: services-2.png Download

Photo 5: services-3.png Download


এই আর্টিকেল টি পুরোটা পড়ার জন্য আপনাকে অনেক ধন্যবাদ, এই আর্টিকেল যদি বুঝতে অসুবিধা হয় অথবা কোনো প্রশ্ন থাকে তবে কমেন্ট করুন, আশা করি আপনি উত্তর পাবেন।আর নতুুন কিছু জানার থাকলে আমাদের জানান আমরা জানানোর চেস্টা করবো। এই আর্টিকেলটি WikiJana.Com সাইটের সম্পদ তাই যদি কেউ কপি করেন তবে আপনারা অবশ্যই ক্রেডিট দিবেন নয়ত আপনার সাইট কপিরাইটের অধিনে চলে যেতে পারে।


Go to Link

About the Author

I am a web designer and developer. I regularly work for different companies. I try to write a little on this blog when I have time. If you can learn something from this blog, then I will be successful.
I have a blog for learning web design, the nam…
#Code #Web Design

একটি মন্তব্য পোস্ট করুন

কোনো প্রশ্ন থাকলে অনুগ্রহ করে বিস্তারিত ভাবে বলুন, আশা করি আমরা আপনাকে হেল্প করতে পারবো।তবে অনুগ্রহ করে স্পাম করবেন না।
একটি মন্তব্য পোস্ট করুন

All information presented on this website is collected from internet. We may make unintentional mistakes while writing the post. We sincerely apologize for any unpleasant mistakes and WikiJana.Com is not responsible for any incorrect information. If you see any incorrect information please let us know immediately. We will try to fix it as soon as possible. Click here to report.

Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.