Final project

Hello,
Why my about.page doesn’t respond to css properties?

/*Main html*/

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="Stylef.css">
    <link href='<link href="https://fonts.googleapis.com/css?family=Playfair+Display" rel="stylesheet">' rel='stylesheet' type='text/css'>



 <!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="Stylef.css">
    <link href='<link href="https://fonts.googleapis.com/css?family=Playfair+Display" rel="stylesheet">' rel='stylesheet' type='text/css'>
      
      
  </head>
  <body>
<div>
    <div class="header">
      <div class="container">
        <div class="pull-right">
       <ul class="nav nav-pills">
            <li role="presentation"><a href="#">Home</a></li>
           <li role="presentation"><a href="About.html">About</a></li>
           <li role="presentation"><a href="#">Projects</a></li>
           <li role="presentation" class="active"><a href="#">Top Stories</a></li>
         	<li role="presentation"><a href="#">Sites we read</a></li>
           </ul>
             <div class="col-md-8 pull-left">
            <h2 id="name"> Me </h2>
          </div>
      </div>
      </div>
    </div>
    </div>
    
    

    
    <div class="jumbotron">
      <div class="container">
        <div class="row">
            <div class="col-md-8">
        <h1>I'm a Greece based front-end web developer building websites </h1>
      </div>
    </div>
    </div>
    </div>
    <div class="projects">
      <div class="container">
        <h1>My Projects</h1>
          `<div class="col-md-4">
            <a href="#"><img class="screen" src="Project screenshots/screenshot-www.codecademy.com-2017-05-24-11-06-13.png"></a>
            <a href="#"><img class="screen" src="Project screenshots/screenshot-www.codecademy.com-2017-05-24-11-09-05.png"></a>
            <a href="#"><img class="screen" src="Project screenshots/screenshot-www.codecademy.com-2017-05-24-11-10-04.png"></a>
          </div>
          
          `<div class="col-md-4">
            <a href="#"><img class="screen" src="Project screenshots/screenshot-www.codecademy.com-2017-05-24-11-10-59.png"></a>
            <a href="#"><img class="screen" src="Project screenshots/screenshot-www.codecademy.com-2017-05-24-11-16-59.png"></a>
            <a href="#"><img class="screen" src="Project screenshots/screenshot-www.codecademy.com-2017-05-24-11-17-54.png"></a>
          </div>
          
          `<div class="col-md-4">
            <a href="#"><img class="screen" src="Project screenshots/screenshot-www.codecademy.com-2017-05-24-11-19-06.png"></a>
            <a href="#"><img class="screen" src="Project screenshots/screenshot-www.codecademy.com-2017-05-24-11-19-39.png"></a>
            <a href="#"><img class="screen" src="Project screenshots/screenshot-www.codecademy.com-2017-05-24-11-20-09.png"></a>
          </div>
          </div>           
          </div>
    
    
      </div>
    <div class="footer">
      <div class="container">
        <div class="row">
         <div class="pull-left col-md-4">
            <a href="#"><img src="https://s3.amazonaws.com/codecademy-content/projects/headlines/email.svg"></a>
<a href="#"><img src="https://s3.amazonaws.com/codecademy-content/projects/headlines/fb.svg"></a><a href="#">
          </div>
        </div>
          <div>
        </div>
    </div>
    </div>
  </body>
</html>
/*About page*/
<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="Stylef.css">
    <link href='<link href="https://fonts.googleapis.com/css?family=Playfair+Display" rel="stylesheet">' rel='stylesheet' type='text/css'>

  </head>
  <body>
<div>
    <p class="about1">I was born in Greece and i'm a new at the web development world.
    I learn front-end web development by CodeAcademy</p>
      </div>
      
    </body>
</html>
/*Css file*/

html, body {
  margin: 0;
  padding: 0;
  font-family: 'Playfair Display', serif;
}

*{
}
/*header*/
.header{
background: linear-gradient(white, #1b61e4);height: 150px;
padding:0;
display: block;
overflow: hidden;
border: 1px black dashed;
}

#name{
    color:white;
    text-shadow: 2px 2px black;
    display: inline-block;
}

.header .container h2{
position: relative;
margin-left:50px;
text-shadow: 2px 2px grey;
font-size: 300%;
top:-20px;
}

/*Menu*/

.nav-pills li a{
  color:darkred;
  font-size: 120%;
  text-decoration: none;
}

.nav-pills li:hover{
 background-color: blue;
}

.nav-pills li{
    font-weight: bolder;
    display:inline;
    text-decoration: none;
    position:relative;
    right:-400px;
    top:60px;
    border: 5px solid darkred;
    border-radius: 20px;
    padding: 10px;
    background-color:white;
}

.nav-pills .li .about1{
color:red;
    }



/*Jumbotron*/
.jumbotron {
  background:url("https://wallpaperscraft.com/image/blue_sea_ship_sky_248_1920x1080.jpg");
  background-repeat:repeat-x;
  background-size:50%;
  height: 500px;
  background-position:cover;
  display: block;
  overflow: hidden;
  width:2500px;
}

.jumbotron .container h1{
 font-size:220%;
 color:white;
 width:450px;
 height: 100px;
 position: relative;
 text-shadow: 1px 1px white;
 left:-500px;
 top:30px;
 text-shadow: 3px 3px black;
 border:10px solid;
 padding:35px;
 border-color:darkred;
 border-radius: 30%;
}


.container {
  max-width: 980px;
  margin: 0 auto;
}

/*Project screenshots*/

.projects{
  text-align:center;
  background: -webkit-linear-gradient(top, rgba(225,255,255,1) 0%,rgba(225,255,255,1) 7%,rgba(225,255,255,1) 12%,rgba(253,255,255,1) 12%,rgba(230,248,253,1) 30%,rgba(190,228,248,1) 75%,rgba(200,238,251,1) 100%,rgba(177,216,245,1) 100%); 
  size:auto;
}

.projects .container h1{
border: 1px solid black;
width: 550px;
position: relative;
right: -100px;
top: 20px;
text-shadow: 20px black; 
 margin-top: 0px;
}

.screen{
 width:240px;
 height:240px;
 padding:20px;
 border-radius:30%;
}

/*footer*/

.footer{
  background: -webkit-linear-gradient(top, #f0f9ff 22%,#cbebff 50%,#cbebff 50%,#a1dbff 76%);
  color:black;
  height: auto;
}

.footer .container{
  height: auto;
  text-align: center; 
  size:auto;
}
.footer img{
  height:50px;
  width:50px;
  margin-bottom: 70px;
  border: 10px solid white;
  padding: 10px;
  background-color:grey;
    

.footer a{
  padding:5px;
  position:relative;
  bottom:-0px;
  padding: 10px;
 text-align: center;
}

.footer a:hover{
text-decoration:underline;  
}

your stylesheet is called Stylef.css with uppercase first letter uppercase?

your second <link> is faulty

i think i’m missing something. It seems the same to me.

<link href='<link href="https://fonts.googleapis.com/css?family=Playfair+Display" rel="stylesheet">' rel='stylesheet' type='text/css'>

should be:

<link href="https://fonts.googleapis.com/css?family=Playfair+Display" rel="stylesheet">

you can’t nest a link in a link, is your css file in the right directory and right name?

2 Likes