Mistake in the text editor

My text editor, Microsoft Visual Code, is acting strangely and won't review this file. Can you please copy and paste it into your editor to see what's wrong?

Apologies for the lengthy code, and thank you in advance for your help.

HTML:

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Space Trip - Adventure of a Lifetime</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="css/style.css" rel="stylesheet">
</head>

<body>
    <div class="content">
        <div class="welcomeText">
            <div class="welcome">
                <h1 class="greet">Space Trip - Adventure of a Lifetime</h1>
            </div>
            <div class="subText">
                <div class="subTexts">
                    <p class="subscribe">Subscribe to our newsletter</p>
                    <p class="soon">We are launching soon</p>
                </div>
            </div>
        </div>

        <div class="form">
            <form action="" class="sub">
                <input class='email' type="email">
                <button class="button" value="Send">Get Started</button>
            </form>
        </div>

        <div class="social">
            <div class="follow">
                <p class="followUs">Or follow us</p>
            </div>
            <div class="socialIcons">
                <div class="socialIcon facebook brandico-facebook-rect"></div>
                <div class="socialIcon  twitter brandico-twitter-bird"></div>
                <div class="socialIcon  github brandico-github"></div>
            </div>
        </div>
    </div>

    <script src="index.js"></script>
</body>

</html>

