Beatiful and simple Website using HTML & CSS

HTML Code：

index.html

<!DOCTYPE html>
<html lang=”en” dir=”ltr”>
<head>
<meta charset=”utf-8″>
<title>Test Page</title>
<link rel=”stylesheet” href=”style.css”>
</head>
<body>
…


This content originally appeared on DEV Community and was authored by SupremeWyn

HTML Code：

index.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Test Page</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="menu">
      <center><h1>Hello World 👋</h1></center>
    </div>
    <form class="search">
      <p>This is search form</p>
    <input type="text" name="" placeholder="Hello this is input text">
    <input type="submit" name="" value="This is Button" class="btn">
  </form><br>
  <form class="text">
    <p>This is text form type anything what you want</p>
  </form>
  </body>
</html>

CSS Code:

style.css

body{
  background-color: #1f1f1f;
  font-family: "Microsoft Sans Serif";
  color: white;
}
.menu{ /* you need div element to use this */
  background-color: #3d3d3d;
  width: 100%;
  height: 80px;
  color: white;
}
.btn{
  background-color: #4CAF50; /* You can change what ever you want */
  border: none;
  color: white;
  padding: 12px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
}
.btn:hover{ /* When your mouse on the btn it will change the color */
  background-color: #5ccc60;
}
form.search input[type=text] {
  padding: 10px;
  font-size: 17px;
  border: 1px solid grey;
  float: left;
  width: 80%;
  background: #f1f1f1;
}
/* Created by @SupremeWyn */

You guys can modified the code like such as adding Heading, paragraph, picture or anything else.

If you have some problem, feel free to comment you ask anything and i will reply it and answer your question :) (if i'm online.)

You can get the code by clicking this link

Link: https://github.com/SupremeWyn/HtmlWebDesign-V.1.0


This content originally appeared on DEV Community and was authored by SupremeWyn


Print Share Comment Cite Upload Translate Updates
APA

SupremeWyn | Sciencx (2022-01-09T14:15:16+00:00) Beatiful and simple Website using HTML & CSS. Retrieved from https://www.scien.cx/2022/01/09/beatiful-and-simple-website-using-html-css/

MLA
" » Beatiful and simple Website using HTML & CSS." SupremeWyn | Sciencx - Sunday January 9, 2022, https://www.scien.cx/2022/01/09/beatiful-and-simple-website-using-html-css/
HARVARD
SupremeWyn | Sciencx Sunday January 9, 2022 » Beatiful and simple Website using HTML & CSS., viewed ,<https://www.scien.cx/2022/01/09/beatiful-and-simple-website-using-html-css/>
VANCOUVER
SupremeWyn | Sciencx - » Beatiful and simple Website using HTML & CSS. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/01/09/beatiful-and-simple-website-using-html-css/
CHICAGO
" » Beatiful and simple Website using HTML & CSS." SupremeWyn | Sciencx - Accessed . https://www.scien.cx/2022/01/09/beatiful-and-simple-website-using-html-css/
IEEE
" » Beatiful and simple Website using HTML & CSS." SupremeWyn | Sciencx [Online]. Available: https://www.scien.cx/2022/01/09/beatiful-and-simple-website-using-html-css/. [Accessed: ]
rf:citation
» Beatiful and simple Website using HTML & CSS | SupremeWyn | Sciencx | https://www.scien.cx/2022/01/09/beatiful-and-simple-website-using-html-css/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts