/*OVERIDE THE ZURB FRAMEWORK CSS FONTS WITH GOOGLE FONTS*/

Size: px
Start display at page:

Download "/*OVERIDE THE ZURB FRAMEWORK CSS FONTS WITH GOOGLE FONTS*/"

Transcription

1 body { margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px;.artist-center { padding-top: 10px; /*OVERIDE THE ZURB FRAMEWORK CSS FONTS WITH GOOGLE FONTS*/ p { font-family: 'Roboto', sans-serif!important; font-size: em!important; font-weight: 400!important; h1 { font-family: 'Roboto', sans-serif!important; font-size: em!important; font-weight: 500!important; h2 { font-family: 'Roboto', sans-serif!important; font-size: 1em!important; font-weight: { font-family: LeviReBrushed; src: url(../levirebrushed.ttf); /* PHOTO PAGE*/ #photos { /* Prevent vertical gaps */ line-height: 0; -webkit-column-count: 5; -webkit-column-gap: 0px; -moz-column-count: 5; -moz-column-gap: 0px; column-count: 5; column-gap: 0px;

2 #photos img { /* Just in case there are inline attributes */ width: 100%!important; height: auto!important; margin-left: auto; margin-right: (max-width: 1200px) { #photos { -moz-column-count: 5; -webkit-column-count: 5; column-count: 5; #photos img { /* Just in case there are inline attributes */ max-width: width: (max-width: 1000px) { #photos { -moz-column-count: 3; -webkit-column-count: 3; column-count: (max-width: 800px) { #photos { -moz-column-count: 2; -webkit-column-count: 2; column-count: (max-width: 400px) { #photos { -moz-column-count: 2; -webkit-column-count: 2; column-count: 2; /*MENU*/.logo { padding-left: 10px; padding-top: 5px;

3 .clearfix:before,.clearfix:after { display: table; line-height: 0; position: fixed;.clearfix:after { clear: both;.container { width: 100%; height: 74px; margin: 0 auto; position: fixed; background- z-index: 1; header { width: 100%; height: 74px; background: #FFFFFF;.header-left,.header-right { position: relative; color: white; float: left;.header-left { width: 30%;.header-right { width: 70%; text-align: right; h1 { font-weight: 300; line-height: 40px; color: #FFF; a {

4 text-decoration: none; color: #000; nav>a { position: relative; display: inline-block; line-height: 40px; padding: 15px; font-family: 'Roboto', sans-serif!important; font-weight: 500!important; font-size: em!important;.homeLink { color: #512DA5;.homeLink:hover { border-bottom: 4px solid #512DA5; color: #512DA5;.lineupLink { color: #BF185B;.lineupLink:hover { border-bottom: 4px solid #BF185B; color: #BF185B;.ticketsLink { color: #F27C00;.ticketsLink:hover { border-bottom: 4px solid #F27C00; color: (max-width: 400px) { #photos { -moz-column-count: 2; -webkit-column-count: 2; column-count: 2;.logo { height: 45px; width: 120px; margin-top: 10px;

5 margin-left: 10px; padding-top: 0px!important; nav>a:hover { border-bottom: none; /*LANDING-PAGE*/ video#bgvid { position: fixed; right: 0; bottom: 0; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -100; background: url(polina.jpg) no-repeat; background-size: cover;.landing-page-title { font-family: LeviReBrushed!important; padding-top: 300px; line-height: 40px; font-size: 3em!important;.dates { margin-left: auto; margin-right: auto; padding-top: 100px;.enterLink { margin-left: auto; margin-right: auto; padding-top: 50px;.landing-page-title-mobile { font-family: LeviReBrushed!important;

6 padding-top: 200px; line-height: 40px; font-size: 2em!important;.enterLink-mobile { margin-left: auto; margin-right: auto; padding-top: 60px;.dates-mobile { margin-left: auto; margin-right: auto; padding-top: 30px; /*HOME*/.homeRow1 img { margin: 10px; width: 370px; height: 370px; border-radius: 8px; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); margin-top: 10px;.homeRow2 img { margin: 10px; width: 500px; height: 370px; border-radius: 8px; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);.homeRow1 { float: left;.homerow2 {

7 .homerow1 img:hover { box-shadow: 0 6px 6px rgba(0, 0, 0, 0.16), 0 6px 6px rgba(0, 0, 0, 0.23);.homeRow2 img:hover { box-shadow: 0 6px 6px rgba(0, 0, 0, 0.16), 0 6px 6px rgba(0, 0, 0, 0.23); #countdown { margin: 10px; width: 370px; height: 370px; border-radius: 8px; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); background-image: url(../images/ui/countdown2.png); background-size: cover; background-repeat: no-repeat; z-index: -1; float: left;.countdown-iframe { margin-top: 115px; margin-left: 60px; z-index: 1; #homepage { /* Prevent vertical gaps */ line-height: 0; -webkit-column-gap: 0px; -moz-column-gap: 0px; column-gap: 0px; #homepage img { /* Just in case there are inline attributes */ width: 100%!important; height: auto!important; margin-left: auto; margin-right: auto; #homepage-mobile img { /* Just in case there are inline attributes */ width: 100%!important;

8 height: auto!important; margin-left: auto; margin-right: (max-width: 300px) { #homepage-mobile { -moz-column-count: 1; -webkit-column-count: 1; column-count: 1; #homepage-mobile img { /* Just in case there are inline attributes */ max-width: width: (max-width: 800px) { #homepage { -moz-column-count: 2; -webkit-column-count: 2; column-count: 2; #homepage img { /* Just in case there are inline attributes */ max-width: width: (min-width: 800px) { #homepage { -moz-column-count: 3; -webkit-column-count: 3; column-count: 3; #homepage img { /* Just in case there are inline attributes */ max-width: width: 100%!important; /*LINEUP*/.clearfix-lineup:before,.clearfix-lineup:after { display: table; line-height: 0; position: fixed; margin: 0;

9 .clearfix-lineup:after { clear: both;.clearfix-lineup { width: 100%; height: 60px;.container-lineup { width: 100%; height: 60px; margin: 0; position: fixed; background-color: #BF185B; z-index: 1; margin: 0;.header-right-lineup { position: relative; color: white; float: left; width: 100%; margin: 0;.lineupNav { position: relative; display: inline-block; font-size: em!important; line-height: 40px; padding: 0px!important; font-family: 'Roboto', sans-serif; font-weight: 500!important; margin: 0;.friday { color: #FFF;.friday:hover { color: #CFD8DC;.saturday { color: #FFF;

10 .saturday:hover { color: #CFD8DC;.sunday { color: #FFF;.sunday:hover { color: #CFD8DC;.daySelect { color: (max-width: 400px) { #photos { -moz-column-count: 2; -webkit-column-count: 2; column-count: 2;.logo { height: 45px; width: 120px; margin-top: 10px; margin-left: 10px; padding-top: 0px!important; nav>a:hover { border-bottom: none;.anotherartist { height: 84%; width: 100%; background-color: #F06292;.anotherArtistText { margin: 0px; padding-top: 20%; url(

11 url( figure.snip1458 { position: relative; float: left; overflow: hidden; margin: 0px 0%; max-width: auto; width: 100%; color: #DD005C; text-align: left; z-index: 0; figure.snip1458 figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px; background- figure.snip1458 h3 { font-size: 1em; padding: 10px; margin: 0; font-weight: 400; text-transform: uppercase; figure.snip1458:hover figcaption, figure.snip1458.hover figcaption { background-color: #DD005C; z-index: 0; padding: 10px; /*ARTIST PAGE*/.artist-background { background-size: contain; background-repeat: no-repeat; background-position: 0 130px; /*FRIDAY*/

12 .black-coffee { background-image: url(../images/bands/friday/black-coffee.jpg ); background-color: #9E9E9E;.borns { background-image: url(../images/bands/friday/borns.jpg); background-color: #607D8B;.dj-ez { background-image: url(../images/bands/friday/dj-ez.jpg); background-color: #F44336;.ellie-goulding { background-image: url(../images/bands/friday/elliegoulding.jpg); background-color: #607D8B;.foals { background-image: url(../images/bands/friday/foals.jpg); background-color: #F44336;.frances { background-image: url(../images/bands/friday/frances.jpg); background-color: #795548;.g-eazy { background-image: url(../images/bands/friday/g-eazy.jpg); background-color: #3F51B5;.gallant { background-image: url(../images/bands/friday/gallant.png); background-color: #9E9E9E;.goldroom { background-image: url(../images/bands/friday/goldroom.jpg); background-color: #03A9F4;.jack-u { background-image: url(../images/bands/friday/jack-u.jpg); background-color: #3F51B5;

13 .joey-badass { background-image: url(../images/bands/friday/joey-bada$$.jpg) ; background-color: #607D8B;.lcd-soundsystem { background-image: url(../images/bands/friday/lcd- SOUNDSYSTEM.jpg); background-color: #F44336;.m83 { background-image: url(../images/bands/friday/m83.jpg);.mbong { background-image: url(../images/bands/friday/mbongwana- Star.jpeg);.miami-horror { background-image: url(../images/bands/friday/miami-horror.jpg ); background-color: #9E9E9E;.nina-las-vegas { background-image: url(../images/bands/friday/nina-lasvegas.jpg); background-color: #FFC107;.nora-en-pure { background-image: url(../images/bands/friday/nora-en-pure.jpg ); background-color: #795548;.monsters { background-image: url(../images/bands/friday/of-monsters-and- Men.jpg); background-color: #795548;.parov-stelar { background-image: url(../images/bands/friday/parov-stelar.jpg

14 );.purity-ring { background-image: url(../images/bands/friday/purity_ring.jpg) ; background-color: #03A9F4;.rae { background-image: url(../images/bands/friday/rae-sremmurd.png ); background-color: #673AB7;.sam-feldt { background-image: url(../images/bands/friday/sam-feldt.png); background-color: #3F51B5;.savages { background-image: url(../images/bands/friday/savages.jpg); background-color: #795548;.skepta { background-image: url(../images/bands/friday/skepta.jpg); background-color: #9E9E9E;.snakeships { background-image: url(../images/bands/friday/snakehips.jpg); background-color: #4CAF50;.sufjan { background-image: url(../images/bands/friday/sufjanstevens.jpg); background-color: #3F51B5;.the-kills { background-image: url(../images/bands/friday/the-kills.jpg);.yearsandyears { background-image: url(../images/bands/friday/years-&- Years.jpg); background-color: #4CAF50;

15 /*SATURDAY*/.aluna { background-image: url(../images/bands/saturday/ alunageorge.jpg);.asap { background-image: url(../images/bands/saturday/asaprocky.jpg) ; background-color: #9E9E9E;.badbad { background-image: url(../images/bands/saturday/ BadBadNotGood.jpg); background-color: #FFC107;.bfl { background-image: url(../images/bands/saturday/bat-forlashes.jpg); background-color: #9E9E9E;.cronixx { background-image: url(../images/bands/saturday/chronixx.jpg); background-color: #795548;.chvrches { background-image: url(../images/bands/saturday/chvrches.jpg); background-color: #9C27B0;.cbarnett { background-image: url(../images/bands/saturday/courtneybarnett.jpg); background-color: #FFC107;.disclo { background-image: url(../images/bands/saturday/disclosure.jpg ); background-color: #9E9E9E;

16 .dubfire { background-image: url(../images/bands/saturday/dubfire.jpg); background-color: #3F51B5;.gcJR { background-image: url(../images/bands/saturday/gary-clark- JR.jpeg); background-color: #9E9E9E;.grimes { background-image: url(../images/bands/saturday/grimes.jpg); background-color: #F44336;.gnr { background-image: url(../images/bands/saturday/gunsnroses.jpg );.halsey { background-image: url(../images/bands/saturday/halsey.jpg);.icube { background-image: url(../images/bands/saturday/ice-cube.jpg) ;.jbay { background-image: url(../images/bands/saturday/james-bay.jpg) ; background-color: #4CAF50;.jMartin { background-image: url(../images/bands/saturday/ JustinMartin.jpg); background-color: #FFC107;.lostF { background-image: url(../images/bands/saturday/lostfrequencies.jpg);

17 .manolt { background-image: url(../images/bands/saturday/ mano_le_tough.jpg);.matoma { background-image: url(../images/bands/saturday/matoma.jpg); background-color: #FFC107;.moonT { background-image: url(../images/bands/saturday/moon-taxi.jpg) ;.zedd { background-image: url(../images/bands/saturday/zedd.jpg); background-color: #F44336;.mrCM { background-image: url(../images/bands/saturday/mrcarmack.jpg) ; background-color: #03A9F4;.rlGrime { background-image: url(../images/bands/saturday/rl-grime.jpg); background-color: #3F51B5;.rufus { background-image: url(../images/bands/saturday/rufus.png);.silversp { background-image: url(../images/bands/saturday/silversunpickups.jpg); background-color: #4CAF50;.SZA { background-image: url(../images/bands/saturday/sza.jpg); background-color: #607D8B;

18 .damned { background-image: url(../images/bands/saturday/the-damned.jpg );.vstaples { background-image: url(../images/bands/saturday/vince- Staples.png); /*SUNDAY*/.aCara { background-image: url(../images/bands/sunday/alessia-cara.jpg ); background-color: #9E9E9E;.autolux { background-image: url(../images/bands/sunday/autolux.jpg); background-color: #9E9E9E;.baauer { background-image: url(../images/bands/sunday/baauer.jpg); background-color: #03A9F4;.bHouse { background-image: url(../images/bands/sunday/beach-house.jpg) ; background-color: #9E9E9E;.cHarris { background-image: url(../images/bands/sunday/calvinharris.jpg); background-color: #3F51B5;.the-chainsmokers { background-image: url(../images/bands/sunday/ chainsmokers.jpeg); background-color: #607D8B;.cStaple {

19 background-image: url(../images/bands/sunday/ chris_stapleton.jpg); background-color: #3F51B5;.CWKids { background-image: url(../images/bands/sunday/cold-warkids.png); background-color: #F44336;.flume { background-image: url(../images/bands/sunday/flume.jpg);.gpool { background-image: url(../images/bands/sunday/girlpool.jpg); background-color: #E91E63;.HudMo { background-image: url(../images/bands/sunday/hudson- Mohawke.jpg); background-color: #E91E63;.johnD { background-image: url(../images/bands/sunday/johndigiweed.jpg); background-color: #9E9E9E;.joywave { background-image: url(../images/bands/sunday/joywave.jpg); background-color: #9E9E9E;.KamWash { background-image: url(../images/bands/sunday/kamasiwashington.jpg); background-color: #9E9E9E;.majLaz { background-image: url(../images/bands/sunday/major-lazor.jpg) ; background-color: #3F51B5;.mattnkim {

20 background-image: url(../images/bands/sunday/matt&kim.jpg); background-color: #9E9E9E;.mechoc { background-image: url(../images/bands/sunday/melodys-echochamber.jpg); background-color: #795548;.miike-snow { background-image: url(../images/bands/sunday/miike-snow.png) ;.nosaj { background-image: url(../images/bands/sunday/nosaj-thing.jpg) ; background-color: #FFC107;.peteyorn { background-image: url(../images/bands/sunday/pete-yorn.jpg); background-color: #795548;.pray { background-image: url(../images/bands/sunday/prayers.jpg); background-color: #3F51B5;.rancid { background-image: url(../images/bands/sunday/rancid.jpg);.sia { background-image: url(../images/bands/sunday/sia.jpg);.soul { background-image: url(../images/bands/sunday/soul-clap.jpg); background-color: #4CAF50;.teishi { background-image: url(../images/bands/sunday/tei-shi.jpg); background-color: #673AB7;

21 .the-1975 { background-image: url(../images/bands/sunday/the-1975.jpg); background-color: #E91E63;.vandals { background-image: url(../images/bands/sunday/the-vandals.jpg) ; background-color: #F44336;.wolf { background-image: url(../images/bands/sunday/wolf-alice.jpg); background-color: #4CAF50; /* ARTIST PAGE */.audio { display: none;.artisttitle { padding-left: 170px; padding-top: 250px;.artistInfo { padding-left: 170px;.artistDescription { padding-left: 200px; padding-right: 200px; text-align: justify; padding-top: 30px;.artist-subtitles { padding-top: 20px;.artistArtwork img {

22 margin: 10px; width: 150px; height: 150px;.artistArtwork { margin-bottom: 50px; #facebook { width: 100px; height: 53px; background: url(../images/ui/facebook-1.png) 0 0 no-repeat; margin-bottom: 10px; #facebook:hover { background: url(../images/ui/facebook-2.png) 0 0 no-repeat; #twitter { width: 100px; height: 53px; background: url(../images/ui/twitter-1.png) 0 0 no-repeat; margin-bottom: 10px; #twitter:hover { background: url(../images/ui/twitter-2.png) 0 0 no-repeat; margin-bottom: 10px; #instagram { width: 100px; height: 53px; background: url(../images/ui/instagram-1.png) 0 0 no-repeat; margin-bottom: 10px; #instagram:hover { background: url(../images/ui/instagram-2.png) 0 0 no-repeat; #youtube { width: 100px; height: 53px; background: url(../images/ui/youtube-1.png) 0 0 no-repeat; #youtube:hover {

23 background: url(../images/ui/youtube-2.png) 0 0 no-repeat;.social-networks { z-index: 1; float: right; padding-top: 50px; /*MOBILE*/.artistTitle-mobile { padding-left: 60px; padding-top: 150px;.artistInfo-mobile { padding-left: 60px;.artistDescription-mobile { padding-left: 80px; padding-right: 80px; text-align: justify; padding-top: 30px;.artist-subtitles-mobile { padding-top: 30px;.artistArtwork-mobile img { margin: 10px; width: 150px; height: 150px;.artistArtwork-mobile { #facebook-mobile { width: 50px; height: 27px; margin-bottom: 10px;

24 background: url(../images/ui/facebook-1-mobile.png) 0 0 norepeat; #facebook-mobile:hover { background: url(../images/ui/facebook-2-mobile.png) 0 0 norepeat; #twitter-mobile { width: 50px; height: 27px; margin-bottom: 10px; background: url(../images/ui/twitter-1-mobile.png) 0 0 norepeat; #twitter-mobile:hover { background: url(../images/ui/twitter-2-mobile.png) 0 0 norepeat; #instagram-mobile { width: 50px; height: 27px; margin-bottom: 10px; background: url(../images/ui/instagram-mobile.png) 0 0 norepeat; #instagram-mobile:hover { background: url(../images/ui/instagram-2-mobile.png) 0 0 norepeat; #youtube-mobile { width: 50px; height: 27px; margin-bottom: 10px; background: url(../images/ui/youtube-1-mobile.png) 0 0 norepeat; #youtube-mobile:hover { background: url(../images/ui/youtube-2-mobile.png) 0 0 norepeat;.social-networks-mobile { z-index: 1; float: right;

25 padding-top: 50px; /*TICKETS*/.ticketsType { margin: 1%; width: 48%; height: 800px; border-radius: 8px; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); background-size: cover; background-repeat: no-repeat; z-index: -1; display: block; float: left; align-content: center;.standardticket { background-image: url(../images/ui/ticket-standard.jpg); background-position: 0 70px;.vipTicket { background-image: url(../images/ui/ticket-vip.jpg); background-position: 0 70px;.ticketsTypeWhiteBox { height: 200px; background- vertical-align: bottom;.whiteboxcontent { display: block; float: left; width: 160px; line-height: 20px!important; margin: auto;.yellowboxcontent { background-color: #FD9326; width: 100%; height: 50px; border-top-right-radius: 8px;

26 border-top-left-radius: 8px;.ticket { display: block; float: left; width: 100px; padding-left: auto; margin-top: 15px;.ticket-purchase { display: block; float: right; width: 100px; padding-left: auto; margin-top: 15px;.white-box { margin-right: auto; margin-left: auto; padding-top: 10px; padding-bottom: 10px; width: 480px; /*MOBILE*/.standardTicket-mobile { background-image: url(../images/ui/ticket-standard.jpg); background-position: 0 100px;.vipTicket-mobile { background-image: url(../images/ui/ticket-vip.jpg); background-position: 0 40px;.ticketsType-mobile { margin: 1%; width: 98%; height: 400px; border-radius: 8px; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); background-size: cover; background-repeat: no-repeat;

27 z-index: -1; display: block; float: left; align-content: center;.white-box-mobile { margin-right: auto; margin-left: auto; padding-top: 10px; padding-bottom: 10px; width: 480px; font-size: 0.7em;.whiteBoxContent-mobile { display: block; float: left; width: 120px; line-height: 20px!important; margin: auto; /*TICKETS2*/.tickets-date { width: 33%; height: 800px; background-size: cover; background-repeat: no-repeat; z-index: -1; display: block; float: left; align-content: center; color: #000000!important;.week-one { background-image: url(../images/ui/ticket-week-1a.png);.week-one:hover { background-image: url(../images/ui/ticket-week-1b.png);.week-two { background-image: url(../images/ui/ticket-week-2a.png);

28 .week-two:hover { background-image: url(../images/ui/ticket-week-2b.png);.week-three { background-image: url(../images/ui/ticket-week-3a.png);.week-three:hover { background-image: url(../images/ui/ticket-week-3b.png);.ticket-date-dates { padding-top: 350px; color: #FFFFFF!important;.ticket-date-week { padding: 40px; color: #FFFFFF!important; /*MOBILE*/.tickets-date-mobile { width: 100%; height: 300px; background-size: cover; background-repeat: no-repeat; z-index: -1; align-content: center; color: #000000!important; margin: 0px;.ticket-date-dates-mobile { padding-top: 130px; color: #FFFFFF!important;.ticket-date-week-mobile { padding-top: 40px; color: #FFFFFF!important;.week-one-mobile {

29 background-image: url(../images/ui/ticket-week-1a.png); background-position: 0-140px;.week-two { background-image: url(../images/ui/ticket-week-2a.png);.week-three-mobile { background-image: url(../images/ui/ticket-week-3a.png); background-position: 0-40px; /*TICKETS-HEADER*/.ticketNav { position: relative; display: inline-block; font-size: em!important; line-height: 40px; padding: 0px!important; font-family: 'Roboto', sans-serif; font-weight: 500!important; margin: 0;.container-ticket-1 { width: 85%; height: 60px; margin: 0; position: fixed; background-color: #FF8927; z-index: 1; margin: 0;.container-ticket-2 { width: 15%; height: 60px; margin: 0; background-color: #BF185B; z-index: 1; margin: 0; float: right; background-color: #4486FF;.header-right-ticket { position: relative; color: white;

30 float: left; width: 100%; margin: 0;.buy-button { margin-top: 22px!important; font-family: 'Roboto', sans-serif!important; font-weight: 500!important; font-size: em!important; /*TICKET ATTRIBUTES 3*/ #ticket-attributes { /* Prevent vertical gaps */ line-height: 0; -webkit-column-count: 3; -webkit-column-gap: 0px; -moz-column-count: 3; -moz-column-gap: 0px; column-count: 3; column-gap: 0px; z-index: -1; cursor: default; #ticket-attributes img { /* Just in case there are inline attributes */ width: 100%!important; height: 40%!important; margin-left: auto; margin-right: auto; cursor: (max-width: 1200px) { #ticket-attributes { -moz-column-count: 3; -webkit-column-count: 3; column-count: 3; #ticket-attributes img { /* Just in case there are inline attributes */ max-width: width: 100%!important;

31 @media (max-width: 1000px) { #ticket-attributes { -moz-column-count: 3; -webkit-column-count: 3; column-count: (max-width: 800px) { #ticket-attributes { -moz-column-count: 2; -webkit-column-count: 2; column-count: (max-width: 400px) { #ticket-attributes { -moz-column-count: 2; -webkit-column-count: 2; column-count: 2; figure.snip1459 { position: relative; float: left; overflow: hidden; margin: 0px 0%; max-width: auto; width: 100%; color: #DD005C; text-align: left; z-index: 0; figure.snip1459 figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px; background- figure.snip1459 h3 { font-size: 1em; padding: 10px; margin: 0; font-weight: 400;

32 text-transform: uppercase; /*TEST*/ #checkbox-10-1 { display: none; /*FOOTER*/.footer-basic-centered { background-color: #9E9E9E; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12); box-sizing: border-box; width: 100%; font: normal 18px sans-serif; padding: 45px;.footer-basic-centered.footer-company-motto { font-size: 24px; margin: 0;.footer-basic-centered.footer-company-name { font-size: 14px; margin: 0;.footer-basic-centered.footer-links { list-style: none; font-weight: bold; color: #ffffff; padding: 5px 0 23px; margin: 0;.footer-basic-centered.footer-links a { display: inline-block; text-decoration: none; color: inherit;.footer-links1 a { display: inline-block;

33 text-decoration: none!important; color: #FFFFFF!important; /* If you don't want the footer to be responsive, remove these media queries (max-width: 600px) {.footer-basic-centered { padding: 35px;.footer-basic-centered.footer-company-motto { font-size: 18px;.footer-basic-centered.footer-company-name { font-size: 12px;.footer-basic-centered.footer-links { font-size: 12px; padding: 5px 0 20px;.footer-links1 { font-size: 14px; padding: 5px 0 20px;.footer-links1 a { display: inline-block; text-decoration: none; color: inherit;.footer-basic-centered.footer-links a { line-height: 1.8;

Building Page Layouts

Building Page Layouts Building Page Layouts HTML & CSS From Scratch Slides 3.1 Topics Display Box Model Box Aesthetics Float Positioning Element Display working example at: h9ps://;nker.io/3a2bf Source: unknown. Please contact

More information

Getting your work online. behance.net cargo collective krop coroflot

Getting your work online. behance.net cargo collective krop coroflot Getting your work online behance.net cargo collective krop coroflot behance online presence behance.net has a free and pro version. The free version is fine for getting internships. Free Version Pros networked

More information

/* ========================================================================== PROJECT STYLES

/* ========================================================================== PROJECT STYLES html { box-sizing: border-box; *, *:before, *:after { box-sizing: inherit; img { max-width: 100%; border: 0; audio, canvas, iframe, img, svg, video { vertical-align: middle; /* Remove gaps between elements

More information

Multimedia Systems and Technologies Lab class 6 HTML 5 + CSS 3

Multimedia Systems and Technologies Lab class 6 HTML 5 + CSS 3 Multimedia Systems and Technologies Lab class 6 HTML 5 + CSS 3 Instructions to use the laboratory computers (room B2): 1. If the computer is off, start it with Windows (all computers have a Linux-Windows

More information

The Custom Product Builder For Magento 2 User Guide.

The Custom Product Builder For Magento 2 User Guide. The Custom Product Builder For Magento 2 User Guide. Link to User Guide Online Revolutionize your online store! Offer an easy and engaging way to order custom made-to-order products. Our plugin works with

More information

Signs of Spring App. Release Notes Version 1.0

Signs of Spring App. Release Notes Version 1.0 Signs of Spring App Release Notes Version 1.0 App Parameters and Styling In your Caspio account, go to the App s Overview screen. On the right sidebar, click on Manage in the App Parameters area. Edit

More information

PUBLISHER SPECIFIC CSS RULES

PUBLISHER SPECIFIC CSS RULES PUBLISHER SPECIFIC CSS RULES Solita Oy Helsinki Tampere Oulu 26.1.2016 2 (24) Document History Version Date Author Description 0.1 August 17, 2015 J. Similä First draft 0.2 January 26, 2015 A. Autio Fixed

More information

Santa Tracker. Release Notes Version 1.0

Santa Tracker. Release Notes Version 1.0 Santa Tracker Release Notes Version 1.0 App Parameters and Styling In your Caspio account, go to the App s Overview screen and on the right sidebar click on Manage in the App Parameters area. Edit any

More information

HTML HTML5. DOM(Document Object Model) CSS CSS

HTML HTML5. DOM(Document Object Model) CSS CSS HTML HTML5 DOM(Document Object Model) CSS CSS HTML html img jpg png gif jpg png gif

More information

GoSquared Equally Rounded Corners Equally Rounded Corners -webkit-border-radius -moz-border-radius border-radius Box Shadow Box Shadow -webkit-box-shadow x-offset, y-offset, blur, color Webkit Firefox

More information

Wanted! Introduction. Step 1: Styling your poster. Activity Checklist. In this project, you ll learn how to make your own poster.

Wanted! Introduction. Step 1: Styling your poster. Activity Checklist. In this project, you ll learn how to make your own poster. Wanted! Introduction In this project, you ll learn how to make your own poster. Step 1: Styling your poster Let s start by editing the CSS code for the poster. Activity Checklist Open this trinket: jumpto.cc/web-wanted.

More information

CSS Selectors. element selectors. .class selectors. #id selectors

CSS Selectors. element selectors. .class selectors. #id selectors CSS Selectors Patterns used to select elements to style. CSS selectors refer either to a class, an id, an HTML element, or some combination thereof, followed by a list of styling declarations. Selectors

More information

CSS3 Basics. From & CSS Visual Dictionary Learning Curve Books, LLC

CSS3 Basics. From   & CSS Visual Dictionary Learning Curve Books, LLC CSS3 Basics From www.w3schools.com & CSS Visual Dictionary Learning Curve Books, LLC CSS Box Model Margin (top, right, bottom, left) Shorthand property, equivalent to Border-width border-style border-color

More information

CSS Cascading Style Sheets

CSS Cascading Style Sheets CSS Cascading Style Sheets site root index.html about.html services.html stylesheet.css images boris.jpg Types of CSS External Internal Inline External CSS An external style sheet is a text document with

More information

WEBSITE PROJECT 2 PURPOSE: INSTRUCTIONS: REQUIREMENTS:

WEBSITE PROJECT 2 PURPOSE: INSTRUCTIONS: REQUIREMENTS: WEBSITE PROJECT 2 PURPOSE: The purpose of this project is to begin incorporating color, graphics, and other visual elements in your webpages by implementing the HTML5 and CSS3 code discussed in chapters

More information

<style type="text/css"> <!-- body {font-family: Verdana, Arial, sans-serif} ***set font family for entire Web page***

<style type=text/css> <!-- body {font-family: Verdana, Arial, sans-serif} ***set font family for entire Web page*** Chapter 7 Using Advanced Cascading Style Sheets HTML is limited in its ability to define the appearance, or style, across one or mare Web pages. We use Cascading style sheets to accomplish this. Remember

More information

CSS Cheat Sheet Version: 10 Last revision date:

CSS Cheat Sheet Version: 10 Last revision date: CSS Cheat Sheet Version: 10 Last revision date: 2014-11-12 Content Blocks How to make rounded corners for text elements:.mobisit-contentblock-cls { border-radius: 10px; You can change the 10px to any other

More information

ENGINEERING DATA HUB VISUAL DESIGN SPECIFICATIONS VERSION 3. Created: 2/10/2017

ENGINEERING DATA HUB VISUAL DESIGN SPECIFICATIONS VERSION 3. Created: 2/10/2017 ENGINEERING DATA HUB VISUAL DESIGN SPECIFICATIONS VERSION 3 Created: 2/10/2017 Table of Contents ENGINEERING DATA HUB... 1 DESKTOP VIEW... 3 HEADER... 4 Logo... 5 Main Title... 6 User Menu... 7 Global

More information

Adding CSS to your HTML

Adding CSS to your HTML Adding CSS to your HTML Lecture 3 CGS 3066 Fall 2016 September 27, 2016 Making your document pretty CSS is used to add presentation to the HTML document. We have seen 3 ways of adding CSS. In this lecture,

More information

CSS: Layout Part 2. clear. CSS for layout and formatting: clear

CSS: Layout Part 2. clear. CSS for layout and formatting: clear CSS: Layout Part 2 Robert A. Fulkerson College of Information Science and Technology http://www.ist.unomaha.edu/ University of Nebraska at Omaha http://www.unomaha.edu/ CSS for layout and formatting: clear

More information

Pliki.tpl. scripts/search.tpl. Pliki.css. Pliki.less. Dokumentacja zmian plików graficznych: rwd shoper Wersja zmian:

Pliki.tpl. scripts/search.tpl. Pliki.css. Pliki.less. Dokumentacja zmian plików graficznych: rwd shoper Wersja zmian: Dokumentacja zmian plików graficznych: rwd shoper Wersja zmian: 5.8.32-5.8.33 Pliki.tpl scripts/search.tpl - 1

More information

CSS. Shan-Hung Wu CS, NTHU

CSS. Shan-Hung Wu CS, NTHU CSS Shan-Hung Wu CS, NTHU CSS Zen Garden 2 Outline The Basics Selectors Layout Stacking Order 3 Outline The Basics Selectors Layout Stacking Order 4 Grammar selector { property: value; 5 Example /* for

More information

UNIVERSITI TEKNOLOGI MALAYSIA TEST 1 SEMESTER II 2012/2013

UNIVERSITI TEKNOLOGI MALAYSIA TEST 1 SEMESTER II 2012/2013 UNIVERSITI TEKNOLOGI MALAYSIA TEST 1 SEMESTER II 2012/2013 SUBJECT CODE : SCSV1223 (Section 05) SUBJECT NAME : WEB PROGRAMMING YEAR/COURSE : 1SCSV TIME : 2.00 4.00 PM DATE : 18 APRIL 2013 VENUE : KPU 10

More information

Introduction to Web Design CSS Reference

Introduction to Web Design CSS Reference Inline Style Syntax: Introduction to Web Design CSS Reference Example: text Internal Style Sheet Syntax: selector {property: value; Example:

More information

Introduction to Web Design CSS Reference

Introduction to Web Design CSS Reference Inline Style Syntax: Introduction to Web Design CSS Reference Example: text Internal Style Sheet Syntax: selector {property: value; Example:

More information

APEX Developers - Do More With Less!!

APEX Developers - Do More With Less!! APEX Developers - Do More With Less!! Roel Hartman Copyright 2014 APEX Consulting 2 LESS Leaner CSS SASS Syntactically Awesome StyleSheets SCSS Sassy CSS OOCSS Object Oriented CSS Issue 1 You need a CSS

More information

Kudos Solutions Ltd

Kudos Solutions Ltd * { margin: 0; padding: 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; html { min-height:100%; position:relative; font-size:62.5%; -webkit-text-size-adjust:none;

More information

HTML and CSS a further introduction

HTML and CSS a further introduction HTML and CSS a further introduction By now you should be familiar with HTML and CSS and what they are, HTML dictates the structure of a page, CSS dictates how it looks. This tutorial will teach you a few

More information

Deccansoft Software Services

Deccansoft Software Services Deccansoft Software Services (A Microsoft Learning Partner) HTML and CSS COURSE SYLLABUS Module 1: Web Programming Introduction In this module you will learn basic introduction to web development. Module

More information

Moore Stephens digital guidelines

Moore Stephens digital guidelines Moore Stephens International PRECISE. PROVEN. PERFORMANCE. Contents Introduction 1 Typography 2 Colour palette 3 Logo and mast 4 Buttons, icons & tags 5 Images 7 Navigation 8 Rolling banner 10 Widgets

More information

Crestron Room Scheduling Panels. Programming Guide Crestron Electronics, Inc.

Crestron Room Scheduling Panels. Programming Guide Crestron Electronics, Inc. Crestron Room Scheduling Panels Programming Guide Crestron Electronics, Inc. Crestron product development software is licensed to Crestron dealers and Crestron Service Providers (CSPs) under a limited

More information

HTML & CSS. SWE 432, Fall 2017 Design and Implementation of Software for the Web

HTML & CSS. SWE 432, Fall 2017 Design and Implementation of Software for the Web HTML & CSS SWE 432, Fall 2017 Design and Implementation of Software for the Web HTML: HyperText Markup Language LaToza Language for describing structure of a document Denotes hierarchy of elements What

More information

Universal CSS Navigation Menu: Advanced Styling Patrick Julicher Universal CSS Navigation Menu: Advanced Styling

Universal CSS Navigation Menu: Advanced Styling Patrick Julicher Universal CSS Navigation Menu: Advanced Styling Universal CSS Navigation Menu: Advanced Styling Page 1 of 15 Content 1. Introduction... 3 2. How to use... 3 2.1. Editing existing CSS Styles... 3 2.2. Creating new CSS Styles... 6 3. Explanation of styles...

More information

Extracting Representative. Najlaa Gali, Andrei Tabarcea and Pasi Fränti

Extracting Representative. Najlaa Gali, Andrei Tabarcea and Pasi Fränti Extracting Representative Image from Web page Najlaa Gali, Andrei Tabarcea and Pasi Fränti Motivation: summarize search result Title Address Image Calculating distance Structure of location-based search

More information

VISA/APCO/STAC 2P61 WEBSITE CREATION Fall Term 2012

VISA/APCO/STAC 2P61 WEBSITE CREATION Fall Term 2012 VISA/APCO/STAC 2P61 WEBSITE CREATION Fall Term 2012 CSS 4 TWO COLUMN LAYOUT MORE ON DIVS Last week: Applied margins borders and padding and calculating the size of elements using box model. Wrote CSS shorthand

More information

MYGOV.SCOT ASSETS. Design Guide for Developers

MYGOV.SCOT ASSETS. Design Guide for Developers MYGOV.SCOT ASSETS Design Guide for Developers Contents Click on the options below for further information: Typography The mygov.scot font is Roboto, this is an open source, licence free font which can

More information

Introduction to Multimedia. MMP100 Spring 2016 thiserichagan.com/mmp100

Introduction to Multimedia. MMP100 Spring 2016 thiserichagan.com/mmp100 Introduction to Multimedia MMP100 Spring 2016 profehagan@gmail.com thiserichagan.com/mmp100 Troubleshooting Check your tags! Do you have a start AND end tags? Does everything match? Check your syntax!

More information

Introduction to WEB PROGRAMMING

Introduction to WEB PROGRAMMING Introduction to WEB PROGRAMMING Web Languages: Overview HTML CSS JavaScript content structure look & feel transitions/animation s (CSS3) interaction animation server communication Full-Stack Web Frameworks

More information

Cascading Style Sheets (CSS)

Cascading Style Sheets (CSS) Cascading Style Sheets (CSS) Mendel Rosenblum 1 Driving problem behind CSS What font type and size does introduction generate? Answer: Some default from the browser (HTML tells what browser how)

More information

Study Guide 2 - HTML and CSS - Chap. 6,8,10,11,12 Name - Alexia Bernardo

Study Guide 2 - HTML and CSS - Chap. 6,8,10,11,12 Name - Alexia Bernardo Study Guide 2 - HTML and CSS - Chap. 6,8,10,11,12 Name - Alexia Bernardo Note: We skipped Study Guide 1. If you d like to review it, I place a copy here: https:// people.rit.edu/~nbbigm/studyguides/sg-1.docx

More information

Cascading Style Sheet Quick Reference

Cascading Style Sheet Quick Reference Computer Technology 8/9 Cascading Style Sheet Quick Reference Properties Properties are listed in alphabetical order. Each property has examples of possible values. Properties are not listed if they are

More information

CSS: Cascading Style Sheets

CSS: Cascading Style Sheets CSS: Cascading Style Sheets Computer Science and Engineering College of Engineering The Ohio State University Lecture 13 Evolution of CSS MIME type: text/css CSS 1 ('96): early recognition of value CSS

More information

Web Development & Design Foundations with HTML5

Web Development & Design Foundations with HTML5 1 Web Development & Design Foundations with HTML5 CHAPTER 4 VISUAL ELEMENTS AND GRAPHICS 2 Learning Outcomes In this chapter, you will learn how to... Create and format lines and borders on web pages Apply

More information

CMPT 165: More CSS Basics

CMPT 165: More CSS Basics CMPT 165: More CSS Basics Tamara Smyth, tamaras@cs.sfu.ca School of Computing Science, Simon Fraser University October 14, 2011 1 The Favorites Icon The favorites icon (favicon) is the small icon you see

More information

This document includes all the approved guidelines for UBU marketing in terms of logo usage and digital graphics.

This document includes all the approved guidelines for UBU marketing in terms of logo usage and digital graphics. Design Guidelines This document includes all the approved guidelines for UBU marketing in terms of logo usage and digital graphics. Resources Downloadable versions of all graphics can be found in the H

More information

Zen Garden. CSS Zen Garden

Zen Garden. CSS Zen Garden CSS Patrick Behr CSS HTML = content CSS = display It s important to keep them separated Less code in your HTML Easy maintenance Allows for different mediums Desktop Mobile Print Braille Zen Garden CSS

More information

CSC309 Programming on the Web week 3: css, rwd

CSC309 Programming on the Web week 3: css, rwd CSC309 Programming on the Web week 3: css, rwd Amir H. Chinaei, Spring 2017 Office Hours: M 3:45-5:45 BA4222 ahchinaei@cs.toronto.edu http://www.cs.toronto.edu/~ahchinaei/ survey 1 in survey 1, you provide

More information

Unit 20 - Client Side Customisation of Web Pages. Week 2 Lesson 4 The Box Model

Unit 20 - Client Side Customisation of Web Pages. Week 2 Lesson 4 The Box Model Unit 20 - Client Side Customisation of Web Pages Week 2 Lesson 4 The Box Model So far Looked at what CSS is Looked at why we will use it Used CSS In-line Embedded (internal style-sheet) External

More information

CSS Box Model. Cascading Style Sheets

CSS Box Model. Cascading Style Sheets CSS Box Model Cascading Style Sheets CSS box model Background Width & height Margins & padding Borders Centering content Changing display type (block vs. inline) The Box Model Background Properties Property

More information

CSS Cascading Style Sheets

CSS Cascading Style Sheets CSS Cascading Style Sheets site root index.html about.html services.html stylesheet.css charlie.jpg Linking to your HTML You need to link to your css in the of your HTML file.

More information

CSS. https://developer.mozilla.org/en-us/docs/web/css

CSS. https://developer.mozilla.org/en-us/docs/web/css CSS https://developer.mozilla.org/en-us/docs/web/css http://www.w3schools.com/css/default.asp Cascading Style Sheets Specifying visual style and layout for an HTML document HTML elements inherit CSS properties

More information

AGENDA :: MULTIMEDIA TOOLS :: CLASS NOTES

AGENDA :: MULTIMEDIA TOOLS :: CLASS NOTES CLASS :: 14 04.28 2017 3 Hours AGENDA CREATE A WORKS PAGE [ HTML ] :: Open index.html :: Save As works.html :: Edit works.html to modify header, 3 divisions for works, then add your content :: Edit index.html

More information

Web Site Design and Development Lecture 9. CS 0134 Fall 2018 Tues and Thurs 1:00 2:15PM

Web Site Design and Development Lecture 9. CS 0134 Fall 2018 Tues and Thurs 1:00 2:15PM Web Site Design and Development Lecture 9 CS 0134 Fall 2018 Tues and Thurs 1:00 2:15PM Floating elements on a web page By default block elements fll the page from top to bottom and inline elements fll

More information

Creating HTML files using Notepad

Creating HTML files using Notepad Reference Materials 3.1 Creating HTML files using Notepad Inside notepad, select the file menu, and then Save As. This will allow you to set the file name, as well as the type of file. Next, select the

More information

Responsive web design (RWD) CSS3 Media queries. Mobile vs desktop web sites. Web Development 1 CS1115/CS5002

Responsive web design (RWD) CSS3 Media queries. Mobile vs desktop web sites. Web Development 1 CS1115/CS5002 1 of 13 CS1115/CS5002 Web Development 1 Dr Derek Bridge School of Computer Science & Information Technology University College Cork Mobile vs desktop web sites A few organization have two web sites, one

More information

Customization Guide 1

Customization Guide 1 Customization Guide 1 IS+ Customization Guide 1. Overview... 3 2. IS+ AutoComplete Dropdown Customization... 4 2.1 Dashboard Configuration.4 General..4 Style...4 Dropdown style...5 2.2 Advanced Style Customization...7

More information

IDM 221. Web Design I. IDM 221: Web Authoring I 1

IDM 221. Web Design I. IDM 221: Web Authoring I 1 IDM 221 Web Design I IDM 221: Web Authoring I 1 Week 6 IDM 221: Web Authoring I 2 The Box Model IDM 221: Web Authoring I 3 When a browser displays a web page, it places each HTML block element in a box.

More information

McMaster Brand Standard for Websites

McMaster Brand Standard for Websites McMaster University s policy calls for all university websites to follow its brand standard. McMaster websites share common elements, presentation and behavior and a consistent design, enabling visitors

More information

AGENDA. EMBEDDING FONTS [ Font Files & CSS font-family ] :: Online Font Converter :: ADD font-family css code to style.css

AGENDA. EMBEDDING FONTS [ Font Files & CSS font-family ] :: Online Font Converter :: ADD font-family css code to style.css CLASS :: 12 05.04 2018 3 Hours AGENDA CREATE A WORKS PAGE [ HTML ] :: Open index.html :: Save As works.html :: Edit works.html to modify header, 3 divisions for works, then add your content :: Edit index.html

More information

Web Style Guide. May 15, 2010

Web Style Guide. May 15, 2010 2667 N. 2667 Washington N Washington Blvd. Blvd. North Ogden, Odgen, Utah 84654 84414 801-416-2136 801-782-3920 www.castlecreekpd.com email: info@castlecreekpd.com Web Style Guide May 15, 2010 This is

More information

While editing a page, a menu bar will appear at the top with the following options:

While editing a page, a menu bar will appear at the top with the following options: Page Editor ===> Page Editor How Can I Use the Page Editor? The Page Editor will be your primary way of editing your website. Page Editor Basics While editing a page, you will see that hovering your mouse

More information

CSS for Page Layout Robert K. Moniot 1

CSS for Page Layout Robert K. Moniot 1 CSS for Page Layout 2015 Robert K. Moniot 1 OBJECTIVES In this unit, you will learn: How to use style sheets for layout Controlling text flow, margins, borders, and padding Controlling visibility of elements

More information

Mark Scheme (Results)

Mark Scheme (Results) Mark Scheme (Results) Pearson Edexcel Certificate in Digital Applications Unit 5: Coding for the Web Edexcel and BTEC Qualifications Edexcel and BTEC qualifications are awarded by Pearson, the UK s largest

More information

INTRODUCTION TO CSS. Topics MODULE 5

INTRODUCTION TO CSS. Topics MODULE 5 MODULE 5 INTRODUCTION TO CSS Topics > Cascading Style Sheets (CSS3) Basics Adding a Style Sheet Selectors Adding Dynamic Styles to Elements CSS3 Properties CSS3 Box Model Vendor Prefixes Cascading Style

More information

Unit 20 - Client Side Customisation of Web Pages. Week 2 Lesson 4 The Box Model

Unit 20 - Client Side Customisation of Web Pages. Week 2 Lesson 4 The Box Model Unit 20 - Client Side Customisation of Web Pages Week 2 Lesson 4 The Box Model Last Time Looked at what CSS is Looked at why we will use it Used CSS In-line Embedded (internal style-sheet) External

More information

Web Guidelines TABLE OF CONTENTS. Expressing and Protecting the Carnegie Mellon University Identity

Web Guidelines TABLE OF CONTENTS. Expressing and Protecting the Carnegie Mellon University Identity Web Guidelines Expressing and Protecting the Carnegie Mellon University Identity TABLE OF CONTENTS Web guidelines Content management system (CMS) 2 Wordmark 2 Colors 3 Typography 4 Links and buttons 4

More information

COSC 2206 Internet Tools. CSS Cascading Style Sheets

COSC 2206 Internet Tools. CSS Cascading Style Sheets COSC 2206 Internet Tools CSS Cascading Style Sheets 1 W3C CSS Reference The official reference is here www.w3.org/style/css/ 2 W3C CSS Validator You can upload a CSS file and the validator will check it

More information

Downloads: Google Chrome Browser (Free) - Adobe Brackets (Free) -

Downloads: Google Chrome Browser (Free) -   Adobe Brackets (Free) - Week One Tools The Basics: Windows - Notepad Mac - Text Edit Downloads: Google Chrome Browser (Free) - www.google.com/chrome/ Adobe Brackets (Free) - www.brackets.io Our work over the next 6 weeks will

More information

WEBSITE REDESIGN: STYLESHEET & MEASUREMENTS

WEBSITE REDESIGN: STYLESHEET & MEASUREMENTS WEBSITE REDESIGN: STYLESHEET & MEASUREMENTS WEB COLORS 1.0 PRIMARY COLOR PALETTE HEX #f0b323 HEX #d22730 HEX #004c97 HEX #00a9e0 HEX #059949 HEX #f45712 SECONDARY COLOR PALETTE HEX #f4c24f HEX #d84f57

More information

HTML + CSS. ScottyLabs WDW. Overview HTML Tags CSS Properties Resources

HTML + CSS. ScottyLabs WDW. Overview HTML Tags CSS Properties Resources HTML + CSS ScottyLabs WDW OVERVIEW What are HTML and CSS? How can I use them? WHAT ARE HTML AND CSS? HTML - HyperText Markup Language Specifies webpage content hierarchy Describes rough layout of content

More information

Website Development with HTML5, CSS and Bootstrap

Website Development with HTML5, CSS and Bootstrap Contact Us 978.250.4983 Website Development with HTML5, CSS and Bootstrap Duration: 28 hours Prerequisites: Basic personal computer skills and basic Internet knowledge. Course Description: This hands on

More information

The Importance of the CSS Box Model

The Importance of the CSS Box Model The Importance of the CSS Box Model Block Element, Border, Padding and Margin Margin is on the outside of block elements and padding is on the inside. Use margin to separate the block from things outside

More information

http://nma.kcc.hawaii.edu/gargiulo/data/johndoe/spring/art128/2014/companyname1_step3/index.html 1 2 3 4 5 company Name 6 7

More information

CSS: The Basics CISC 282 September 20, 2014

CSS: The Basics CISC 282 September 20, 2014 CSS: The Basics CISC 282 September 20, 2014 Style Sheets System for defining a document's style Used in many contexts Desktop publishing Markup languages Cascading Style Sheets (CSS) Style sheets for HTML

More information

CSS: Layout, Floats, and More

CSS: Layout, Floats, and More CSS: Layout, Floats, and More CISC 282 September 27, 2017 Pseudo Selectors CSS selectors are typically document-related Reflect an element's context in the page Nesting, containing block, tag, class(es)...

More information

Parashar Technologies HTML Lecture Notes-4

Parashar Technologies HTML Lecture Notes-4 CSS Links Links can be styled in different ways. HTML Lecture Notes-4 Styling Links Links can be styled with any CSS property (e.g. color, font-family, background, etc.). a { color: #FF0000; In addition,

More information

News System - Level 1 Internship

News System - Level 1 Internship In this project we are developing a site having simple rss news sliders. There are in all 8 of which 1 is div having static text of about us and the rest of the have news updates about different

More information

Web Design and Implementation

Web Design and Implementation Study Guide 3 - HTML and CSS - Chap. 13-15 Name: Alexia Bernardo Due: Start of class - first day of week 5 Your HTML files must be zipped and handed in to the Study Guide 3 dropbox. Chapter 13 - Boxes

More information

Chapter 4 CSS basics

Chapter 4 CSS basics Sungkyunkwan University Chapter 4 CSS basics Prepared by J. Lee and H. Choo Web Programming Copyright 2000-2018 Networking Laboratory 1/48 Copyright 2000-2012 Networking Laboratory Chapter 4 Outline 4.1

More information

Using CSS for page layout

Using CSS for page layout Using CSS for page layout Advantages: Greater typographic control Style is separate from structure Potentially smaller documents Easier site maintenance Increased page layout control Increased accessibility

More information

Creating Layouts Using CSS. Lesson 9

Creating Layouts Using CSS. Lesson 9 Creating Layouts Using CSS Lesson 9 CSS Page Layout Advantages Greater typography control Style is separate from structure Potentially smaller documents Easier site maintenance Increased page layout control

More information

1 of 7 11/12/2009 9:29 AM

1 of 7 11/12/2009 9:29 AM 1 of 7 11/12/2009 9:29 AM Home Beginner Tutorials First Website Guide HTML Tutorial CSS Tutorial XML Tutorial Web Host Guide SQL Tutorial Advanced Tutorials Javascript Tutorial PHP Tutorial MySQL Tutorial

More information

CSC309 Winter Lecture 2. Larry Zhang

CSC309 Winter Lecture 2. Larry Zhang CSC309 Winter 2016 Lecture 2 Larry Zhang 1 Announcements Assignment 1 is out, due Jan 25, 10pm. Start Early! Work in groups of 2, make groups on MarkUs. Make sure you can login to MarkUs, if not let me

More information

Website Design (Weekday) By Alabian Solutions Ltd , 2016

Website Design (Weekday) By Alabian Solutions Ltd ,  2016 Website Design (Weekday) By Alabian Solutions Ltd 08034265103, info@alabiansolutions.com www.alabiansolutions.com 2016 TECHNOLOGIES DATE TIME Day 1 HTML Part 1 Intro to the web The web Clients Servers

More information

Questback Essentials. Theme Manager Custom CSS. Updated on November 1, 2017

Questback Essentials. Theme Manager Custom CSS. Updated on November 1, 2017 Questback Essentials Theme Manager Custom CSS Updated on November 1, 2017 Contents Theme Manager Custom CSS... 2 Stylesheet structure... 2 HTML markup... 2 Theme Manager... 3 CSS reference... 4 Quest theme...

More information

Getting Started with Eric Meyer's CSS Sculptor 1.0

Getting Started with Eric Meyer's CSS Sculptor 1.0 Getting Started with Eric Meyer's CSS Sculptor 1.0 Eric Meyer s CSS Sculptor is a flexible, powerful tool for generating highly customized Web standards based CSS layouts. With CSS Sculptor, you can quickly

More information

CSS Module in 2 Parts

CSS Module in 2 Parts CSS Module in 2 Parts So as to familiarize yourself with the basics of CSS before moving onto Dreamweaver, I d like you to do the 2 following Modules. It is important for you to AT LEAST do Part 1. Part

More information

Appendix D CSS Properties and Values

Appendix D CSS Properties and Values HTML Appendix D CSS Properties and Values This appendix provides a brief review of Cascading Style Sheets (CSS) concepts and terminology, and lists CSS level 1 and 2 properties and values supported by

More information

2005 WebGUI Users Conference

2005 WebGUI Users Conference Cascading Style Sheets 2005 WebGUI Users Conference Style Sheet Types 3 Options Inline Embedded Linked Inline Use an inline style sheet to modify a single element one time in a page.

More information

Lab 1: Introducing HTML5 and CSS3

Lab 1: Introducing HTML5 and CSS3 CS220 Human- Computer Interaction Spring 2015 Lab 1: Introducing HTML5 and CSS3 In this lab we will cover some basic HTML5 and CSS, as well as ways to make your web app look and feel like a native app.

More information

API GUIDELINES DRAFT

API GUIDELINES DRAFT API GUIDELINES DRAFT..05 API GUIDELINES TABLE OF CONTENTS API Introduction 3 Tracking via SMS Tracking - Real time Requirements 4 Messaging & Usage 5 Implementing for Mobile 3 Introduction 6 Overview 4

More information

Mark Scheme. Edexcel Level 2 Certificate in Digital Applications. Unit 5: Coding for the Web

Mark Scheme. Edexcel Level 2 Certificate in Digital Applications. Unit 5: Coding for the Web Mark Scheme Edexcel Certificate in Digital Applications Unit 5: Coding for the Web General marking guidance All candidates must receive the same treatment. Examiners must mark the first candidate in exactly

More information

td { page-break-inside: avoid; } tr { page-break-after: avoid; } div.section1 { page: Section1; }

td { page-break-inside: avoid; } tr { page-break-after: avoid; } div.section1 { page: Section1; } Message-ID: Subject: Exported From Confluence MIME-Version: 1.0 Content-Type: multipart/related; boundary="----=_part_2_1682789042.1449849216456"

More information

ACSC 231 Internet Technologies

ACSC 231 Internet Technologies ACSC 231 Internet Technologies Lecture 7 Web Typography Efthyvoulos Kyriacou - Assoc. Prof. Frederick University Resources: C. Markides (Frederick University) Slide 1 ACSC 231: Internet Technologies 23/12/2008

More information

Creating and Building Websites

Creating and Building Websites Creating and Building Websites Stanford University Continuing Studies CS 21 Mark Branom branom@alumni.stanford.edu Course Web Site: http://web.stanford.edu/group/csp/cs21 Week 6 Slide 1 of 28 Week 6 Agenda

More information

Learn how to transmit information from Procare to Listen360 for use with the Listen360 customer feedback system.

Learn how to transmit information from Procare to Listen360 for use with the Listen360 customer feedback system. Listen360 Learn how to transmit information from Procare to Listen360 for use with the Listen360 customer feedback system. [Editor s note: As of January 2019, this utility was intended for use by a limited

More information

Page Layout. 4.1 Styling Page Sections 4.2 Introduction to Layout 4.3 Floating Elements 4.4 Sizing and Positioning

Page Layout. 4.1 Styling Page Sections 4.2 Introduction to Layout 4.3 Floating Elements 4.4 Sizing and Positioning Page Layout contents of this presentation are Copyright 2009 Marty Stepp and Jessica Miller 4.1 Styling Page Sections 4.2 Introduction to Layout 4.3 Floating Elements 4.4 Sizing and Positioning 2 1 4.1

More information

UX Style Guide. Color palette MAIN COLORS

UX Style Guide. Color palette MAIN COLORS UX Style Guide 1 Color palette 1.1 MAIN COLORS 1.2 NEUTRAL COLORS 1.3 UTILITY COLORS 2 Icons 2.1 EXCEPTIONS 3 Typography 4 Content and Language 4.1 CAPITALIZATION & PUNCTUATION 4.2 DATA FORMATS 4.3 LANGUAGE

More information