Skip to main content

Day5:

Image
By

Day5

#100DaysOfCode

Applied Visual Design: Change an Element's Relative Position

Property Position:

Position: Relative;

p {
  position: relative;
  bottom: 10px;
}

Position: Absolute;



The next option for the CSS position property is absolute, which locks the element in place relative to its parent container. Unlike the relative position, this removes the element from the normal flow of the document, so surrounding items ignore it. The CSS offset properties (top or bottom and left or right) are used to adjust the position.

Position: fixed;

Property float:



float: left; float: right...


Property z-index;

When elements are positioned to overlap, the element coming later in the HTML markup will, by default, appear on the top of the other elements. However, the z-indexproperty can specify the order of how elements are stacked on top of one another. It must be an integer (i.e. a whole number and not a decimal), and higher values for the z-indexproperty of an element move it higher in the stack than those with lower values.

Applied Visual Design: Learn about Complementary Colors

https://learn.freecodecamp.org/responsive-web-design/applied-visual-design/learn-about-complementary-colors

Some examples of complementary colors with their hex codes are:
red (#FF0000) and cyan (#00FFFF)

green (#00FF00) and magenta (#FF00FF)

blue (#0000FF) and yellow (#FFFF00)

Tertiary Colors


ColorHex Code
orange#FF7D00
cyan#00FFFF
raspberry#FF007D


<!-- my ref -->
Loved this style:
background: linear-gradient(53deg, #ccfffc, #ffcccf)


<!-- end my ref -->

#100DaysOfFitness



Labels:

Comments

Post a Comment

Popular posts from this blog

JS: higher order function

By
const realNumberArray = [ 4 , 5.6 , - 9.8 , 3.14 , 42 , 6 , 8.34 ]; const squareList = (arr) => { "use strict" ; // change code below this line const squaredIntegers = arr.filter(num => num > 0 && num% 2 == 0 ).map( num => num * num); // change code above this line return squaredIntegers; }; // test your code const squaredIntegers = squareList(realNumberArray); console.log(squaredIntegers); https://learn.freecodecam https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/es6/write-higher-order-arrow-functions/ p.org/javascript-algorithms-and-data-structures/es6/write-higher-order-arrow-functions/
Post a Comment
Read more

Basic JavaScript: Record Collection

By
Basic JavaScript: Record Collection https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/basic-javascript/record-collection/ // Setup var collection = { "2548" : { "album" : "Slippery When Wet" , "artist" : "Bon Jovi" , "tracks" : [ "Let It Rock" , "You Give Love a Bad Name" ] }, "2468" : { "album" : "1999" , "artist" : "Prince" , "tracks" : [ "1999" , "Little Red Corvette" ] }, "1245" : { "artist" : "Robert Palmer" , "tracks" : [ ] }, "5439" : { "album" : "ABBA Gold" } }; // Keep a copy of the collection for tests var collectionCopy = JSON.parse(JS...
Post a Comment
Read more

Day 6.7, 8

By
Day6,7 and 8 of #100DaysOfCode  #Day6 My first CSS animation: https://t.co/G64mHnP9XQ Completed 122 of 1408 coding challenges on freeCodeCamp. Tomorrow will be playing with CSS animations. #100DaysOfCode — Vasant Patil (@vasantvp24) August 6, 2018 D7: Working on a single page responsive site. Will share the code on completion. #100DaysOfCode pic.twitter.com/OCU2Nq8I27 — Vasant Patil (@vasantvp24) August 7, 2018 R1D8 #Day8 #100DaysOfCode Worked on the showcase image and to center the text contained in it. Also, Completed Applied Accessibility @freeCodeCamp #CodeNewbie pic.twitter.com/IPupn4laGO — Vasant Patil (@vasantvp24) August 8, 2018 #100DaysOfFitness   Day 8: Best thing about cycling is you can enjoy the nature. #MonsoonSeason #Cycling #100daysoffitness #Hubli pic.twitter.com/DrxstaAtmm — Vasant Patil (@vasantvp24) August 8, 2018 Day7 #100DaysOfFitness #Cycling #Hubli pic.twitter.com/6DIL82bOgS — Vasant Patil (@...
Post a Comment
Read more