instead of a plan box for a header, how can i , say , make it look like a paint brush went over it? I want to lose the rigid lines, as well as with the picture.
I want to include smaller pictures under the 2 sections, but im not sure how to do that and justify them to the right.
why wont my link respond to the color red?
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?
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?
any other suggestions or info would be appreciated! I know I should spend more time on this but I’m just not recalling the stuff I need to. But its coming along!
<!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">
<div class="par">What is Brazilian Ju-Jitsu(BJJ)?</div>
<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>
<div class="par"> BJJ for the World</div>
<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;
}