HTML-файл не связан с файлом css

Хорошо, я только что создал целевую страницу для веб-сайта, и она отлично работает. Но единственная проблема в том, что CSS определенного элемента [button: p] не работает. Я проверил все скобки и точки с запятой, но ошибок не обнаружил. любая помощь будет оценена по достоинству.

index.html

<!DOCTYPE html>
<html>
<head>
    <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("a").on('click', function(event) {
    if (this.hash !== "") {
      event.preventDefault();
      var hash = this.hash;
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function(){
           window.location.hash = hash;
      });
    } 
  });
});
</script>
    <title>Versatile | Home</title>
    <link rel = "stylesheet" type = "text/css" href = "main.css">
</head>
<body>
    <div id  = "navbar">
        <h3>Versatile</h3>
        <a href = "#home">Home</a>
        <a href = "#About">About</a>
        <a href = "#Products">Our Alliances and Products</a>
        <a href = "#Registered">Get Registered</a>
        <a href = "#Contact">Contact</a>
    </div>
    <div id = "home">
        <h3>Versatile Infosecurity Pvt. Ltd.</h3>
        <button href = "#About">Explore</button>
    </div>
    <div id = "About">
        <h3>About</h3>
        <p>Versatile Infosecurity Pvt., Ltd. has tied up with some of the worldwide leaders in network security to occupy a
leading position in offering customers end-to- end solutions in enterprise-wide security. We have been dedicated
to serving the needs of the antivirus and security community. Through constant innovations and strategic tie-
ups, Versatile Infosecurity offers many services and solutions, sourced from the Leading Manufacturers the
world over that address key areas in the deployment of software based security and management systems. We
offer specialized services in Antivirus, Network Management and Network security area.</p>
    </div>
    <div id = "Products">
        <h3>Our Alliances and Products</h3>
        <div class = "card-conatiner">
<div class = "card">
    <img src = "images/a10networks.jpg" style = "width: 100%;">
    <hr>
<div class = "container">
    <center>
    <h4>A10 Networks</h4>
    <br><br>
    <button class = "btn" href = "a10networks.com">Visit Website</button>
</center>
</div>
</div>
</div>
    </div>
    </div>
</body>
</html>

main.css

body {
    background-image: url('images/bodybackground.jpg');
    background-size: cover;
    background-attachment: fixed;
}
#navbar {
    background: transparent;
    height: 50px;
    box-shadow: 10px;
}
#navbar h3 {
    color: white;
    float: left;
    font-size: 20px;
    font-family: Arial;
    margin-left: 10px;
    transition-duration: 0.5s;
}
#navbar h3:hover {
    margin-left: 30px;
}
#navbar a {
    color: white;
    float: right;
    text-decoration: none;
    padding: 10px;
    padding-top: 15px;
    font-family: Arial;
    margin-top: 0px;
    background: transparent;
    transition-duration: 0.7s;
}
#navbar a:hover {
    margin-top: 10px;
    background: white;
    opacity: 0.9;
    color: orange;
}
#home {
    margin-top: 300px;
    height: 500px;
    text-align: center;
}
#home button{
    padding: 10px 40px;
    border: 2px solid white;
    background: transparent;
    text-align: center;
    color: white;
    border-radius: 3px;
    transition-duration: 0.7s;
}
#home button:hover {
    background: white;
    color: black;
    padding: 10px 60px;
}
#home h3 {
    text-align: center;
    color: white;
    font-family: Arial;
    font-size: 60px;
    margin-bottom: 50px;
}
#About {
    height: 500px;
    background: white;
}
#About h3 {
    text-align: center;
    font-family: Arial;
    font-size: 50px;
    padding: 10px;
    padding-top: 30px;
}
#About p {
    font-size: 25px;
    font-family: Arial;
    padding: 20px;
}
#Products {
    height: 1000px;
    background: lightgrey;
    padding: 10px;
}
#Products h3 {
    text-align: center;
    font-size: 60px;
    font-family: Arial;
}
#Products .a10 {
    margin: 30px;
    box-sizing: border-box;
    background-image: url('images/a10networks.jpg');
}
.btn {
    background: transparent;
    border: 2px solid black;
    color: black;
    transition-duration: 0.7s;
}
.btn:hover {
    background: black;
    border: 2px solid black;
    color: white;
    transition-duration: 0.7s;
}
.card {
        box-shadow: 0 8px 8px 0 rgba(0,0,0,0.2);
        transition-duration: 0.3s;
        width: 300px;
        height: 300px;
        margin-left: : 50px;
        background: white;
    }
    .card:hover {
        box-shadow: 0 8px 8px 0 rgba(0,0,0,0.7);
        transition-duration: 0.3s;
    }
    .card-container {
        height: 100px;
        width: 100px;
        margin-top: 40px;
    }
    .card-container h4 {
        text-align: center;
    }

PS Пожалуйста, помогите быстро а также расскажите, как выглядит сайт. Это мой первый официальный проект.

У вас есть дополнительный закрывающий тег </div>, и я не вижу этого класса в вашем CSS.

— 01.05.2018 17:31

<button href = "# About"> Исследовать </button> У него нет класса 'btn', который определен в вашем CSS. Должно получиться следующее: <button href = "# About" class = "btn"> Explore </button>

— 01.05.2018 17:34

у вас есть двойное двоеточие .card { margin-left: : 50px; } и дополнительный закрывающий </div> перед закрывающим тегом тела

— 01.05.2018 17:39

html css

01.05.2018 17:28

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Ответы 1

Вы используете один лишний закрывающий тег, margin-left: : 50px; неверен и ваш формат кода неверен. Используйте кнопку TAB для выравнивания кода.

