These are chat archives for FreeCodeCamp/HelpFrontEnd

30th
Oct 2016
Ian Lee
@asparism
Oct 30 2016 00:05
does an api request header belong to the origin domain or the domain that contains the api originally?
Walid Ashri
@walidashri
Oct 30 2016 00:11
@NajahA21 put imgs in a row then every img in col
NajahA21
@NajahA21
Oct 30 2016 00:14
@walidashri hello i did that and when i assign the responsive class as well the img move.
Walid Ashri
@walidashri
Oct 30 2016 00:16
@NajahA21 like this
<div class="row">
  <div class="col-xs-5 img-responsive" id="img1">
<img src="http://2.bp.blogspot.com/-PU60V0WVeWw/Ub9q7IMq4wI/AAAAAAAAAr0/JBKk7VGRWi4/s400/BalenciagaCristobalEveningDress4.jpg" alt="img2">
    </img>
  </div>
  <div class="col-xs-7 img-responsive" id="img2"><img src="http://www.metmuseum.org/toah/images/h5/h5_C.I.58.34.28a,b.jpg" alt="img3"></img>
  </div>
</div>
@NajahA21 notice both in a div with row class
every img in a col div
NajahA21
@NajahA21
Oct 30 2016 00:19
@walidashri i believe thats what i did but im going to go back and try again maybe i missed something
NajahA21
@NajahA21
Oct 30 2016 00:25
@walidashri thank you
CamperBot
@camperbot
Oct 30 2016 00:25
najaha21 sends brownie points to @walidashri :sparkles: :thumbsup: :sparkles:
:cookie: 525 | @walidashri |http://www.freecodecamp.com/walidashri
Walid Ashri
@walidashri
Oct 30 2016 00:29
@NajahA21 :+1:
@walidashri can you see
Walid Ashri
@walidashri
Oct 30 2016 00:37
@NajahA21 check this<div class="col=xs-5 img
NajahA21
@NajahA21
Oct 30 2016 00:39
@walidashri oooooh!! lol Thank You!!! i was going crazy checking over and over let me fix it now and see!
CamperBot
@camperbot
Oct 30 2016 00:39
:warning: najaha21 already gave walidashri points
najaha21 sends brownie points to @walidashri :sparkles: :thumbsup: :sparkles:
Walid Ashri
@walidashri
Oct 30 2016 00:39
@NajahA21 :)
varEnigmatic
@varEnigmatic
Oct 30 2016 00:42
hello all
can anyone tell me how to make two pieces of text on two different lines look like one block with the same background color?
Walid Ashri
@walidashri
Oct 30 2016 00:50
@varEnigmatic change the margin
@varEnigmatic example
<p> hi there</p>
<p> yes </>
//and the style
p{
  background-color: red;
  margin :0;
  width: 10%;
}
Jonathan Doliver
@porygonj
Oct 30 2016 01:00
Where should I host images for the Personal Portfolio?
Ewerton
@filodox
Oct 30 2016 01:21
What is the best pixel or em?
Emily Sperry
@sperrye
Oct 30 2016 01:54
@porygonj I use 000webhost.com
varEnigmatic
@varEnigmatic
Oct 30 2016 02:05
thanks @walidashri
CamperBot
@camperbot
Oct 30 2016 02:05
varenigmatic sends brownie points to @walidashri :sparkles: :thumbsup: :sparkles:
:cookie: 526 | @walidashri |http://www.freecodecamp.com/walidashri
Jay Sheddan
@h20ohno
Oct 30 2016 02:18
So what exactly does "Uncaught ReferenceError: element is not defined" mean?
Tony Miri
@TonyMiri
Oct 30 2016 02:30
@h20ohno It means that, in your Javascript, you tried to use an HTML element that doesn't exist.
Diamond Burns
@dburns2236
Oct 30 2016 02:58
Hey everyone, I can't figure out how to prefill my tweet with randon quote that's been generated. Any suggestions?
Tony Miri
@TonyMiri
Oct 30 2016 03:22
I went back and looked at mine. I used a button provided by Twitter, and in their code there is a place where you can set the text that you'd like to tweet.
c0d0er
@c0d0er
Oct 30 2016 03:40
this is my calculator, any idea for improvement? thanks! http://codepen.io/c0d0er/pen/LRKVmE
Ken Haduch
@khaduch
Oct 30 2016 04:04
@c0d0er - I posted something in the CodeReview room.
@porygonj - you can use postimg.org, or put them in a dropbox account as long as you get the correct URL for the image. Those are a couple choices
Shawn Kemp
@official-shawnkemp
Oct 30 2016 06:27
i really want to be a web developer my eagerness slack me off. (question) how u become more persistence in a road of learning?
Nitin Chandran Nair
@NitinNair89
Oct 30 2016 06:53
Hello World! What's up! :)
CamperBot
@camperbot
Oct 30 2016 06:53

