get help in general - we have more specialized help rooms here: https://gitter.im/FreeCodeCamp/home
Your a element should have the anchor text of "cat photos".
You need an a element that links to http://freecatphotoapp.com
Make sure your a element has a closing tag.
:star2: 1623 | @margaret2 |http://www.freecodecamp.com/margaret2
</a>.</p>
@DeepakMirdwal
deepakmirdwal sends brownie points to @margaret2 :sparkles: :thumbsup: :sparkles:
:star2: 1624 | @margaret2 |http://www.freecodecamp.com/margaret2
manish-giri sends brownie points to @margaret2 :sparkles: :thumbsup: :sparkles:
:warning: manish-giri already gave margaret2 points
mahalaxs sends brownie points to @deepakmirdwal :sparkles: :thumbsup: :sparkles:
:cookie: 29 | @deepakmirdwal |http://www.freecodecamp.com/deepakmirdwal
$(document).ready(function() {
$("button").addClass(animated);
$(".btn").addClass(shake);
$("#target1").addClass(btn-primary);
});
</script>
adowell5 sends brownie points to @manish-giri :sparkles: :thumbsup: :sparkles:
:star2: 4202 | @manish-giri |http://www.freecodecamp.com/manish-giri
<style>
body {
background-color: green;
font-family: Monospace;
}
h1 {
background-color: green;
}
</style>
<h1>Hello World</h1>
<body>
</body>
background-color or color? ;)
why :: used in json
??
"key": "matte::product_A::Lens"
<a href="https://twitter.com/angiedweldon" class="fa fa-twitter" target="_blank"></a>
target attribute
angiedweldon sends brownie points to @manish-giri :sparkles: :thumbsup: :sparkles:
:star2: 4203 | @manish-giri |http://www.freecodecamp.com/manish-giri
??
"key": "matte::product_A::Lens"
<i class="fa fa-camera-retro fa-5x"></i> fa-5x
<h2><class>
.red-text {color: red;}
}
</class></h2>
<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>
<a href="https://twitter.com/angiedweldon" class="fa fa-twitter fa-4x" target="_blank"></a>
angiedweldon sends brownie points to @manish-giri :sparkles: :thumbsup: :sparkles:
:warning: angiedweldon already gave manish-giri points
<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>
<div container-fluid>
<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">
<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>
myStr = "<a href=\"http://www.example.com\" target=\"_blank\">Link</a>";
The Challenge is Quoting Strings with Single Quotes
put all the elements inside a div, then give the div the "container-fluid" class
</style>
lanathehaxoar sends brownie points to @manish-giri :sparkles: :thumbsup: :sparkles:
:star2: 4204 | @manish-giri |http://www.freecodecamp.com/manish-giri
lanathehaxoar sends brownie points to @margaret2 :sparkles: :thumbsup: :sparkles:
:star2: 1625 | @margaret2 |http://www.freecodecamp.com/margaret2
var myStr = "<a href=\"http://www.example.com\" target=\"_blank\">Link</a>";" at the beginning and end of the string with '
var myStr = '<a href="http://www.example.com" target="_blank">Link<a>';/ for your closing </a> tag
var myStr = '<a href="http://www.example.com" target="_blank">Link/<a>';
@Slitherings you're missing / for your closing </a> tag
slitherings sends brownie points to @margaret2 :sparkles: :thumbsup: :sparkles:
:star2: 1626 | @margaret2 |http://www.freecodecamp.com/margaret2
margaret2 sends brownie points to @offllne :sparkles: :thumbsup: :sparkles:
:cookie: 909 | @offllne |http://www.freecodecamp.com/offllne
slitherings sends brownie points to @manish-giri :sparkles: :thumbsup: :sparkles:
:star2: 4205 | @manish-giri |http://www.freecodecamp.com/manish-giri
$(document).ready(function() {
$("button").addClass("animated");
$(".btn").addClass("animated shake");
$("#target1").addClass("animated shake btn-primary");
});
</script>
color = stars == 1 ? 'blue-1'
: stars == 2 ? 'blue-2'
: stars == 3 ? 'blue-3'
: stars == 4 ? 'blue-4'
: stars == 5 ? 'blue-5': 'gray-1';
return color;
<style>
body {
background-color: black;
font-family: Monospace;
color: green;
}
pink-text: pink;
</style>
<h1 class="pink-text">Hello World!</h1>
:cookie: 144 | @slitherings |http://www.freecodecamp.com/slitherings
alforbes sends brownie points to @slitherings :sparkles: :thumbsup: :sparkles:
303fay sends brownie points to @margaret2 :sparkles: :thumbsup: :sparkles:
:star2: 1627 | @margaret2 |http://www.freecodecamp.com/margaret2
pink-text: pink;
}
.class-name {
property: value;
}Add a <i class="fa fa-paper-plane"></i> within your submit button element.
Give the text input in your form the class form-control.
Make sure each of your i elements has a closing tag.
<style>
h2 {color: blue;}
</style>
<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>
why is h2 not blue?
<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">
<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>
<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"><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>
<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">
<div class="row">
<div class="col-xs-6">
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
</div>
<div class="col-xs-6">
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
</div>
</div>
<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>
<input type="text" placeholder="cat photo URL" required>
<button type="submit" class="btn btn-primary"> <i class="fa fa-paper-plane"> Submit </i> </button>
</form>
</div>
mamills816 sends brownie points to @margaret2 :sparkles: :thumbsup: :sparkles:
:star2: 1628 | @margaret2 |http://www.freecodecamp.com/margaret2
alforbes sends brownie points to @margaret2 :sparkles: :thumbsup: :sparkles:
:star2: 1629 | @margaret2 |http://www.freecodecamp.com/margaret2
margaret2 sends brownie points to @slitherings :sparkles: :thumbsup: :sparkles:
:cookie: 145 | @slitherings |http://www.freecodecamp.com/slitherings
mahalepoto sends brownie points to @slitherings :sparkles: :thumbsup: :sparkles:
:cookie: 147 | @slitherings |http://www.freecodecamp.com/slitherings
<Style>
h2 {color: blue;}
</Style>
<h2>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>
s for <style></style>
mahalepoto sends brownie points to @margaret2 :sparkles: :thumbsup: :sparkles:
:star2: 1630 | @margaret2 |http://www.freecodecamp.com/margaret2
@KoRaa97 no, they want the input element to be between the tags of the form element:
<form> <input> </form>
so you should probably reset and redo
rricky122890 sends brownie points to @margaret2 :sparkles: :thumbsup: :sparkles:
:star2: 1631 | @margaret2 |http://www.freecodecamp.com/margaret2
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
.red-text {
color: red;
}
p {
font-size: 16px;
font-family: Monospace;
}
</style>
<h2 class="red-text; font-family: Lobster;">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.</p>
sorry koraa97, you can't send brownie points to yourself! :sparkles: :sparkles:
<style>
.red-text {
color: red;
}
</style>
<h2 class="red-text">CatPhotoApp</h2>
<style>.red-text {color: red;}
<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>
emember that CSS class selectors require a period at the beginning like this:
.blue-text {
color: blue;
}
But also remember that class declarations don't use a period, like this:
<h2 class="blue-text">CatPhotoApp</h2>
Apply the red-text class to your h2 and p elements.
basssublime24 sends brownie points to @koraa97 :sparkles: :thumbsup: :sparkles:
:cookie: 36 | @koraa97 |http://www.freecodecamp.com/koraa97
basssublime24 sends brownie points to @romy2455 :sparkles: :thumbsup: :sparkles:
:cookie: 18 | @romy2455 |http://www.freecodecamp.com/romy2455
what is this used for<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
</body>
</html>
romy2455 sends brownie points to @koraa97 :sparkles: :thumbsup: :sparkles:
:cookie: 37 | @koraa97 |http://www.freecodecamp.com/koraa97
<style>
.red-text {
color: red;
}
</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>
But also remember that class declarations don't use a period, like this:
<h2 class="blue-text">CatPhotoApp</h2>
Apply the red-text class to your h2 and p elements.
Your p element should have the class red-text.
<style>
.red-text {
color: red;
}
</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>
@romy2455
Apply the red-text class to your h2 and p elements.
p element too
ur p element should be red.
Your p element should have the class red-text.
<style>
.red-text {
color: red;
}
</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>
<div class="container-fluid">
<h3 class="text-primary text-center">jQuery Playground</h3>
<div class="row">
<div class="col-xs-6">
<div class="well">
<button class="btn btn-defualt"></button>
<button class="btn btn-defualt"></button>
<button class="btn btn-defualt"></button>
</div>
</div>
<div class="col-xs-6">
<div class="well">
<button class="btn btn-defualt"></button>
<button class="btn btn-defualt"></button>
<button class="btn btn-defualt"></button>
</div>
</div>
</div>
</div>
:bulb: to format code use backticks! ``` more info
import java.util.Scanner;
public class GradesSwitch {
private static Scanner s;
public static void main(String[] args) {
int Grades;
s = new Scanner(System.in);
System.out.println("Enter the grade");
Grades = s.nextInt();
switch ((Grades%100)/10){
case 1:
System.out.printf("You have earned the letter grade: A");
break;
case 2:
System.out.printf("You have earned the letter grade: B");
break;
case 3:
System.out.printf("You have earned the letter grade: C");
break;
case 4:
System.out.printf("You have earned the letter grade: D");
break;
case 5:
System.out.printf("You have earned the letter grade: F");
break;
default:
System.out.println("ERROR You have entered an invalid input");
break;
}
}
}(Grades%100)/10
switch
cat photos
</a>
540
D with the conditions you have
(Grades%100)/10, but there are a few numbers you can put in
lookinahead13 sends brownie points to @manish-giri :sparkles: :thumbsup: :sparkles:
:star2: 4206 | @manish-giri |http://www.freecodecamp.com/manish-giri
ERROR You have entered an invalid input
You have earned the letter grade: B
lookinahead13 sends brownie points to @manish-giri :sparkles: :thumbsup: :sparkles:
:warning: lookinahead13 already gave manish-giri points
import java.util.Scanner;
public class Grades {
public static void main(String[] args) {
int grade;
System.out.println("Enter grade: ");
Scanner reader = new Scanner(System.in);
grade = reader.nextInt();
if (grade>=90 && grade <100 )
{
System.out.println("A");
}
else if (grade>=80 && grade <90)
{
System.out.println("B");
}
else if (grade>=70 && grade <80)
{
System.out.println("C");
}
else if (grade>=60 && grade <70)
{
System.out.println("D");
}
else if (grade>=0 && grade <60)
{
System.out.println("F");
}
else if (grade >100 && grade <0);
{
System.out.println("ERROR You have entered an invalid input");
}
}
}
<button class="btn btn-defualt"></button>
<button class="btn btn-defualt"></button>
<button class="btn btn-defualt"></button>oliviamchugh sends brownie points to @manish-giri :sparkles: :thumbsup: :sparkles:
:star2: 4207 | @manish-giri |http://www.freecodecamp.com/manish-giri
<a href="http://freecatphotoapp.com">
cat photos
</a>
anyone done for
Target the same element with multiple jQuery Selectors??
<script>
$(document).ready(function() {
$("button").addClass(animated shake);
$(".btn").addClass(animated shake);
$("#target1").addClass(animated shake)
});
</script>
i still blur..
box-shadow: ....
#thumbnail selector
sstylianides sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 194 | @skycoder01 |http://www.freecodecamp.com/skycoder01
<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="btn btn-block btn-primary">Like</button>
<button class="btn btn-block btn-info">Info</button>
<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>
button should be nested in it's own col-xs-4 div<div class="col-xs-4">
<button class="btn btn-block btn-primary">Like</button>
</div>lanathehaxoar sends brownie points to @manish-giri :sparkles: :thumbsup: :sparkles:
:star2: 4208 | @manish-giri |http://www.freecodecamp.com/manish-giri
I'm working on the first project and having trouble getting the img-responsive class to work. Here's my code:
<div class="container-fluid">
<div id="main-block">
<h1 class="text-center">Hello World</h1>
<img src="http://www.nationalgeographic.com/content/dam/travel/rights-exempt/Traveler/August-Sept2016/dalai-lama/happiness-dalai-lama-bhutan.jpg" class="img-responsive">
</div>
</div>I use this, but the image is still massive and doesn't resize at all. What am I doing wrong?
'''var a=7;
var b = a;'''
:bulb: to format code use backticks! ``` more info
var a=7;
var b = a;
<p>Here's a link
<a href="http://freecatphotoapp.com">
cat photos</a>
for you to follow.</p>
$(document).ready(function() {
$("button ").addClass("animated");
$(".btn ").addClass("shanke");
$("#target1").addClass("btn-primary");
});
shanke?
<p>Here's a link
<a href="http://freecatphotoapp.com">
cat photos</a>
for you to follow.</p>
font-family: 'Open Sans', 'sans-serif';
jiahaolee sends brownie points to @manish-giri :sparkles: :thumbsup: :sparkles:
:star2: 4209 | @manish-giri |http://www.freecodecamp.com/manish-giri
slickspidey sends brownie points to @budsterr :sparkles: :thumbsup: :sparkles:
:warning: could not find receiver for budsterr
body {
font-family: "Open Sans", sans-serif;
}
$("button").addClass("animated bounce");
$(".well").addClass("animated shake");
$("#target3”).addClass …….
<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 the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.
</p>
id -> #
class -> .
HTML element -> nothing
:cookie: 119 | @jashenfield |http://www.freecodecamp.com/jashenfield
k-ibi sends brownie points to @jashenfield :sparkles: :thumbsup: :sparkles:
sstylianides sends brownie points to @azbo400 :sparkles: :thumbsup: :sparkles:
:star2: 1021 | @azbo400 |http://www.freecodecamp.com/azbo400
alforbes sends brownie points to @oliviamchugh :sparkles: :thumbsup: :sparkles:
:cookie: 94 | @oliviamchugh |http://www.freecodecamp.com/oliviamchugh
.red-text {color: red;}
p{font-size:16px;}
</style>
.red-text {color: red; p{font-size:16px;}}
</style>
.red-text {color: red; }p{font-size:16px;}
</style>
dhanwantbrar sends brownie points to @oliviamchugh :sparkles: :thumbsup: :sparkles:
:cookie: 97 | @oliviamchugh |http://www.freecodecamp.com/oliviamchugh
Your div element should have the class container-fluid.
Make sure you have nested all HTML elements in .container-fluid.
Any ideas what the problem is? Here's the code:
<div>
.container-fluid {
all code contained inside
}
</div>
novanteg sends brownie points to @andrewlikes :sparkles: :thumbsup: :sparkles:
:cookie: 119 | @andrewlikes |http://www.freecodecamp.com/andrewlikes
antoineds sends brownie points to @oliviamchugh :sparkles: :thumbsup: :sparkles:
:cookie: 99 | @oliviamchugh |http://www.freecodecamp.com/oliviamchugh
private static Scanner s;
public static void main(String[] args) {
int Grades;
Scanner s =new Scanner(System.in);
System.out.println("Enter the grade");
Grades = s.nextInt();
switch ((Grades%100)/10) {
case 9:
System.out.printf("You have earned the letter grade :A");
break;
case 8:
System.out.printf("You have earned the letter grade : B");
break;
case 7:
System.out.printf("You have earned the letter grade : C");
break;
case 6:
System.out.printf("You have earned the letter grade : D");
break;
case 5:
System.out.printf("You have earned the letter grade : F");
break;
default:
System.out.println("ERROR You have entered an invalid input");
break;
}
}
}<style>
h2 {color: blue;}
</style>
<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>
h2
h2 element itself..
<style>
h2 {
color: blue;
}
</style>
<h2>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>
and i cant do this :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'.
amirsharifico sends brownie points to @skylarwoods :sparkles: :thumbsup: :sparkles:
:cookie: 17 | @skylarwoods |http://www.freecodecamp.com/skylarwoods
<style>
.red-text{
color:blue;
]
</style>
<h2 class="red-text">test</h2>
brhutchin sends brownie points to @veredrec :sparkles: :thumbsup: :sparkles:
:cookie: 276 | @veredrec |http://www.freecodecamp.com/veredrec
brhutchin sends brownie points to @oliviamchugh :sparkles: :thumbsup: :sparkles:
:cookie: 100 | @oliviamchugh |http://www.freecodecamp.com/oliviamchugh
brhutchin sends brownie points to @andrewlikes :sparkles: :thumbsup: :sparkles:
:cookie: 120 | @andrewlikes |http://www.freecodecamp.com/andrewlikes
Hi everyone: I'm having trouble with my first HTML project (creating a tribute page). http://codepen.io/ThurstianTsui/pen/EZGjVx
I have two main issues right now:
- I can't seem to manipulate the image properly. I've tried to use bootstrap to round the corner / create a circle image with img-rounded and img-circle. I've also tried to center the image but haven't been to make it work.
- I've been struggling to bold certain parts of a sentence. The way I've been doing it in the code is with <p class="text-center"><strong>Bold Test</strong> A shining pillar in the NBA community</p>. However, the formatting has no change.
Can anyone shed some light on what I should be doing differently?
almosttan sends brownie points to @oliviamchugh :sparkles: :thumbsup: :sparkles:
:cookie: 101 | @oliviamchugh |http://www.freecodecamp.com/oliviamchugh
Apply the font-family of Lobster to your h2 element.
almosttan sends brownie points to @alexanderkopke :sparkles: :thumbsup: :sparkles:
:star2: 1088 | @alexanderkopke |http://www.freecodecamp.com/alexanderkopke
amirsharifico sends brownie points to @oliviamchugh :sparkles: :thumbsup: :sparkles:
:cookie: 102 | @oliviamchugh |http://www.freecodecamp.com/oliviamchugh
:bulb: to format code use backticks! ``` more info
thurstiantsui sends brownie points to @veredrec :sparkles: :thumbsup: :sparkles:
:cookie: 277 | @veredrec |http://www.freecodecamp.com/veredrec
anikisei sends brownie points to @alexanderkopke :sparkles: :thumbsup: :sparkles:
:star2: 1089 | @alexanderkopke |http://www.freecodecamp.com/alexanderkopke
@alexanderkopke <style>
.red-text {
color: red;
}
.font-lobster {
font-family: lobster;
}
p {
font-size: 16px;
font-family: Monospace;
}
</style>
darnellreed sends brownie points to @alexanderkopke :sparkles: :thumbsup: :sparkles:
:star2: 1090 | @alexanderkopke |http://www.freecodecamp.com/alexanderkopke
h2{
font-family:Lobster;
}
:star2: 1091 | @alexanderkopke |http://www.freecodecamp.com/alexanderkopke
ydelbys sends brownie points to @alexanderkopke :sparkles: :thumbsup: :sparkles:
alexanderkopke sends brownie points to @ydelbys :sparkles: :thumbsup: :sparkles:
:cookie: 21 | @ydelbys |http://www.freecodecamp.com/ydelbys
ydelbys sends brownie points to @alexanderkopke :sparkles: :thumbsup: :sparkles:
:warning: ydelbys already gave alexanderkopke points
I am stuck.
Between the style tags, give the p elements font-size of 16px. Browser and Text zoom should be at 100%.
<style>
.red-text {
color: red;
}
h1 {
font-size: 16px:
}
</style>
What am i doing wrong?
ydelbys sends brownie points to @alexanderkopke :sparkles: :thumbsup: :sparkles:
:warning: ydelbys already gave alexanderkopke points
<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. ">
<style>
.smaller-image {
width: 100px;
}
</style>
<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>
@tiffanymakes <style>
.red-text {
color: red;
}
p {
font-size: 16px:
}
</style>
I tried like this but it still says
"Between the style tags, give the p elements font-size of 16px"
font-size: 16px:
; at the end, not :
jcrumlish sends brownie points to @manish-giri and @tiffanymakes :sparkles: :thumbsup: :sparkles:
:cookie: 293 | @tiffanymakes |http://www.freecodecamp.com/tiffanymakes
:star2: 4213 | @manish-giri |http://www.freecodecamp.com/manish-giri
jcrumlish sends brownie points to @omegafruitpunch :sparkles: :thumbsup: :sparkles:
:cookie: 26 | @omegafruitpunch |http://www.freecodecamp.com/omegafruitpunch
.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>
<img class="silver-background">
<img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back. " < img = class = "smaller-image">
<style>
}
smaller-image {
width: 100px;
}
</style>
<button class="btn btn-block btn-primary" class="col-xs-4">Like</button>
<button class="btn btn-block btn-info" class="col-xs-4">Info</button>
<button class="btn btn-block btn-danger" class="col-xs-4">Delete</button>
</div>
. in front and ID needs # in front.
'''
:bulb: to format code use backticks! ``` more info
<div class:"background-color">
<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>$(".target:nth-child(2)").addClass("animatedbounce");
' ' '
<img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back. " < img class = "smaller-image">
<style>
.smaller-image {
width: 100px;
}
</style>
animated bounce
omegafruitpunch sends brownie points to @mattlong87 and @tiffanymakes :sparkles: :thumbsup: :sparkles:
:cookie: 123 | @mattlong87 |http://www.freecodecamp.com/mattlong87
:cookie: 294 | @tiffanymakes |http://www.freecodecamp.com/tiffanymakes
.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>
@mattlong87 <div class="row">
<div class="col-xs-4">
<button class="btn btn-block btn-primary" >Like</button>
<button class="btn btn-block btn-info" >Info</button>
<button class="btn btn-block btn-danger">Delete</button>
</div>
this aligns the rest of the page
<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>alforbes sends brownie points to @mattlong87 and @tiffanymakes :sparkles: :thumbsup: :sparkles:
:cookie: 124 | @mattlong87 |http://www.freecodecamp.com/mattlong87
:cookie: 295 | @tiffanymakes |http://www.freecodecamp.com/tiffanymakes
anikisei sends brownie points to @rationalcoding :sparkles: :thumbsup: :sparkles:
:cookie: 301 | @rationalcoding |http://www.freecodecamp.com/rationalcoding
.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">
<img 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>
<style>
h2 {
color: blue;
}
</style>
<h2>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>
anikisei sends brownie points to @rationalcoding :sparkles: :thumbsup: :sparkles:
:warning: anikisei already gave rationalcoding points
<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">
<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>
<style>
.red-text {
color: rgb(255,0,0);
}
.orchid-text {
color: rgb(218,112,214);
}
.sienna-text {
color: rgb(160,82,45);
}
.blue-text {
color: rgb(0,0,225);
}
</style>
<h1 class="red-text">I am red!</h1>
<h1 class="orchid-text">I am orchid!</h1>
<h1 class="sienna-text">I am sienna!</h1>
<h1 class="blue-text">I am blue!</h1>
anikisei sends brownie points to @rationalcoding :sparkles: :thumbsup: :sparkles:
:warning: anikisei already gave rationalcoding points
.smaller-image {
width: 100px;
}
.silver-background {
background-color: silver;
}slickspidey sends brownie points to @rationalcoding :sparkles: :thumbsup: :sparkles:
:cookie: 302 | @rationalcoding |http://www.freecodecamp.com/rationalcoding
jason7354 sends brownie points to @tiffanymakes :sparkles: :thumbsup: :sparkles:
:cookie: 296 | @tiffanymakes |http://www.freecodecamp.com/tiffanymakes
.my-custom-class {
color: blue;
}
<form id="cat-photo-app" 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>
$(document).ready(function() {
$("button").addclass("animated")
$(".btn").addclass("shake")
$("#target1").addclass("btn-primary")
});
</script>
$(document).ready(function() {
$("button").addclass("animated")
$(".btn").addclass("shake")
$("#target1").addclass("btn-primary")
});
</script>
Due to browser implementation differences, you may need to be at 100% zoom to pass the tests on this challenge. how do you change this as i have correct code but wont let me move forward ?
.yellow-text {
color: yellow;
}
$(document).ready(function() {
$("button").addclass("animated")
$(".btn").addclass("shake")
$("#target1").addclass("btn-primary")
});
</script>
id attribute exactly like you did above.
addClass
mattkellz13 sends brownie points to @rationalcoding :sparkles: :thumbsup: :sparkles:
:cookie: 303 | @rationalcoding |http://www.freecodecamp.com/rationalcoding
<form id="cat-photo-app" 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>
cat-photo-form
slickspidey sends brownie points to @cdrainxv :sparkles: :thumbsup: :sparkles:
:star2: 2287 | @cdrainxv |http://www.freecodecamp.com/cdrainxv
am i missing something??? Between the style tags, give the p elements font-size of 16px. =
<style>
.red-text {
color: red;
font-size: 16px;
}
</style>
andrewlikes sends brownie points to @rationalcoding :sparkles: :thumbsup: :sparkles:
:cookie: 304 | @rationalcoding |http://www.freecodecamp.com/rationalcoding
<style>
h2 {
color: red;
}
<h2 class="red-text">CatPhotoApp</h2>
</style>
<h2>CatPhotoApp</h2>
<main>
<p>Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<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>
</div>
<form action="/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
<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><br>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</main>
what am i doing wrong?
<style>
.red-text {
color: red;
}
.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 the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.
</p>
<style>
h2 {
color: red;
}
</style>
<h2 class="red-text">
<h2>CatPhotoApp</h2>
<main>
<p>Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<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>
</div>
<form action="/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
<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><br>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</main>How do i give the p elements font-size of 16px between the style tags? <h2 class="red-text">CatPhotoApp</h2>
<style>
.red-text {
color: red;
font-size: 16px;
}
</style>
<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 the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.
</p>
.red-text class instead of an h2 block..red-text {
color: red;
}:warning: could not find receiver for sdjjr3296
:cookie: 494 | @mitron6 |http://www.freecodecamp.com/mitron6
mrblue27 sends brownie points to @mitron6 and @sdjjr3296 :sparkles: :thumbsup: :sparkles:
<h2 class="…">TEXT HERE</h2>
@rossauusa
<style>
.red-text {
color: red;
}
p {
font-size: 16px;
}
</style>
h2 tags. @Mrblue27<h2 class="red-text">CatPhotoApp</h2>mrblue27 sends brownie points to @rationalcoding :sparkles: :thumbsup: :sparkles:
:cookie: 306 | @rationalcoding |http://www.freecodecamp.com/rationalcoding
rossauusa sends brownie points to @aristof89 :sparkles: :thumbsup: :sparkles:
:cookie: 15 | @aristof89 |http://www.freecodecamp.com/aristof89
<p>
Testing
</p>
<ul>
<li>test 1</li>
</ul>
<ol>
<li>test 3</li>
</ol>
</div>
One h4 element should have the text #left-well.
One h4 element should have the text #right-well.
<div class="row">
<div class="col-xs-6">
<h4 id="left-well"></h4>
<div class="well" id="left-well">
<button class="btn btn-default target"></button>
<button class="btn btn-default target"></button>
<button class="btn btn-default target"></button>
</div>
</div>
<div class="col-xs-6">
<h4 id="right-well"></h4>
<div class="well" id="right-well">
<button class="btn btn-default target"></button>
<button class="btn btn-default target"></button>
<button class="btn btn-default target"></button>
</div>
</div></div>
<style>
.red-text {
color: red;
}
h2 {
font-family: Lobster, Monospace;
}
p {
font-size: 16px;
font-family: Monospace;
}
. smaller-image {
width:100 px;
}
.smaller-image
Hi I'm stuck on the override styles class. It says create a second class below pink-text called blue-text, then list blue-text as the second class in the body element. But I can't see where I've gone wrong. Here's my code:
<style>
body {
background-color: black;
font-family: Monospace;
color: green;
}
.pink-text {
color: pink;
}
.blue-text {
color:blue;
}
</style>
<h1 class="pink-text" "blue-text">Hello World!</h1>
<div class="container-fluid">
<h3 class="text-primary text-center">jQuery Playground</h3>
<div class="row">
<div class="col-xs-6">
<h4 id="left-well"></h4>
<div class="well" id="left-well">
<button class="btn btn-default target"></button>
<button class="btn btn-default target"></button>
<button class="btn btn-default target"></button>
</div>
</div>
<div class="col-xs-6">
<h4 id="right-well"></h4>
<div class="well" id="right-well">
<button class="btn btn-default target"></button>
<button class="btn btn-default target"></button>
<button class="btn btn-default target"></button>
</div>
</div> </div>
</div>
One h4 element should have the text #left-well.
One h4 element should have the text #right-well.
pink-text and blue-text must be on the same " " not separate..
should be "pink-text blue-text"
<p>Click here for <a href="#"> <img src="https://bit.ly/fcc-running-cats" alt="Three kittens running towards the camera.">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.">
jeevanach sends brownie points to @dsandeepchary :sparkles: :thumbsup: :sparkles:
:cookie: 467 | @dsandeepchary |http://www.freecodecamp.com/dsandeepchary
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<!--Adding bootstrap-->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.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" 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>
<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. ">
.smaller-image {
width: 100px;}
</style>
<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 src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back. "> should be <img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back. " class="smaller-image">
<div class="rows">
<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>
