Ok so, I've gone through maybe 20 different stackexchange answers to each of these problems, and I still can't solve it, so it's about time I ask and hopefully somebody can point me out of these woods:
I am making a simple website, and I wanted to make like an overlay screen that contains a loading/progress bar, and just progresses over the course of 3 seconds at most before it fades away and reveals the site. I also wanted to add a logo in the middle of it just above the bar. I looked at some video in arabic, but it got out of hand sort of, I didn't know what he was saying, but I thought I could try his code and modify it, but that didn't work either.
Also, I've got a jumbotron in the code I call jumbotronTwo, and basically what it is supposed to do is that when you click the menu icon and the dropdown menu appears, you click on one of the options, and then the menu should scroll back and the jumbotron should appear. So far I've just been able to make the jumbotron itself and color it, resize it, fill it with text etc., I tried using some javascript and jquery to make it appear and disappear onclick, but none seemed to work, i'm starting to think maybe it has to do with what libraries I've got?
I have no idea what could be trumping it, so I need somebody to take a look at the code.
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset=utf-8>
<title>Twenty Eight Interiors</title>
<meta name=description content=Wiredwiki App>
<!-- Latest compiled and minified CSS -->
<link rel=stylesheet href=https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css>
<!-- Optional theme -->
<link rel=stylesheet href=https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css>
</head>
I think these up here are important to show, in case I forgot some library or something so you can point it out. I've got some CSS as well but cut it out, if you need to see it too I can show it. Here's the meat and potatoes:
<body>
<!-- jumbotron-->
<div class=jumbotron id=jumbotronOne>
<div class=container text-center>
<img src=Untitled.png>
</div>
</div>
<!-- Navbar -->
<nav class=navbar navbar-inverse id=my-navbar style=font-family:Webdings;>
<div class=container>
<div class=navbar-header id=oneDiv>
<button type=button class=navbar-toggle data-toggle=collapse data-target=#navbar-collapse id=iconButton>
<span class=glyphicon glyphicon-menu-hamburger></span>
</button>
<a href= class=navbar-brand><font color=white>MENU</font></a>
</div><!-- Navbar Header -->
<div class=collapse navbar-collapse id=navbar-collapse align=center>
<ul class=nav navbar-nav id=firstOne>
<li><a href=# id=designProcess role=button>Design Process</a></li>
<li><a href=# id=profile>Profile</a></li>
<li><a href=# id=contactInfo>Contact Info</a></li>
</ul>
<ul class=list-inline id=secondOne>
<li><a href=# class=socialicon><img src=facebook.png hspace=30></a></li>
<li><a href=# class=socialicon><img src=twitter.png hspace=30></a></li>
<li><a href=# class=socialicon><img src=instagram.png hspace=30></a></li>
</ul>
</div>
</div><!-- End Container img src=twitter.png-->
</nav><!-- End navbar -->
<div class=jumbotron id=jumbotronTwo>
<div class=container>
<h2>Headline goes here in one, two or three lines like this</h1>
<p>...</p>
</div>
</div>
<script src=https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js></script>
<script src=https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js></script>
<!-- Latest compiled and minified JavaScript -->
<script src=https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js></script>
</body>
</html>
I even had problems with making the javascript work for the glyphicon, I want it to change when I click it, and again; i have no idea what I'm doing wrong, tried lots of potential solutions from stackexchange, but this too seems to point to that it's something else.
Thanks in advance
