Создать простой веб-сайт с использованием HTML и CSS

Здравствуйте, друзья, сегодня в этом блоге я научу вас, как создать веб-сайт только на HTML и CSS. Ранее я делился в блоге информацией о полноценном веб-сайте для личного портфолио с использованием HTML, CSS и JavaScript, а теперь я собираюсь создать простой веб-сайт.

Что такое веб-сайт?

Веб-сайт представляет собой комбинацию нескольких веб-страниц с кодами, гиперссылками и дизайном. Существуют различные типы веб-сайтов, таких как сайты электронной коммерции, сайты-портфолио, журналы или сайты социальных сетей, фактически блог - это тоже веб-сайт. Веб-сайт может использоваться для образовательных, маркетинговых и других целей. Веб-сайты не имеют ограничений.

Как я могу сделать свой веб-сайт привлекательным?

Чтобы сделать веб-сайт красивым и притягательным, вам необходимо выполнить следующие шаги:

Используйте простые цвета для вашего веб-сайта.
Используйте максимум 3-4 цвета
Сделайте веб-сайт адаптивным (подходит для устройств с любым размером экрана)
Попробуйте использовать те же размеры и семейство шрифтов для текста.
Храните важные навигационные ссылки внутри панели навигации

Если вы испытываете трудности с тем, что я говорю, то вы можете посмотреть полный видеоурок по этой программе

Создать простой веб-сайт с использованием HTML и CSS | Бесплатный исходный код

Скачать

Простой веб-сайт с использованием HTML и CSS | Бесплатный исходный код

Чтобы получить заданные HTML и CSS коды, прежде всего, вам нужно создать два файла, один из которых представляет собой HTML-файл, а другой - CSS-файл. После создания этих двух файлов вы можете легко скопировать и вставить данные коды в свои файлы. Вы также можете напрямую загрузить файл исходного кода с помощью указанной кнопки загрузки.

Как создать веб-сайт веб-сайт, используя HTML-код?

Создайте HTML-файл на своем компьютере с именем index.html и файл style.css скопируйте-вставьте следующие коды в свои документ.

HTML КОД:


<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Website Layout | CodingLab</title> 
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"/>
   </head>
<body>
  <nav>
    <div class="menu">
      <div class="logo">
        <a href="#">CodingLab</a>
      </div>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Feedback</a></li>
      </ul>
    </div>
  </nav>
  <div class="img"></div>
  <div class="center">
    <div class="title">Create Amazing Website</div>
    <div class="sub_title">Pure HTML & CSS Only</div>
    <div class="btns">
      <button>Learn More</button>
      <button>Subscribe</button>
    </div>
  </div>
</body>
</html>

CSS КОД:


@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins',sans-serif;
}
::selection{
  color: #000;
  background: #fff;
}
nav{
  position: fixed;
  background: #1b1b1b;
  width: 100%;
  padding: 10px 0;
  z-index: 12;
}
nav .menu{
  max-width: 1250px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
}
.menu .logo a{
  text-decoration: none;
  color: #fff;
  font-size: 35px;
  font-weight: 600;
}
.menu ul{
  display: inline-flex;
}
.menu ul li{
  list-style: none;
  margin-left: 7px;
}
.menu ul li:first-child{
  margin-left: 0px;
}
.menu ul li a{
  text-decoration: none;
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  padding: 8px 15px;
  border-radius: 5px;
  transition: all 0.3s ease;
}
.menu ul li a:hover{
  background: #fff;
  color: black;
}
.img{
  background: url('img3.jpg')no-repeat;
  width: 100%;
  height: 100vh;
  background-size: cover;
  background-position: center;
  position: relative;
}
.img::before{
  content: '';
  position: absolute;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.4);
}
.center{
  position: absolute;
  top: 52%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  padding: 0 20px;
  text-align: center;
}
.center .title{
  color: #fff;
  font-size: 55px;
  font-weight: 600;
}
.center .sub_title{
  color: #fff;
  font-size: 52px;
  font-weight: 600;
}
.center .btns{
  margin-top: 20px;
}
.center .btns button{
  height: 55px;
  width: 170px;
  border-radius: 5px;
  border: none;
  margin: 0 10px;
  border: 2px solid white;
  font-size: 20px;
  font-weight: 500;
  padding: 0 10px;
  cursor: pointer;
  outline: none;
  transition: all 0.3s ease;
}
.center .btns button:first-child{
  color: #fff;
  background: none;
}
.btns button:first-child:hover{
  background: white;
  color: black;
}
.center .btns button:last-child{
  background: white;
  color: black;
}