welcome to FreeCodeCamp @NitinNair89!

LiYang
@jusheng
Oct 30 2016 06:54
get up
A_A
@Otto-AA
Oct 30 2016 06:55
@00debug Doing projects you really want to do will keep you motivated much more than boring exercices :)
Sorin Ruse
@sorinr
Oct 30 2016 07:29
@dburns2236 here how you can do it: quotes
A_A
@Otto-AA
Oct 30 2016 08:21
does anyone has an idea how I could build a Q with blocks? I am struggling really hard on it :/
http://codepen.io/A_A/pen/LkwqRL
Nitin Chandran Nair
@NitinNair89
Oct 30 2016 08:36
@Otto-AA try removing the bottom right most pixel?
A_A
@Otto-AA
Oct 30 2016 08:40
@NitinNair89 Still doesn't looko like a Q :/
Nitin Chandran Nair
@NitinNair89
Oct 30 2016 08:41
@Otto-AA how does this look:
"q": [[0,1,1,0,1],[1,0,0,1,0],[1,0,0,0,1],[1,0,0,0,1],[0,1,1,1,0]]
teach me canvas when you get time :)
A_A
@Otto-AA
Oct 30 2016 08:46
@NitinNair89 soon, I am playing a computer game now ^_^
Nitin Chandran Nair
@NitinNair89
Oct 30 2016 08:46
Cool, my graphics fried up :cry:
A_A
@Otto-AA
Oct 30 2016 08:56
@NitinNair89 That looks quite good for 5 rows, thanks :)
CamperBot
@camperbot
Oct 30 2016 08:56
otto-aa sends brownie points to @nitinnair89 :sparkles: :thumbsup: :sparkles:
:cookie: 331 | @nitinnair89 |http://www.freecodecamp.com/nitinnair89
Nitin Chandran Nair
@NitinNair89
Oct 30 2016 08:58
@Otto-AA :)
A_A
@Otto-AA
Oct 30 2016 08:58
@NitinNair89 So about this 3d-stuff: I started with this tutorial about 3d WebGL http://codepen.io/rachsmith/post/beginning-with-3d-webgl-pt-1-the-scene
Nitin Chandran Nair
@NitinNair89
Oct 30 2016 08:59
Thanks buddy @Otto-AA
CamperBot
@camperbot
Oct 30 2016 08:59
nitinnair89 sends brownie points to @otto-aa :sparkles: :thumbsup: :sparkles:
:cookie: 331 | @otto-aa |http://www.freecodecamp.com/otto-aa
Nitin Chandran Nair
@NitinNair89
Oct 30 2016 09:00
and i though camperbot will send brownies to "buddy" :laughing: :P
A_A
@Otto-AA
Oct 30 2016 09:00
(All that I did is on the first part + cube.position.x = theXPos)
Nitin Chandran Nair
@NitinNair89
Oct 30 2016 09:00
haha, just kidding
that's cool. I will bookmark that link and read it when i get free time :)
A_A
@Otto-AA
Oct 30 2016 09:01
I'd also suggest you to do your 3d-font with it. It's a nice training for your JS-skills ;)
Nitin Chandran Nair
@NitinNair89
Oct 30 2016 09:02
i am poor in JS.. :D
will do it
A_A
@Otto-AA
Oct 30 2016 09:03
@NitinNair89 Good luck then :)
Nitin Chandran Nair
@NitinNair89
Oct 30 2016 09:04
hahaha thanks
;)
Joran de Haan
@LeCoquille
Oct 30 2016 09:08
Hi everyone
need some help with Twitch APi
loop is working for URL creation, but not for writing data in the html
anybody any idea why?
Nitin Chandran Nair
@NitinNair89
Oct 30 2016 09:17
what data? @LeCoquille
I think you are overwriting the existing data.
Joran de Haan
@LeCoquille
Oct 30 2016 09:19
@NitinNair89 I know what the problem is now. I can't make the JSON function inside a loop...
@NitinNair89 don't know how to fix it though
@NitinNair89 data from twitch API
Nitin Chandran Nair
@NitinNair89
Oct 30 2016 09:21
write separate functions - 1 for streams (offline or online availability) and the other for the data
the stream function would run first and then for online streams the 2nd function should get called.
@LeCoquille
Joran de Haan
@LeCoquille
Oct 30 2016 09:23
@NitinNair89 yes, but how do I loop all of this
Nitin Chandran Nair
@NitinNair89
Oct 30 2016 09:24
inside the stream function you will have a loop, right?
which will have the streams url and channel name
if the channel is online, call another function with channel name as argument/parameter. Then use the channels URL to get channel data. @LeCoquille
Joran de Haan
@LeCoquille
Oct 30 2016 09:26
@NitinNair89 allright, I'll look into that. Thanks for helping out!
CamperBot
@camperbot
Oct 30 2016 09:26
lecoquille sends brownie points to @nitinnair89 :sparkles: :thumbsup: :sparkles:
:cookie: 332 | @nitinnair89 |http://www.freecodecamp.com/nitinnair89
Nitin Chandran Nair
@NitinNair89
Oct 30 2016 09:28
welcome! le
@LeCoquille :)
Arjun C T
@arjunsirige
Oct 30 2016 10:02
how to add bootstrap for Personal Portfolio
A_A
@Otto-AA
Oct 30 2016 10:02
@arjunsirige Css->settings->quickAdd->Bootstrap
if you use codepen.io
Arjun C T
@arjunsirige
Oct 30 2016 10:03
@Otto-AA thank you
CamperBot
@camperbot
Oct 30 2016 10:03
arjunsirige sends brownie points to @otto-aa :sparkles: :thumbsup: :sparkles:
:cookie: 332 | @otto-aa |http://www.freecodecamp.com/otto-aa
Jess Alexander
@jess-alexander
Oct 30 2016 10:18
Hello all — I’m working on the Sum All Primes challenge and wrote some bad code. To be more clear, everytime I navigate to the challenges page it freezes and quits so I can’t even remove the code that is killing it. Help please!!
U-ways
@U-ways
Oct 30 2016 10:21
@jess-alexander Hello you got two ways to tackle that:
  1. Disable Javascript on your browser => go to that page => Copy your code (to save it) => then rest the challenge!
