সিদ্দিকুর রহমান ওয়েবসাইট (এইচটিএম এল/সিএসএস)
Home  ›  আবুল-আসাদ  ›  সাইমুন-সিরিজ

সিদ্দিকুর রহমান ওয়েবসাইট (এইচটিএম এল/সিএসএস)

in published on May 31, 2021 leave a reply





ভার্সণঃ১

<!Doctype html>

<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<style>
* {
  box-sizing: border-box;
}

input[type=text], select, textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
}
label {
  padding: 12px 12px 12px 0;
  display: inline-block;
}
input[type=submit] {
  background-color: #04AA6D;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  float: right;
}

input[type=submit]:hover {
  background-color: #45a049;
}

.container {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}
.col-25 {
  float: left;
  width: 25%;
  margin-top: 6px;
}
.col-75 {
  float: left;
  width: 75%;
  margin-top: 6px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .col-25, .col-75, input[type=submit] {
    width: 100%;
    margin-top: 0;
  }
}

.button {
  display: inline-block;
  border-radius: 2px;
  background-color: #f4511e;
  border:color:red;
  color: #FFFFFF;
  text-align: center;
  font-size: 18px;
  padding: 20px;
  width: 350px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 10px;
  }
  .button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 1.5s;
  }
  .button span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
  }
 
  .button:hover span {
  padding-right: 25px;
  }
  .button:hover span:after {
  opacity: 1;
  right: 0;
  }
 
h1 {color: red;}

p { color: green"}

b { color: Cyan;}
ol {color:yellow;}

time { color:cyan;}
</style>
<h3> <div style="color:green">আসসালামু আলাইকুম </div></h3> <span style="color: rgb(28,82,104)">

সবাই কেমন আছেন | আশা করি </span> সবাই <mark> আল্লাহ রহমতে ভালো আছেন |</mark>

আপনাদের সবাইকে <abbr title="siddikur Rahman

Rayhan Website "> আমার ওয়েবসাইটে </abbr> স্বাগতম | <strong> আমি </strong> ২০২২ সালে এই কলেজ <font size="4" color="gray" face="cursive">
বিএফ শাহীন কলেজ, কুর্মিটোলায় </font>  ভর্তি হয়েছি |

<h3>আমার পছন্দের সাবজেক্টসমূহ </h3>

<ol type = "a">

<li> MATH </li>

<li>CHEMISTRY </li>

<li> ISLAM </li>

</ol>

</li>

<h2> আমার পছন্দের ব্যাক্তিসমূহ </h2>

<ul style="list-style-type:disk">

<li> হযরত মুহাম্মদ সাঃ </li>
<li>আমার বাবা</li>
<li>আমার মা </li>
</ul>

<b>আপনাদেরকে একটা হাদিস বলছি </b>
<q>রাসুল (সা.) বলেন, ‘তোমাদের কেউ ততক্ষণ
পর্যন্ত ঈমানদার হতে
  পারবে না, যতক্ষণ না তার
   কাছে আমি তার পিতামাতার চেয়ে,
    সন্তানাদির চেয়ে এবং সমস্
    ত মানুষের চেয়ে প্রিয় না হব।’ <mark>(বুখারি, হাদিস : ১৫)</mark></q><br><br><hr>

<strong>চলুন কিছু ❓প্রশ্ন করি উত্তর দিন </strong> <br>

<input type="checkbox" name="vehicle" value="Read" checked> আমি কুরয়ান পড়ি 💗<br>

<input type="checkbox" name="vehicle" value="Learn" checked>আমি অর্থসহ এবং ব্যাখ্যা সহকারে কুরয়ান পড়ার চেষ্টা করি 💥 <br>

<input type="checkbox" name="vehicle" value="hadis " >আমার বাসায় ইবনে কাশির আছে ♥

</form><br><br>

<span style="color:orange"><big>আপনি চাইলে নিচের ফর্ম টি ফিলয়াপ করতে পারেন </big></span>
<h2>ফর্ম ফিলয়াপ করুন</h2>
<p>নিচের ফর্ম টি ফিলয়াপ করার পর সাবমিট বাটনে ক্লিক করুন </p>
<div class="container">
  <form action="/action_page.php">
  <div class="row">
    <div class="col-25">
      <label for="fname">First Name</label>
    </div>
    <div class="col-75">
      <input type="text" id="fname" name="firstname" placeholder="Your name..">
    </div>
  </div>
  <div class="row">
    <div class="col-25">
      <label for="lname">Last Name</label>
    </div>
    <div class="col-75">
      <input type="text" id="lname" name="lastname" placeholder="Your last name..">
    </div>
  </div>
  <div class="row">
    <div class="col-25">
      <label for="country">Country</label>
    </div>
    <div class="col-75">
      <select id="country" name="country">
        <option value="Bangladesh 🇧🇩">Bangladesh 🇧🇩</option>
        <option value="Afghanistan ">Islamic Emirates Of Afghanistan 🇦🇫</option>
        <option value="Saudi Arab">Saudi Arab 🇸🇦</option>
      </select>
    </div>
  </div>
  <div class="row">
    <div class="col-25">
      <label for="subject">Subject</label>
    </div>
    <div class="col-75">
      <textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea>
    </div>
  </div>
  <br>
  <div class="row">

    <input type="submit" value="Submit">
  </div>
  </form>
</div>

<button class="button" style="vertical-align:middle"><span><a href="fb.com/str.bhola" ><font size="7" color="black" face="cursive"><i class="fa fa-facebook" style="font-size:40px;color:blue;"></i>My Facebook Account</span></button></font>

<h1 style="color:black">Education Qualification </h1>
<div style="color:purpel">
<table border="3">
<tr style="color:red">

<td><b>Exam Name</b></td>
<td><b>Board<b></td>
<td><b>GPA</b></td>

</tr>
<tr>
<td>PSC</td>
<td>Barishal</td>
<td>5.00</td>
</tr>
<tr>
<td>JSC</td>
<td>Dhaka</td>
<td>4.86</td>
</tr>
<tr>
<td>SSC</td>
<td>Dahaka</td>
<td>5.00</td>
</tr>
</table></div>

<marquee width="100%" direction="left" height="60%"><h1>এই ওয়েবসাইট টি ডেভেলোপ করেছেন <a href="fb.com/siddikurbhola" target="_blank"> © STR Rayhan </a></h1></marquee>

<br><span style="color:gray" face="cursive">এই ওয়েবসাইট টি রাত <time> ৮ টা ৩৪ মিনিট এ শেষ করেছিলাম | <time datetime="2022-09-01 20:36"></time>
</body>
</html>

ভার্সণঃ২

<!Doctype html>

<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<style>

* {box-sizing: border-box;}

body { 
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.header {
  overflow: hidden;
  background-color: rgb(82,51,121);
  padding: 20px 10px;
}

.header a {
  float: left;
  color: black;
  text-align: center;
  padding: 12px;
  text-decoration: none;
  font-size: 18px; 
  line-height: 25px;
  border-radius: 4px;
}

.header a.logo {
  font-size: 25px;
  font-weight: bold;
}

.header a:hover {
  background-color: #ddd;
  color: black;
}

.header a.active {
  background-color: dodgerblue;
  color: white;
}

.header-right {
  float: right;
}

@media screen and (max-width: 500px) {
  .header a {
    float: none;
    display: block;
    text-align: left;
  }
  
  .header-right {
    float: none;
  }
}

* {
  box-sizing: border-box;
}

input[type=text], select, textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
}
label {
  padding: 12px 12px 12px 0;
  display: inline-block;
}
input[type=submit] {
  background-color: #04AA6D;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  float: right;
}

input[type=submit]:hover {
  background-color: #45a049;
}

.container {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}
.col-25 {
  float: left;
  width: 25%;
  margin-top: 6px;
}
.col-75 {
  float: left;
  width: 75%;
  margin-top: 6px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .col-25, .col-75, input[type=submit] {
    width: 100%;
    margin-top: 0;
  }
}

.button {
  display: inline-block;
  border-radius: 2px;
  background-color: #f4511e;
  border:color:red;
  color: #FFFFFF;
  text-align: center;
  font-size: 18px;
  padding: 20px;
  width: 350px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 10px;
  }
  .button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 1.5s;
  }
  .button span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
  }
  
  .button:hover span {
  padding-right: 25px;
  }
  .button:hover span:after {
  opacity: 1;
  right: 0;
  }
  
