10 min. Webpage challenge

-

10 minutes challenge from sample web page create using the html and css:-









Html code:-

<!DOCTYPE html>

<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="stylesheet.css">
  <title></title>
</head>

<body>
<nav>
  <div class="logo"> <h1>Data</h1> </div>
  <div class="items">
    <a href="div.html">Home |</a>
    <a href="lk.html">Service |</a>
    <a href="e.html">About |</a>
    <a href="add.html">contact </a>
  </div>
</nav>
<div class="body">
  <h1>This page requires of implementation of code between user effective</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita, ratione.</p>

<div class="btn">
  <button>Get started</button>
</div>
<img src="3.png" alt="">
<div class="comment">
  <input type="text" placeholder="Enter your comments...." required>
</div>
<div class="comments">
<button type="submit">send comments</button>
</div>
<div class="footer">
  <p>copyright © action not copy this content
  |html as page was responded
  |css |javascript Lorem ipsum dolor sit amet, consectetur adipisicin Lorem ipsum dolor sit amet, consectetur adipisicing elit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis, cumque.</p>
</div>
</div>
</body>

</html>

Css code:-

*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
nav{
  background-color: green;
  height: 50px;
  justify-content: space-between;
  display: flex;
  align-items: center;
  padding: 1px;
}
.logo{
  padding: 10px;
  font-style: italic;
  font-weight: bold;
  color: yellow;
}
.items a{
  padding: 2px;
  text-decoration: none;
  color: white;
}
img{
  height: 300px;
  width: 410px;
  padding-top: 50px;
}
.body{
  background-color: yellow;
  margin-top:0px;
}
.body p{
  margin-right: 0px;
  margin-top: 25px;
  padding: 5px;
  text-indent: 25px;
}
.body h1{
  margin-top:0px;
  margin-right: 150px;
  margin-left: 10px;
  margin-top:0px;
  top: 70px;
  padding-top: 50px;
}
.btn{
  padding: 10px 25px 10px 25px;
  margin-right: 25px;
}
button{
  padding: 8px;
  font-style: sans-serif;
  border:none;
  color: white;
  font-size: 20px;
  border-radius:25px;
  background-color: #27ae60;
  transition: background-color :0.5s;
       } 
button:hover {
    background-color: #219653; 
    cursor:pointer;
     }
 .footer{
   background-color: dimgray;
   height: 150px;
   margin-top: 100px;
 }
 .footer p{
   padding: 20px;
   color: white;
 }
 .comment{
   margin-top: 10px;
   padding: 20px;
 } 
 .comment input{
   padding:10px;
   border-radius: 20px;
 }
 .comments button{
   margin-left: 35px;
   
 } 

Comments

Post a Comment

Popular posts from this blog

Square value added

-
 Problem Z=a²+y² Output:   A=2   B=2    Z=8 Solution of python code: a=int(input("Enter the a value")) y=int(input("Enter the y value")) z=a**2+y**2 print ("SQUARE VALUE OF a and y is ",z) *Check it my code any interpreter*
Read more

HTML tutorials

-
Image
Introduction of HTML                   HTML stands for HyperText Markup Language. It is used to design web pages using a markup language. HTML is a combination of Hypertext and Markup language. Hypertext defines the link between web pages. A markup language is used to define the text document within the tag which defines the structure of web pages. This language is used to annotate (make notes for the computer) text so that a machine can understand it and manipulate text accordingly. Most markup languages (e.g. HTML) are human-readable. The language uses tags to define what manipulation has to be done on the text.       HTML is a markup language used by the browser to manipulate text, images, and other content, in order to display it in the required format. HTML was created by Tim Berners-Lee in 1991. The first-ever version of HTML was HTML 1.0, but the first standard version was HTML 2.0, published in 1995.  What is HTML     HTML stands for Hyper Text Markup Language.  HTML is the sta
Read more

Date of birth calculator

-
  DATE OF BIRTH CALCULATOR:-   This calculator is different from the other Because this calculator include in your date of birth and month,week, hours, minutes also calculated. This code was created python  from datetime import datetime dob = input("Enter your date of birth (YYYY-MM-DD): ") dob = datetime.strptime(dob, '%Y-%m-%d') current_date = datetime.now() age = current_date - dob years = int(age.days / 365.25) months = int((age.days % 365.25) / 30.4375) days = age.days % 365.25 % 30.4375 hours = age.seconds // 3600 minutes = age.seconds % 3600 // 60 print(f"You are {years} years, {months} months, {int(days)} days, {hours} hours, and {minutes} minutes old.")
Read more