নিজে নিজেই শিখি Html , পর্ব - ০৪ ।। Learning Html Part 04

লিখেছেনঃ
প্রকাশিতঃ

নিজে নিজেই শিখি Html , পর্ব - ০৪ ।। Learning Html Part 04


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

...Lets Start...

বন্ধুরা গত পর্বে আমরা একটি ওয়েব সাইট এর জন্য Homepage Design করেছিলাম।
কিন্তু আজ আমরা একটি Html DownLoad Page Design করব। আশা করি সকলেই সাথেই থাকবেন।

নিজে নিজেই শিখি Html , পর্ব - ০৪ ।। Learning Html Part 04

নিজে নিজেই শিখি Html , পর্ব - ০৪ ।। Learning Html Part 04

সর্ব প্রথমে আমাদের জানতে হবে একটি DownLoad Site এ কি কি থাকে।
চিন্তার কোন কারন নেই , আমিই বলে দিচ্ছি সাধারণত কি কি থাকে। যথাঃ-

১। DownLoadable File
২। Related File And
৩। Polpular file

আমি আপনাদের সুবিধার্থে নিচে একটি DownLoad Page Design করেছি। Html Code গুলো আপনারা অবশ্যই দেখে নিবেন।

#Html Code:-

<html>

<head>

<title>
Homepage Design - SMsudipBD.Com
</title>

<style type="text/css">
body {
    margin: 0;
    padding: 0;
    background: #ddd;
}
#header {
    background: #000000;
    color: #ffffff;
    font-size: 20px;
    padding: 10px;
    text-align: center;
}
.Header {
background:#000000;
color:#ffffff;
font-size:20px;
padding:10px;
}
#content {
    display: flex;
    margin: 10px 10%;
}
.article {
    width: 60%;
    background: #ffffff;
    padding: 5px;
    color: #ffffff;
    margin: 0px 2px;
}
.sidebar {
    width: 40%;
    background: #ffffff;
    padding: 5px;
    color: #ffffff;
    margin: 0px 2px;
}
.copyright {
    background: #000000;
    color: #ffffff;
    font-size: 20px;
    padding: 50px;
    text-align: center;
}

.files {
    background: #000000;
    padding: 5px;
    text-align: center;
}
.filename {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #ddd;
    padding: 5px;
}
.thumb img {
    width: 30px;
    height: 30px;
    border: 1px solid #ddd;
}
.name {
    background: none;
    margin-left: 5px;
    color: #000000;
    font-size: 15px;
}
.thumbnail img {
    width: calc(100% - 5px);
    height: 200px;
    border: 1px solid #ddd;
    padding: 5px;
}
.downloadbtn {
    background: #000;
    color: #ffffff;
    padding: 8px;
    margin: auto;
    text-align: center;
    width: 120px;
    border-radius: 50px;
}
</style>

</head>

<body>

<header>
<div id="header">SMsudipBD.Com</div>
</header>

<content>
<div id="content">
<div class="article">
<div class="files">DownLoading File Name</div>
<div class="thumbnail"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgc47S6rh0wg_HOXe3E4v6h-jXCzhGPhEgkvUoAw6D_fJ3by7zCFE8ZxWz6cAb1uCy5QqF2ANkr6XmECOa0eRVDxVN_f838syiqkQv3ORkpN9WN6D5__qosM9u_E8OfUL-Kc-KxpH7uPXjz/s220/FFF.png"></img></div>
<br/>
<div class="downloadbtn">DownLoad</div>
<br/><br/>
<div class="files">Related Files</div>
<div class="filename">
<div class="thumb"><img src="https://www.smsudipbd.com/favicon.ico"/></div>
<div class="name">This Is File Name</div>
</div>
<div class="filename">
<div class="thumb"><img src="https://www.smsudipbd.com/favicon.ico"/></div>
<div class="name">This Is File Name</div>
</div>
<div class="filename">
<div class="thumb"><img src="https://www.smsudipbd.com/favicon.ico"/></div>
<div class="name">This Is File Name</div>
</div>
<div class="filename">
<div class="thumb"><img src="https://www.smsudipbd.com/favicon.ico"/></div>
<div class="name">This Is File Name</div>
</div>
<div class="filename">
<div class="thumb"><img src="https://www.smsudipbd.com/favicon.ico"/></div>
<div class="name">This Is File Name</div>
</div>
</div>
<div class="sidebar">
<div class="files">Popilar Songs</div>
<div class="filename">
<div class="thumb"><img src="https://www.smsudipbd.com/favicon.ico"/></div>
<div class="name">This Is File Name</div>
</div>
<div class="filename">
<div class="thumb"><img src="https://www.smsudipbd.com/favicon.ico"/></div>
<div class="name">This Is File Name</div>
</div>
<div class="filename">
<div class="thumb"><img src="https://www.smsudipbd.com/favicon.ico"/></div>
<div class="name">This Is File Name</div>
</div>
<div class="filename">
<div class="thumb"><img src="https://www.smsudipbd.com/favicon.ico"/></div>
<div class="name">This Is File Name</div>
</div>
<div class="filename">
<div class="thumb"><img src="https://www.smsudipbd.com/favicon.ico"/></div>
<div class="name">This Is File Name</div>
</div>
</div>
</div>
</content>

<footer>
<div class="copyright">Copyright @ 2022</div>
</footer>

</body>

</html>

চলুন উক্ত DownLoad Page এর ডেমো দেখে নেই।

#Demo:-

Download Page Design Html

Download Page Design Html


প্রিয় বন্ধুরা আজকের DownLoad Page টি কেমন হয়েছে কমেন্ট করে জানাতে কিন্তু ভুলবেন না।
তো আজকের মত এখানেই বিদায় নিচ্ছি। পর্ব ০৫ খুব শিগ্রই দিয়ে দিব , সেই পর্যন্ত সাথেই থাকুন। সকলেই ভালো ও সুস্থ থাকুন।

ক্রেডিট বাইঃ- SMsudipBD.Com
Tag:- নিজে নিজেই শিখি Html , পর্ব - ০৪ ।। Learning Html Part 04,Learning css,css tricks and tips,html programming,html download page design,hml homepage design,html landing page design,html form design,html login signup page design,input এর ব্যবহার।
পোস্ট রেটিং করুন
ট্যাগঃ
About Author


টিউটোরিয়ালটি কেমন লেগেছে মন্তব্য করুন!