get help in general - we have more specialized help rooms here: https://gitter.im/FreeCodeCamp/home
what kind of dead space?
u can simply resize all the pictures to the same width and height
<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;}
img
.smaller-image {width: 100px;}
</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. "</img>
<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>
well..thats what i already knew
the inline thing is the tricky one haha
still ty for the answer (:
i will try to do some stuff with inline and flexbox..maybe this will work somehow
f1ko sends brownie points to @margaret2 :sparkles: :thumbsup: :sparkles:
:star2: 2738 | @margaret2 |http://www.freecodecamp.com/margaret2
< and >
</img>
<img class="" src="" alt=""/> with the backslash in it
isabellabeltran sends brownie points to @coymeetsworld :sparkles: :thumbsup: :sparkles:
:warning: isabellabeltran already gave coymeetsworld points
<style>
.red-text {
color: red;
}
.font-size {
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>
simply play around with the size
otherwise if u want to code it by yourself u could use javascript and have two buttons (left and right arrow)
each time u click one of those arrows you either add or remove a Class to the img, which makes it dissappear, for example size it to 0, make it transparent or set visibility to none
so each time the arrow is clicked the current img gets the getAwayClass which makes it dissappear, and the next in order gets it removed and appears
just one of many exaplmes
iggysmith sends brownie points to @coymeetsworld :sparkles: :thumbsup: :sparkles:
:star2: 2817 | @coymeetsworld |http://www.freecodecamp.com/coymeetsworld
simply copy the url in your browser
just copy
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
in your browser and you can see it
but its unstructured, so you should work with ctrl + F to find what u are searching for
otherwise download it and open it with notepad++ for example
jeffsywontcode sends brownie points to @f1ko :sparkles: :thumbsup: :sparkles:
:cookie: 141 | @f1ko |http://www.freecodecamp.com/f1ko
your welcome
btw..there is more than just the w3 carousel for bootstrap
just look around which one u like the most
@coymeetsworld
<style>
.red-text {
color: red;
}
font-size {
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>
sry but why is it hard to overwrite it?
if they got a class called .active which makes the background color blue
and you write in your css .active background color green
its done and not really that tricky at all?
font-size tags
you dont have to use them at all at the portfolio page
i wont use it either
its a nice and stylish way to show a few pictures, but in my opinion its rarely the best way to show pictures that way
p
it simply is cascading
if you import the bootstrap file first and then use the exactly name of their class u can overwrite it
if there are some issues with other classes u can still make !important and it works fine
iggysmith sends brownie points to @coymeetsworld :sparkles: :thumbsup: :sparkles:
:warning: iggysmith already gave coymeetsworld points
thats what i already did
for example:
i didnt like the width of the container class and simply wrote another width to the class container
.smaller-image { width: 100px;} should be inside the <style> tags
p {
font-size: 16px
worked but not what i did earlier
Your image should be 100 pixels wide. Browser zoom should be at 100%.
; after 16px;
why isnt !important recommended?
sry for the discussion, but i relatively new to the whole stuff and it kinda makes sense the way i imagined it until now
if you got 2 classes with the same name the last one will apply (cascading)
.red-text {
color: red;
}
h2 {
font-family: Lobster, Monospace;
}
p {
font-size: 16px;
font-family: Monospace;
}
.smaller-image { width: 100px;}
</style>
<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. ">
<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>
ddlv1988 sends brownie points to @ravikishorethella :sparkles: :thumbsup: :sparkles:
:cookie: 678 | @ravikishorethella |http://www.freecodecamp.com/ravikishorethella
class="classone classtwo"
isabellabeltran sends brownie points to @ravikishorethella :sparkles: :thumbsup: :sparkles:
:cookie: 679 | @ravikishorethella |http://www.freecodecamp.com/ravikishorethella
<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 class="width">
<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>
<style>
body {
background-color: black;
font-family: Monospace;
color: green;
}
.orange-text {
color: orange;
}
.pink-text {
color: pink;
}
.blue-text {
color: blue;
}
.white-text {color:white;}
</style>
<h1 id="orange-text" class="pink-text blue-text">Hello World</h1>
<h1 style="color: white">
<img src="" class="className" alt="">
<style> tags. Try to figure it out :smile:
<style>
.red-text {
color: red;
}
h1 {
fond-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 </p>
Due to browser implementation differences, you may need to be at 100% zoom to pass the tests on this challenge.
fond-size:
h1 {
font-size: 30px;
}
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
.red-text {
color: red;
}
h2 {
font-family: Lobster, Monospace;
}
smaller-image {
width: 100px;
}
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>
. before smaller-image {
width: 100px;
}and also, you need to add class to your
<img> tag
<style>
.red-text {
color: red;
h1 {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> kitty ipsum dolor,sit amet purr jump eat the grass rip the couch scratched sunbathe,shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched</p>
p elements
p{propertyname : propertyvalue;}
nayanpokhrel sends brownie points to @ravikishorethella :sparkles: :thumbsup: :sparkles:
:cookie: 680 | @ravikishorethella |http://www.freecodecamp.com/ravikishorethella
gucciguwop sends brownie points to @ravikishorethella :sparkles: :thumbsup: :sparkles:
:cookie: 681 | @ravikishorethella |http://www.freecodecamp.com/ravikishorethella
zaiah103 sends brownie points to @ravikishorethella :sparkles: :thumbsup: :sparkles:
:cookie: 682 | @ravikishorethella |http://www.freecodecamp.com/ravikishorethella
<img src="your source url" class="classname" alt="alternative text">
smaller-image class to the image
font-size: 16 px;
}
px
nlazarvn sends brownie points to @ravikishorethella :sparkles: :thumbsup: :sparkles:
:cookie: 683 | @ravikishorethella |http://www.freecodecamp.com/ravikishorethella
Angular2
ez12024 sends brownie points to @ravikishorethella :sparkles: :thumbsup: :sparkles:
:cookie: 685 | @ravikishorethella |http://www.freecodecamp.com/ravikishorethella
ez12024 sends brownie points to @onecreativegeek :sparkles: :thumbsup: :sparkles:
:cookie: 84 | @onecreativegeek |http://www.freecodecamp.com/onecreativegeek
<div class="classname">all the code to be nested here</div>
Nest all of your radio buttons inside one div with the class row.
Nest each of your radio buttons inside its own div with the class col-xs-6.
<div class="row">
<div class="col-xs-6">
<button class="btn btn-block btn-primary"><i class="fa fa-thumbs-up"></i> Like</button>
</div>
<div class="col-xs-6">
<button class="btn btn-block btn-info"><i class="fa fa-info-circle"></i> Info</button>
</div>
<div class="col-xs-6">
<button class="btn btn-block btn-danger"><i class="fa fa-trash"></i> Delete</button>
</div>
</div>
Someone take a look at this and tell me what i'm missing
<input type='radio' ...> that's what radio buttons look like
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
.red-text {
color: red;
}
}
h2 {
font-family: Lobster, Monospace;
}
. smaller-image {
width: 100px;
}
}
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>
<p data-height="265" data-theme-id="0" data-slug-hash="dRNKdX" data-default-tab="html,result" data-user="carnivalofcrows" data-embed-version="2" data-pen-title="weather app" class="codepen">See the Pen <a href="https://codepen.io/carnivalofcrows/pen/dRNKdX/">weather app</a> by Nick Musey (<a href="https://codepen.io/carnivalofcrows">@carnivalofcrows</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>
}that doesn't match anything
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
.red-text {
color: red;
}
}
h2 {
font-family: Lobster, Monospace;
}
. smaller-image {
width: 100px;
}
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>
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
.red-text {
color: red;
}
h2 {
font-family: Lobster, Monospace;
}
. smaller-image {
width: 100px;
}
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>
.red-text class declaration @nlazarvn
<element>
<nestedelement>
</element>barthoor sends brownie points to @nahuelovejero :sparkles: :thumbsup: :sparkles:
:cookie: 681 | @nahuelovejero |http://www.freecodecamp.com/nahuelovejero
nlazarvn sends brownie points to @nahuelovejero :sparkles: :thumbsup: :sparkles:
:cookie: 682 | @nahuelovejero |http://www.freecodecamp.com/nahuelovejero
@NahuelOvejero <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 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>
this is what i've done so far
{background-color:silver;}
nayanpokhrel sends brownie points to @nahuelovejero :sparkles: :thumbsup: :sparkles:
:cookie: 683 | @nahuelovejero |http://www.freecodecamp.com/nahuelovejero
div.silver-background {
background-color: silver;
}background-color: silver;}
<h2 class="red-text">CatPhotoApp</h2><element>
<nestedelement>
</element>`<input type="text" placeholder="cat photo URL">
<form action="/submit-cat-photo"></form>
<div class="silver background">background-color</div
silver-background
silver and background
red-text in the <h2> element: <h2 class="red-text">CatPhotoApp</h2>. Same technique, only with a <div> and a different class name.
> at the end of a tag :)
# @IggySmith ?
<style>
.red-text {
color: FF0000;
}
.green-text {
color: 00FF00;
}
.dodger-blue-text {
color: 2998E4;
}
.orange-text {
color: FFA500;
}
</style>
<h1 class="red-text">I am red!</h1>
<h1 class="green-text">I am green!</h1>
<h1 class="dodger-blue-text">I am dodger blue!</h1>
<h1 class="orange-text">I am orange!</h1>
# in front of the hex number ;) @IggySmith
<form action="/submit-cat-photo"><input type="text" placeholder="cat photo URL"></form>
iggysmith sends brownie points to @mattkx9 and @ksangwana :sparkles: :thumbsup: :sparkles:
:cookie: 104 | @ksangwana |http://www.freecodecamp.com/ksangwana
:cookie: 125 | @mattkx9 |http://www.freecodecamp.com/mattkx9
isabellabeltran sends brownie points to @mattkx9 :sparkles: :thumbsup: :sparkles:
:cookie: 126 | @mattkx9 |http://www.freecodecamp.com/mattkx9
<input> element inside the declaration for your <form> element. The <input> is a whole new element that needs to be nested inside the <form> element.
isabellabeltran sends brownie points to @mattkx9 and @nahuelovejero :sparkles: :thumbsup: :sparkles:
:warning: isabellabeltran already gave mattkx9 points
:cookie: 684 | @nahuelovejero |http://www.freecodecamp.com/nahuelovejero
https://codepen.io/Mattkx4/pen/VWPxMN?editors=1100
Can someone explain why the <p> element I have is resizing the div instead of wrapping?
<div> to be intrinsically set to the width of the image. @NahuelOvejero
<div> to the width of the image?
<img> tag
<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 class="className" src="" alt="">
<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>
kfootman01 sends brownie points to @ravikishorethella :sparkles: :thumbsup: :sparkles:
:cookie: 687 | @ravikishorethella |http://www.freecodecamp.com/ravikishorethella
Nest your topmost img element within a div with the class col-xs-4.
Nest your h2 element within a div with the class col-xs-8.
Make sure each of your div elements has a closing tag.
class="smaller-image" to your <img> tag
var noun = "cat";
var verb = "runs";
console.log(noun + " " + verb) // logs "cat runs"racoon1 sends brownie points to @thekholm80 :sparkles: :thumbsup: :sparkles:
:star2: 1095 | @thekholm80 |http://www.freecodecamp.com/thekholm80
Only add one class with each of your three selectors.
Your #target1 element should have the classes animated‚ shake and btn-primary.
<script>
$(document).ready(function() {
$("button").addClass("animated")
$(".btn").addClass("shake")
$("#target1").addClasss("btn-primary")
});
</script>
Am i missing something? any typos?
;
$(document).ready(function() {
$("button").addClass("animated");
$(".btn").addClass("shake");
$("#target1").addClasss("btn-primary");
});
</script>
$("#target1").addClasss("btn-primary");
history. you can use this.props.history.push() to navigate programmatically for the user
:star2: 1096 | @thekholm80 |http://www.freecodecamp.com/thekholm80
elpretentio sends brownie points to @thekholm80 :sparkles: :thumbsup: :sparkles:
User Story: I can access all of the portfolio webpage's content just by scrolling.
User Story: I can click different buttons that will take me to the portfolio creator's different social media pages.
User Story: I can see thumbnail images of different projects the portfolio creator has built (if you haven't built any websites before, use placeholders.)
User Story: I navigate to different sections of the webpage by clicking buttons in the navigation.
nav:display: flex;
flex-direction: row-reverse;float from your <li>
elpretentio sends brownie points to @thekholm80 :sparkles: :thumbsup: :sparkles:
:warning: elpretentio already gave thekholm80 points
body {
background-color: black;
}
Why is'nt this code giving black background colour to the body ?
.silver-background{ background-color: silver; } goes in your style tags, not in the html element
rickymccallum87 sends brownie points to @thekholm80 :sparkles: :thumbsup: :sparkles:
:star2: 1097 | @thekholm80 |http://www.freecodecamp.com/thekholm80
like thiseverywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff. <a href="http//freecatphotoapp.com"> cat photos </a> </p>
<p class="red-text">Purr jump eat the grass rip the couch scratched sunbathe, she
href="pornhub.com"
like this one time a group of my friends were supposed to give a demo about a tiny web app, of course they copy-pasted most of the things from internet, so I went in and quietly changed one of the
hrefs to that link above, and let the anchor text remain as it is
claire8ear sends brownie points to @thekholm80 and @onecreativegeek :sparkles: :thumbsup: :sparkles:
:cookie: 106 | @onecreativegeek |http://www.freecodecamp.com/onecreativegeek
:star2: 1098 | @thekholm80 |http://www.freecodecamp.com/thekholm80
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. ">
<a href= "http://llfreecatphotoapp.com">cat photos</a>
<p class="red-text">Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the <a href=google.com>red dot</a>, 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>this is what i've done where is the mistake
"http://llfreecatphotoapp.com"
color
colour
body {
.green-text{color: green;}
}
</style>
i did this
.green-text{color: green;}
}
</style>
color: green;
}
color: green to the body selector..
body {
...
}<style>
body {
.green-text{color: green;}
}
</style>
<h1>Hello World</h1>
this is the full thing , but it is not working
no need of a classbody { ... }
body {
color: green;}
</style>
<style>
.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. ">
<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 class="smaller-image">https://bit.ly/fcc-relaxing-cat</img>
<img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back. ">
img
varun30300 sends brownie points to @onecreativegeek and @manish-giri :sparkles: :thumbsup: :sparkles:
:cookie: 107 | @onecreativegeek |http://www.freecodecamp.com/onecreativegeek
:star2: 6021 | @manish-giri |http://www.freecodecamp.com/manish-giri
img-responsive is a bootstrap 3 class, as far as I'm aware.
img-fluid
brianquiroz216 sends brownie points to @manish-giri :sparkles: :thumbsup: :sparkles:
:star2: 6022 | @manish-giri |http://www.freecodecamp.com/manish-giri
brianquiroz216 sends brownie points to @heroiczero :sparkles: :thumbsup: :sparkles:
:star2: 1394 | @heroiczero |http://www.freecodecamp.com/heroiczero
tjames1985 sends brownie points to @heroiczero :sparkles: :thumbsup: :sparkles:
:star2: 1395 | @heroiczero |http://www.freecodecamp.com/heroiczero
:star2: 1099 | @thekholm80 |http://www.freecodecamp.com/thekholm80
tjames1985 sends brownie points to @thekholm80 :sparkles: :thumbsup: :sparkles:
class="cantainer-fluid think you meant container-fluid
<h1>Hello World</h1>
<style>
body {
font-family: Monospace;
background-color: black;
}
</style>
<style>
body
{color: green;}
{font-family:monospace;}
</style>
<h1>Hello World</h1>
hey , one more thing , i am using this to give the body element the font-family property of Monospace so the h1 element should inherit the font Monospace from your body element, what's going wrong ?
{ }
:warning: tjames1985 already gave thekholm80 points
:warning: @germangamboa95's account is not linked with freeCodeCamp. Please visit the settings and link your GitHub account.
:warning: tjames1985 already gave heroiczero points
tjames1985 sends brownie points to @germangamboa95 and @thekholm80 and @heroiczero :sparkles: :thumbsup: :sparkles:
body {
color: ...;
font: ....;
background: ....;
etc
}varun30300 sends brownie points to @manish-giri :sparkles: :thumbsup: :sparkles:
:warning: varun30300 already gave manish-giri points
<style>
<h2 asdsadas /h2> {color: red;}
</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 {
color: red;
}
between the style tags
Hi guys, i am having problem with this. It does not show the streamer's name correctly even though i have tried implementing a placeholder var. The outcome is, it both show "ESL_SC2".
var streamUsers = ["FreeCodeCamp","ESL_SC2"];
for (i=0;i<streamUsers.length;i++) {
var twitchAPI = "https://wind-bow.glitch.me/twitch-api/streams/" + streamUsers[i]
var currentStreamer = streamUsers[i];
$.getJSON (twitchAPI,function(data) {
if (data.stream===null) {
$(".twitch-list").append('<li><div style="display:flex;"><div class="streamUser">'+currentStreamer+'</div><div class="streamTitle">-None-</div><div class="streamStatus">OFFLINE</div></div></li>');
console.log(currentStreamer)
}
else {
$(".twitch-list").append('<li><div style="display:flex;"><div class="streamUser">'+currentStreamer+'</div><div class="streamTitle"><a href="'+data.stream.channel.url+'">'+data.stream.channel.status+'</a></div><div class="streamStatus">ONLINE</div></div></li>');
}
// console.log(data.stream.channel.url);
});
Hey Campers! Having trouble with a click event and google maps geolocation anyone can help?
var geocoder;
var map;
var address;
var lat;
var lng;
function geocodeAddress(geocoder, userInput) {
geocoder = new google.maps.Geocoder();
address = userInput;
geocoder.geocode({ 'address': address }, function(results, status) {
if (status === 'OK') {
lat = results[0].geometry.location.lat();
lng = results[0].geometry.location.lng();
console.log("address: " + address + " lat: " + lat + " lng: " + lng);
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
$("#user-submit").on("click", function() {
search = $("#search-subject").val();
var geoResults = geocodeAddress(geocoder, $("#search-address").val());
console.log("lat: " + lat);
});I'm having trouble pulling the lat and lng from the geocodeAddress function
a tag in your final p
freeCodeCamp Wiki:
:point_right: The freeCodeCamp wiki can be found on our forum.Please follow the link and search there.
<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>
Your h2 element should have the class red-text
@penguio when i passed over 164 levels ,my challenge level still stop at 164 level .What can i do? please help me!
martinuschen sends brownie points to @onecreativegeek :sparkles: :thumbsup: :sparkles:
:cookie: 110 | @onecreativegeek |http://www.freecodecamp.com/onecreativegeek
@codingForlife12
@Haroon2000 maybe you can try something like
<p>
<a>...</a>
</p>
href
href itself
https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css
#img_row{
text-align: center;
margin: 0 auto;
}
ccs99817 sends brownie points to @manish-giri :sparkles: :thumbsup: :sparkles:
:star2: 6023 | @manish-giri |http://www.freecodecamp.com/manish-giri
anthonygallina1 sends brownie points to @mstellaluna :sparkles: :thumbsup: :sparkles:
:star2: 1732 | @mstellaluna |http://www.freecodecamp.com/mstellaluna
thekholm80 sends brownie points to @anthonygallina1 :sparkles: :thumbsup: :sparkles:
:star2: 5463 | @anthonygallina1 |http://www.freecodecamp.com/anthonygallina1
mstellaluna sends brownie points to @anthonygallina1 and @thekholm80 :sparkles: :thumbsup: :sparkles:
:star2: 1100 | @thekholm80 |http://www.freecodecamp.com/thekholm80
:star2: 5464 | @anthonygallina1 |http://www.freecodecamp.com/anthonygallina1
thekholm80 sends brownie points to @mstellaluna :sparkles: :thumbsup: :sparkles:
:star2: 1733 | @mstellaluna |http://www.freecodecamp.com/mstellaluna
mstellaluna sends brownie points to @manish-giri :sparkles: :thumbsup: :sparkles:
:star2: 6024 | @manish-giri |http://www.freecodecamp.com/manish-giri
manish-giri sends brownie points to @mstellaluna :sparkles: :thumbsup: :sparkles:
:star2: 1734 | @mstellaluna |http://www.freecodecamp.com/mstellaluna
<div> element with the class container-fluid
<div class="yourClass">
all your html
</div>
<div class="container-fluid">
... your html..
</div><a href="#"
<div class="container">
<div> nested div </div>
<div> another nested div </div>
</div>zaiah103 sends brownie points to @kapilverma1 and @sergey-zhuravel :sparkles: :thumbsup: :sparkles:
:cookie: 64 | @kapilverma1 |http://www.freecodecamp.com/kapilverma1
:cookie: 465 | @sergey-zhuravel |http://www.freecodecamp.com/sergey-zhuravel
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">Mina</a>
</div>
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#intro">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</div>
<p>
<a></a>
</p>
thank you
minazee sends brownie points to @arawwad :sparkles: :thumbsup: :sparkles:
:cookie: 328 | @arawwad |http://www.freecodecamp.com/arawwad
% operator really helpful in that challenge
:cookie: 466 | @sergey-zhuravel |http://www.freecodecamp.com/sergey-zhuravel
toscanogithub sends brownie points to @sergey-zhuravel :sparkles: :thumbsup: :sparkles:
mrbone11 sends brownie points to @sergey-zhuravel :sparkles: :thumbsup: :sparkles:
:cookie: 467 | @sergey-zhuravel |http://www.freecodecamp.com/sergey-zhuravel
toscanogithub sends brownie points to @sergey-zhuravel :sparkles: :thumbsup: :sparkles:
:warning: toscanogithub already gave sergey-zhuravel points
jaxomofruatha sends brownie points to @brisourceful :sparkles: :thumbsup: :sparkles:
:cookie: 42 | @brisourceful |http://www.freecodecamp.com/brisourceful
For HTML and JS that really depends if you are using Node and Angular or React.
nothing found
filter()
for (let i in A) {if (A.filter( num => num == i).length % 2 > 0) return parseInt(i)}
let res = 0;
for(let i = 0; i < A.length; i++) {
res = res ^ A[i];
}
return res;
debugger; then open dev tools?
manish-giri sends brownie points to @thekholm80 :sparkles: :thumbsup: :sparkles:
:star2: 1101 | @thekholm80 |http://www.freecodecamp.com/thekholm80
</style>
<h2 class="red-text">CatPhotoApp</h2>
<div class = "container-fluid"></div>
<p>Click here for <a href="#">cat photos</a>.</p>
@ez12024
```
<div class = "container">
<div class = "container">
<h2 class="red-text">CatPhotoApp</h2>
<div class = "container-fluid"></div>
<p>Click here for <a href="#">cat photos.</a></p>
</div><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">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>
ez12024 sends brownie points to @aakriti94 :sparkles: :thumbsup: :sparkles:
:cookie: 313 | @aakriti94 |http://www.freecodecamp.com/aakriti94
muhddin sends brownie points to @sosmaniac-fcc :sparkles: :thumbsup: :sparkles:
:cookie: 303 | @sosmaniac-fcc |http://www.freecodecamp.com/sosmaniac-fcc
nepoleon sends brownie points to @sosmaniac-fcc :sparkles: :thumbsup: :sparkles:
:cookie: 304 | @sosmaniac-fcc |http://www.freecodecamp.com/sosmaniac-fcc
<form id="IDNameHere">
</form>
<style>
#IDNameHere{
background-color:red;
}
</style>
arjitmohan sends brownie points to @dschreiter :sparkles: :thumbsup: :sparkles:
:warning: @dschreiter's account is not linked with freeCodeCamp. Please visit the settings and link your GitHub account.
smaller-image challenge?
anyone know how to solve this? (If firstName does not correspond to any contacts then return "No such contact"
If prop does not correspond to any valid properties then return "No such property")
space <input.....>
</form>
<input type=“text">
</form>
yonatan1 sends brownie points to @sosmaniac-fcc :sparkles: :thumbsup: :sparkles:
:cookie: 305 | @sosmaniac-fcc |http://www.freecodecamp.com/sosmaniac-fcc
<input type="text" placeholder="cat photo URL"><form action="/submit-cat-photo">
</form>
mochis15 sends brownie points to @manish-giri :sparkles: :thumbsup: :sparkles:
:star2: 6025 | @manish-giri |http://www.freecodecamp.com/manish-giri
https://codepen.io/ccs99817/full/YQNvgV/
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.
<i class="btn btn-primary">
<input type="text" placeholder="cat photo URL" required>
<button type="submit"><i class="fa fa-paper-plane">Submit</i></button>
</i>
<style>
div{
border-radius: 20px;
width: 70%;
height: 400px;
margin: 50 auto;
background: linear-gradient(35deg, red, yellow, rgb(255, 204, 204));
}
</style>
<div></div>