Commit bd3af1f

authored

chapter 2 - 2.7 examples uploaded

1 parent 0874baa commit bd3af1fCopy full SHA for bd3af1f

File tree

+57

-0

lines changed

+57

-0

lines changed

Lines changed: 34 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,34 @@`
	`1`	`+<!DOCTYPE html>`
	`2`	`+<html lang="en">`
	`3`	`+`
	`4`	`+ <head>`
	`5`	`+`
	`6`	`+ <meta charset="UTF-8">`
	`7`	`+ <meta name="viewport" content="width=device-width, initial-scale=1.0">`
	`8`	`+ <meta http-equiv="X-UA-Compatible" content="ie=edge">`
	`9`	`+ <title>2.7-css-var-demo-gradients.html</title>`
	`10`	`+`
	`11`	`+ <link rel="stylesheet" href="2.7-style-css-var-demo-gradients.css">`
	`12`	`+`
	`13`	`+ </head>`
	`14`	`+`
	`15`	`+ <body>`
	`16`	`+`
	`17`	`+ <div class="container">`
	`18`	`+`
	`19`	`+ <h1 class="top-heading-text" id="topHeadingText">2. CSS Variable Demo</h1>`
	`20`	`+`
	`21`	`+ <h2 class="subheading-text" id="subHeadingText">2.7 - CSS Variable Gradients </h2>`
	`22`	`+`
	`23`	`+ Linear Gradient:`
	`24`	`+ <div class="gradient-linear-container"></div> <br/> <br/>`
	`25`	`+`
	`26`	`+ Radial Gradient:`
	`27`	`+ <div class="gradient-radial-container"></div>`
	`28`	`+`
	`29`	`+`
	`30`	`+ </div>`
	`31`	`+`
	`32`	`+ </body>`
	`33`	`+`
	`34`	`+</html>`

Lines changed: 23 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,23 @@`
	`1`	`+:root {`
	`2`	`+ --main-font-family: Verdana;`
	`3`	`+ --gradient-color-1: #ff0000;`
	`4`	`+ --gradient-color-2: #038703;`
	`5`	`+ --gradient-color-3: #ffff00;`
	`6`	`+ --gradient-linear: linear-gradient(var(--gradient-color-1), var(--gradient-color-3));`
	`7`	`+ --gradient-radial: radial-gradient(circle, var(--gradient-color-1), var(--gradient-color-3), var(--gradient-color-2));`
	`8`	`+}`
	`9`	`+`
	`10`	`+body {`
	`11`	`+ font-family: var(--main-font-family);`
	`12`	`+}`
	`13`	`+`
	`14`	`+.gradient-linear-container {`
	`15`	`+ background-image: var(--gradient-linear);`
	`16`	`+ height: 200px;`
	`17`	`+}`
	`18`	`+`
	`19`	`+.gradient-radial-container {`
	`20`	`+ background-image: var(--gradient-radial);`
	`21`	`+ width: 200px;`
	`22`	`+ height: 200px;`
	`23`	`+}`

Comments

(0)