@jess-alexander 2. Clear your browser's cache (You will lose your code so maybe take a quick screenshot :D?)
Jess Alexander
@jess-alexander
Oct 30 2016 10:24
Thanks @U-ways !!
CamperBot
@camperbot
Oct 30 2016 10:24
jess-alexander sends brownie points to @u-ways :sparkles: :thumbsup: :sparkles:
:cookie: 530 | @u-ways |http://www.freecodecamp.com/u-ways
U-ways
@U-ways
Oct 30 2016 10:25
@jess-alexander Welcome! Been there :P
Jess Alexander
@jess-alexander
Oct 30 2016 10:25
:p
F22rapt
@F22rapt
Oct 30 2016 10:32
how flows time
Nitin Chandran Nair
@NitinNair89
Oct 30 2016 11:22
hi there @F22rapt :D
vakio
@vakio
Oct 30 2016 12:34
@jess-alexander @U-ways you can also add &run=disabled to the url and you won't lose the code
Ananay
@ananaymital
Oct 30 2016 12:42
i find it better to use auto-run=disabled
Jess Alexander
@jess-alexander
Oct 30 2016 12:49
nice tip! Thanks @Deadpool37 and @vakio
CamperBot
@camperbot
Oct 30 2016 12:49
jess-alexander sends brownie points to @deadpool37 and @vakio :sparkles: :thumbsup: :sparkles:
:warning: could not find receiver for deadpool37
:cookie: 282 | @vakio |http://www.freecodecamp.com/vakio
abtak mustapha
@mustapha88
Oct 30 2016 12:54
hello every one
i try to trigger form modal outside class in reactjs and it's not working
 < button  className="btn btn-lg btn-info" data-target="#editPopup" data-toggle="modal" onClick={this.handleEdit}><span className="glyphicon glyphicon-pencil"></span>Edit</button>