h1 {color: red;}

p { color: green"}

b { color: Cyan;}
ol {color:yellow;}

time { color:cyan;}
</style>
<body>
<div class="header">
  <a href="#default" class="logo">STRLogo</a>
  <div class="header-right">
    <a class="active" href="#home">Home</a>
    <a href="#contact">Contact</a>
    <a href="#about">About</a>
    <a hrewf="#termofuse">Term Of Use</a>
  </div>
</div>

<div style="padding-left:20px">
  <h1>السلام عليكم ورحمه الله </h1>
  <p>كشك امزت </p>
  <p>جزاك الله خير </p>
</div>

<h3> <div style="color:green">আসসালামু আলাইকুম </div></h3> <span style="color: rgb(28,82,104)">

সবাই কেমন আছেন | আশা করি </span> সবাই <mark> আল্লাহ রহমতে ভালো আছেন |</mark>

আপনাদের সবাইকে <abbr title="siddikur Rahman

Rayhan Website "> আমার ওয়েবসাইটে </abbr> স্বাগতম | <strong> আমি </strong> ২০২২ সালে এই কলেজ <font size="4" color="gray" face="cursive">
বিএফ শাহীন কলেজ, কুর্মিটোলায় </font>  ভর্তি হয়েছি | 

<h3>আমার পছন্দের সাবজেক্টসমূহ </h3>

<ol type = "a">

<li> MATH </li>

<li>CHEMISTRY </li>

<li> ISLAM </li>

</ol>

</li>

<h2> আমার পছন্দের ব্যাক্তিসমূহ </h2>

<ul style="list-style-type:disk">

<li> হযরত মুহাম্মদ সাঃ </li> 
<li>আমার বাবা</li>
<li>আমার মা </li>
</ul>

<b>আপনাদেরকে একটা হাদিস বলছি </b>
<q>রাসুল (সা.) বলেন, ‘তোমাদের কেউ ততক্ষণ
 পর্যন্ত ঈমানদার হতে
  পারবে না, যতক্ষণ না তার
   কাছে আমি তার পিতামাতার চেয়ে,
    সন্তানাদির চেয়ে এবং সমস্
    ত মানুষের চেয়ে প্রিয় না হব।’ <mark>(বুখারি, হাদিস : ১৫)</mark></q><br><br><hr>

<strong>চলুন কিছু ❓প্রশ্ন করি উত্তর দিন </strong> <br>

<input type="checkbox" name="vehicle" value="Read" checked> আমি কুরয়ান পড়ি 💗<br>

<input type="checkbox" name="vehicle" value="Learn" checked>আমি অর্থসহ এবং ব্যাখ্যা সহকারে কুরয়ান পড়ার চেষ্টা করি 💥 <br>

<input type="checkbox" name="vehicle" value="hadis " >আমার বাসায় ইবনে কাশির আছে ♥ 

</form><br><br>

<span style="color:orange"><big>আপনি চাইলে নিচের ফর্ম টি ফিলয়াপ করতে পারেন </big></span>
<h2>ফর্ম ফিলয়াপ করুন</h2>
<p>নিচের ফর্ম টি ফিলয়াপ করার পর সাবমিট বাটনে ক্লিক করুন </p>
<div class="container">
  <form action="/action_page.php">
  <div class="row">
    <div class="col-25">
      <label for="fname">First Name</label>
    </div>
    <div class="col-75">
      <input type="text" id="fname" name="firstname" placeholder="Your name..">
    </div>
  </div>
  <div class="row">
    <div class="col-25">
      <label for="lname">Last Name</label>
    </div>
    <div class="col-75">
      <input type="text" id="lname" name="lastname" placeholder="Your last name..">
    </div>
  </div>
  <div class="row">
    <div class="col-25">
      <label for="country">Country</label>
    </div>
    <div class="col-75">
      <select id="country" name="country">
        <option value="Bangladesh 🇧🇩">Bangladesh 🇧🇩</option>
        <option value="Afghanistan ">Islamic Emirates Of Afghanistan 🇦🇫</option>
        <option value="Saudi Arab">Saudi Arab 🇸🇦</option>
      </select>
    </div>
  </div>
  <div class="row">
    <div class="col-25">
      <label for="subject">Subject</label>
    </div>
    <div class="col-75">
      <textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea>
    </div>
  </div>
  <br>
  <div class="row">

    <input type="submit" value="Submit">
  </div>
  </form>
</div>

<button class="button" style="vertical-align:middle"><span><a href="fb.com/str.bhola" ><font size="7" color="black" face="cursive"><i class="fa fa-facebook" style="font-size:40px;color:blue;"></i>My Facebook Account</span></button></font>

<h1 style="color:black">Education Qualification </h1>
<div style="color:purpel">
<table border="3">
<tr style="color:red">

<td><b>Exam Name</b></td>
<td><b>Board<b></td>
<td><b>GPA</b></td>

</tr>
<tr>
<td>PSC</td>
<td>Barishal</td>
<td>5.00</td>
</tr>
<tr>
<td>JSC</td>
<td>Dhaka</td>
<td>4.86</td>
</tr>
<tr>
<td>SSC</td>
<td>Dahaka</td>
<td>5.00</td>
</tr>
</table></div>

<marquee width="100%" direction="left" height="60%"><h1>এই ওয়েবসাইট টি ডেভেলোপ করেছেন <a href="fb.com/siddikurbhola" target="_blank"> © STR Rayhan </a></h1></marquee>

<br><span style="color:gray" face="cursive">এই ওয়েবসাইট টি রাত <time> ৮ টা ৩৪ মিনিট এ শেষ করেছিলাম | <time datetime="2022-09-01 20:36"></time>
</body>
</html>
ভার্সণঃ২.১

<!Doctype html>

<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<style>

* {box-sizing: border-box;}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.header {
  overflow: hidden;
  background-color: rgb(82,51,121);
  padding: 20px 10px;
}

.header a {
  float: left;
  color: black;
  text-align: center;
  padding: 12px;
  text-decoration: none;
  font-size: 18px;
  line-height: 25px;
  border-radius: 4px;
}

.header a.logo {
  font-size: 25px;
  font-weight: bold;
}

.header a:hover {
  background-color: #ddd;
  color: black;
}

.header a.active {
  background-color: dodgerblue;
  color: white;
}

.header-right {
  float: right;
}

@media screen and (max-width: 500px) {
  .header a {
    float: none;
    display: block;
    text-align: left;
  }
 
  .header-right {
    float: none;
  }
}

* {
  box-sizing: border-box;
}

input[type=text], select, textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
}
label {
  padding: 12px 12px 12px 0;
  display: inline-block;
}
input[type=submit] {
  background-color: #04AA6D;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  float: right;
}