@import url(http://weloveiconfonts.com/api/?family=brandico);
@import url(https://fonts.googleapis.com/css?family=Junge);
* {
    margin: 0;
    padding: 0;
}

html,
body {
    width: 100%;
    height: 100%;
}

/* Rest of the CSS styling removed for brevity */
javascriptjqueryhtmlcss

Answer №1

<!DOCTYPE html>
<html lang="en">

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


    @import url(http://weloveiconfonts.com/api/?family=brandico);
    @import url(https://fonts.googleapis.com/css?family=Junge);
    * {
        margin: 0;
        padding: 0;
    }

    html,
    body {
        width: 100%;
        height: 100%;
    }

    body {
        background: url('https://static.pexels.com/photos/26206/pexels-photo.jpg') no-repeat;
        background-size: cover;
        font-family: Junge, georgia;
        text-align: center;
    }


    /* brandico */

    [class*="brandico-"]:before {
        font-family: 'brandico', sans-serif;
    }

    .content {
        max-width: 40%;
        max-height: 50%;
        margin: 100px auto;
    }

    .welcomeText,
    .form,
    .social {
        width: 100%;
    }


    /*welcome text*/

    .welcome {
        height: 100px;
        position: relative;
        border-bottom: 1px solid;
        overflow: hidden;
    }

    .greet {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 100%;
        font-size: 50px;
        text-align: center;
        line-height: 100px;
        transition: all .5s;
    }


    /*taglines*/

    .subText {
        width: 100%;
        height: 100px;
        position: relative;
        font-size: 30px;
        overflow: hidden;
    }

    .subText p {
        height: 100%;
        line-height: 100px;
        text-align: center;
    }

    .subTexts {
        width: 100%;
        position: absolute;
        bottom: 100%;
        text-align: center;
        overflow: hidden;
        transition: all .5s;
    }


    /*FORM*/

    .form {
        width: 100%;
        height: 100px;
        position: relative;
    }

    .sub {
        width: 90%;
        height: 50px;
        margin: auto;
        opacity: 0;
        border: none;
        border-radius: 50px;
        background: rgba(0, 0, 0, .05);
        box-shadow: inset 0 0 5px rgba(0, 0, 0, .4), 0 0 0px 5px rgba(0, 0, 0, .1);
        transition: all .5s;
    }

    .email {
        width: 70%;
        height: 70%;
        margin: 1% 0;
        padding-left: 10px;
        background: none;
        border: none;
        font-size: 20px;
    }

    input:focus {
        outline: none;
    }

    .button {
        width: 20%;
        height: 100%;
        float: right;
        border: none;
        border-radius: 0 50px 50px 0;
        font-size: 16px;
        background: red;
        background-color: #49afcd;
        background-image: linear-gradient(top, #5bc0de, #2f96b4);
        cursor: pointer;
        transition: all .5s;
    }

    .button:hover {
        background: #2f96b4;
        box-shadow: inset 0 1px 5px rgba(0, 0, 0, .3);
    }


    /*footer-follow us*/

    .follow {
        width: 100%;
        height: 100px;
        position: relative;
        overflow: hidden;
    }

    .followUs {
        width: 100%;
        height: 100%;
        position: absolute;
        bottom: 100%;
        line-height: 100px;
        text-align: center;
        font-size: 40px;
        transition: all .5s;
    }

    .socialIcons {
        width: 100%;
        height: 100px;
        position: relative;
        overflow: hidden;
    }

    .socialIcon {
        width: 33.33%;
        height: 100px;
        float: left;
        margin-top: 100px;
        font-size: 50px;
        line-height: 100px;
        transition: margin-top .5s, color .5s;
        cursor: pointer;
    }

    .socialIcon:hover {
        color: #49afcd;
        text-shadow: 0 0 20px white;
    }

    .twitter {
        transition-delay: .5s, 0;
    }

    .github {
        transition-delay: 1s, 0;
    }

    @media screen and (max-width:930px) {
        .subTexts p {
            font-size: 20px
        }
        .button {
            font-size: 12px
        }
    }

    @media screen and (max-width:600px) {
        .welcome,
        .subText,
        .sub {
            background: rgba(255, 255, 255, .3);
        }
        .welcome {
            border-radius: 20px 20px 0 0;
        }
        .subText {
            border-radius: 0 0 20px 20px;
        }
        .sub {
            border: 1px solid;
        }
        .greet {
            font-size: 30px
        }
        .subTexts p {
            font-size: 16px;
        }
        .button {
            font-size: 8px;
            margin-right: -3%
        }
    }
</style>
<script>

window.addEventListener('load', function() {
    var welcome = document.querySelector('.greet'),
        subtext = document.querySelector('.subTexts'),
        form = document.querySelector('.sub'),
        follow = document.querySelector('.followUs'),
        social = document.querySelectorAll('.socialIcon'),
        delay = 1000;


    setTimeout(function() { welcome.style.top = '0'; }, delay);
    setTimeout(function() { subtext.style.bottom = '0%'; }, delay * 2);
    setTimeout(function() { subtext.style.bottom = '-100%'; }, delay * 4);
    setTimeout(function() {form.style.opacity = '1';},delay * 5);
    setTimeout(function() { follow.style.bottom = '0%'; }, delay * 6);
    setTimeout(
        function() {
            social[0].style.marginTop = '0px';
            social[1].style.marginTop = '0px';
            social[2].style.marginTop = '0px';
        }, delay * 7
    );

});
</script>
</head>

<body>
    <div class="content">
        <div class="welcomeText">
            <div class="welcome">
                <h1 class="greet">Cosmic Journey - Explore the Universe</h1>
            </div>
            <div class="subText">
                <div class="subTexts">
                    <p class="subscribe">Subscribe to our newsletter</p>
                    <p class="soon">We are launching soon</p>
                </div>
            </div>
        </div>

        <div class="form">
            <form action="" class="sub">
                <input class='email' type="email">
                <button class="button" value="Send">Get Started</button>
            </form>
        </div>

        <div class="social">
            <div class="follow">
                <p class="followUs">Or follow us</p>
            </div>
            <div class="socialIcons">
                <div class="socialIcon facebook brandico-facebook-rect"></div>
                <div class="socialIcon  twitter brandico-twitter-bird"></div>
                <div class="socialIcon  github brandico-github"></div>
            </div>
        </div>
    </div>

    <script src="index.js"></script>
</body>

</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having trouble aligning text beside Bootstrap input field

I have a form using the Bootstrap framework where I want text on the left of every input to show its purpose. However, the text ends up above the input field like this: Current appearance of the form: https://i.sstatic.net/GUHcO.png <div class="contai ...

htmltwitter-bootstrapcssbootstrap-4

Updating scope within an iteration in AngularJS

I am currently facing an issue with updating subquestions for each question in the code below. Despite my efforts, the subquestions do not update properly and I end up with the same subquestion list for all questions. How can I display each question along ...

javascriptangularjsangularjs-scopeangularjs-digest

Why am I getting the error message "fromArray is not a function" in Three.js, Threex, and Javascript?

I've been putting in a lot of effort to figure this out on my own, but I'm completely new to three.js and javascript, and I really need some assistance. My goal is to import a model from threex into my three.js scene. However, when I try to add ...

javascriptthree.js

URL endpoint resource containing a parameter enclosed in parentheses for a RESTful API

For a current project I am tackling, the client has provided a specific HTTP POST command that needs to be integrated into the existing webserver built on a MEAN STACK. The request is as follows: ({{Host}}/Products('{{ProductId}}')/Data.Order). I ...

javascriptnode.jsresturl

Is there a way to repurpose a function to work with both ids and classes?

My current code is affecting all elements instead of just the intended one. I've experimented with classes and ids, ruling out those as potential issues. I'm hoping for my JavaScript to target only the selected element, not all of them. Check ou ...

javascriptjqueryhtmlcss

Creating a jQuery datatable with unique sorting and filtering functionality

I have implemented jquery datatables in my MVC4 application using a simple configuration. In fact, I included a small jquery snippet in my layout.cshtml file that automatically styles all tables in the application without any customization needed. $(".dat ...

javascriptjqueryasp.netdatatabledatatables

Determine if an element is being hovered over using jQuery

How do I determine if the cursor is hovering over an element using jQuery or JS? I attempted to use $('#id').is(':hover'), but it doesn't seem to be functioning as expected. It's worth mentioning that I am calling this line ...

javascriptjquery

How to dynamically increase vote tallies with React.js

The voting system code below is functioning well, displaying results upon page load. However, I am facing an issue where each user's vote needs to be updated whenever the Get Vote Count button is clicked. In the backend, there is a PHP code snippet ...

javascriptreactjs

Performing a certain task at consistent time intervals

setInterval(function(){ setTimeout(function(){ $('#a').addClass('x'); },1000); setTimeout(function(){ $('#a').removeClass('x'); },2000); },4000); I attempt ...

javascriptjquery

In the event that the property is not defined or does not exist

Looking for some assistance. I am working with an array of properties that I filter, but if a property is missing, the view does not render properly as it becomes undefined. I need to find a way to gracefully handle this situation by either ignoring it or ...

javascriptreactjsecmascript-6

Integrating the Disqus plugin for WordPress with JQuery Ajaxed content: A simple guide

After successfully implementing JQuery Ajax for dynamic content retrieval on my WordPress blog, I encountered an issue with the DISQUS plugin. It seems that the plugin no longer loads because the page is not refreshing. While I managed to make other smal ...

jqueryajaxwordpressdynamicdisqus

Occasion that fires prior to the DOM being fully loaded

Is there an event in my Firefox extension that triggers before DOMContentLoaded and allows me to insert HTML while the document is still available? ...

javascriptfirefoxfirefox-addonxul

Determine with jQuery whether a URL already contains a query string

When the site is loaded for the first time and a user selects a hospital location from the dropdown menu, the URL should have hos=somelocation as a query string parameter. If the URL already contains other query string parameters like then I need to chec ...

javascriptjquerystringurl

Node.js offers a variety of routing options and URL endpoints

app.use('/api', require('./api')); app.use('/', require('./cms')); The initial path is designated for my public API, while the latter is intended for the CMS dashboard. However, the setup is flawed as localhost:80/a ...

javascriptnode.jsexpress

The lineTo() function does not support passing in an array as its argument

My goal is to draw lines based on the coordinates provided in the array called points. However, I encountered an error when calling the method. Oddly enough, when I try to access a specific element using console.log(points[1][1]), it works perfectly. Can s ...

javascript

A guide on displaying data dynamically in Laravel with jQuery without the need for a page refresh

I am eager to fetch data from the database without having to reload the page. Currently, I am utilizing Laravel for this task and have been able to successfully retrieve the data using jQuery. Below is a snippet of my jQuery code: function fetchData() { ...

jquerylaravel

Using AJAX for uploading files upon a change event rather than upon submission

Below is the code I have been using to implement an iframe for ajax file upload without refreshing the page upon form submission. The current code works as expected. window.onload=init; function init() { document.getElementById('form').onsubmi ...

phpjavascriptajaxiframeonsubmit

Discover sections of the content that contain multiple sentences

Currently, I am in the process of incorporating an 'edit' button into a Django website using JavaScript. As someone who is newer to JavaScript, this task presents itself as quite challenging. Thankfully, in Django, splitting text into paragraphs ...

javascript

Using Jquery to increase input values in multiples on keyup event

Is there a way to ensure that an input element only accepts numbers in increments of 50? While we know we can use the step="50" attribute, is it possible to achieve this using the keyup event instead? I came across this code that restricts users from inp ...

javascriptjquery

Implementing AJAX and mySQL in jQuery Sortable

Hello, I have successfully implemented a sortable list on the backend of my website to manage categories. The list updates the database using an Ajax call without needing to reload the page. However, I am facing an issue where the order number displayed in ...

phpjquerymysqlajaxjquery-ui-sortable