Nitin Chandran Nair
@NitinNair89
Oct 30 2016 13:16
remove the whitespace before 'button'
do you have element with id="editPopup"?
A_A
@Otto-AA
Oct 30 2016 13:59
@NitinNair89 Finished with my font :) It's even a bit responsive now ^^
http://codepen.io/A_A/pen/LkwqRL
Nitin Chandran Nair
@NitinNair89
Oct 30 2016 14:10
Looks awesome @Otto-AA :+1:
Vinicius Costa
@viniciuscrw
Oct 30 2016 14:27
Hello! I'm having trouble trying to use jQuery on Codepen. I'm building the Tribute Page as part of the "Basic Front End Development Projects", and I try to add the jQuery CDN into a <script> tag inside the HTML box, but it just doesn't work. Does anyone know how can I solve this?
A_A
@Otto-AA
Oct 30 2016 14:28
@viniciuscrw Open the settings and then go to the JS-section. There you can "quick-add" jQuery
Vinicius Costa
@viniciuscrw
Oct 30 2016 14:34
Yeah, I tried that. But will I have to write the $(document).ready(function() { }); in the JS box? Because I'm trying to write in the HTML one and still not working. The example we have to look at does not use any JS at all, and I think this may be part of the challenge. But is that possible to do what you told me and use the jQuery inside the HTML?
A_A
@Otto-AA
Oct 30 2016 14:35
@viniciuscrw Can you link your pen?
Nitin Chandran Nair
@NitinNair89
Oct 30 2016 14:35
It will work when you do it on your local system. But for codepen, each "Type" of code should be written inside their specified boxes. @viniciuscrw
A_A
@Otto-AA
Oct 30 2016 14:35
@NitinNair89 I think it should work though
Nitin Chandran Nair
@NitinNair89
Oct 30 2016 14:36
are you sure?
A_A
@Otto-AA
Oct 30 2016 14:40
@viniciuscrw Ok, just add <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> in your HTML-settings->Stuff for head
Then you can also remove the <head> and <body> in your HTML-section
It looks like when you add it to the JS-section it will add it afterwards: view-source:https://s.codepen.io/boomerang/962dd1e4cf4495de1954b0505b85bc261477838533332/index.html?editors=0010
Vinicius Costa
@viniciuscrw
Oct 30 2016 14:44
@Otto-AA Aaaah! Now it works! Thanks dude (:
CamperBot
@camperbot
Oct 30 2016 14:44
:cookie: 333 | @otto-aa |http://www.freecodecamp.com/otto-aa
viniciuscrw sends brownie points to @otto-aa :sparkles: :thumbsup: :sparkles:
Sajmir Doko
@sajdoko
Oct 30 2016 15:20
function nextInLine(arr, item) {
// Your code here
var remNum = nextInLine.pop([1]);
nextInLine.push(remNum);
var remFirstEl = nextInLine.shift([0]);
return remFirstEl; // Change this line
}
nextInLine.pop is not a function
Islam Ibakaev
@dagman
Oct 30 2016 15:21
i deployed app to heroku yesterday. it was working fine until i open it today. today it shows application error message. What the hell does it means? I mean it was working good but today shows an error?
Nitin Chandran Nair
@NitinNair89
Oct 30 2016 15:23
@sajdoko Did you mean nextInLine.pop(arr[1]); ?
A_A
@Otto-AA
Oct 30 2016 15:26
@sajdoko nextInLine seems like a function and not an array?
Nitin Chandran Nair
@NitinNair89
Oct 30 2016 15:27
oh yea, i just noticed. The function name and variable name are the same.. isn't that buggy?
pop/push are array functions, right?
Vijay
@vijayabharathib
Oct 30 2016 15:28

Hi, I am going through front-end intermediate algorithm challenges. I have completed Smallest common multiple and steamroller - but the tests do not pass. When I use inputs from tests inside the editor, the output is matching with the test.

Has anyone else faced this recently? Thanks.

catalin560
@catalin560
Oct 30 2016 15:35
hello
function doColor (randomColor) {
var color = ["green", "red", "yellow", "blue"]
var num=Math.floor(Math.random() * color.length);
  randomColor = color[num];
  $('#text').html('press ' + color+ '!');
  $(".btn-" + color).css('cssText', 'background: white; transition: background 1s ease;');
  setTimeout(function(){
      $(".btn-" + color).css('cssText', 'background: ' + color + '; transition: background 1s ease;');
  }, 600);  
}

$('.start').click(doColor);
does anyone know why isn't this working properly?
Nitin Chandran Nair
@NitinNair89
Oct 30 2016 15:36
First - no semicolon on the first line
catalin560
@catalin560
Oct 30 2016 15:36
@NitinNair89 damn
I must have been blind
still a semicolon shouldn't be a deal breaker right?
Nitin Chandran Nair
@NitinNair89
Oct 30 2016 15:37
what's the 'cssText' ?
it's the syntax breaker :P
catalin560
@catalin560
Oct 30 2016 15:37
:)
its an argument passed with the .css() it think.. that ain't the problem either...
Nitin Chandran Nair
@NitinNair89
Oct 30 2016 15:38
Nope, I don't think that is an argument
catalin560
@catalin560
Oct 30 2016 15:38
when I press .start this is what comes up "press green,red,yellow,blue!"
Islam Ibakaev
@dagman
Oct 30 2016 15:38
it is 2017 coming forget about jquery...seriously guys :smile:
Nitin Chandran Nair
@NitinNair89
Oct 30 2016 15:39
@catalin560 .css('prop':'value');
Islam Ibakaev
@dagman
Oct 30 2016 15:39
learn react ecosystem instead
catalin560
@catalin560
Oct 30 2016 15:39
@dagman react? I barely know javascript lol :)
Islam Ibakaev
@dagman
Oct 30 2016 15:40
@catalin560 don't dive into jquery man you are not gonna use it in real world almost never
Nitin Chandran Nair
@NitinNair89
Oct 30 2016 15:40
@catalin560 Refer this - http://api.jquery.com/css/
catalin560
@catalin560
Oct 30 2016 15:40
@NitinNair89 $(selector).css({property:value, property:value, ...})
http://www.w3schools.com/jquery/css_css.asp
Islam Ibakaev
@dagman
Oct 30 2016 15:40
@catalin560 grab the basics of javascript and turn your attention from jquery to react
catalin560
@catalin560
Oct 30 2016 15:41
@dagman how is that better?
Nitin Chandran Nair
@NitinNair89
Oct 30 2016 15:41
@catalin560 Yeah, so how is 'cssText' a property?
Islam Ibakaev
@dagman
Oct 30 2016 15:42
@catalin560 look if you are gonna to find javascript jobs you have to know react or angular 2 or vue.js but react is preferable
@catalin560 jquery is not enough actually i don't use at at all
don't waste your time
catalin560
@catalin560
Oct 30 2016 15:43
@dagman well thanks I'll keep that in mind however for now I'm only doing the FCC challenges...
CamperBot
@camperbot
Oct 30 2016 15:43
catalin560 sends brownie points to @dagman :sparkles: :thumbsup: :sparkles:
:cookie: 638 | @dagman |http://www.freecodecamp.com/dagman
catalin560
@catalin560
Oct 30 2016 15:44
@NitinNair89 now the color wont flash at all :)
Islam Ibakaev
@dagman
Oct 30 2016 15:44
yw
Nitin Chandran Nair
@NitinNair89
Oct 30 2016 15:44
would be nice if you can share the link.. :)
Nitin Chandran Nair
@NitinNair89
Oct 30 2016 15:44
or add console.log displays after each line to see where javascript failed.
Vijay
@vijayabharathib
Oct 30 2016 15:50
...all right, those who may be trying to answer my question [this issue][FreeCodeCamp/FreeCodeCamp#9199] helped me get past the tests in smallest common multiple - I used a global variable which apparently is not well supported. More than that, I shouldn't have used it without thinking about re-usability of the code. I hope this will also help me get past steamroller
Nitin Chandran Nair
@NitinNair89
Oct 30 2016 15:50

@catalin560

$(".btn-" + color).css({
    'background':'white', 
    'transition': 'background 1s ease'});

The correct syntax.. I still didn't understand the 'cssText' though

catalin560
@catalin560
Oct 30 2016 15:53
@NitinNair89 hello thanks but I found out the error! this is the correct code:
function doColor (randomColor) {
var color = ["green", "red", "yellow", "blue"];
var num=Math.floor(Math.random() * color.length);
  randomColor = color[num];
  $('#text').html('press ' + randomColor+ '!');
  $(".btn-" + randomColor).css('cssText', 'background: white; transition: background 1s ease;');
  setTimeout(function(){
      $(".btn-" + randomColor).css('cssText', 'background: ' + randomColor + '; transition: background 1s ease;');
  }, 600);  
}

$('.start').click(doColor);
CamperBot
@camperbot
Oct 30 2016 15:53
catalin560 sends brownie points to @nitinnair89 :sparkles: :thumbsup: :sparkles:
:cookie: 333 | @nitinnair89 |http://www.freecodecamp.com/nitinnair89
catalin560
@catalin560
Oct 30 2016 15:53
its so simple I'm embarrassed...
Nitin Chandran Nair
@NitinNair89
Oct 30 2016 15:54
Good for you if it worked :+1:
Islam Ibakaev
@dagman
Oct 30 2016 16:14
guys is there someone who utilised https://auth0.com/ to manage authentication for app?
Manuel Tancoigne
@mtancoigne
Oct 30 2016 16:51
@dagman nope :/
(btw, how are you ? :p)
Islam Ibakaev
@dagman
Oct 30 2016 16:52
@mtancoigne fine
@mtancoigne building recipe app using redux , react-router and other good stuff
Manuel Tancoigne
@mtancoigne
Oct 30 2016 16:53
wow :) i'm currently writing a small bash script to setup a react dev env (with webpack)
@dagman you need some padding on the top of the recipe list :D
but the app looks great, good job !
Islam Ibakaev
@dagman
Oct 30 2016 16:54
@mtancoigne have you build something using react-router?
i am curious what other campers has done :smile:
Manuel Tancoigne
@mtancoigne
Oct 30 2016 16:55
nope, i stopped using React after the dungeon crawling game
Islam Ibakaev
@dagman
Oct 30 2016 16:55
@mtancoigne why?
Manuel Tancoigne
@mtancoigne
Oct 30 2016 16:55
@dagman no time anymore to continue on FCC, sadly.
at least, for the last three monthes, so that's sad :/
Islam Ibakaev
@dagman
Oct 30 2016 16:57
@mtancoigne i think there is no need build all this projects so i am gonna stop on recipe app and dive deeper into react ecosystem
i mean game of life and other projects no need actually to build them
Manuel Tancoigne
@mtancoigne
Oct 30 2016 17:00
the dungeon crawler was the most exciting one, as I did a nice thing in the end... That was a good challenge :)
@dagman I even wrote my own library to generate the maps
André
@pennyJack
Oct 30 2016 17:25