input[type=submit]:hover {
  background-color: #45a049;
}

.container {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}
.col-25 {
  float: left;
  width: 25%;
  margin-top: 6px;
}
.col-75 {
  float: left;
  width: 75%;
  margin-top: 6px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .col-25, .col-75, input[type=submit] {
    width: 100%;
    margin-top: 0;
  }
}

.button {
  display: inline-block;
  border-radius: 2px;
  background-color: #f4511e;
  border:color:red;
  color: #FFFFFF;
  text-align: center;
  font-size: 18px;
  padding: 20px;
  width: 350px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 10px;
  }
  .button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 1.5s;
  }
  .button span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
  }
 
  .button:hover span {
  padding-right: 25px;
  }
  .button:hover span:after {
  opacity: 1;
  right: 0;
  }
 
h1 {color: red;}

p { color: green"}

b { color: Cyan;}
ol {color:yellow;}

time { color:cyan;}
</style>
<body>
<div class="header">
  <a href="#default" class="logo">STRLogo</a>
  <div class="header-right">
    <a class="active" href="#home">Home</a>
    <a href="#contact">Contact</a>
    <a href="#about">About</a>
    <a hrewf="#termofuse">Term Of Use</a>
  </div>
</div>

<div style="padding-left:20px">
  <h1>السلام عليكم ورحمه الله </h1>
  <p>كشك امزت </p>
  <p>جزاك الله خير </p>
</div>

<h3> <div style="color:green">আসসালামু আলাইকুম </div></h3> <span style="color: rgb(28,82,104)">

সবাই কেমন আছেন | আশা করি </span> সবাই <mark> আল্লাহ রহমতে ভালো আছেন |</mark>

আপনাদের সবাইকে <abbr title="siddikur Rahman

Rayhan Website "> আমার ওয়েবসাইটে </abbr> স্বাগতম | <strong> আমি </strong> ২০২২ সালে এই কলেজ <font size="4" color="gray" face="cursive">
বিএফ শাহীন কলেজ, কুর্মিটোলায় </font>  ভর্তি হয়েছি |

<h3>আমার পছন্দের সাবজেক্টসমূহ </h3>

<ol type = "a">

<li> MATH </li>

<li>CHEMISTRY </li>

<li> ISLAM </li>

</ol>

</li>

<h2> আমার পছন্দের ব্যাক্তিসমূহ </h2>

<ul style="list-style-type:disk">

<li> হযরত মুহাম্মদ সাঃ </li>
<li>আমার বাবা</li>
<li>আমার মা </li>
</ul>

<b>আপনাদেরকে একটা হাদিস বলছি </b>
<q>রাসুল (সা.) বলেন, ‘তোমাদের কেউ ততক্ষণ
পর্যন্ত ঈমানদার হতে
  পারবে না, যতক্ষণ না তার
   কাছে আমি তার পিতামাতার চেয়ে,
    সন্তানাদির চেয়ে এবং সমস্
    ত মানুষের চেয়ে প্রিয় না হব।’ <mark>(বুখারি, হাদিস : ১৫)</mark></q><br><br><hr>

<strong>চলুন কিছু ❓প্রশ্ন করি উত্তর দিন </strong> <br>

<input type="checkbox" name="vehicle" value="Read" checked> আমি কুরয়ান পড়ি 💗<br>

<input type="checkbox" name="vehicle" value="Learn" checked>আমি অর্থসহ এবং ব্যাখ্যা সহকারে কুরয়ান পড়ার চেষ্টা করি 💥 <br>

<input type="checkbox" name="vehicle" value="hadis " >আমার বাসায় ইবনে কাশির আছে ♥

</form><br><br>

<span style="color:orange"><big>আপনি চাইলে নিচের ফর্ম টি ফিলয়াপ করতে পারেন </big></span>
<h2>ফর্ম ফিলয়াপ করুন</h2>
<p>নিচের ফর্ম টি ফিলয়াপ করার পর সাবমিট বাটনে ক্লিক করুন </p>
<div class="container">
  <form action="/action_page.php">
  <div class="row">
    <div class="col-25">
      <label for="fname">First Name</label>
    </div>
    <div class="col-75">
      <input type="text" id="fname" name="firstname" placeholder="Your name..">
    </div>
  </div>
  <div class="row">
    <div class="col-25">
      <label for="lname">Last Name</label>
    </div>
    <div class="col-75">
      <input type="text" id="lname" name="lastname" placeholder="Your last name..">
    </div>
  </div>
  <div class="row">
    <div class="col-25">
      <label for="country">Country</label>
    </div>
    <div class="col-75">
      <select id="country" name="country">
        <option value="Bangladesh 🇧🇩">Bangladesh 🇧🇩</option>
        <option value="Afghanistan ">Islamic Emirates Of Afghanistan 🇦🇫</option>
        <option value="Saudi Arab">Saudi Arab 🇸🇦</option>
      </select>
    </div>
  </div>
  <div class="row">
    <div class="col-25">
      <label for="subject">Subject</label>
    </div>
    <div class="col-75">
      <textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea>
    </div>
  </div>
  <br>
  <div class="row">

    <input type="submit" value="Submit">
  </div>
  </form>
</div>

<button class="button" style="vertical-align:middle"><span><a href="fb.com/str.bhola" ><font size="7" color="black" face="cursive"><i class="fa fa-facebook" style="font-size:40px;color:blue;"></i>My Facebook Account</span></button></font>

<h1 style="color:black">Education Qualification </h1>
<div style="color:purpel">
<table border="3">
<tr style="color:red">

<td><b>Exam Name</b></td>
<td><b>Board<b></td>
<td><b>GPA</b></td>

</tr>
<tr>
<td>PSC</td>
<td>Barishal</td>
<td>5.00</td>
</tr>
<tr>
<td>JSC</td>
<td>Dhaka</td>
<td>4.86</td>
</tr>
<tr>
<td>SSC</td>
<td>Dahaka</td>
<td>5.00</td>
</tr>
</table></div>

<marquee width="100%" direction="left" height="60%"><h1>এই ওয়েবসাইট টি ডেভেলোপ করেছেন <a href="fb.com/siddikurbhola" target="_blank"> © STR Rayhan </a></h1></marquee>

<br><span style="color:gray" face="cursive">এই ওয়েবসাইট টি রাত <time> ৮ টা ৩৪ মিনিট এ শেষ করেছিলাম | <time datetime="2022-09-01 20:36"></time>
</body>
</html>

ভার্সণঃ২.১

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
   <meta charset="UTF-8" />
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <link rel="stylesheet" href="style.css" />
   <title>Document</title>
   <style>
  
   /* UTILITIES */
   * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   }
   body {
   font-family: cursive;
   }
   a {
   text-decoration: none;
   }
   li {
   list-style: none;
   }
  
   /* NAVBAR STYLING STARTS */
   .navbar {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 20px;
   background-color: teal;
   color: #fff;
   }
   .nav-links a {
   color: #fff;
   }
   /* LOGO */
   .logo {
   font-size: 32px;
   }
   /* NAVBAR MENU */
   .menu {
   display: flex;
   gap: 1em;
   font-size: 18px;
   }
   .menu li:hover {
   background-color: #4c9e9e;
   border-radius: 5px;
   transition: 0.3s ease;
   }
   .menu li {
   padding: 5px 14px;
   }
   /* DROPDOWN MENU */
   .services {
   position: relative;
   }
   .dropdown {
   background-color: rgb(1, 139, 139);
   padding: 1em 0;
   position: absolute; /*WITH RESPECT TO PARENT*/
   display: none;
   border-radius: 8px;
   top: 35px;
   }
   .dropdown li + li {
   margin-top: 10px;
   }
   .dropdown li {
   padding: 0.5em 1em;
   width: 8em;
   text-align: center;
   }
   .dropdown li:hover {
   background-color: #4c9e9e;
   }
   .services:hover .dropdown {
   display: block;
   }
   </style>
