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

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

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



প্রিয় বন্ধুরা , আশা করি আজকেও আপনারা সকলেই অনেক অনেক ভালো আছেন। আর সেই সাথে আপনাদের মতই আমিও অনেক অনেক ভালো আছি।

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

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


আজকে আবারও আমি আপনাদের জন্য একটি Error Page 404 Design করেছি। আশা করি আজকের টিউন টিও আপনাদের অনেক অনেক উপকারে আসবে।
তো বন্ধুরা আর একদমি বাড়তি কথা নয়। চলুন আমাদের মূল টিউনে ফীরে আসা যাক। কি বলেন ?

...Lets Start...

প্রথম ধাপঃ-
তো বন্ধুরা সর্ব প্রথমে নিচের এইচটিএমএল কোড টি আপনার Custom Error 404 Page এ বসিয়ে দিন।

<html>
<head>
<title>SMsudipBD.COM - Error 404</title>
</head>

<body>
<div id="notfound">
 <div class="notfound">
 <div class="notfound-404">
 <div></div>
 <h1>404</h1>
 </div>
 <h2>Page not found</h2>
 <p>The page you are looking for might have been removed had its name changed or is temporarily unavailable.</p>
 <a href="/site-0.html">home page</a>
 </div>
 </div>

</body>
</html>

দ্বিতীয় ধাপঃ-
নিচের সি এস এস টি আপনার ওয়েব সাইট এর Head এর মধ্যে যুক্ত করে নিন।

 * {
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
 }
 
 body {
   padding: 0;
   margin: 0;
 }
 
 #notfound {
   position: relative;
   height: 100vh;
 }
 
 #notfound .notfound {
   position: absolute;
   left: 50%;
   top: 50%;
   -webkit-transform: translate(-50%, -50%);
       -ms-transform: translate(-50%, -50%);
           transform: translate(-50%, -50%);
 }
 
 .notfound {
   max-width: 460px;
   width: 100%;
   text-align: center;
   line-height: 1.4;
 }
 
 .notfound .notfound-404 {
   position: relative;
   width: 180px;
   height: 180px;
   margin: 0px auto 50px;
 }
 
 .notfound .notfound-404>div:first-child {
   position: absolute;
   left: 0;
   right: 0;
   top: 0;
   bottom: 0;
   background: #ff0000;
   -webkit-transform: rotate(45deg);
       -ms-transform: rotate(45deg);
           transform: rotate(45deg);
   border: 5px dashed #000;
   border-radius: 5px;
 }
 
 .notfound .notfound-404>div:first-child:before {
   content: &apos;&apos;;
   position: absolute;
   left: -5px;
   right: -5px;
   bottom: -5px;
   top: -5px;
   -webkit-box-shadow: 0px 0px 0px 5px rgba(0, 0, 0, 0.1) inset;
           box-shadow: 0px 0px 0px 5px rgba(0, 0, 0, 0.1) inset;
   border-radius: 5px;
 }
 
 .notfound .notfound-404 h1 {
   font-family: &apos;Cabin&apos;, sans-serif;
   color: #fff;
   font-weight: 700;
   margin: 0;
   font-size: 90px;
   position: absolute;
   top: 50%;
   -webkit-transform: translate(-50%, -50%);
       -ms-transform: translate(-50%, -50%);
           transform: translate(-50%, -50%);
   left: 50%;
   text-align: center;
   height: 40px;
   line-height: 40px;
 }
 
 .notfound h2 {
   font-family: &apos;Cabin&apos;, sans-serif;
   font-size: 33px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 7px;
 }
 
 .notfound p {
   font-family: &apos;Cabin&apos;, sans-serif;
   font-size: 16px;
   color: #000;
   font-weight: 400;
 }
 
 .notfound a {
   font-family: &apos;Cabin&apos;, sans-serif;
   display: inline-block;
   padding: 10px 25px;
   background-color: #8f8f8f;
   border: none;
   border-radius: 40px;
   color: #fff;
   font-size: 14px;
   font-weight: 700;
   text-transform: uppercase;
   text-decoration: none;
   -webkit-transition: 0.2s all;
   transition: 0.2s all;
 }
 
 .notfound a:hover {
   background-color: #2c2c2c;
 }

তৃতীয় ধাপঃ-
এবার আপনার কাজ শেষ। তবুও আপনাদের সুবিধার্থে সম্পূর্ণ কাস্টম সিএসএস এইচটিএমএল কোড দিয়ে দিচ্ছি।

<html>
<head>
<title>SMsudipBD.COM - Error 404</title>
</head>
<body>
<div id="notfound">
 <div class="notfound">
 <div class="notfound-404">
 <div></div>
 <h1>404</h1>
 </div>
 <h2>Page not found</h2>
 <p>The page you are looking for might have been removed had its name changed or is temporarily unavailable.</p>
 <a href="/site-0.html">home page</a>
 </div>
 </div>
 
 <style type="text/css">
 * {
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
 }
 
 body {
   padding: 0;
   margin: 0;
 }
 
 #notfound {
   position: relative;
   height: 100vh;
 }
 
 #notfound .notfound {
   position: absolute;
   left: 50%;
   top: 50%;
   -webkit-transform: translate(-50%, -50%);
       -ms-transform: translate(-50%, -50%);
           transform: translate(-50%, -50%);
 }
 
 .notfound {
   max-width: 460px;
   width: 100%;
   text-align: center;
   line-height: 1.4;
 }
 
 .notfound .notfound-404 {
   position: relative;
   width: 180px;
   height: 180px;
   margin: 0px auto 50px;
 }
 
 .notfound .notfound-404>div:first-child {
   position: absolute;
   left: 0;
   right: 0;
   top: 0;
   bottom: 0;
   background: #ff0000;
   -webkit-transform: rotate(45deg);
       -ms-transform: rotate(45deg);
           transform: rotate(45deg);
   border: 5px dashed #000;
   border-radius: 5px;
 }
 
 .notfound .notfound-404>div:first-child:before {
   content: &apos;&apos;;
   position: absolute;
   left: -5px;
   right: -5px;
   bottom: -5px;
   top: -5px;
   -webkit-box-shadow: 0px 0px 0px 5px rgba(0, 0, 0, 0.1) inset;
           box-shadow: 0px 0px 0px 5px rgba(0, 0, 0, 0.1) inset;
   border-radius: 5px;
 }
 
 .notfound .notfound-404 h1 {
   font-family: &apos;Cabin&apos;, sans-serif;
   color: #fff;
   font-weight: 700;
   margin: 0;
   font-size: 90px;
   position: absolute;
   top: 50%;
   -webkit-transform: translate(-50%, -50%);
       -ms-transform: translate(-50%, -50%);
           transform: translate(-50%, -50%);
   left: 50%;
   text-align: center;
   height: 40px;
   line-height: 40px;
 }
 
 .notfound h2 {
   font-family: &apos;Cabin&apos;, sans-serif;
   font-size: 33px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 7px;
 }
 
 .notfound p {
   font-family: &apos;Cabin&apos;, sans-serif;
   font-size: 16px;
   color: #000;
   font-weight: 400;
 }
 
 .notfound a {
   font-family: &apos;Cabin&apos;, sans-serif;
   display: inline-block;
   padding: 10px 25px;
   background-color: #8f8f8f;
   border: none;
   border-radius: 40px;
   color: #fff;
   font-size: 14px;
   font-weight: 700;
   text-transform: uppercase;
   text-decoration: none;
   -webkit-transition: 0.2s all;
   transition: 0.2s all;
 }
 
 .notfound a:hover {
   background-color: #2c2c2c;
 }
 </style>
</body>
</html>
বন্ধুরা আজকে টিউনের শেষ পর্যায়ে চলে এসেছি। আশা করি আজকের টিউন আপনাদের যুগ যুগ ধরে আপনাদের অনেক উপকারে আসবে। 

টিউন টি লিখতে গিয়ে ভূল ত্রুটি গুলো ক্ষমা সুন্দর দৃষ্টিতে দেখবেন। সকলেই ভালো ও সুস্থ থাকুন। এই প্রত্যাশায় আজকের টিউন এখানেই শেষ করতেছি।

ক্রেডিট বাইঃ- SMsudipBD.COM
ট্যাগঃ- নিজে নিজেই শিখি Html , পর্ব - ০৫ ।। Learning Html Part 05,Teach Html,Learning css,css tricks and tips,html programming,hml homepage design,html landing page design,html form design,html login signup page design,input এর ব্যবহার
পোস্ট রেটিং করুন
ট্যাগঃ ,
About Author
1 comment
Sort by