Hey guys, first time question here, hope u might help. I don't understand why exactly we need the class ".embed-responsive-item" in the following code snippet (Bootstrap code to make iframes, videos etc. responsive):

<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>

Source: http://getbootstrap.com/components/#responsive-embed

The thing is, that .embed-responsive-item is applied anyway, i.e. even if you don't use it explicitly
SaraNewYork
@SaraNewYork
Oct 30 2016 18:33
I really need some advice, please. I am interested in computer science especially web designer field. what is the first thing I need to do? do I have to take short courses or start with self study online? what are the tools do I need to have? and what are the basic things to know to start this course?
André
@pennyJack
Oct 30 2016 18:48
Alexion Ramos
@almos98
Oct 30 2016 19:08
Hello! I'm doing the front end course and I just reached the first project (Build a Tribute Page). Do I have to do the tribute page on someone different or can I use the same person as in the example (and therefore the information they provided).
André
@pennyJack
Oct 30 2016 19:10
You can do it about anyone you like.
Janice
@janicewilson
Oct 30 2016 19:41

Desperate plea for help re tribute exercise:

I'd like to use a gradient + image for my the background of my first row. That all went just fine. Here's the code:

CSS
.gradient { position: relative; display: inline-block; }

.gradient:after { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: inline-block; background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.73) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0.73)), color-stop(100%, rgba(0, 0, 0, 0))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.73) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.73) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.73) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.73) 100%); /* W3C */ filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000', GradientType=0); /* IE6-9 */ }