</head>
<body>
   <nav class="navbar">
     <!-- LOGO -->
     <div class="logo">MUO</div>
     <!-- NAVIGATION MENU -->
     <ul class="nav-links">
       <!-- USING CHECKBOX HACK -->
       <input type="checkbox" id="checkbox_toggle" />
       <label for="checkbox_toggle" class="hamburger">&#9776;</label>
       <!-- NAVIGATION MENUS -->
       <div class="menu">
         <li><a href="/">Home</a></li>
         <li><a href="/">About</a></li>
         <li class="services">
           <a href="/">Services</a>
           <!-- DROPDOWN MENU -->
           <ul class="dropdown">
             <li><a href="/">Dropdown 1 </a></li>
             <li><a href="/">Dropdown 2</a></li>
             <li><a href="/">Dropdown 2</a></li>
             <li><a href="/">Dropdown 3</a></li>
             <li><a href="/">Dropdown 4</a></li>
           </ul>
         </li>
         <li><a href="/">Pricing</a></li>
         <li><a href="/">Contact</a></li>
       </div>
     </ul>
   </nav>
   <h3> <div style="color:green">আসসালামু আলাইকুম </div></h3> <span style="color: rgb(28,82,104)">
  
   সবাই কেমন আছেন | আশা করি </span> সবাই <mark> আল্লাহ রহমতে ভালো আছেন |</mark>
  
   আপনাদের সবাইকে <abbr title="siddikur Rahman
  
   Rayhan Website "> আমার ওয়েবসাইটে </abbr> স্বাগতম | <strong> আমি </strong> ২০২২ সালে এই কলেজ <font size="4" color="gray" face="cursive">
   বিএফ শাহীন কলেজ, কুর্মিটোলায় </font>  ভর্তি হয়েছি |
  
   <h3>আমার পছন্দের সাবজেক্টসমূহ </h3>
  
   <ol type = "a">
  
   <li> MATH </li>
  
   <li>CHEMISTRY </li>
  
   <li> ISLAM </li>
  
   </ol>
  
   </li>
  
   <h2> আমার পছন্দের ব্যাক্তিসমূহ </h2>
  
   <ul style="list-style-type:disk">
  
   <li> হযরত মুহাম্মদ সাঃ </li>
   <li>আমার বাবা</li>
   <li>আমার মা </li>
   </ul>
  
   <b>আপনাদেরকে একটা হাদিস বলছি </b>
   <q>রাসুল (সা.) বলেন, ‘তোমাদের কেউ ততক্ষণ
   পর্যন্ত ঈমানদার হতে
   পারবে না, যতক্ষণ না তার
   কাছে আমি তার পিতামাতার চেয়ে,
   সন্তানাদির চেয়ে এবং সমস্
   ত মানুষের চেয়ে প্রিয় না হব।’ <mark>(বুখারি, হাদিস : ১৫)</mark></q><br><br><hr>
  
   <strong>চলুন কিছু ❓প্রশ্ন করি উত্তর দিন </strong> <br>
  
   <input type="checkbox" name="vehicle" value="Read" checked> আমি কুরয়ান পড়ি 💗<br>
  
   <input type="checkbox" name="vehicle" value="Learn" checked>আমি অর্থসহ এবং ব্যাখ্যা সহকারে কুরয়ান পড়ার চেষ্টা করি 💥 <br>
  
   <input type="checkbox" name="vehicle" value="hadis " >আমার বাসায় ইবনে কাশির আছে ♥
  
   </form><br><br>
  
   <span style="color:orange"><big>আপনি চাইলে নিচের ফর্ম টি ফিলয়াপ করতে পারেন </big></span>
   <h2>ফর্ম ফিলয়াপ করুন</h2>
   <p>নিচের ফর্ম টি ফিলয়াপ করার পর সাবমিট বাটনে ক্লিক করুন </p>
   <div class="container">
   <form action="/action_page.php">
   <div class="row">
   <div class="col-25">
   <label for="fname">First Name</label>
   </div>
   <div class="col-75">
   <input type="text" id="fname" name="firstname" placeholder="Your name..">
   </div>
   </div>
   <div class="row">
   <div class="col-25">
   <label for="lname">Last Name</label>
   </div>
   <div class="col-75">
   <input type="text" id="lname" name="lastname" placeholder="Your last name..">
   </div>
   </div>
   <div class="row">
   <div class="col-25">
   <label for="country">Country</label>
   </div>
   <div class="col-75">
   <select id="country" name="country">
   <option value="Bangladesh 🇧🇩">Bangladesh 🇧🇩</option>
   <option value="Afghanistan ">Islamic Emirates Of Afghanistan 🇦🇫</option>
   <option value="Saudi Arab">Saudi Arab 🇸🇦</option>
   </select>
   </div>
   </div>
   <div class="row">
   <div class="col-25">
   <label for="subject">Subject</label>
   </div>
   <div class="col-75">
   <textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea>
   </div>
   </div>
   <br>
   <div class="row">
  
   <input type="submit" value="Submit">
   </div>
   </form>
   </div>
  
   <button class="button" style="vertical-align:middle"><span><a href="fb.com/str.bhola" ><font size="7" color="black" face="cursive"><i class="fa fa-facebook" style="font-size:40px;color:blue;"></i>My Facebook Account</span></button></font>
  
   <h1 style="color:black">Education Qualification </h1>
   <div style="color:purpel">
   <table border="3">
   <tr style="color:red">
  
   <td><b>Exam Name</b></td>
   <td><b>Board<b></td>
   <td><b>GPA</b></td>
  
   </tr>
   <tr>
   <td>PSC</td>
   <td>Barishal</td>
   <td>5.00</td>
   </tr>
   <tr>
   <td>JSC</td>
   <td>Dhaka</td>
   <td>4.86</td>
   </tr>
   <tr>
   <td>SSC</td>
   <td>Dahaka</td>
   <td>5.00</td>
   </tr>
   </table></div>
  
   <marquee width="100%" direction="left" height="60%"><h1>এই ওয়েবসাইট টি ডেভেলোপ করেছেন <a href="fb.com/siddikurbhola" target="_blank"> © STR Rayhan </a></h1></marquee>
  
   <br><span style="color:gray" face="cursive">এই ওয়েবসাইট টি রাত <time> ৮ টা ৩৪ মিনিট এ শেষ করেছিলাম | <time datetime="2022-09-01 20:36"></time>
