Posted by आज इस Article में हम HTML में About Us Page को बनायेगे। यदि आप web Development सीख रहे है या आप अपने लिए एक HTML में website बना रहे है तो आज का Article How to Design About Us Page in HTML/CSS (HTML में About Us Page कैसे बनाये ) आपको About Us Page बनाने में मदद करेगा। तो आप इस Article को पूरा Read करे और इसके HTML Code को समझे।
How to Design About Us Page in HTML
.png "How to Design About Us Page in HTML/CSS (HTML में About Us Page कैसे बनाये ) 2")
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!-- Latest compiled and minified CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet">
<!-- Latest compiled JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<style type="text/css">
img {height:100px; width:100%;}
a:link {text-decoration:none;}
a {padding:25px; font-size:19px;color:rgb(168, 223, 237);}
.simp {margin-left:45px;}
.hr {
color:rgb(168, 223, 237);}
h1 {text-align:center; font-size: 40px; font-family:Serif; font-weight: strong;
}
.image {
width:34%; height: 200px;location:absolute; border:solid;padding:5px;
border-width:1px;
border-color:grey;
float:left;
}
p {font-family:Sans-Serif; text-align:left; font-size: 20px}
#grey {background-color:grey;}
</style>
</head>
<body>
<div class="container">
<div class="col-sm-12 col-md-12 col-lg-12">
<hr class="hr">
<h1> About Us </h1>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque
eleifend augue eu ligula luctus sollicitudin. Sed vehicula in erat ac mollis.
Phasellus nec mauris justo. Phasellus posuere ultricies ullamcorper.
Vivamus accumsan eget diam dictum porttitor. Etiam vel enim lorem.
Etiam non risus luctus, porttitor ante vitae, molestie dolor.
Sed non tellus sed est malesuada pellentesque sed non libero.
Proin vitae nibh sed mi rhoncus gravida et nec nisi.
Morbi eu ligula vitae neque tincidunt mollis a id lorem.
Fusce ullamcorper pulvinar mi in pharetra. Nunc et tincidunt justo,
sit amet lobortis est. Cras luctus ipsum eu congue mattis. Suspendisse in
luctus metus. Curabitur efficitur malesuada lorem, non sollicitudin nisl tempus
id. Ut nisl dolor, aliquam quis arcu id, dapibus cursus metus. </p> </div> </div> </body> </html>
1. सबसे पहले हमने इसमें Bootstrap की CSS और JS File include की है। जो की CDN (Content Delivery Network ) की है। जो की Internet Network की है । यदि इन्हे आप अपने Computer में Without Net use करेंगे। तो work नहीं करेगी। अगर आप चाहते है। Without Net आपके Local Server पे काम करे। तो आप Bootstrap File include कर सकते है।
2. इसके बाद CSS को लिखा गया है।
3. <divclass=”container”>
यहाँ से हमारा HTML शुरू हुआ है। हमने सबसे पहले Bootstrap की Class Container का Use किया है। Container एक Layout Element होता है। जिसका Use Content को Center में करने के लिए Use किया जाता है। ये max-width Value Set करता है।
4. col-sm-12 col-md-12 col-lg-12 ये हमारे एक Column को Create करता है। ये full Container Width में एक Column को Create कर रहा है।
5. <hrclass=”hr”>
ये एक Horizontal Line को Top पे Create कर रहा है।
6. अब एक Heading About us Create की है। और सारा Text p Paragraph में लिखा गया है।