Tribute project

HTML-CSS
1

This was a relatively painless project, but im sure the idea is i now play around with it.
it demands we give it a max-width of 100%, but i like they way 75% looks better. the image as is is just too BIG.

So i went back to the Rothko project and tried playing around with the edges, etc, but none of it is working ;(
I want to lose the border on the image entirely and have a “fade” effect.

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="tribute page" />

<link rel="stylesheet" href="styles.css" />
</head>
<body>
  <header>
    <h1> Gracie Brazilian Ju Jitsu</h1>
 </header>
 <main id="main"> 
   <title id="title"> Tribute Page</title>
   <div class="pic"id="img-div"><img id="image" src="https://www.jiujitsubrotherhood.com/cdn/shop/articles/The_Gracies_1296x.png?v=1579526849">
   <figcaption id="img-caption">Gracie Generations</figcaption></div>
<div id="tribute-info">
<h2>What is Brazilian Ju-Jitsu(BJJ)?</h2> 
<p>The gracie family took Japanese Judo and Ju-Jitsu and combined them to create a fighting system focused on the ground, using leverage and techique to nullify size and strength advantages.</p>
<h3> BJJ for the World</h3>
<p> The Gracies decided to show case their art to the world by staging "the ultimate fighter" in 1992. They choose royce, the smallest Gracie, to make a point. Royce won and the world went crazy for BJJ. 
<p> for more see <a target="_blank" id="tribute-link" href="https://en.wikipedia.org/wiki/Gracie_family">the Gracie Wiki</a></p>

CSS
img{
  display:block;
  max-width: 100%;
  height:auto;
}
pic{
  display:center;
  filter: blur(2px);
  box-shadow: 0 0 5px 5px 
}
2

I can see pic is a class but you didn’t target it properly in css

1 Like
3

To lose the border try:
img {
border: none;
}

For the fade effect try opacity

4

how should it have been targeted? this is so lame, your the only one to say anything. i asked a few questions. perhaps its time to give the oden project a try.

5

opacity lightened the img. border none had no effect

6

could you help me with something else? im getting no replies.

(i) I want to remove the border from the image completely. Instead, I want a “fade out” type of effect where the picture melts into the background. I’ve tried various rules from the Rothko project and none of them are working at all and i don’t know why.
(ii) I also want to resize it. when i use max-width of 75% i like it like that, but the project wants 100% so im not sure what they want 100%?
(iii) for the header i also want to remove the rigid border, id like to actually make it like a paint brush went across the text in a wave.
(iv) I want to insert 2 smaller pictures under the subheads, but im clueless how to resize and position them.
(v) i was able to line up the heading and paragraphs ok with margin, padding but now the link on the bottom is too close and i have no idea what to do about it?
(vi) I got tripped up using “h1, h2” because of the default sizes and it seemed complicated to change. even though we have been over this over and over, what would i want to use here instead of div? legend?
(vii) a:link is not responding to color change . I read on stack overflow its because th e link has been visited and i need to clear cache? if thats the case its fine.

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="tribute page" />

<link rel="stylesheet" href="styles.css" />
</head>
<body>
  <header>
    <h1> Gracie Brazilian Ju Jitsu</h1>
 </header>
 <main id="main"> 
   <title id="title"> Tribute Page</title>
   <div class="pic"id="img-div"><img id="image" src="https://www.jiujitsubrotherhood.com/cdn/shop/articles/The_Gracies_1296x.png?v=1579526849">
   <figcaption id="img-caption">Gracie Generations</figcaption></div>
<div id="tribute-info">
<h2>What is Brazilian Ju-Jitsu(BJJ)?</h2> 
<p>The gracie family took Japanese Judo and Ju-Jitsu and combined them to create a fighting system focused on the ground, using leverage and techique to nullify size and strength advantages.</p>
<h3> BJJ for the World</h3>
<p> The Gracies decided to show case their art to the world by staging "the ultimate fighter" in 1992. They choose royce, the smallest Gracie, to make a point. Royce won and the world went crazy for BJJ. 
<p> for more see <a target="_blank" id="tribute-link" href="https://en.wikipedia.org/wiki/Gracie_family">the Gracie Wiki</a></p>


img{
display:block;
max-width: 100%;
height:auto;
}
pic{
display:center;
filter: blur(2px);
box-shadow: 0 0 5px 5px
}
header{
background-color: grey;
}
body{
background-color: #1b1b32;
color: #f5f6f7;
font-family: Tahoma;
}
p{font-size: 16px;}
.par{
color: red;
margin: 20px 0 10px 0px;
}
h1{
font-family: cursive;
}

a:link {
text-decoration: none;
color: red;
}
a:hover {
color: hotpink;
}
7

@bmc

you have no border around image

what you have is shadow.
box-shadow makes it look like its a border. remove that and it will be fine.

also, code you posted you say that pic is class but you didnt make it a class in css, since it doesnt have dot in front.

8

project wants your picture to be 100% because that should be main image which is usually called COVER image , and it’s central for the topic.

here you can see example of a cover image use in blog article.

for you to practice you can take project into codepen or any other editor and change it however you want. and for you to pass the project, and get certification, just do whatever is required. this , I assure you, is great example of what client thinks is the best, and while it may not be so, they are paying, so you do it their way still.

(iv) I want to insert 2 smaller pictures under the subheads, but im clueless how to resize and position them.

by using class on them.
like
.img__small{height: width:}

9

Part of the HTML code is missing. Please post all your code.

  1. You can create an animation for it and put it on the image.
img {
  animation: fade 2s forwards;
}

@keyframes fade {
  100% {
    opacity: 0;
  }
}

  1. The test only cares about you setting the max-width correctly. You can still use width to make it 75%. Also pic is not a valid selector name, it is a class so it should be .pic

  2. What border? As for the style, are you talking about the background of the elements? You can use a background image with that texture. You might be able to find a CSS-only version with that type of texture but it seems a bit complex to create using CSS only.

  3. I need to see the full HTML.

  4. I need to see the full HTML.

  5. You can change the font size as needed. You definitely shouldn’t use a div instead of a heading element, they are semantically for completely different things.

  6. :link matches visited links, you can use :visited to style links that has been clicked.

10

I have moved the replies from your other thread to this one instead as they relate to this project and not your other question.

11

just forget it i guess. this will be the third time code camp did not “save” it. thought i downloaded but didnt because only half of it is there. idk. next…

12

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.