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;
}