get help in general - we have more specialized help rooms here: https://gitter.im/FreeCodeCamp/home
@Manish-Giri
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
.red-text {
color: red;
}
h2 {
font-family: Lobster, Monospace;
}
p {
font-size: 16px;
font-family: Monospace;
}
</style>
<h2 class="red-text">CatPhotoApp</h2>
<img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back. ">
<p class="red-text">Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
<p class="red-text">Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
<h3 class="text-primary text-center">jQuery Playground</h3>
<div class="row"></div>
</div>
im having issues, id says add a div element below h3
.smaller-image
width: 100px;
under the current <style>
{ and } for this part .smaller-image
width: 100px;larger-image class, using the { and }
smaller-image class to the existing img element in HTML, you'd need the class keyword for this.
@Manish-Giri ok here is what I just did
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
.red-text {
color: red;
}
h2 {
font-family: Lobster, Monospace;
}
p {
font-size: 16px;
font-family: Monospace;
}
.smaller-image {
width: 100px;
}
</style>
row class here:<div class="container-fluid row">
kbran1230 sends brownie points to @manish-giri :sparkles: :thumbsup: :sparkles:
:star2: 4057 | @manish-giri |http://www.freecodecamp.com/manish-giri
```
$("h2").addClass("animated bounce");
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
.red-text {
color: red;
}
h2 {
font-family: Lobster, Monospace;
}
p {
font-size: 16px;
font-family: Monospace;
}
.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 10px;
}
.smaller-image {
width: 100px;
border-radius: 10px;
}
</style>
<h2 class="red-text">CatPhotoApp</h2>
<img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back. ">
<p class="red-text">Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
<p class="red-text">Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
Hi, I have been at Use the Bootstrap Grid to Put Elements Side By Side for hours, can I get some help? here is my code: <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
.red-text {
color: red;
}
h2 {
font-family: Lobster, Monospace;
}
p {
font-size: 16px;
font-family: Monospace;
}
.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}
.smaller-image {
width: 100px;
}
</style>
<div class="container-fluid">
<h2 class="red-text text-center">CatPhotoApp</h2>
<p>Click here for <a href="#">cat photos</a>.</p>
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back. "></a>
<img src="https://bit.ly/fcc-running-cats" class="img-responsive" alt="Three kittens running towards the camera. ">
<div class="row"><button class="btn btn-block btn-primary">Like</button><button class="btn btn-block btn-info">Info</button><button class="btn btn-block btn-delete">Delete</button></div>
<p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
<form action="/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
<label><input type="checkbox" name="personality"> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Crazy</label>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</div>
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
.red-text {
color: red;
}
h2 {
font-family: Lobster, Monospace;
}
p {
font-size: 16px;
font-family: Monospace;
}
</style>
<h2 class="red-text">CatPhotoApp</h2>
<img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back. ">
<p class="red-text">Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
<p class="red-text">Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
sadhr sends brownie points to @manish-giri :sparkles: :thumbsup: :sparkles:
:star2: 4058 | @manish-giri |http://www.freecodecamp.com/manish-giri
color: red;
}
dxhunt sends brownie points to @captainroberts :sparkles: :thumbsup: :sparkles:
:cookie: 126 | @captainroberts |http://www.freecodecamp.com/captainroberts
<button class="boing">Test</button>
$(".boing").addClass("animated bounce");<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
.red-text {
color: red;
}
h2 {
font-family: Lobster, Monospace;
}
p {
font-size: 16px;
font-family: Monospace;
}
.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 10%;
}
.smaller-image {
width: 100px;
}
</style>
<h2 class="red-text">CatPhotoApp</h2>
<img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back. ">
<p class="red-text">Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
<p class="red-text">Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
border-radius: 10%;
px or %?
%, you probably need 50%
<script>
$(document).ready(function() {
$(".BUTTON").addClass("animated bounce");
});
</script>
<button class="btn btn-primary" id="button">BUTTON </button>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Julius Robinson| Front End Deveoper</title>
<link href="https://fonts.googleapis.com/css?family=Lobster+Two" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lora" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-12 col-lg-12 head-banner">
<header id="head-banner">
<h3>Julius Robinson | <small style="color: #fff;">Front-End Developer</small></h3>
</header>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-md-12 col-lg-12">
<h1 style="margin: 20px 0 40px 0;"></h1>
</div>
</div>
</div>
<div class="row" id="about-me">
<div class="col-xs-12 col-md-12 col-lg-12">
<h2 class="about">About Me</h2>
<button class="btn btn-primary" id="button">BUTTON </button>
<p>I am a Junior Front End Developer with the following skills:</p>
<ul>
<li>HTML5</li>
<li>CSS3/ Bootstrap</li>
<li>Responsive Web Design</li>
<li>JavaScript/ jQuery</li>
<!--li>PHP</li-->
</ul>
<p>
What I have to offer is a friendly, team oriented, attitude. I am<br> a confident goal setter who is not afraid to tackle any challange<br> or task. I am familiar with git and github, and am available to<br> work remotely.
</p>
</div>
</div>
<hr>
<div class="row" id="images">
<div class="col-xs-12 col-md-12 col-lg-12">
<h2>Portfolio</h2>
<p>Here is a display of the work I have done so far.</p>
</div>
<div class="col-xs-12 col-md-6 col-lg-4">
<a href="http://blackmajestyart.site/" target="_blank"><img src="imgs/bma.png"></a><p>My first project. I constructed this website for an art client. Click the image above to sample the website.</p>
</div>
<div class="col-xs-12 col-md-6 col-lg-4">
<a href="imgs/pagelayout.png" target="_blank"><img src="imgs/pagelayout.png"></a><p>This is an image of a front page that I desgned for a different client. It is a register page for a social media mockup.</p>
</div>
<div class="col-xs-12 col-md-6 col-lg-4">
<img src="imgs/coming.jpg"><p>COMING SOON.<br/> Reserved spot for next client.</p>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-md-12 col-lg-12">
<hr>
<footer>
<p>I am available any time of day. My preferred method of contact<br> is email. I do accept text messages and phone calls. </p>
<nav>
<details>
<summary>Contact</summary>
<ul>
<li><a href="mailto:julius.robinson95@yahoo.com">Email</a></li>
<li><a href="tel:3187874196">Phone (318)-787-4196</a></li>
<li><a href="https://github.com/Julius-R" target="_blank">GitHub</a></li>
<li><a href="https://www.linkedin.com/in/julius-robinson-495103110?trk=hp-identity-photo" target="_blank">LinkedIn</a></li>
</ul>
</details>
</nav>
<p id="foot">© Julius Robinson 2017</p>
</footer>
</div>
</div>
</div>
<script src="js/jquery.js"></script>
<script src="js/main.js"></script>
<script>
$(document).ready(function() {
$("#button").addClass("animated bounce");
});
</script>
</body>
</html>jheights sends brownie points to @captainroberts :sparkles: :thumbsup: :sparkles:
:cookie: 127 | @captainroberts |http://www.freecodecamp.com/captainroberts
<div>
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
.red-text {
color: red;
}
h2 {
font-family: Lobster, Monospace;
}
p {
font-size: 16px;
font-family: Monospace;
}
.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}
.smaller-image {
width: 100px;
}
</style>
<h2 class="red-text">CatPhotoApp</h2>
<p>Click here for <a href="#">cat photos</a>.</p>
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back. "></a>
<p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
<form action="/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
<label><input type="checkbox" name="personality"> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Crazy</label>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</div>
meta script and style cant be in a div
</style>
<div class="container-fluid">
<div>
<h2 class="red-text">CatPhotoApp</h2>
<div class="container-fluid"> ?
<div class="container-fluid"> under style tags then close the div at the end of all your code
<div> right under <div class="container-fluid">
Each of your two radio button elements should be nested in its own label element.
Make sure each of your label elements has a closing tag.
One of your radio buttons should have the label indoor.
One of your radio buttons should have the label outdoor.
<input type="radio" name="indoor-outdoor">indoor
</lable>
<lable>
<input type="radio"name="indoor-outdoor">outdoor
</lable>
lable
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
.red-text {
color: red;
}
h2 {
font-family: Lobster, Monospace;
}
p {
font-size: 16px;
font-family: Monospace;
}
.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}
.smaller-image {
width: 100px;
}
</style>
<div class="container-fluid">
<h2 class="red-text">CatPhotoApp</h2>
<p>Click here for <a href="#">cat photos</a>.</p>
<a href="#"><img class="smaller-image thick-green-border" alt="A cute orange cat lying on its back. " src="https://bit.ly/fcc-relaxing-cat"></a>
<p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
<form action="/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
<label><input type="checkbox" name="personality" checked> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Energetic</label>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</div>
davisaaron03 sends brownie points to @dorcy-ndg3 :sparkles: :thumbsup: :sparkles:
:cookie: 514 | @dorcy-ndg3 |http://www.freecodecamp.com/dorcy-ndg3
@CaptainRoberts I succesfully added the class "smaller-image" to the img element, but it's telling me my image isn't 100 pixels. This is what I put in the class:
img {"smaller-image" {width: 100px;}}
@Dorcy-ndg3 like this?:
<img "smaller-image" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back. ">
input tags
jheights sends brownie points to @dorcy-ndg3 :sparkles: :thumbsup: :sparkles:
:cookie: 515 | @dorcy-ndg3 |http://www.freecodecamp.com/dorcy-ndg3
img a class yet?
Okay. This is what gives me one out of two checks green:
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
img "smaller-image" {width: 100px;}
.red-text {
color: red;
}
h2 {
font-family: Lobster, Monospace;
}
p {
font-size: 16px;
font-family: Monospace;
}
</style>
<h2 class="red-text">CatPhotoApp</h2>
<img class="smaller-image" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back. ">
<p class="red-text">Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
<p class="red-text">Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
img "smaller-image" {width: 100px;}
smaller-image{width: 100px;} but since smaller-image is a class.. u add a dot before typing it so the end result looks like this .smaller-image{width: 100px;}
style we can make changes to any element with such a class
<img class="....." >
sjp245 sends brownie points to @dorcy-ndg3 :sparkles: :thumbsup: :sparkles:
:cookie: 516 | @dorcy-ndg3 |http://www.freecodecamp.com/dorcy-ndg3
<style>
.smaller-image {
width: 100px;
}
.red-text {
color: red;
}
h2 {
font-family: Lobster, Monospace;
}
p {
font-size: 16px;
font-family: Monospace;
}
</style>
<h2 class="red-text">CatPhotoApp</h2>
<img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back. ">
p blue i would do this <style>
.sweet{
color:blue;
}
</style>
<p class="sweet">This must be a sweet paragraph</p>
img is missing the class smaller-image
<style>
p{
color:red;
}
h1{
color:white;
}
</style><img src ="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back. ">
img is self closing
img a class thats it
$(".well"); <--this is not right but I don't know what goes here.
$(document).ready(function() {
$(".text-primary").addClass("animated shake");
});
<img class="your-class-can-go-here" src ="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back. "> @levilong
document.ready() oneThen follow the logic of jquery to your needs:
$('target').action('element')levilong sends brownie points to @dorcy-ndg3 :sparkles: :thumbsup: :sparkles:
:cookie: 517 | @dorcy-ndg3 |http://www.freecodecamp.com/dorcy-ndg3
thanks @Dorcy-ndg3
:cookie: 518 | @dorcy-ndg3 |http://www.freecodecamp.com/dorcy-ndg3
marmiz sends brownie points to @dorcy-ndg3 :sparkles: :thumbsup: :sparkles:
dorcy-ndg3 sends brownie points to @marmiz :sparkles: :thumbsup: :sparkles:
:cookie: 652 | @marmiz |http://www.freecodecamp.com/marmiz
> of <button> and opening < of </button>
themixedcoder sends brownie points to @dorcy-ndg3 :sparkles: :thumbsup: :sparkles:
:cookie: 519 | @dorcy-ndg3 |http://www.freecodecamp.com/dorcy-ndg3
# to ur href
href="........" ive set ...... to href
<div class="col-xs-4">
<button class="btn btn-block btn-primary"><i class="fa fa-thumbs-up"></i> Like</button>
</div>
<div class="col-xs-4">
<button class="btn btn-block btn-info"><i class="fa fa-info-circle"></i> Info</button>
</div>
<div class="col-xs-4">
<button class="btn btn-block btn-danger"><i class="fa fa-trash"></i> Delete</button>
</div>
</div>
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
h2 {
font-family: Lobster-, Monospace;
}
.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}
</style>
<div class="container-fluid">
<DIV CLASS="ROW"><h2 class="text-primary text-center">CatPhotoApp</h2>
<a href="#"><img class="img-responsive thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back. "></a>
</DIV>
</DIV>
<img src="https://bit.ly/fcc-running-cats" class="img-responsive" alt="Three kittens running towards the camera. ">
<div class="row">
<div class="col-xs-4">
<button class="btn btn-block btn-primary">Like</button>
</div>
<div class="col-xs-4">
<button class="btn btn-block btn-info">Info</button>
</div>
<div class="col-xs-4">
<button class="btn btn-block btn-danger">Delete</button>
</div>
</div>
<p>Things cats <span class="text-danger">love:</span></p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
<form action="/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
<label><input type="checkbox" name="personality"> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Crazy</label>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</div>
<DIV CLASS="ROW"
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
.red-text {
color: red;
}
h2 {
font-family: Lobster, Monospace;
}
p {
font-size: 16px;
font-family: Monospace;
}
.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}
.smaller-image {
width: 100px;
}
</style>
<h2 class="red-text">CatPhotoApp</h2>
<p>Click here for <a #href="http://www.freecatphotoapp.com">cat photos</a>.</p>
<img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back. ">
<p class="red-text">Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
<p class="red-text">Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
href="#" u did something way different
#href="http://www.freecatphotoapp.com" with href="#"
@dxhunt img src
themixedcoder sends brownie points to @dxhunt :sparkles: :thumbsup: :sparkles:
:cookie: 30 | @dxhunt |http://www.freecodecamp.com/dxhunt
:cookie: 80 | @themixedcoder |http://www.freecodecamp.com/themixedcoder
dxhunt sends brownie points to @themixedcoder :sparkles: :thumbsup: :sparkles:
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
.red-text {
color: red;
}
.smaller-image {
width: 100px;
}
h2 {
font-family: Lobster, Monospace;
}
p {
font-size: 16px;
font-family: Monospace;
}
</style>
<h2 class="red-text">CatPhotoApp</h2>
<img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back. ">
<p class="red-text">Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
<p class="red-text">Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
welcome to FreeCodeCamp @fuuraa!
welcome to FreeCodeCamp @ingrid02!
digital920 sends brownie points to @furball514 :sparkles: :thumbsup: :sparkles:
:cookie: 166 | @furball514 |http://www.freecodecamp.com/furball514
$(document).ready(function() {
$("h1").addClass("animated bounce");
});
Give the submit button in your form the classes btn btn-primary.
can someone check this for me
<style>
.red-text {
color: red;
.p {font-size:16px;}
}
</style>
<h2 class="red-text">CatPhotoApp</h2>
<p class="red-text">Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
<p> Purr jump eat the grass rip.</p>
tbatty7 sends brownie points to @ty2k :sparkles: :thumbsup: :sparkles:
:cookie: 125 | @ty2k |http://www.freecodecamp.com/ty2k
tbatty7 sends brownie points to @ty2k :sparkles: :thumbsup: :sparkles:
:warning: tbatty7 already gave ty2k points
tbatty7 sends brownie points to @alexanderkopke :sparkles: :thumbsup: :sparkles:
:star2: 1045 | @alexanderkopke |http://www.freecodecamp.com/alexanderkopke
<button type="submit"> <i class="fa fa-paper-plane btn btn-primary"></i> Submit</button>
</form>
</div>
what am i doing wrong input typetext classform-control placeholdercat photo url required button typesubmit i classfa fa-paper-plane btn btn-primaryi submitbutton form div
please 80th challenge
please
please with level 80
@kaylafruean
<style>
.red-text {
color: red;
}
p
p2 {
font-size: 16px;
}
</style>
<h2 class="red-text">CatPhotoApp</h2>
<p class="red-text">Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
<p2> Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p2>
can someone tell me whats wrong here
<style>
.red-text {
color: red;
}
p2 {
font-size: 16px;
}
</style>
<h2 class="red-text">CatPhotoApp</h2>
<p class="red-text">Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
<p2> Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p2>
z3r0legacy sends brownie points to @tbatty7 :sparkles: :thumbsup: :sparkles:
:cookie: 121 | @tbatty7 |http://www.freecodecamp.com/tbatty7
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
.red-text {
color: red;
}
h2 {
font-family: Lobster, Monospace;
}
p {
font-size: 16px;
font-family: Monospace;
}
.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}
.smaller-image {
width: 100px;
}
.silver-background {
background-color: silver;
}
</style>
<h2 class="red-text">CatPhotoApp</h2>
<p>Click here for <a href="#">cat photos</a>.</p>
<a href="#"><img class="smaller-image thick-green-border" alt="A cute orange cat lying on its back. " src="https://bit.ly/fcc-relaxing-cat"></a>
<div class="silver-background">
<p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
</div>
<form action="/submit-cat-photo" id="cat-photo-form">
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
<label><input type="checkbox" name="personality" checked> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Energetic</label>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
<h2 id="cat-photo-form">cat photo form</h2>
</form>
michelremonduelaz sends brownie points to @kaylafruean :sparkles: :thumbsup: :sparkles:
:cookie: 76 | @kaylafruean |http://www.freecodecamp.com/kaylafruean
- ) ) ( ( (
) /( ( ( /(( ( ( )\ )\ )\ ( )(_))))\( )\())\ ( )\))( ((((_)(((_)(_) (_(_())/((_)\ (_))((_) )\ )((_))\ )\ _ )\)_()_) |_ _(_))((_)| |_ (_)_(_/( (()(_) (_)_\(_) || | | | / -_|_-<| _|| | ' \)) _| / \ | || |
|| _// _||||||_, | // _|||||___/ thankyou kaylafruean
<input type="text" placeholder="cat photo URL">
</form>
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
.red-text {
color: red;
}
h2 {
font-family: Lobster, Monospace;
}
p {
font-size: 16px;
font-family: Monospace;
.smaller-image { width: 100px;
}
</style>
<h2 class="red-text">CatPhotoApp</h2>
<img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back." class="smaller-image">
<p class="red-text">Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
<p class="red-text">Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
sammanson08
.smaller-image {
width: 100px;
}
</style> @Devintbryant10
.smaller-image{
width: 100px;
}
</style>
<style>
class=.red-text {
color: red;
</style>
}
<style>
<h2 class=".red-text">CatPhotoApp</h2>
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
@jeancarlo16 Inside your style element, change the h2 selector to .red-text and update the color's value from blue to red.
Give your h2 element the class attribute with a value of 'red-text'
width: 100px;
}
</style>
<h2 class="red-text">CatPhotoApp</h2>
<p>Click here for <a href="#">cat photos</a>.</p>
<a herf="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back. "></a>
<p class="red-text">Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
<p class="red-text">Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
@chelseas9210 They show you the example with blue text:
<style>
.blue-text {
color: blue;
}
</style>
<h2 class="blue-text">CatPhotoApp</h2>^^ do the same now with red text instead
<style>
.red-text {
color: red;
}
<style>
<h2 class="red-text">CatPhotoApp</h2>
herf? :)
.red-text {
color: red;
}
h2 {
font-family: Lobster, Monospace;
}
p {
font-size: 16px;
font-family: Monospace;
}
.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}
.smaller-image {
width: 100px;
}
</style>
chelseas9210 sends brownie points to @tylerstoddard :sparkles: :thumbsup: :sparkles:
:cookie: 32 | @tylerstoddard |http://www.freecodecamp.com/tylerstoddard
Add a submit button to your form element with type submit and "Submit" as its text.Do you have a <form> element in your HTML?
<input type="text" placeholder="cat photo URL">
</form>
jeancarlo16 sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 94 | @skycoder01 |http://www.freecodecamp.com/skycoder01
@ezebaby1 <style>
.red-text {
color: red;
}
h2 {
font-family: Lobster, Monospace;
}
p {
font-size: 16px;
font-family: Monospace;
}
.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}
.smaller-image {
width: 100px;
}
</style>
.red-text {
color: red;
font-size: 16px;
}
<h2 class="red-text">CatPhotoApp</h2>
<p class="red-text"; "font-size">Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
<p class="font-size">Purr jump eat the grass rip the couch scratched sunbathe, shed everhwere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
</style>
give the p elelments font-size of 16px, you gave it to the class .red-text
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
.red-text {
color: red;
}
h2 {
font-family: Lobster, Monospace;
}
p {
font-size: 16px;
font-family: Monospace;
.smaller-image{width:100px;}
</style>
<h2 class="red-text">CatPhotoApp</h2>
<a href="#"><img class="smaller-image thick-green-border" alt="A cute orange cat lying on its back. " src="https://bit.ly/fcc-relaxing-cat"></a>
<p class="red-text">Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
<p class="red-text">Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
} in your CSS before the .smaller-image
p {
font-size: 16px;
font-family: Monospace;
}<style>
.red-text {
color: red;
font-size: 16px;
}
</style>
<h2 class="red-text">CatPhotoApp</h2>
<p class="red-text"; "font-size">Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everhwere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
.red-text class, but that's not quite right. You don't need to use that here.
font-size shouldn't be on that
<p> elements, so you need a different selector after that statement.
<style>
.red-text {
color: red;
}
.font-size {
16px
}
</style>
<h2 class="red-text">CatPhotoApp</h2>
<p class="red-text"; "font-size">Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everhwere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
body { color: #000000; }
</style>
Add a div element below your h3 element.
<h3 class="text-primary text-center">jQuery Playground</h3>
<div class="container-fluid">
<div class="row">
</div>
</div>
.font-size part is -- Oh. Congrats! :thumbsup:
chelseas9210 sends brownie points to @vizij :sparkles: :thumbsup: :sparkles:
:cookie: 352 | @vizij |http://www.freecodecamp.com/vizij
ronsacs sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 95 | @skycoder01 |http://www.freecodecamp.com/skycoder01
<div><div></div></div>
Hi!
Create two div elements within your row, both with the class col-xs-6.
<div class="container-fluid">
<h3 class="text-primary text-center">jQuery Playground</h3>
<div class="row">
<div class="col-xs-6">
<div class="col-xs-6">
</div>
</div>
</div>
</div>
Where is my mistake?
<div class="col-xs-6"> inside each other, this is not required for this challenge
@AnnaBor try this:
<div class="row">
<div class="col-xs-6">
</div>
<div class="col-xs-6">
</div>
</div>
:cookie: 120 | @ronsacs |http://www.freecodecamp.com/ronsacs
annabor sends brownie points to @ronsacs :sparkles: :thumbsup: :sparkles:
<script>
document.addEventListener('DOMContentLoaded',function(){
document.getElementById('getMessage').onclick=function(){
// Add your code below this line
var req = new XMLHttpRequest();
req.open('GET', '/json/cats.json', true);
req.send();
req.onload = function() {
var json = JSON.parse(req.responseText);
document.getElementsByClassName('message')[0].innerHTML = JSON.stringify(json);
};
// Add your code above this line
};
});
</script>
@abnvgtm <form>
<input type=“”>
</form>
<a href='http://freecatphotoapp.com'>
cat photos
</a>
</p>
Your h2 element should degrade to the font Monospace when Lobster is not available.
Comment out your call to Google for the Lobster font by putting <!-- in front of it. Be sure to close your comment by adding -->.
Using jQuery, you can change the text between the start and end tags of an element. You can even change HTML markup.
jQuery has a function called .html() that lets you add HTML tags and text within an element. Any content previously within the element will be completely replaced with the content you provide using this function.
Here's how you would rewrite and emphasize the text of our heading:
$("h3").html("<em>jQuery Playground</em>");
jQuery also has a similar function called .text() that only alters text without adding tags. In other words, this function will not evaluate any HTML tags passed to it, but will instead treat it as the text you want to replace the existing content with.
Change the button with id target4 by emphasizing its text.
where could the problem be <div class="row">
<div class="col-xs-4">
<label><input type="checkbox" name="personality"> Loving</label>
</div>
<div class="col-xs-4">
<label><input type="checkbox" name="personality"> Lazy</label>
</div>
<div class="col-xs-4">
<label><input type="checkbox" name="personality"> Crazy</label>
</div>
<div class="col-xs-7"><input type="text" class="form-control" placeholder="cat photo URL" required></div>
<div class="col-xs-5"><button type="submit" class="btn btn-primary"><i class="fa fa-paper-plane"></i> Submit</button></div> </form>
</div>
anilpaliwal sends brownie points to @ronsacs :sparkles: :thumbsup: :sparkles:
:cookie: 122 | @ronsacs |http://www.freecodecamp.com/ronsacs
lancegonza sends brownie points to @elusivex :sparkles: :thumbsup: :sparkles:
:cookie: 110 | @elusivex |http://www.freecodecamp.com/elusivex
:cookie: 101 | @riptide72 |http://www.freecodecamp.com/riptide72
lancegonza sends brownie points to @riptide72 :sparkles: :thumbsup: :sparkles:
<style>
.red-text {
color: red;
}
</style>
<style>
.font-size {
16px;
}
</style>
<h2 class="red-text">CatPhotoApp</h2>
<p> Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
<p> Purr jump eat the grass rip the couch scratched suntable</p>
<style></style> tags. Put all your styling inside one <style></style>. And to give font-size p {font-size: 16px;}
abhishek-wmg sends brownie points to @lancegonza :sparkles: :thumbsup: :sparkles:
:cookie: 5 | @lancegonza |http://www.freecodecamp.com/lancegonza
<style>
.red-text {
color: red;
}
.font-size p{
font-size: 16px;
}
</style>
<h2 class="red-text">CatPhotoApp</h2>
<p> Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
<p> Purr jump eat the grass rip the couch scratched suntable</p>
.font-size
p element
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
.red-text {
color: red;
}
h2 {
font-family: Lobster, Monospace;
}
p {
font-size: 16px;
font-family: Monospace;
}
.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}
.smaller-image {
width: 100px;
}
</style>
<h2 class="red-text">CatPhotoApp</h2>
<img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back. ">
<p class="red-text">Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
<p> View more
<a href="http://freecatphotoapp.com">
cat photos
</a>
</p>
<p class="red-text">Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
<a href="">some_text</a>. In a line.
abbashaider005 sends brownie points to @shusil123 :sparkles: :thumbsup: :sparkles:
:cookie: 709 | @shusil123 |http://www.freecodecamp.com/shusil123
Nest your i element within your button element.
<button class="btn btn-block btn-primary">Like</button>
how do i next the i element in there?
<button><i>some_text</i></button> - Like that.
@shusil123
<button <i class="fa fa-thumbs-up"> class="btn btn-block btn-primary">Like </i></button>
still errors
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
.red-text {
color: red;
}
h2 {
font-family: Lobster, Monospace;
}
p {
font-size: 16px;
font-family: Monospace;
}
</style>
<h2 class="red-text">CatPhotoApp</h2>
<img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back. ">
<p class="red-text">Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
<p class="red-text">Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
<button class="class_1 class_2"><i class="class_1 class_2">Some_text</i></button>
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
.red-text {
color: red;
}
h2 {
font-family: Lobster, Monospace;
}
p {
font-size: 16px;
font-family: Monospace;
}
.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}
.smaller-image {
width: 100px;
}
</style>
<h2 class="red-text">CatPhotoApp</h2>
<img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back. ">
<p class="red-text">Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
<p> View more
<a href='http://freecatphotoapp.com'>cat photos</a>
</p>
<p class="red-text">Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
.larger-image {
width: 500px;
}
</style>
.smaller-image {width: ...px;}, and then give your img element a class of smaller-image
<button class="…"><i class="…"></i>Text</button>
@cdrainxv , Yeah, My bad. After all it's an icon.
@Skaikru , follow this pattern: <button class=""><i class=""></i>Some_text</button>
josehibarra sends brownie points to @shusil123 :sparkles: :thumbsup: :sparkles:
:cookie: 710 | @shusil123 |http://www.freecodecamp.com/shusil123
skaikru sends brownie points to @cdrainxv and @shusil123 :sparkles: :thumbsup: :sparkles:
:cookie: 711 | @shusil123 |http://www.freecodecamp.com/shusil123
:star2: 2226 | @cdrainxv |http://www.freecodecamp.com/cdrainxv
:cookie: 6 | @lancegonza |http://www.freecodecamp.com/lancegonza
turntothewest sends brownie points to @lancegonza :sparkles: :thumbsup: :sparkles:
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
.red-text {
color: red;
}
h2 {
font-family: Lobster, Monospace;
}
p {
font-size: 16px;
font-family: Monospace;
}
.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}
.smaller-image {
width: 100px;
}
</style>
<h2 class="red-text">CatPhotoApp</h2>
<p> "View more cat photos" <a href="http://www.freecatphotoapp.com"> </a> </p>
<a href="http://www.freecatphotoapp.com">cat photos</a>
<img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back. ">
<p class="red-text">Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
<p class="red-text">Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
will do @Riptide72 .........
I appreciate your help guys. I am officially off the clock so I will try to get back on here once I get home. I will definitely try that first though
- Remove quotes from this:
"View more cat photos" cat photosis supposed to be anchor text. Note:<a href="…">Anchor text goes here</a>
<a href='http://freecatphotoapp.com'>cat photos</a>
</p>
my original text ^ url pulls up properly and i have all the elements present but it is still red for "Your a element should have the anchor text of 'cat photos'. "
@Riptide72: Well it's still incorrect. It should just be:
<p>View more <a href="http://www.freecatphotoapp.com">cat photos</a></p>Instead of this:
<p> "View more cat photos" <a href="http://www.freecatphotoapp.com"> </a> </p>
<a href="http://www.freecatphotoapp.com">cat photos</a>riptide72 sends brownie points to @cdrainxv :sparkles: :thumbsup: :sparkles:
:star2: 2227 | @cdrainxv |http://www.freecodecamp.com/cdrainxv
sinsotheheart sends brownie points to @fortmaximus :sparkles: :thumbsup: :sparkles:
:cookie: 281 | @fortmaximus |http://www.freecodecamp.com/fortmaximus
@sinsOtheheart: You didn't follow th instructions fully:
You need an a element that links to "http://www.freecatphotoapp.com"
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
.red-text {
color: red;
}
h2 {
font-family: Lobster, Monospace;
}
p {
font-size: 16px;
font-family: Monospace;
}
.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}
.smaller-image {
width: 100px;
}
</style>
<div class="container-fluid">
<h2 class="red-text text-center">CatPhotoApp</h2>
<p>Click here for <a href="#">cat photos</a>.</p>
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back. "></a>
<img src="https://bit.ly/fcc-running-cats" class="img-responsive" alt="Three kittens running towards the camera. ">
<div class="row col-xs-4">
<button class="col-xs-4 btn btn-block btn-primary">Like</button></div>
<div class="row col-xs-4">
<button class="col-xs-4 btn btn-block btn-info">Info</button></div>
<div class="row col-xs-4">
<button class="btn btn-block btn-danger ">Delete</button>
</div>
<p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
<form action="/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
<label><input type="checkbox" name="personality"> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Crazy</label>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</div>
Use the jQuery addClass() function to give the classes animated and bounce to your button elements.
my code looks like:
$("button").addClass("animated bounce");
what am I doing wrong?
Your image should have a src attribute that points to the kitten image.
Your image element must have an alt attribute.
row and then inside that div you need 3 div elements with class col-xs-4 for the 3 buttons. This will then place all three buttons equally spaced in the same row. I have done of the buttons for you, do the same for the other two buttons:<div class="row">
<div class="col-xs-4">
<button class="btn btn-block btn-primary">Like</button>
</button>
</div> // closes `row` div<div class="row">
<div class="col-xs-8">
<h2 class="text-primary text-center">CatPhotoApp</h2>
</div>
<div class="col-xs-4">
<a href="#"><img class="img-responsive thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back. "></a>
</div>
</div>
frayedmind sends brownie points to @lancegonza and @cdrainxv :sparkles: :thumbsup: :sparkles:
:cookie: 7 | @lancegonza |http://www.freecodecamp.com/lancegonza
:star2: 2228 | @cdrainxv |http://www.freecodecamp.com/cdrainxv
@abbashaider005 is telling me "Try it with this image":
"https://bit.ly/fcc-relaxing-cat"
i search up the link, then i get this page is blocked it may harmm you computer and persona information.
<img src="https://s3.amazonaws.com/freecodecamp/relaxing-cat.jpg" alt="Try it later">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
.red-text {
color: red;
}
h2 {
font-family: Lobster, Monospace;
}
p {
font-size: 16px;
font-family: Monospace;
}
</style>
<h2 class="red-text">CatPhotoApp</h2>
<p class="red-text">Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
<p class="red-text">Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched
@abbashaider005: Read the instructions:
Try it with this image:
https://s3.amazonaws.com/freecodecamp/relaxing-cat.jpg?
img element to be below the h2 element.
does this look right now? ``` <div class="row">
<div class="col-xs-4">
<button class="btn btn-block btn-primary">Like</button></div>
<div class="col-xs-4">
<button class="btn btn-block btn-info">Info</button></div>
<div class="col-xs-4">
<button class="btn btn-block btn-danger">Delete</button></div>
</div>```
frayedmind sends brownie points to @lancegonza :sparkles: :thumbsup: :sparkles:
:warning: frayedmind already gave lancegonza points
for target the same element with multiple jQuery selectors:
what does it mean by "Only add one class with each of your three selectors."
$("#target1").addClass("animated shake btn-primary");
$("button").addClass("shake");
$(".btn").addClass("shake");
<div class="well"><button></button>
</div>
</div>
<div class="col-xs-6">
<div class="well"><button></button></div>$("#target1").addClass("animated shake btn-primary"); - here you're adding 3 classes
gsparmar sends brownie points to @manish-giri :sparkles: :thumbsup: :sparkles:
:star2: 4062 | @manish-giri |http://www.freecodecamp.com/manish-giri
<div class="well"><button></button>
</div>
</div>
<div class="col-xs-6">
<div class="well"><button></button></div>
<style>
h2 .red-text{
color: red;
}
</style>
<h2 class="red-text">CatPhotoApp</h2>
@amndz924
@manish-giri how to make 6 buttons
well class div
well divs.
lancegonza sends brownie points to @cdrainxv :sparkles: :thumbsup: :sparkles:
:star2: 2229 | @cdrainxv |http://www.freecodecamp.com/cdrainxv
lancegonza sends brownie points to @manish-giri :sparkles: :thumbsup: :sparkles:
:star2: 4063 | @manish-giri |http://www.freecodecamp.com/manish-giri
control + 0 on windows, command + 0 on Mac.
<h2 {color:blue;}CatPhotoApp</h2>
</style> what is the mistake in this i want this css style to be blue
@mistergrider:
You must target the children of element with the target class.
mistergrider sends brownie points to @cdrainxv :sparkles: :thumbsup: :sparkles:
:star2: 2230 | @cdrainxv |http://www.freecodecamp.com/cdrainxv
oyemujtaba sends brownie points to @lancegonza :sparkles: :thumbsup: :sparkles:
:cookie: 8 | @lancegonza |http://www.freecodecamp.com/lancegonza
.smaller-image {
width: 100px;
}
please unable to resize my image style smaller-image width 100px style does not work any suggetstions
brnrdnd sends brownie points to @lancegonza :sparkles: :thumbsup: :sparkles:
:cookie: 9 | @lancegonza |http://www.freecodecamp.com/lancegonza
Leave your h2 element uncommented so that it is visible on your page.
Comment out your p element so that it is not visible on your page.
Be sure to close each of your comments with -->.
Do not change the order of the h1 h2 or p in the code.
<h1></h1>
<h2><!--ok-->CatPhotoApp</h2>-->
<p></p>
official4code sends brownie points to @itsneisha :sparkles: :thumbsup: :sparkles:
:warning: could not find receiver for itsneisha
<!-- and --> tags are considered commented
wanna code code code ... have a nice day everyone :)
<button id="target2" class="btn btn-default target"></button>
<button id="target3" class="btn btn-default target"></button>
.smaller-image width: 100px;</style>
:star2: 2010 | @coymeetsworld |http://www.freecodecamp.com/coymeetsworld
lancegonza sends brownie points to @coymeetsworld :sparkles: :thumbsup: :sparkles:
<style>
.redtext {
color: red;}
<h2 class=color:red>
</style>
<h2 class='red-text'>CatPhotoApp</h2>
<h2 style=color: red;</h2>
<h2>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</h2>
1.Your h2 element should be red.
2.Your stylesheet should declare a red-text class and have its color set to red.
<p> tags to <h2>
red-text, just like you reference it in your h2 element
<style>
.yourClassName {
}
</style>
<h2 class="yourClassName">some text</h2>