.image-background-landing { width: 100%; height: 800px; background: url(/Users/Janice/42hikes/img/background.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }

The problem occurred when I attempted to add my logo and text. It's somehow on top of the image, but behind the gradient. How do I get my logo and text on top of the gradient?

MORE CSS
.logo-icon { text-align: center; }

.logo-icon img { width: 10%; }

HTML
<div class="row gradient image-background-landing"> <div class="col-12 logo-icon"> <img src="/Users/Janice/42hikes/img/logo-light.png" alt="42 Trails mascot"/> </div> <div class="col-12 "><h1>42trails</h1></div> </div>

Dylan
@dhcodes
Oct 30 2016 19:49
@janicewilson you could try using z-index
z-index is the z layering of the page
so z-index: 1; would overlay z-index: 0
Joran de Haan
@LeCoquille
Oct 30 2016 20:13
Hi everyone, something is wrong with my if condition in writeStatus function: https://codepen.io/LeCoquille/pen/bwPpBW?editors=0010
anybody know what I'm doing wrong?
Janice
@janicewilson
Oct 30 2016 20:19
@dylan: Thanks for the suggestion, but it didn't work. I gave the gradient a -2, the background image a -1 and the logo a 0. And. . .nothing.
CamperBot
@camperbot
Oct 30 2016 20:19
janicewilson sends brownie points to @dylan :sparkles: :thumbsup: :sparkles:
:cookie: 26 | @dylan |http://www.freecodecamp.com/dylan
Janice
@janicewilson
Oct 30 2016 20:19
Any other ideas?
Rimi.
@Codevotee
Oct 30 2016 20:24
@janicewilson try gradient: 0, background image: -1 and logo: 1
Janice
@janicewilson
Oct 30 2016 20:30
@APRim05 It seems the z-index has no impact, no matter what numbers I plug.
(Ugh.)
Rimi.
@Codevotee
Oct 30 2016 20:32
@janicewilson could you paste your code in a better way? because if i copy that into my text editor it looks weird
'''
CamperBot
@camperbot
Oct 30 2016 20:32
:bulb: to format code use backticks! ``` more info
Janice
@janicewilson
Oct 30 2016 20:32
Absolutely.

Here's the gradient:

.gradient {
position: relative;
display: inline-block;
}

.gradient:after {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: inline-block;
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.90) 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0.73)), color-stop(100%, rgba(0, 0, 0, 0)));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.73) 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.73) 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.73) 100%);
/* IE10+ */
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.73) 100%);
/* W3C */
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000', GradientType=0);
/* IE6-9 */
}

kat-mag
@kat-mag
Oct 30 2016 20:33
@janicewilson that's not the 'better' way
use ```
Janice
@janicewilson
Oct 30 2016 20:34
@kat-mag Working on it!
kat-mag
@kat-mag
Oct 30 2016 20:34
at the start and the end
on separate lines
about your gradient & whatever. you can use :before & :after pseudoelements on your <div> or whatever's the place you're putting the stuff into.
CamperBot
@camperbot
Oct 30 2016 20:35
you need to ask about @someone!
Rimi.
@Codevotee
Oct 30 2016 20:36
@camperbot :+1:
kat-mag
@kat-mag
Oct 30 2016 20:37
@janicewilson it'd be basically something similar to this: https://scotch.io/tutorials/how-to-change-a-css-background-images-opacity
Janice
@janicewilson
Oct 30 2016 20:37
@kat-mag Thanks! I am using the pseudoelement for the gradient (after), are you suggesting use the pseudoelement for the logo (before)?
CamperBot
@camperbot
Oct 30 2016 20:37
janicewilson sends brownie points to @kat-mag :sparkles: :thumbsup: :sparkles:
:cookie: 388 | @kat-mag |http://www.freecodecamp.com/kat-mag
Janice
@janicewilson
Oct 30 2016 20:39

Here's the image:

image-background-landing {
width: 100%;
height: 800px;
background: url(/Users/Janice/42hikes/img/background.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

Here's the HTML:
<div class="row gradient image-background-landing">
<div class="col-12 logo-icon">
<img src="/Users/Janice/42hikes/img/logo-light.png" alt="42 Trails mascot"/>
</div>
<div class="col-12 "><h1>42trails</h1></div>
</div>
kat-mag
@kat-mag
Oct 30 2016 20:41
@janicewilson you're still posting it the wrong way. one of these ` at the start & end gives you one line of code only.
A_A
@Otto-AA
Oct 30 2016 20:41
@janicewilson press Ctrl-shift-m for the writing-markdown :)
kat-mag
@kat-mag
Oct 30 2016 20:41
You do BLOCK of code by placing three ```
and you don't have to do this for every line ;D
Rimi.
@Codevotee
Oct 30 2016 20:42
@janicewilson you don't have to get tired by adding ``` in each line, just add three at the start of all your code, and three at the end of all the code
kat-mag
@kat-mag
Oct 30 2016 20:44
@janicewilson and if you read the link I gave you... It should work just fine ;p
Rimi.
@Codevotee
Oct 30 2016 20:45
@janicewilson like this Janice
blob
Joran de Haan
@LeCoquille
Oct 30 2016 20:49
Why does it append 6 columns when i append the column to the row? https://codepen.io/LeCoquille/pen/bwPpBW?editors=0010
See function writeStatus
Janice
@janicewilson
Oct 30 2016 20:52
@APRim05 Thanks, for the formatting tip!
CamperBot
@camperbot
Oct 30 2016 20:52
:cookie: 406 | @aprim05 |http://www.freecodecamp.com/aprim05
janicewilson sends brownie points to @aprim05 :sparkles: :thumbsup: :sparkles:
Janice
@janicewilson
Oct 30 2016 20:53
@kat-mag I'm still unable to work the same magic with the gradient.
In the example you provided, I assume the image is the background and the gradient is the image. . .
Still nothing.
(Nothing = logo behind gradient)
kat-mag
@kat-mag
Oct 30 2016 21:01
u made me work
layton101
@laytan101
Oct 30 2016 21:09
@LeCoquille the div for status column needs to go inside the row div for each channel.
Janice
@janicewilson
Oct 30 2016 21:26
@kat-mag Thank you! That did it! (With many, many less lines of code!) I very much appreciate your help!
Janice
@janicewilson
Oct 30 2016 21:38

@kat-mag: If I understand this correctly, the gradient is behind the image. And the gradient only shows to the extent that the image is transparent. Is this correct?

If yes, to reverse (gradient on top of image), I simply replace :before with :after, correct?

When doing so, I'm still unable to "see" the gradient unless I make the image partially transparent, which I prefer not to do.
kat-mag
@kat-mag
Oct 30 2016 22:23
@janicewilson I suppose switching the content of your container with pseudoelement's content would do the trick... But that's not something I want to test myself ;D and whether it's 'before' or 'after' really doesn't matter. It get's the property of z-index that places it above or below.
Ken Haduch
@khaduch
Oct 30 2016 23:42
@c0d0er - I don't see what you mean about the = and + ? They look like they are aligned? Or do you mean something else?
Walid Ashri
@walidashri
Oct 30 2016 23:49
@khaduch thanks he fix it
CamperBot
@camperbot
Oct 30 2016 23:49
walidashri sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 1855 | @khaduch |http://www.freecodecamp.com/khaduch
c0d0er
@c0d0er
Oct 30 2016 23:55
@khaduch thanks
CamperBot
@camperbot
Oct 30 2016 23:55
c0d0er sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 1856 | @khaduch |http://www.freecodecamp.com/khaduch