HTML

<!DOCTYPE html>
<html>
<head>
    <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("a").on('click', function(event) {
        if (this.hash !== "") {
            event.preventDefault();
            var hash = this.hash;
            $('html, body').animate({
                scrollTop: $(hash).offset().top
            }, 800, function(){
                window.location.hash = hash;
            });
        } 
    });
});
</script>
    <title>Versatile | Home</title>
    <link rel = "stylesheet" type = "text/css" href = "main.css">
</head>
<body>
    <div id  = "navbar">
        <h3>Versatile</h3>
        <a href = "#home">Home</a>
        <a href = "#About">About</a>
        <a href = "#Products">Our Alliances and Products</a>
        <a href = "#Registered">Get Registered</a>
        <a href = "#Contact">Contact</a>
    </div>
    <div id = "home">
        <h3>Versatile Infosecurity Pvt. Ltd.</h3>
        <button href = "#About">Explore</button>
    </div>
    <div id = "About">
        <h3>About</h3>
        <p>Versatile Infosecurity Pvt., Ltd. has tied up with some of the worldwide leaders in network security to occupy a
leading position in offering customers end-to- end solutions in enterprise-wide security. We have been dedicated
to serving the needs of the antivirus and security community. Through constant innovations and strategic tie-
ups, Versatile Infosecurity offers many services and solutions, sourced from the Leading Manufacturers the
world over that address key areas in the deployment of software based security and management systems. We
offer specialized services in Antivirus, Network Management and Network security area.</p>
    </div>
    <div id = "Products">
        <h3>Our Alliances and Products</h3>
        <div class = "card-conatiner">
    <div class = "card">
        <img src = "images/a10networks.jpg" style = "width: 100%;">
        <hr>
    <div class = "container">
    <center>
        <h4>A10 Networks</h4>
        <br><br>
        <button class = "btn" href = "a10networks.com">Visit Website</button>
    </center>
    </div></div></div></div>
</body>
</html>

CSS

body {
    background-image: url('images/bodybackground.jpg');
    background-size: cover;
    background-attachment: fixed;
}
#navbar {
    background: transparent;
    height: 50px;
    box-shadow: 10px;
}
#navbar h3 {
    color: white;
    float: left;
    font-size: 20px;
    font-family: Arial;
    margin-left: 10px;
    transition-duration: 0.5s;
}
#navbar h3:hover {
    margin-left: 30px;
}
#navbar a {
    color: white;
    float: right;
    text-decoration: none;
    padding: 10px;
    padding-top: 15px;
    font-family: Arial;
    margin-top: 0px;
    background: transparent;
    transition-duration: 0.7s;
}
#navbar a:hover {
    margin-top: 10px;
    background: white;
    opacity: 0.9;
    color: orange;
}
#home {
    margin-top: 300px;
    height: 500px;
    text-align: center;
}
#home button {
    padding: 10px 40px;
    border: 2px solid white;
    background: transparent;
    text-align: center;
    color: white;
    border-radius: 3px;
    transition-duration: 0.7s;
}
#home button:hover {
    background: white;
    color: black;
    padding: 10px 60px;
}
#home h3 {
    text-align: center;
    color: white;
    font-family: Arial;
    font-size: 60px;
    margin-bottom: 50px;
}
#About {
    height: 500px;
    background: white;
}
#About h3 {
    text-align: center;
    font-family: Arial;
    font-size: 50px;
    padding: 10px;
    padding-top: 30px;
}
#About p {
    font-size: 25px;
    font-family: Arial;
    padding: 20px;
}
#Products {
    height: 1000px;
    background: lightgrey;
    padding: 10px;
}
#Products h3 {
    text-align: center;
    font-size: 60px;
    font-family: Arial;
}
#Products .a10 {
    margin: 30px;
    box-sizing: border-box;
    background-image: url('images/a10networks.jpg');
}
.btn {
    background: transparent;
    border: 2px solid black;
    color: black;
    transition-duration: 0.7s;
}
.btn:hover {
    background: black;
    border: 2px solid black;
    color: white;
    transition-duration: 0.7s;
}
.card {
    box-shadow: 0 8px 8px 0 rgba(0,0,0,0.2);
    transition-duration: 0.3s;
    width: 300px;
    height: 300px;
    margin-left: 50px;
    background: white;
}
.card:hover {
    box-shadow: 0 8px 8px 0 rgba(0,0,0,0.7);
    transition-duration: 0.3s;
}
.card-container {
    height: 100px;
    width: 100px;
    margin-top: 40px;
}
.card-container h4 {
     text-align: center;
}

Посмотрите, работает ли это сейчас. Если нет, дайте прямую ссылку на использованные изображения. Вы также можете объяснить, как должна вести себя эта кнопка, или объяснить, что с ней не так.

01.05.2018 17:58

Другие вопросы по теме

Попытка динамически показать скрытые в таблице стилей элементы с помощью JS

Использование Font Awesome с Bootstrap 4

Чтобы синхронизировать левую панель навигации с верхней панелью навигации

CSS Grid с прокруткой фиксированного размера: как решить проблему, при которой не отображаются нижние поля / отступы?

Центр дочернего элемента к центру его родителя

Добавить текст в угол ячейки таблицы HTML, не мешая содержимому ячейки

Материализация CSS Полоса прокрутки закрывается Выберите IE11

Связывание файлов css, js между папками проекта

Выровнять в меню параметры <li> по центру и по левому краю

CSS изменяет только существующие стили

HTML-файл не связан с файлом css

Ответы 1

Другие вопросы по теме

Похожие вопросы