Jump to content
bartonlewis

elements not appearing on page

Recommended Posts

I have some social nav's at the bottom of my page in the footer which are not appearing.  On another page with almost identical css the nav's appear.  I can't detect the difference in the 2 pages except one is controlled by an external style sheet (where it's not working properly) and the other the css is inside the html document.  I've pasted the relevant html and css below.  Can anyone tell me why the facebook and instagram nav's don't appear?  Thank you.

<!DOCTYPE html>
<html>
<head><link rel="stylesheet" type="text/css" href="mystyle.css">
<script src="https://use.typekit.net/qkv6kzb.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>
    <script src="https://use.typekit.net/qkv6kzb.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>
    <meta charset="UTF-8">
<title>Barton Lewis - photography - wall cuts</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
body {
    font-family: "europa",sans-serif;
    margin: 0;
}
.parallax { 
    /* The image used */
    background-image: url("http://bartonlewisfilm.com/img_bckgd_windows_7283_1920-3.jpg");
 
    /* Set a specific height */
    height: auto; 

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: repeat;
    background-size: cover;
    
    padding-bottom: 1%;
}
h1 {
    font-family: "europa",sans-serif;
    font-size: 3.6em;
    letter-spacing: .3em;
    text-align: center;
    color: black;
    padding: 5% 0;
    padding-top: 7%;
    }
h2  {
    font-family: "europa",sans-serif;
    font-size: 2.8em;
    color: black;
    letter-spacing: .2em;
    text-align: center;
    padding-bottom: 5%;    
    }
h3 {
    font-family: "europa",sans-serif;
    font-size: 2.2em;
    color: black;
    letter-spacing: 1.5px;
    text-align: center;
    padding-bottom: 1%;
    }
h4 {
    font-family: "europa",sans-serif;
    font-size: 2em;
    color: black;
    letter-spacing: 1.5px;
    text-align: center;
    padding-bottom: 1%;
    }
.flex-container {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    margin: 0 50px 50px 50px;
    padding-bottom: 30px;
    align-items: center;
    justify-content: center;  
    font-family: "europa",sans-serif;
    font-size: 105%;
    }
.nav {
    margin: 0 30px;
    }
a   {
    text-decoration: none;
    color: black;
    }
div.nav a {
    font-size: 1.8em;
    }
.category {
    margin: 7% 0;   
    }
.container {
    margin: 0 auto;
    }
.container p {
    font-size: 1.6em;
    margin: 10% 30%;
    line-height: 125%;
    }
.wallcut {
    margin: 6% auto 10%;
    }
div.wallcut p {
    text-align: center;
    font-size: 1.6em;
    margin: 4% auto 5%;
    }
.underline {
    text-decoration: underline;
    font-variant: small-caps;
    }
a:hover {
    text-decoration: underline;
}
img {
  vertical-align: middle;
}
.center_width {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 58%;
}
p.return {
    font-size: 2em;
    }
footer {
    background: #827e90;
    height: 75px;
    margin-top: 5%;
    }
footer p {
    padding: 25px;
    font-family: "europa",sans-serif;
    font-size: 100%;
    letter-spacing: .8px;
    color: white;
    }
.flex-container-footer {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    padding-top: 0px;
    justify-content: space-between;
    align-items: center;
    }
.flex-container-footer>div {
    margin: 0px 50px;
}
.social a {
    color: white;
    }
.fa {
    padding: 10px;
    font-size: ;
    text-align: center;
    text-decoration: none;
    border-radius: 50%;
}
.copyright p {
    font-family: "europa",sans-serif;
    color: black;
    font-size: 80%;
    letter-spacing: .8px;
    line-height: 135%;
    font-weight: 500;        
    }
   
    </style>
</head>
<body>
    
<div class="parallax">
    <h1 style="text-align:center">Barton Lewis</h1>
    <h2 style="text-align:center">wall cuts</h2>
<section class="flex-container">
    <div class="nav"><a href="index.html" title="home">home</a></div>
    <div class="nav"><a href="bartons_film_site_works.html" title="works">works</a></div>
    <div class="nav"><a href="bartons_film_site_bio.html" title="bio">bio</a></div>
    <div class="nav"><a href="bartons_film_site_cv.html" title="c/v">c/v</a></div>        
    <div class="nav"><a href="bartons_film_site_contact.html" title="contact">contact</a></div>
</section>
        </div>
    
<div class="category">
    <h3 style="text-align:center">Blacks</h3>
        </div>  
    
<div class="container">
        <div class="wallcut">
            <img src="img_287-135.jpg" alt="287-135, Flushing Ave., IND Crosstown Line"  class="center_width">
                <p>287-135, Flushing Ave., IND Crosstown Line</p>
                    </div> 
    </div>

        <p class="return" style="text-align:center"><a href="photography.html">Back</a> to main wall cuts page.</p>

    <footer>
    <div class="flex-container-footer">
        <div>
            <p>copyright © 2018 by Barton Lewis</p>
        </div>
        <div class="social">
            <a href="https://www.facebook.com/profile.php?id=1410465690" class="fa fa-facebook"></a>
            <a href="https://www.instagram.com/bartonlewis2328/" class="fa fa-instagram"></a>
        </div>
    </div>
    </footer>
    
<script>

</script>
    
</body>
</html>

 

Share this post


Link to post
Share on other sites

Hi! It seems that you aren't linking Font Awesome CSS with your HTML. Just copy-paste Font Awesome CDN CSS link before your CSS link, and it should be fine. 
CDN: <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet">

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×