DEV Community

Cover image for Beatiful and simple Website using HTML & CSS (Less Code)
TheFoxieDev
TheFoxieDev

Posted on • Updated on

Beatiful and simple Website using HTML & CSS (Less Code)

Cover designed by freepik.com

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>
Enter fullscreen mode Exit fullscreen mode

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 */
Enter fullscreen mode Exit fullscreen mode

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

Discussion (1)

Collapse
thefoxiedev profile image
TheFoxieDev Author

Github repository is no longer available