</body>
</html>


ভার্সণঃ২.২

<!DOCTYPE html>
<html lang="en">
 <head>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
   <meta charset="UTF-8" />
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <link rel="stylesheet" href="style.css" />
   <title>Document</title>
   <style>
   
   /* UTILITIES */
   * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   }
   body {
   font-family: cursive;
   }
   a {
   text-decoration: none;
   }
   li {
   list-style: none;
   }
   
   /* NAVBAR STYLING STARTS */
   .navbar {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 20px;
   background-color: teal;
   color: #fff;
   }
   .nav-links a {
   color: #fff;
   }
   /* LOGO */
   .logo {
   font-size: 32px;
   }
   /* NAVBAR MENU */
   .menu {
   display: flex;
   gap: 1em;
   font-size: 18px;
   }
   .menu li:hover {
   background-color: #4c9e9e;
   border-radius: 5px;
   transition: 0.3s ease;
   }
   .menu li {
   padding: 5px 14px;
   }
   /* DROPDOWN MENU */
   .services {
   position: relative; 
   }
   .dropdown {
   background-color: rgb(1, 139, 139);
   padding: 1em 0;
   position: absolute; /*WITH RESPECT TO PARENT*/
   display: none;
   border-radius: 8px;
   top: 35px;
   }
   .dropdown li + li {
   margin-top: 10px;
   }
   .dropdown li {
   padding: 0.5em 1em;
   width: 8em;
   text-align: center;
   }
   .dropdown li:hover {
   background-color: #4c9e9e;
   }
   .services:hover .dropdown {
   display: block;
   }
   
   * {box-sizing: border-box;}
   
   body { 
   margin: 0;
   font-family: Arial, Helvetica, sans-serif;
   }
   
   .header {
   overflow: hidden;
   background-color: rgb(82,51,121);
   padding: 20px 10px;
   }
   
   .header a {
   float: left;
   color: black;
   text-align: center;
   padding: 12px;
   text-decoration: none;
   font-size: 18px; 
   line-height: 25px;
   border-radius: 4px;
   }
   
   .header a.logo {
   font-size: 25px;
   font-weight: bold;
   }
   
   .header a:hover {
   background-color: #ddd;
   color: black;
   }
   
   .header a.active {
   background-color: dodgerblue;
   color: white;
   }
   
   .header-right {
   float: right;
   }
   
   @media screen and (max-width: 500px) {
   .header a {
   float: none;
   display: block;
   text-align: left;
   }
   
   .header-right {
   float: none;
   }
   }
   
   * {
   box-sizing: border-box;
   }
   
   input[type=text], select, textarea {
   width: 100%;
   padding: 12px;
   border: 1px solid #ccc;
   border-radius: 4px;
   resize: vertical;
   }
   label {
   padding: 12px 12px 12px 0;
   display: inline-block;
   }
   input[type=submit] {
   background-color: #04AA6D;
   color: white;
   padding: 12px 20px;
   border: none;
   border-radius: 4px;
   cursor: pointer;
   float: right;
   }
   
   input[type=submit]:hover {
   background-color: #45a049;
   }
   
   .container {
   border-radius: 5px;
   background-color: #f2f2f2;
   padding: 20px;
   }
   .col-25 {
   float: left;
   width: 25%;
   margin-top: 6px;
   }
   .col-75 {
   float: left;
   width: 75%;
   margin-top: 6px;
   }
   
   /* Clear floats after the columns */
   .row:after {
   content: "";
   display: table;
   clear: both;
   }
   
   /* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
   @media screen and (max-width: 600px) {
   .col-25, .col-75, input[type=submit] {
   width: 100%;
   margin-top: 0;
   }
   }
   
   .button {
   display: inline-block;
   border-radius: 2px;
   background-color: #f4511e;
   border:color:red;
   color: #FFFFFF;
   text-align: center;
   font-size: 18px;
   padding: 20px;
   width: 350px;
   transition: all 0.5s;
   cursor: pointer;
   margin: 10px;
   }
   .button span {
   cursor: pointer;
   display: inline-block;
   position: relative;
   transition: 1.5s;
   }
   .button span:after {
   content: '\00bb';
   position: absolute;
   opacity: 0;
   top: 0;
   right: -20px;
   transition: 0.5s;
   }
   
   .button:hover span {
   padding-right: 25px;
   }
   .button:hover span:after {
   opacity: 1;
   right: 0;
   }
   
   h1 {color: red;}
   
   p { color: green"}
   
   b { color: Cyan;}
   ol {color:yellow;}
   
   time { color:cyan;}
   </style>
 </head>
 <body>
   <nav class="navbar">
     <!-- LOGO -->
     <div class="logo">MUO</div>
     <!-- NAVIGATION MENU -->
     <ul class="nav-links">
       <!-- USING CHECKBOX HACK -->
       <input type="checkbox" id="checkbox_toggle" />
       <label for="checkbox_toggle" class="hamburger">&#9776;</label>
       <!-- NAVIGATION MENUS -->
       <div class="menu">
         <li><a href="/">Home</a></li>
         <li><a href="/">About</a></li>
         <li class="services">
           <a href="/">Services</a>
           <!-- DROPDOWN MENU -->
           <ul class="dropdown">
             <li><a href="/">Dropdown 1 </a></li>
             <li><a href="/">Dropdown 2</a></li>
             <li><a href="/">Dropdown 2</a></li>
             <li><a href="/">Dropdown 3</a></li>
             <li><a href="/">Dropdown 4</a></li>
           </ul>
         </li>
         <li><a href="/">Pricing</a></li>
         <li><a href="/">Contact</a></li>
       </div>
     </ul>
   </nav>
   <h3> <div style="color:green">আসসালামু আলাইকুম </div></h3> <span style="color: rgb(28,82,104)">
   
   সবাই কেমন আছেন | আশা করি </span> সবাই <mark> আল্লাহ রহমতে ভালো আছেন |</mark>
   
   আপনাদের সবাইকে <abbr title="siddikur Rahman
   
   Rayhan Website "> আমার ওয়েবসাইটে </abbr> স্বাগতম | <strong> আমি </strong> ২০২২ সালে এই কলেজ <font size="4" color="gray" face="cursive">
   বিএফ শাহীন কলেজ, কুর্মিটোলায় </font>  ভর্তি হয়েছি | 
   
   <h3>আমার পছন্দের সাবজেক্টসমূহ </h3>
   
   <ol type = "a">
   
   <li> MATH </li>
   
   <li>CHEMISTRY </li>
   
   <li> ISLAM </li>
   
   </ol>
   
   </li>
   
   <h2> আমার পছন্দের ব্যাক্তিসমূহ </h2>
   
   <ul style="list-style-type:disk">
   
   <li> হযরত মুহাম্মদ সাঃ </li> 
   <li>আমার বাবা</li>
   <li>আমার মা </li>
   </ul>
   
   <b>আপনাদেরকে একটা হাদিস বলছি </b>
   <q>রাসুল (সা.) বলেন, ‘তোমাদের কেউ ততক্ষণ
   পর্যন্ত ঈমানদার হতে
   পারবে না, যতক্ষণ না তার
   কাছে আমি তার পিতামাতার চেয়ে,
   সন্তানাদির চেয়ে এবং সমস্
   ত মানুষের চেয়ে প্রিয় না হব।’ <mark>(বুখারি, হাদিস : ১৫)</mark></q><br><br><hr>
   
   <strong>চলুন কিছু ❓প্রশ্ন করি উত্তর দিন </strong> <br>
   
   <input type="checkbox" name="vehicle" value="Read" checked> আমি কুরয়ান পড়ি 💗<br>
   
   <input type="checkbox" name="vehicle" value="Learn" checked>আমি অর্থসহ এবং ব্যাখ্যা সহকারে কুরয়ান পড়ার চেষ্টা করি 💥 <br>
   
   <input type="checkbox" name="vehicle" value="hadis " >আমার বাসায় ইবনে কাশির আছে ♥ 
   
   </form><br><br>
   
   <span style="color:orange"><big>আপনি চাইলে নিচের ফর্ম টি ফিলয়াপ করতে পারেন </big></span>
   <h2>ফর্ম ফিলয়াপ করুন</h2>
   <p>নিচের ফর্ম টি ফিলয়াপ করার পর সাবমিট বাটনে ক্লিক করুন </p>
   <div class="container">
   <form action="/action_page.php">
   <div class="row">
   <div class="col-25">
   <label for="fname">First Name</label>
   </div>
   <div class="col-75">
   <input type="text" id="fname" name="firstname" placeholder="Your name..">
   </div>
   </div>
   <div class="row">
   <div class="col-25">
   <label for="lname">Last Name</label>
   </div>
   <div class="col-75">
   <input type="text" id="lname" name="lastname" placeholder="Your last name..">
   </div>
   </div>
   <div class="row">
   <div class="col-25">
   <label for="country">Country</label>
   </div>
   <div class="col-75">
   <select id="country" name="country">
   <option value="Bangladesh 🇧🇩">Bangladesh 🇧🇩</option>
   <option value="Afghanistan ">Islamic Emirates Of Afghanistan 🇦🇫</option>
   <option value="Saudi Arab">Saudi Arab 🇸🇦</option>
   </select>
   </div>
   </div>
   <div class="row">
   <div class="col-25">
   <label for="subject">Subject</label>
   </div>
   <div class="col-75">
   <textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea>
   </div>
   </div>
   <br>
   <div class="row">
   
   <input type="submit" value="Submit">
   </div>
   </form>
   </div>
   
   <button class="button" style="vertical-align:middle"><span><a href="fb.com/str.bhola" ><font size="7" color="black" face="cursive"><i class="fa fa-facebook" style="font-size:40px;color:blue;"></i>My Facebook Account</span></button></font>
   
   <h1 style="color:black">Education Qualification </h1>
   <div style="color:purpel">
   <table border="3">
   <tr style="color:red">
   
   <td><b>Exam Name</b></td>
   <td><b>Board<b></td>
   <td><b>GPA</b></td>
   
   </tr>
   <tr>
   <td>PSC</td>
   <td>Barishal</td>
   <td>5.00</td>
   </tr>
   <tr>
   <td>JSC</td>
   <td>Dhaka</td>
   <td>4.86</td>
   </tr>
   <tr>
   <td>SSC</td>
   <td>Dahaka</td>
   <td>5.00</td>
   </tr>
   </table></div>
   
   <marquee width="100%" direction="left" height="60%" onmouseover="this.stop()"><h1>এই ওয়েবসাইট টি ডেভেলোপ করেছেন <a href="fb.com/siddikurbhola" target="_blank"> © STR Rayhan </a></h1></marquee>
   
   <br><span style="color:gray" face="cursive">এই ওয়েবসাইট টি রাত <time> ৮ টা ৩৪ মিনিট এ শেষ করেছিলাম | <time datetime="2022-09-01 20:36"></time>
 </body>
</html>
Previous Post
Next Post
Siddikur Rahman Rayhan (Tamim )

post written by:

Siddikur Rahman Rayhan from Bangladesh is a versatile individual with a keen interest in technology, cricket, politics, and Islamic studies. With a strong academic background and proficiency in multiple languages, he excels in blogging, YouTube, web development, Graphix Design and content creation. Skilled in video editing, meme generation, and photography, Rayhan is dedicated to personal and professional growth, seeking connections with like-minded individuals to support his endeavors.

0 Comments: