CODEWITHSUNDEEP
javascripthtmlcss
Tania Sharma
Tania Sharma

Reputation: 3

I am having issues with Brackets trying to implement css, html Not able to achieve Image 1?

enter image description here

enter image description here

I am trying to achieve, image 1 with my code, But some how I am getting image 2. Although I have separate classes for my paragraphs, the colour and font size is not changing. Does someone know why this may be?

index.html file:

<!DOCTYPE html>
<html>

 <!-- Link HTML to stylesheet-->
 <link href="taniaWebsite.css" type="text/css" rel="Stylesheet" />
  <body class="mainpage">


 <h1 class="title">Project 180 Websites</h1>  

<p class="intro"> 
Hey my name is Tania and I suck at web development so I am going to make 180 websites until I am better... <br>
<br>
This is the first one. I will list the other ones below this one.
<br>
<br>
You can follow the project here and on the <a href="http://project180websites.tumblr.com" target="_blank">blog.</a>   
</p>   

<!-- Line decoration -->
<hr class="line">

 <li><a href="website2.html"> <p class="days"> Website 2 -  </p></a> </li>

 <li><a href="index.html">  <p class="days">Website 1 - Homepage</p></a></li>

css. file: 

.eyes{
position: absolute;
top: 50%;
transform: translate(-50);
width: 100%;
text-align: center;
}

.eye{
width:240px; 
height: 120px; 
background: #fff;
display: inline-block;
margin: 40px; 
border-radius: 50%;
position: relative; 
overflow:hidden;  
}

.ball{
width: 40px;
height: 40px;
background: #000;
position: absolute; 
top: 50%;
left: 50%; 
transform: translate(-50%, -50%);
border-radius: 50%; 
border:15px solid #333;
}

body.mainpage {
box-shadow: 0 0 2px rgba(0, 0, 0, 0.06);
color: #545454;
margin: 0 auto;
max-width: 800px;
padding: 2em 2em 4em;
background-color:white; 
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

}

body.website2{
background-color:rosybrown;

}

.container{
text-align: center;
position:absolute;
top: 50%;
left:50%;
transform: translate(-50%, -50%);
width:100%;
}
.container span{

text-transform:uppercase;
display:block;
}

.text1{
color:white;
font-size:60px;
font-weight:700;
letter-spacing: 8px;
margin-bottom:20px;
position:relative;
animation: text 3s 1; 
}

.text2{
font-size:30px;
color:indianred;
}

@keyframes text{
 0% {
color:darkgray;
margin-bottom: -40px; 
}

20%{
letter-spacing:25px; 
margin-bottom:-40px; 

} 
75%{
    letter-spacing:8px; 
    margin-bottom: -40px; 
}

.line {
margin-top: 1vw;

}

h1{
color: rgb(45);
text-align: left;
font-weight: 500;
font-size: 2em;
}

p.intro {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 16.5px;
line-height: 1.5;
}

p.days {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 12px;
line-height: 1.5;
color:darksalmon;
}

li {
list-style-type: none;  
}

a:hover, a:visited, a:link, a:active {
text-decoration: none; }

I have two html documents for this project, but I have having issues with the index.html page. Something in my style sheet isn't responding to the html doc. I have trying to do a 180 Website challenge and some guidance or help would be greatly appreciated!!

Upvotes: 0

Views: 881

Answers (2)

Spangle
Spangle

Reputation: 822

You are missing a closing bracket on your keyframe

75%{
    letter-spacing:8px; 
    margin-bottom: -40px; 
  }
} <== you are missing this closing bracket.

I made that change and it fixed your issue.

enter image description here

Upvotes: 0

Nawed Khan
Nawed Khan

Reputation: 4401

Give the A tags a class, like 'a-days' like this...

<li><a href="website2.html" class="a-days"><p class="days">Website 2 -  </p></a></li>

and then define their color like this 

a.a-days:hover, a.a-days:visited, a.a-days:link, a.a-days:active {
   color:darksalmon;
}

also you should enclose the LI tags inside a UL (unOrdered list) or OL (Ordered list) tag. And to hide the bullet the list-style-type applies to OL and not LI

ul {
  list-style-type: none;
}

Lastly... your @keyframe style is missing a closing bracket that is why no matter what you do after it does not work.

Here is a working JSfiddle example

Upvotes: 1

Related Questions