eemebarbe sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1051 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
:star2: 1052 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
jesushilariohernandez sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1053 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
twitchy-cake sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
<input type="text" class="className">
would do it?
mm:ss
as needed, it eliminates the complication of tracking minutes and seconds and the manipulation of them.whichBlock
variable after you count down, although from what I see when I run the clock, only the first bar shrinks, and then nothing else happens with the bars? I set the timer to 1 minute for each phase. It seems to stop after the first bar. I haven't tried to debug what's going on there?asparism sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 2022 | @khaduch |http://www.freecodecamp.com/khaduch
frankmaayn sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 877 | @sorinr |http://www.freecodecamp.com/sorinr
Hello, mates!
I just trying initialize some odometer here http://codepen.io/Xaz16/pen/oYpaqr
http://github.hubspot.com/odometer/ -- docs
From my function InitDepos
And from copy-paste code from docs.
But nothing is work.
On my project have error :
"Uncaught TypeError: Cannot read property 'odometer' of null(…)"
mr-kumar-abhishek sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star2: 1609 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
sfshameem5 sends brownie points to @coymeetsworld :sparkles: :thumbsup: :sparkles:
:star2: 1569 | @coymeetsworld |http://www.freecodecamp.com/coymeetsworld
img-circle
class gives a 50% border-radius. That image is rectangular, so it becomes elliptical in shape.
img
tag rather than div
tags for cutting it off ... and also to give borders etc...
codecampamy sends brownie points to @messiahack and @khaduch and @mr-kumar-abhishek :sparkles: :thumbsup: :sparkles:
:cookie: 126 | @messiahack |http://www.freecodecamp.com/messiahack
:cookie: 408 | @mr-kumar-abhishek |http://www.freecodecamp.com/mr-kumar-abhishek
:star2: 2023 | @khaduch |http://www.freecodecamp.com/khaduch
var wikiURL = 'https://en.wikipedia.org/w/api.php?action=query&list=search&format=json&srsearch=' + bob;
@bestintown23 To expand on what I was talking about yesterday with adding sections, remove your 800px margin-top from your CSS for all of your sections. Use min-height
to specify how big you want each section to be. Add more sections as needed. You can apply a background image to individual sections or place <img> tags inside each section to display different images. A basic outline could be:
<header>
<nav></nav>
</header>
<main>
<section id="about"></section>
<section id="first-image-section"></section>
<section id="portfolio"></section>
<section id="second-image-section"></section>
<section id="contact"></section>
</main>
<footer></footer>
This is a more detailed description of how to set it all up: http://blog.teamtreehouse.com/use-html5-sectioning-elements
bestintown23 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1054 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
<div class="container">
<div class="row">
<div class="col-xs-4"></div>
<div class="col-xs-4"></div>
<div class="col-xs-4"></div>
</div>
</div>
<img src="https://drive.google.com/file/d/0BwyKgj0mADzQQzBOMlRpZUJDVVU/view?usp=sharing" alt="Life">
<h2>life</h2>
onewebdeveloper sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 879 | @sorinr |http://www.freecodecamp.com/sorinr
$(document).ready(function(){
not (document).ready(function(){
duruzican sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1055 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
@TylerMoeller
https://codepen.io/iehab91/pen/aByaWa?editors=1000
that's perfect for both but, there's a deference between first img and both imgs.
am I doing the grid system correctly ?
btw, in phone screen all r same size
@whiz25 use this instead
UPDATE: Due to a change in conditions on API usage explained here Twitch.tv now requires an API key, but we've built a workaround. Use https://wind-bow.hyperdev.space/twitch-api instead of twitch's API base URL (i.e. https://api.twitch.tv/kraken ) and you'll still be able to get account information, without needing to sign up for an API key.
$.getJSON( (link) , function(data){
//What you want to do with the JSON you just got
});
@donealbercier
i found this
//https://en.wikipedia.org/w/api.php?action=opensearch&limit=10&format=json&callback=portalOpensearchCallback&search=
anything u put after search= shows possible search results
donealbercier sends brownie points to @waqas909 :sparkles: :thumbsup: :sparkles:
:cookie: 271 | @waqas909 |http://www.freecodecamp.com/waqas909
@James-N-M
~~~
$.getJSON('https://raw.githubusercontent.com/dariusk/corpora/master/data/games/jeopardy_questions.json', function(data){
$('p').text(data.description); // puts the description property from the JSON file in the <paragraph> element
})
$.getJSON('https://raw.githubusercontent.com/dariusk/corpora/master/data/games/jeopardy_questions.json', function(data){
$('p').text(data.description); // puts the description property from the JSON file in the <paragraph> element
})
james-n-m sends brownie points to @waqas909 :sparkles: :thumbsup: :sparkles:
:cookie: 272 | @waqas909 |http://www.freecodecamp.com/waqas909
donealbercier sends brownie points to @spieg :sparkles: :thumbsup: :sparkles:
:cookie: 263 | @spieg |http://www.freecodecamp.com/spieg
https://codepen.io/Waqas909/pen/yVooZE
2 Questions:
1- How do i expand my search bar from both sides, instead of just the right side, when clicked on.
2- Why does the transition not work when i focus the search bar
arrayOfUsers.map(function(user, i) { })
homerallen sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1056 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
:warning: homerallen already gave tylermoeller points
homerallen sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
waqas909 sends brownie points to @donealbercier :sparkles: :thumbsup: :sparkles:
:cookie: 264 | @donealbercier |http://www.freecodecamp.com/donealbercier
@Waqas909 You could remove the fixed positioning and center it by using a top margin with auto left/right margins:
input[type="text"]{
background-image: url('https://cdn1.iconfinder.com/data/icons/hawcons/32/698627-icon-111-search-128.png');
background-position: 96% 5px;
background-repeat: no-repeat;
padding: 0px 40px 0px 10px;
background-size: 25px 25px;
width: 200px;
border-radius: 6px;
transition: width 1s;
margin: 20vh auto 0;
}
Now when you put focus on the textbox, it stays centered.
waqas909 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1057 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
@Waqas909 Set the desired width in the input:focus{} element and the transition in the input type
`
-webkit-transition: 1s ease-in-out;
-moz-transition: 1s ease-in-out;
-o-transition: 1s ease-in-out;
transition: 1s ease-in-out;
`
@tommygebru ```body {
background-color: gray;
margin: 0;
padding: 0;
border: 0;
}
h4{
padding: 25px;
}
h1{
text-align: center;
}
.colummns:after{
content="";
display: block;
clear: both;
}
.content1:after{
content="";
display: block;
clear: both;
}
.content2:after{
content="";
display: block;
clear: both;
}
.content3:after{
content="";
display: block;
clear: both;
}
.contact:after{
content="";
display: block;
clear: both;
}
section, aside{
float:left;
width:48%;
padding: 1%;
margin: 1%;
}
img{
width:100%;
margin-right: 0;
padding: 0;
}
.content1{
float: left;
background-color: red;
width: 48%;
padding: 1%;
margin: 1%;
}
.img1{
float:;
width:;
margin:;
padding:;
}
.img2{
}
.content2{
float: left;
width: 48%;
padding: 1%;
margin: 1%;
background-color: blue;}
.content3{
float: left;
width: 48%;
padding: 1%;
margin: 1%;
background-color: green;
}
.forms{
background-color: green;
float: right;
width: 48%;
margin: 1%;
padding: 1%;
}
.closingnote{
background-color: green;
float: right;
width: 48%;
margin: 1%;
padding: 1%;
}
.foot-left{
float: left;
width: 48%;
padding: 1%;
margin: 1%;
background-color: teal;
}
.foot-right{
width: 48%;
padding: 1%;
margin: 1%;
float: left;
background-color: teal;
}
.copyright{
text-align: center;
}
.test{
border-style: solid;
border-size: 1px;
margin-top: 1px;
}
/ Media Queries /
@screen and(max-width: 766px){
section, aside{
float:none;
clear:left;
width:100%;
}
}
@screen and (max-width: 766px){
background-color: red;
}
}
input[type="text"]{
background-image: url('https://cdn1.iconfinder.com/data/icons/hawcons/32/698627-icon-111-search-128.png');
background-position: 96% 5px;
background-repeat: no-repeat;
padding: 0px 40px 0px 10px;
background-size: 25px 25px;
width: 200px;
border-radius: 6px;
margin: 20vh auto 0;
transition: width 1s;
}
input[type="text"]:focus{
width: 500px;
transition: width 1s;
}
```body {
background-color: gray;
margin: 0;
padding: 0;
border: 0;
}
h4{
padding: 25px;
}
h1{
text-align: center;
}
.colummns:after{
content="";
display: block;
clear: both;
}
.content1:after{
content="";
display: block;
clear: both;
}
.content2:after{
content="";
display: block;
clear: both;
}
.content3:after{
content="";
display: block;
clear: both;
}
.contact:after{
content="";
display: block;
clear: both;
}
section, aside{
float:left;
width:48%;
padding: 1%;
margin: 1%;
}
img{
width:100%;
margin-right: 0;
padding: 0;
}
.content1{
float: left;
background-color: red;
width: 48%;
padding: 1%;
margin: 1%;
}
.img1{
float:;
width:;
margin:;
padding:;
}
.img2{
}
.content2{
float: left;
width: 48%;
padding: 1%;
margin: 1%;
background-color: blue;}
.content3{
float: left;
width: 48%;
padding: 1%;
margin: 1%;
background-color: green;
}
.forms{
background-color: green;
float: right;
width: 48%;
margin: 1%;
padding: 1%;
}
.closingnote{
background-color: green;
float: right;
width: 48%;
margin: 1%;
padding: 1%;
}
.foot-left{
float: left;
width: 48%;
padding: 1%;
margin: 1%;
background-color: teal;
}
.foot-right{
width: 48%;
padding: 1%;
margin: 1%;
float: left;
background-color: teal;
}
.copyright{
text-align: center;
}
.test{
border-style: solid;
border-size: 1px;
margin-top: 1px;
}
/ Media Queries /
@screen and(max-width: 766px){
section, aside{
float:none;
clear:left;
width:100%;
}
}
@screen and (max-width: 766px){
background-color: red;
}
}
```
waqas909 sends brownie points to @donealbercier and @tylermoeller :sparkles: :thumbsup: :sparkles:
:warning: waqas909 already gave tylermoeller points
:warning: waqas909 already gave donealbercier points
<div class="stream-bar flex center">STREAMERS <i class="fa fa-angle-down fa-lg" aria-hidden="true"></i></div>
lol i dont understand the question but you can simply it like this
@media and(max-width: 766px){
section, aside{
float:none;
clear:left;
width:100%;
}
test{
background-color: red;
}
}
https://codepen.io/Waqas909/pen/yVooZE?editors=1100
Why doesnt
#random{
margin: 5vh auto;
border-radius: 5px;
font-family: 'Yrsa',serif;
font-size: 15px;
}
center the random id element?
zkruki sends brownie points to @tommygebru and @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1058 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
:cookie: 781 | @tommygebru |http://www.freecodecamp.com/tommygebru
<div class="container">
<div class="row about">
<div class="col-xs-12 col-sm-6">
<h1>Column 1</h1>
<p>
Deadlights jack lad schooner scallywag dance the hempen jig carouser broadside cable strike colors. Bring a spring upon her cable holystone blow the man down spanker Shiver me timbers to go on account lookout wherry doubloon chase. Belay yo-ho-ho keelhaul squiffy black spot yardarm spyglass sheet transom heave to.
</p>
</div>
<div class="col-xs-12 col-sm-6">
<img class="img-responsive" src="http://cdn.neonsky.com/4bd5ec18d2ca3/images/lefestyle_web_adds_0001-2.jpg">
</div>
</div>
</div>
container.fluid
should be container-fluid
everywhere or just container
if you want a fixed width
@TylerMoeller Why doesnt
#random{
margin: 5vh auto 0;
}
Center the random id?
#random{
display: block;
margin: 5vh auto 0;
border-radius: 5px;
font-family: 'Yrsa',serif;
font-size: 15px;
}
waqas909 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:warning: waqas909 already gave tylermoeller points