Jump to content

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>

 

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">

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...