Issues with my custom website

Issa Aboudi · March 21, 2019

Hi y'all!

I've been working on a website for my High School development team. We made an app for the phone and I'm trying to build a website that looks nice from scratch (I know enough of what I'm doing to get by in HTML, but lets face it, HTML isn't that complicated once you get past the basics).

Anyways, I have a couple problems. Some came from the fact that I imported this website from weebly and Weebly fucked around with some of the stuff I'm trying to edit, such as the Div placements, but some of it arises from me just not formatting what I want correctly.

One problem from Weebly was this weird Gap between the Navbar and the banner.

It's attached to the <body> tag, and I want to get rid of it, so I can change the background colors without there being a weird row in that spot.

My other problem, one of my own creation was this:

I'm trying to put this row of social media icons at the very bottom of the page, but when I scroll down, it comes and interferes with this Div of text. I'll post the full code below:

HTML (Index.HTML only):

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

<title>TheFalconEye</title>


<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" href="favicon.ico">
    
<link rel="stylesheet" type="text/css" href="./styles.css">
<link id="wsite-base-style" rel="stylesheet" type="text/css" href="http://cdn2.editmysite.com/css/sites.css?buildTime=1234" />
    
<link rel="stylesheet" type="text/css" href="http://cdn2.editmysite.com/css/old/fancybox.css?1234" />
<link rel="stylesheet" type="text/css" href="http://cdn2.editmysite.com/css/social-icons.css?buildtime=1234" media="screen,projection" />
<link rel="stylesheet" type="text/css" href="files/main_style.css?1535247207" title="wsite-theme-css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="text/css" href="./bootstrap.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">

<link href='http://fonts.googleapis.com/css?family=Montserrat:400,700&subset=latin,latin-ext' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Montserrat:400,700&subset=latin,latin-ext' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Montserrat:400,700&subset=latin,latin-ext' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Montserrat:400,700&subset=latin,latin-ext' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Montserrat:400,700&subset=latin,latin-ext' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Montserrat:400,700&subset=latin,latin-ext' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic&subset=latin,latin-ext' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic&subset=latin,latin-ext' rel='stylesheet' type='text/css' />

</head>
<body class="header-page wsite-theme-light">
<!--NavBar-->
<nav class="navbar navbar-default" role="navigation"> 
    <div class="navbar-header">
        <h4 class="navbar-brand" href="#" style="font-size:30px; padding-top:20px; padd"><font face="Impact">FalconEye</font></h4>
        <ul class="nav nav-pills" style='margin-left: 50px;'>
            <li><a href="/index.html" style="font-size: 15px;"><b>Home</b></a></li>
            <li class="active"><a href="#" style="font-size:15px;"><b>About</b></a></li>
            <li><a href="/design.html" style="font-size:15px;"><b>Design</b></a></li>
            <li><a href="/contact.html" style="font-size:15px;"><b>Contact</b></a></li>
        </ul>
    </div>
</nav>
<!--Title Section-->    
<div>
 <div class="banner-wrap">
    <div class="wsite-elements wsite-not-footer wsite-header-elements">
	   <div class="wsite-section-wrap">
	   <div  class="wsite-section wsite-header-section wsite-section-bg-color" style="height: 300px;vertical-align:bottom; background-image:none; background-color:#1e2330" >
		  <div class="wsite-section-content">
			
            <div class="container">
                <div class="banner">
				    <div class="wsite-section-elements">
				    <div>
                        <div id="517607031102497931" align="inherit" style="width: 100%;" class="wcustomhtml">
                        </div>
                        <h5 class="Title" style="font-family:Monsterrat; font-size: 90px;"><strong>About the App</strong></h5>
                    </div>
				    </div>
			 </div>
            </div>
		  </div>
	   </div>
        </div>
     </div>
    </div>
</div>
<!--Upper Body Page-->
<div class="wsite-section-wrap">
    <div class="wsite-section wsite-body-section wsite-background-2">
        <div>
            <p id="Home-Text" style="font-family: Montserrat; font-size: 38px;"><strong>Purpose</strong></p>
        </div>
        <div class="wsite-section-content">
            <div class="container">
                <div>
                   
                    <p style="font-size:30px; text-align: left; width: 90%; margin-left: auto; margin-right: auto;">&nbsp;&nbsp;&nbsp;&nbsp;As Upper Classmen at Foothill High School in Pleasanton, We at FalconEye wanted to improve the campus navigation experience on campus for the incoming Freshmen as well as parents who don't visit the campus often.</p>
                    
                    <p id="Home-Text" style="font-family: Montserrat; font-size: 38px;"><strong>Design process</strong></p>
                    <p style="font-size:30px; text-align: left; width: 90%; margin-left: auto; margin-right: auto;">We began our App by designing each of the individual buildings that exist on campus using a software called Blender. We then proceeded to connect those buildings to form our campus through another software called Unity, which we used to begin coding as well</p>
                </div>
            </div>
        </div>
    </div>
</div>
<!--Lower Body Page-->
<div class="wsite-section-wrap">
    <div class="wsite-section wsite-body-section wsite-background-2">
    
    </div>
</div>
</body>
<footer style="position:absolute; bottom: 0; width: 100%; background-color: white; margin-left: auto; margin-right:auto; text-align: center;">
    <span class="wsite-social wsite-social-default" style="height: 20px;">
        <a class="first-child wsite-social-item wsite-social-facebook" href="https://www.facebook.com/groups/257253958398054/" target="_blank" alt-text="Facebook"><span class="wsite-social-item-inner"></span></a>
        <a class="last-child wsite-social-item wsite-social-twitter" href="https://twitter.com/FalconE28081393" target="_blank" alt-text="Twitter"><span class="wsite-social-item-inner"></span></a>
        <a class="first-child wsite-social-item wsite-social-instagram" href="#" target="_blank" alt-text="Instagram"><span class="wsite-social-item-inner"></span></a>
    </span>
</footer>
</html>

CSS (Linked to all the pages ATM, will change that later):

li a {
    color:black;
}

.navbar-default {
    position: absolute;
    width: 100%;
    left: 0;
    text-align: center;
    align-content: center;
    margin:0 auto;
}

.nav nav-tabs {
    float: right;
    align-content: center;
    display: inline-block;
}
.navbar .navbar-header{
        float:none;
        display:inline-block;
        vertical-align: top;
    }
.navbar-brand {
  position: absolute;
  width: 100%;
  left: 0;
  text-align: left;
}
.Button1 {
    background-color:white;
    color:black;
    border-radius: 5px;
    border: 2px solid gold;
}
.Button2 {
    background-color:white;
    color:black;
    border-radius: 5px;
    border: 2px solid gold;
}

#Home-Text {
    text-align: center;
    font-size: 20px;

}

Really appreciate anything you guys could do for me

Also, I know there's probably a lot of unnecessary lines of code from the Weebly import. I have yet to sit down and sift through all the code to weed out and simplify the code. I've also been lazy and wrote the styling inside the HTML code instead of using the styling sheet, I'm planning to go back and make it all picture perfect when I have time. Don't get the pitchforks please

~Matthew Aboudi

Neftex · March 21, 2019

maybe you can use element picker in browser to see which element you need to edit

LogicalDrm · March 21, 2019

You should start by cleaning the code. Both those elements have references to some class and style that look like they are from the import. Start with those. One has some padding or border issued, other has floating thing going on.