What are Default Props in React? Complete Beginner's Guide with Syntax & Examples (2026)

Image
  What are Default Props in React? (Complete Beginner's Guide) Introduction When building React applications, components often receive data through props. But what happens if a parent component forgets to send a prop? Without a default value, your component may display undefined, making the user interface look incomplete or broken. Default Props are predefined values assigned to a component's props. React automatically uses these values when a parent component does not pass a specific prop. To solve this problem, React provides Default Props. Default Props allow you to define fallback values that React automatically uses whenever a prop is not provided.
Post a Comment

contact us page design

 responsive contact us page design using HTML | CSS

responsive page

responsive contact us page design using HTML | CSS

Source Code :-

HTML Source code:- 

<html>
<body>


<div class="container">
    <div class="content">
      <div class="left-side">
        <div class="address details">
          <i class="fas fa-map-marker-alt"></i>
          <div class="topic">Address</div>
          <div class="text-one">karad</div>
          <div class="text-two">pune</div>
        </div>
        <div class="phone details">
          <i class="fas fa-phone-alt"></i>
          <div class="topic">Phone</div>
          <div class="text-one">+0048 5673
8347</div>
          <div class="text-two">+0026 5656
9678</div>
        </div>
        <div class="email details">
          <i class="fas fa-envelope"></i>
          <div class="topic">Email</div>
          <div class="text-one">
learnprogramminglanguage@gmail.com</div>
          <div class="text-two">
webdesigningtheory@gmail.com</div>
        </div>
      </div>
      <div class="right-side">
        <div class="topic-text">
          <center><i><u><h2>Contact Us
</h2></i></u></center>
          <br>Send us a message</div>
        <p>If you have any work from me or
any types of quries related to my product,
          you can send me message from here.
It's my pleasure to help you.</p>
      <form action="#">
        <div class="input-box">
          <input type="text" placeholder="
Enter your name">
        </div>
        <div class="input-box">
          <input type="text" placeholder="
Enter your email">
        </div>
        <div class="input-box message-box">
        <textarea  rows="9" cols="70">
 Enter  your  Message </textarea>
         
        </div>
        <div class="button">
          <input type="button"
value="Send Now" >
        </div>
      </form>
    </div>
    </div><br><Br>
    <?php include 'footer.php';?>
//connection to footer page use to the
php language
  </div>
</body>
</html>


 CSS Source Code:-

  <head>
    <title>Contact us Page</title>
    <link rel ="stylesheet" href="style.css">
<style>
      *{
        margin:0;
        padding:0;
        box-sizing:border-box;
       
      }
      body{
        width:100%;
        display:flex;
          min height::100vh  ;
          align-item:center;  
                }
                .container{
                  width:85%;
                  border-radius:6px;
                  padding:20px 60px 30px 40px;
        box-shadow:0 5px 10px rgba(0,0,0,0.2);
                }
                .container .content{
                  display:flex;
                  align-items:center;
               justify-content:space-between;
                    }
             .container .content .left-side{
                      width:25%;
                      height: 100px;
                      display:flex;
                      flex-direction:column;
                      align-items:center;
                      margin-top:-300px;
                         position:relative;
                       }
                  .content .left-side::before{
                        content:'';
                        position:absolute;
                        height:70%;
                        width:2px;
                        right:-15;
                        top:50%;
                transform:translateY(-50%);
                       }
        .content .left-side .details{
          margin:14px;
          text-align:center;
                  }              
          .content .left-side .details i{
            font-size:30px;
            color:#3e2093;
            margin-bottom:10px;
               }        
           .content .left-side .details .topic{
            font-size:18px;
            font-weight:500;
           }    
       .content .left-side .details .text-one,
        .content .left-side .details .text-two{
            font-size:14px;
           }
           .container .content .right-side{
            width:75%;
            margin-left:75px;
           }
           .content .right-side .topic-text{
            font-size:23px;
            font-weight:600;
           }
           .right-side .input-box{
            height :50px;
            width:100%;
            margin:12px 0;
           }
           .right-side .input-box input,
           .right-side .input-box textarea{
            height:100%;
            width:100%;
            border:none;
            outline:none;
            font-size:16px;
            background:#F0F1F8;
            border-redius:6px;
            padding:0 15px;
            resize:none;
           }
          .right-side .input-box textarea{
            resize:none;
          }
          .right-side .message-box{
            min-height:110px;
          }
          .right-side .button{
            display:inline-block;
            margin-top:12px;
               }
               .right-side .button input
[type="button"]{
                color:#fff;
                font-size:18px;
                outline:none;
                border:none;
                padding:8px 16px;
                background:#3e2093;
                cursor:pointer;
                transition:all 0.3s ease;
                }
                .button input[type="button"]
:hover{
                  background:#5029bc;
                }
               
                @media (max-width: 820px) {
  .container{
    margin: 40px 0;
    height:130%;
  }
  .container .content{
    flex-direction: column-reverse;
  }
 .container .content .left-side{
   width: 100%;
   flex-direction: row;
   margin-top: 40px;
   justify-content: center;
   flex-wrap: wrap;
 }
 .container .content .left-side::before{
   display: none;
 }
 .container .content .right-side{
   width: 100%;
   margin-left: 0;
 }
}
h2{
  color:blue;
}        

      </style>
</head>

responsive contact us page design using HTML | CSS

Output:-

responsive contact us page

Related Post :-

reset password form

Features of Javascript

php program to print heart star pattern





Comments

Post a Comment

Popular posts from this blog

HTML Tag

Image
 HTML Tag  Html basic tag:-   <!DOCTYPE html> Html  first line of the code <!DOCTYPE html> is called a doctype declaration the browser which version of HTML the page is written . Html tag using the doctype the HTML5 , the most up-to-date version of  HTML language.The DOCTYPE declaration of the instruction to web browser of HTML the page is written in.  <HTML>:- <Html>.   </html> <html> tag tells the browser  this is HTML document . The <html> tag represent the root of  HTML document. The <html> tag is the container for other HTML elements  <!DOCTYPE> . The HyperText Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser.HTML is a computer language that makes up most web pages and online applications. A hypertext text used to reference other pieces of text, while a markup language is a series of markings that tells w...
Read more

CSS Text Color Explained with Syntax and HTML Examples

Image
 What Is CSS Text Color This Blog You Will Learn  à®ƒ   What Is CSS Text Color  à®ƒ   Syntax   à®ƒ   Purpose of Text Color  à®ƒ    Real world Use Cases  à®ƒ    What Is CSS Text Color  Example    à®ƒ   Output What Is CSS Text Color CSS text color refers to the color applied to text content on a web page using the color property in CSS. It controls how text appears visually and plays a major role in readability, accessibility, branding, and user experience . Syntax  selector{   color:value; } Purpose of Text Color ✅ Make content readable.  ✅ Highlight important information. ✅ Match brand identity. ✅ Create visual hierarchy. ✅ Improve user experience. Real world Use Cases Highlighting error messages. Emphasizing headings. Branding and theme design improving content readability. ஃ  structure diagram examples What Is CSS Text Color Example   <! DOCTYPE html > ...
Read more

HTML Input Type Submit Syntax and Example

Image
What is Input Type Submit in HTML The input type="submit" in HTML is used to create a submit button in a form. When a user clicks this button, it sends (submits) the form data to a server for processing. In simple words, a submit button helps users send the information they entered in a form, like login details, contact forms, or registration data. Syntax : <input type= "submit" value="submit"> type ="submit"  ➡ create a submit button  value ="send"    ➡ text shown on the button A button that submit the form.<input type ="submit"> defines  button for submitting form data  form-handler. The form-handler is typically server page with the  script for processing input data. the form -handler is specified in the forms action attribute.  ⭐ HTML Input Type Submit Syntax and Example  program <! DOCTYPE html > < html > < body > < h2 > Submit Button </ h2 > < p > The < strong >...
Read more