14048938web-blog - Tumblr blog

14048938web-blog · 6 years ago

Text

jquery

<!doctype html> <html> <head> <meta charset="utf-8"> <script src="js/jquery-3.4.1.min.js"></script> <style> /*Changes cursor to a finger*/ #myspecial, #rebel{cursor:pointer;} #rebel {position:relative;left:0;} #mylogo{background:red; width:20px; webkit-transition:width 5s; transition:width 5s; font-size:20px;} #mylogo.expand{width:600px;} </style> <script> //opening jquery comm

$(document).ready( function(){ //process more functions $("mylogo").addClass("expand"); $("#mylogo").html("Yoo!2019"); $("mylogo").click( function(){ if($(this).hasClass("expand")){ $(this).removeClass("expand");} else{ $(this).addClass("expand"); } }); $("#myspecial").click( function(){ $("#mylogo").hide(); } ); //variable this changes the position. origin plus 10 var catX=0; var dir=50; $("#rebel").click( function(){ if(catX>500){ dir= -50; } if(catX<0){ dir = 50; } catX=catX+dir; $("#mylogo").show(); $(this).css( {left:catX +"px"} ); } ); } ); </script>

<title>jquery</title> </head>

<body> <h1 id="mylogo">Tomato</h1> <div id="myspecial"> <img src="../w7/logo.png" alt="H&M" width="200"/> </div> <div id="rebel">SHOW ME</div> </body> </html>

#in-class #jquery #coderef #click #addclass #hide #class #position

0 notes

14048938web-blog · 6 years ago

Text

Sliding carousel, responsive images, modals, cards

<!doctype html> <html> <head> <meta charset="utf-8"> <title>colaapsible nav modal carousel</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <style> /* Make the image fully responsive */ .carousel-inner img {width: 100%; height: 100%;} </style> </head> <body> <nav class="navbar navbar-expand-md bg-dark navbar-dark fixed-bottom"> <a class="navbar-brand" href="#">H&M</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="collapsibleNavbar"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">the campaign</a> </li> <li class="nav-item"> <a class="nav-link" href="#">the event</a> </li> <li class="nav-item"> <a class="nav-link" href="#">the store</a> </li> </ul> </div> </nav> <br>

<ul class="carousel-indicators"> <li data-target="#demo" data-slide-to="0" class="active"></li> <li data-target="#demo" data-slide-to="1"></li> <li data-target="#demo" data-slide-to="2"></li> </ul>

<div class="carousel-inner"> <div class="carousel-item active"> <img src="IMG/la.jpg" alt="Los Angeles" width="1100" height="500"> </div> <div class="carousel-item"> <img src="IMG/header-face.png" alt="Chicago" width="1100" height="500"> </div> <div class="carousel-item"> <img src="IMG/ny.jpg" alt="New York" width="1100" height="500"> </div> </div>

<a class="carousel-control-prev" href="#demo" data-slide="prev"> <span class="carousel-control-prev-icon"></span> </a> <a class="carousel-control-next" href="#demo" data-slide="next"> <span class="carousel-control-next-icon"></span> </a> </div> <div class="container"> <div class="row"> <div class="col-md-4 bg-dark">column 1 <br><button type="button" class="btn btn-danger" data-toggle="modal" data-target="#myModal"></button> </div> <div class="col-md-4 bg-warning">column 2 <div class="card"> <img class="card-img-top" src="IMG/img_avatar1.png" alt="Card image"> <div class="card-body"> <h4 class="card-title">John Doe</h4> <p class="card-text">Some example text.</p> <a href="#" class="btn btn-primary" data-toggle="modal" data-target="#myModal">See Profile</a> </div> </div> </div> <div class="col-md-4 bg-danger">column 3</div> </div>

</div>

<div class="modal-header"> <h4 class="modal-title">Modal Heading</h4> <button type="button" class="close" data-dismiss="modal">×</button> </div>

<div class="modal-body"> <img src="IMG/chicago.jpg" alt="Chicago" width="70%" height=""><br>Modal body.. </div>

<div class="modal-footer"> <button type="button" class="btn btn-danger" data-dismiss="modal">bye</button> </div>

</div> </div> </div> </body>

</html>

#in-class #carousel #modal #cards #responsiveimages #responsive #coderef

0 notes

14048938web-blog · 6 years ago

Text

Bootstrap: navbar, button, linking libraries: js + fontawesome, responsive grid

<!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<body> <nav class="nav-bar navbar-expand-sm bg-dark navbar-dark"> <a class="navbar-brand" href="#"> <img src="logo.png" alt="" style="width:40px;">H&M </a> <div> <ul class="navbar-nav"> <li class="nav-item"><a class="nav-link" href="#"> <i class="fas fa-genderless"></i>About</a></li> <li class="nav-item"><a class="nav-link" href="#">Contact</a></li> </ul> </div> </nav> <div class="container-fluid"> <h1>Title</h1> <p>Little words</p> <button type="button" class="btn btn-danger">Primary</button> <button type="button" class="btn btn-info">Info</button> </div> <div class="row bg-light"> <div class="col">This</div> <div class="col">Could</div> <div class="col">Be</div> <div class="col">Pics</div> </div> <div class="row bg-dark"> <div class="col-sm-6">super</div> <div class="col-md">man</div> </div> <div class="row bg-warning"> <div class="col-lg-4">piss</div> <div class="col-md-7">man</div> </div> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> </body> </html>

#in-class #bootstrap #navbar #responsive #grid #button #libraries #codref #fontawesome #resources #js

0 notes

14048938web-blog · 6 years ago

Text

Bootstrap, navbar, linking libraries, buttons, grids

getstartedbootstrap.com > get started copy links: STEP ONE: Getting the stylesheets and libraries linked CSS in head under title <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

responsive meta tag (changes view for mobile) paste under css <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

then custom style <style> </style>

Paste at start in head under title Font Awesome is designed to be used with inline elements. The <i> and <span> elements are widely used for icons. Also note that if you change the font-size or color of the icon's container, the icon changes. Same things goes for shadow, and anything else that gets inherited using CSS. https://www.bootstrapcdn.com/fontawesome/ <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

JS in body at END <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

-------------------- STEP TWO: Nav bar copying off w3query, brand logo paste in <nav> </nav> tag under body before JS we class it within this tag and add styling like bg-dark navbar-dark )available on css cheatsheet classnames a set up by bootstrap <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body>

<ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Link 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 2</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 3</a> </li> </ul> </nav>

<div class="container-fluid"> <h3>Brand / Logo</h3> <p>When using the .navbar-brand class on images, Bootstrap 4 will automatically style the image to fit the navbar.</p> </div>

</body> </html>

---------------------- STEP THREE: Buttons getbootstrap.com>components>button colors are standard https://getbootstrap.com/docs/4.3/components/buttons/ we can override <button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-secondary">Secondary</button> <button type="button" class="btn btn-success">Success</button> <button type="button" class="btn btn-danger">Danger</button> <button type="button" class="btn btn-warning">Warning</button> <button type="button" class="btn btn-info">Info</button> <button type="button" class="btn btn-light">Light</button> <button type="button" class="btn btn-dark">Dark</button>

<button type="button" class="btn btn-link">Link</but

overriding via stylesheet takes type bc multiple overrides open up your page and inspect element Ctrl+Shf+I we are looking for all the attributes that btn is controlling so we can override under <style> btn-danger is the classname so fullstiop class name .btn-danger {background0color:#;} </style> at start before body

Moving into Grids https://getbootstrap.com/docs/4.3/layout/grid/ Column sizing is automatic but you can resize col-sm-6 example. this is done by classing col-md- is ipad size, the number controls span of column

#in-class #bootstrap #navbar #libraries #grid #button #notes #fontawesome #js #resources

0 notes

14048938web-blog · 6 years ago

Text

Using bootstrap, notes

BOOTSTRAP 4 you have to download boostrap to same file as html and lick at start from getbootstrap.com you get a zip unzip to same folder. the context "css js"

css is basic styling js can command a lot of things for you then download jquery place inside boostrap folder inside js and link under <script src="js/jquery-3.4.1.min.js"></script> given that they in the same folder you have to just write js/blah.js

navbar jumbotron wide bs grid system . this lets bootstrap handle the layout on its own This is also like the colum stuff week 1 <div class="row"> <div class="col">z</div> <div class="col">a</div> <div class="col">z</div> <div class="col">u</div> <div class="col">simba</div> </div> you can add more columns and bootstrsap will handle formatting

all this ^ were taken from w3schools.

to add extra styling like column behavior ilke when going from desktop to mobile there's if exceeding certain px like col-xl is >1200px or col-8 takes up 8 column space (66.66%) more info on CSS>RWD Grid system Basically, how the will behave on diff devices and perhaps how when the browser contracts, the elements rearrange

Use bootstrap for ass, saves times start with 960 px its esay to divide by 12 std on RWD grid system BOOTSTRAP THEMES EVEAILABE AT STARTBOOTSTRAP.COM themes give you navbar logo and stuff like carousel. the moving pic banner thing. you can input your own pic, button, colors, click on image pop up (BS4 modal w3), pic with text under (BS4 Cards) observe how contraction works

#in-class #bootstrap #resources #notes

0 notes

14048938web-blog · 6 years ago

Text

CSS google fonts

<!doctype html> <html><head> <meta charset="utf-8"> <title>css font box</title> <link href="https://fonts.googleapis.com/css?family=Playfair+Display:900|Roboto|Titillium+Web:200i,400|Muli&display=swap" rel="stylesheet"> <style> h1 {font-family: 'Playfair Display', serif;} h2 {font-family: 'Roboto', sans-serif;font-size: 57px; border: solid 2px;} p {font-family: 'Titillum Web', serif} .classname {font-family: Muli, serif; font-size: 33px;font-style:italic;} </style> </head>

<body> <h1> Hello this is Playfair. sup</h1> <h2> ROBOTO. What is up</h2> <p>More words. how's it <span class="classname">going</span> brother</p> <div></div> </body> </html>

#in-class #css #fonts #coderef

0 notes

14048938web-blog · 6 years ago

Text

<div>

<!doctype html> <html> <head> <meta charset="utf-8"> <title>div non semantic</title> <style> /*css for border is a shorthand, 3 values: with, type color*/ body{margin:3; padding-left: 3px} div{border: 2px solid; margin:2 12 2 12; padding: 10; float:left; width:31%} .classname{border: 10; margin:0 auto 10 2; width:18; position:relative; margin-left:50%; left:-150px;} </style> </head>

<body> <div class="classname"> <div>Block element</div> <div>another block</div> <div>another block</div> </div> <div> new element places here bc of 'float'</div> </body> </html>

#in-class #coderef #div

0 notes

14048938web-blog · 6 years ago

Text

CSS, Notes

properties or id are things like color fontsize. you declare properties {color:blue;} these are assigned to 'selectors' # used once per name file. 'ID' #uniquename #uniqnametwo classing is another way to separate. class is set with a fullstop . unique name *asterisk i a universal selector selectls all HTML elements similar attributes for multiple shit can be paired. h1, h2, p{text-align:whatever: style:dhjehd;}

CSS BOX MODEL wraps around every HTML element box(margin(border(padding(content

margin pushes out box to box padding pushes in border_content

CSS FONTS use Google fonts, select and you can see the link, it links to the internet link if whoever has acces to internet. if two names plus sign Calibri+light the link href is before <style> If multiple fonts | if link href=link/css?family=Calibri+light|Roboto&display=swap" & is a setting you add after you can also do multipl links when you <style> h1 {font-family:'Calibri Light', serif;} the comma serif means if no inetrnet access fall back default font will be serif

you can after you select a font on google fonts, customize and select weights, languages etc, link href.....css?family=Quicksand:400,700&display ....

<div> things like div span as opposed to table article gives no context

/* within html is like a note for youself

margin shorthand - top right bottom left floating is to position? you cn class a div also <div class="classname"> <div></div> </div> div attributes under style at start before head div(border: ;margin-left: ;left: ;} position:nn; is an attribute absolute is zeo relative is next available space

margin-left in percentage of full width then say left or right or whatever - px or plus to subtract from margin distance \

Go into CSS Responsive>RWD Intro the RWD grid view show general

its possible to layer stuff but more complicated have to level up first.

#in-class #css #fonts #div #responsive #boxmodel #notes

0 notes

14048938web-blog · 6 years ago

Text

CSS

<!doctype html> <html> <head> <meta charset="utf-8"> <title>CSS</title> <style> h1, h3, h5{ color:red; font-weight: normal;} h2, h4 {color:blue; font-family:Arial; font-size: 30px} p {font-size: 15px; font-family:Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif"; color:indianred} p>span{color:saddlebrown; font-weight:bold; text-decoration: underline} span.txthello{text-decoration: overline} span.txtblue{color:aliceblue; border:10px solid #574343;} span.txtstress{text-transform: uppercase} #choicename {border: 5px solid red; padding-bottom: 20px; border-left-width: 10px} </style> </head>

<body> <h1>My First CSS</h1> <h2>hello</h2> <h3 style="font-size: 20px; color:aliceblue;">hello</h3> <h4>hello</h4> <h5>hello</h5> <p>hello, <span class="txtblue txtstress">goodbye</span>, will you tell me your name. <span class="txthello">hello,</span> my name is Elder <span class="txtstress txthello">Price</span>. </p> <p id="choicename">Hello, my name is </p> </body> </html>

#in-class #html #css #coderef

0 notes

14048938web-blog · 6 years ago

Text

CSS, day one, notes

<!doctype html>

<html>

<head>

MASTER STYLE SET UP BEFORE BODY.

<style>

SPECIFICS FOR HEADERS

h1, h3, h5{ color:red; font-weight: normal;}

h2, h4 {color:blue; font-family:Arial; font-size: 30px}

SPECIFICS FOR GEN TEXT WRITTEN UNDER <p> PARAGRAPH

p {font-size: 15px; font-family:Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif"; color:indianred}

WITHIN P YOU CAN CODE PARTICULAR WORDS AS SPAN <span></span> AND THESE CODES AFFECT THOSE, OVERRIDES P STYLING ABOVE. YOU CAN CODE AS BELOW OR JUST span{attributes:specify;} ALWAYS END THEM WITH SEMICOLON ;

p>span{color:saddlebrown; font-weight:bold; text-decoration: underline}

WITHIN SPAN YOU CAN CLASS THEM W NAME OF YOUR CHOICE, BUT STICK TO GEN BC THESE CODES TEND TO BE PASSED ON. THESE CODES OVERRIDES SPAN STYLING ABOVE. span.classname{attributes:specify}

span.txthello{text-decoration: overline}

STYLING THE BORDER, {border:weightpx linestyle #hexcode;} ALL WITHIN SAME SEMICOLON; SOME COLORS ARE ON DREAMWEAVER AND YOU CAN USE THE NAME LIKE indianred OR aliceblue. BUT SOME BROWSERS MAY NOT HAVE THESE COLORS PROGRAMMED INTO THEM

span.txtblue{color:aliceblue; border:10px solid #574343;}

span.txtstress{text-transform: uppercase}

YOU CAN ID SOMETHING <p id=”choicename”> </p> BUT ONLY ONCE PER HTML

#choicename {border: 5px solid red; padding-bottom: 20px; border-left-width: 10px}

</style>

</head>

<body>

<h1>My First CSS</h1>

<h2>hello</h2>

STYLING WITHIN THE BODY OVERRIDES GEN STYLING ABOVE

<h3 style="font-size: 20px; color:aliceblue;">hello</h3>

<h4>hello</h4>

<h5>hello</h5>

TO CLASS A SPAN YOU SAY AS BELOW <span class=”classname1 classname2” YOU CAN DOUBLE CLASS AND WORD WILL FOLLOW STYLING OF BOTH CLASSES. THE SPACE BETWEEN CLASS NAMES IS ‘AND’

<p>hello, <span class="txtblue txtstress">goodbye</span>, will you tell me your name.

<span class="txthello">hello,</span> my name is Elder <span class="txtstress txthello">Price</span>.

</p>

<p id="choicename">Hello, my name is

</p>

</body>

</html>

#in-class #css #html #span #id #class #notes

0 notes

14048938web-blog · 6 years ago

Text

<!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> </head>

<body> <h1>ZAMBOO</h1> <h2>is</h2> <h3>cool</h3> <h4>sorta</h4> <h5>i think</h5> <h6>jdncs</h6> <h2>?</h2> <p>this is <a href="http://www.google.com" target="_blank" >so</a> kool i dkkndeuh cieudh auhe cejdjedo eoijdeo ajiedej e09aje 09e 9ef a9ef kap9ef <br/> jidjpav jvoiueav ;lk vapoijev jaeojvajp poaijev japoij aevoijijeoufj aepoijv-0 ejopaijv8urjv oaoijvr poija irvjpoais<br/> irjvopsijvr apoijv j asopijvf jdi</p> <p>hduw dhowujj dowuhdwlkjd ouhwd</p> <a href="http://www.google.com" target="blank"> <img src="imgs or imgs or img/car.png"/><p>car</p></a> <br/><img src="imgs or imgs or img/car.png" width="10"/> <img src="imgs or imgs or img/car.png" height="5"/> <p> <ul> <li>cheese</li> <li>more cheese</li> </ul> </p> <ol><li>crap</li><li>more crap but in order</li> </ol> </body> </html>

#in-class #html #coderef #lists #img #links

0 notes

14048938web-blog · 6 years ago

Text

EDM Code, html, tables, styling

<!doctype html> <html> <head> <meta charset="utf-8"> <title>Newsletter</title> </head>

<body> <table width ="600" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="600" colspan="4" height="20" bgcolor="#f5f3eb"> </td> </tr> <tr> <td width="25" height="30" bgcolor="f5f3eb"> </td> <td width="400" height="30" bgcolor="f5f3eb"> <p style="font-family:Courier; font-style:italic; font-size: 8pt; color:#b6b3a9;"> CONTEMPORARY PHOTOGRAPHY MAGAZINE </p> </td> <td width="150" height="30" bgcolor="f5f3eb"> <p style="font-family:Courier; font-size: 8pt; tex-align:right; color: #b6b3a9;"> Volume 02, Issue no. 08 </p> </td> <td width="25" height="30" bgcolor="f5f3eb"> </td> </tr> <tr> <td width="25" height="15" bgcolor="f5f3eb"> </td> <td width="550" colspan="2" height="15" bgcolor="f5f3eb"> <p style="font-family:Times New Roman; font-size: 62pt; text-align: center; color: #b6b3a9; padding:0; margin:0;"> Sharpshooter </p> <p> </p> </td> <td width="25" height="15" bgcolor="f5f3eb"> </td> </tr> <tr> <td width="25" height="15" bgcolor="f5f3eb"> </td> <td width="550" colspan="2" height="15" bgcolor="f5f3eb"> <img alt="" src="https://scontent-sin2-2.xx.fbcdn.net/v/t15.5256-10/p320x320/70528825_10162467150245454_3679825990919389184_n.jpg?_nc_cat=104&_nc_eui2=AeFI5_pyzvw0aq0EpoMqqT3Fh7oaGPJBZxsySLu6Y8U2ANH1TUrJev_2P5yu7aOzTClXfT6mEGy8rv6oeEeOd9doJbF5Aq1IyjcnQ7ScERpzYQ&_nc_oc=AQkVHNtplKaNEDatzjGTaWCwh6xYNyAZBVK5K930yzwIXvPP36a6rK3o55xl1MpV_KY&_nc_ht=scontent-sin2-2.xx&oh=be2e9cb62c796d763bc2d50a7c40ca84&oe=5E0A9F9D"/> </td> <td width="25" height="15" bgcolor="f5f3eb"> </td> </tr> <tr> <td width="600" colspan="4" height="25" bgcolor="#f5f3eb"> </td> </tr> <tr> <td width="600" colspan="4" height="25" bgcolor="#f5f3eb"> <table width="600" border="0" cellpadding="0" cellspacing="0">

<td width="150" colspan="2" height="5" bgcolor="f5f3eb"> <p style="font-family:Courier; font-weights:bold; font-size: 8pt; text-align:center; padding:0; color:#b6b3a9; vertical-align:top;margin-top:0;padding-bottom:15px;"> Featured Artists </p> <ul style="list-style-type:none; margin:0; padding:0; text-align:center; "> <li style="padding-left:0; font-family:Courier; font-weights:bold; font-size: 8pt; tex-align:right; padding:0; color:#b6b3a9;"> MAI ZAKI </li>

<li style="font-family:Courier; font-weights:bold; font-size: 8pt; tex-align:right; padding:0; color:#b6b3a9;"> ZARA NIZAR </li>

<li style="font-family:Courier; font-weights:bold; font-size: 8pt; tex-align:right; padding:0; color:#b6b3a9;"> AHAM SALMAN </li>

<li style="font-family:Courier; font-weights:bold; font-size: 8pt; tex-align:right; padding:0; color:#b6b3a9;"> ABDULLA NIYAZI </li>

<li style="font-family:Courier; font-weights:bold; font-size: 8pt; tex-align:right; padding:0; color:#b6b3a9;"> SOPHIA SHAREEF </li>

<li style="font-family:Courier; font-weights:bold; font-size: 8pt; tex-align:right; padding:0; color:#b6b3a9;"> ALI FATTAHDIZAJO </li>

<li style="font-family:Courier; font-weights:bold; font-size: 8pt; tex-align:right; padding:0; color:#b6b3a9;"> HUSSAIN MAISAN ZAKI </li>

</ul>

</td> <td width="15" colspan="1" height="5" bgcolor="f5f3eb" style="border-right:1px solid #ccc;"></td> <td width="15" colspan="1" height="5" bgcolor="f5f3eb"></td> <td width="370" colspan="2" height="5" bgcolor="f5f3eb"> <p style="font-family:Courier; font-weights:bold; font-size: 8pt; tex-align:justify; padding:0; color:#b6b3a9;">Saturday, the 19th of April, saw Malaysia’s most promising photographers reach a new peak in their careers. Hosted at Core Design Gallery, the salon opened with a welcome toast by established Malaysian artist, Zac Lee. The artists touched on their individual motivations and encouraged critique about their work. The informal setting of the event invited friendly debates and open discussion among their esteemed guests.</p> <p style="font-family: Courier; font-style:italic ; font-size: 10pt; text-align:left; padding:0; color:#b6b3a9"> Catch more of the artists’ work at the upcoming <span style="font-weight:bold;">Singapore Biennale 2020</span> </p> </td>

</table> </td> </tr> </table> </body> </html>

#in-class #edm #html #coderef #tables

0 notes

14048938web-blog · 6 years ago

Photo

we made a newsletter and then coded it via html and emailed it to ourselves.

1. make edm, illustrator the sizing was 600px width so that it fits mobile

2. transfer to photoshop. the slice tool lets you cut up the document into sizes, this helps with measurement

3. move on to dreamweaver we started first with making tables and rows and stuff second is styling. we style each element separately. we open the element thing and then add attributes like width, font etc.

4. the images have to be online if you wanna email it so we uploaded a screencap of it to our facebook first and then we emailed it to ourselves

#edm #html #in-class #process

0 notes

14048938web-blog · 6 years ago

Photo

analyzing the web flow of facebook log in, if it fails

#in-class flowchart

0 notes

14048938web-blog · 6 years ago

Text

html tables

<!doctype html> <html> <head> <meta charset="utf-8"> <title>My first EDM</title> </head>

<body> <table border="1" cellspacing="20" cellpadding="50"> <tr> <th>html tables</th> <td>R1, C2</td> <td>R1, C3</td> </tr> <tr> <td>R2, C1</td> <td colspan="2">R2, C2</td> </tr> <tr> <td colspan="3"> <table> <tr> <td width="200">R2a, C1 lt</td> <td width="400">R2a, C2 rt</td> </tr> </table> </td> </tr> </table> </body> </html>

#in-class html tables

0 notes

14048938web-blog · 6 years ago

Photo

Photos were screenshot from different makes & models and then we took the resolution and dimensions info off Photoshop. The table shows a comparison of the resolutions and dimension ratios.

#in-class #resolution #ratio

1 note · View note