Lvl 4 Web Development 2019 by Chris Talbot

Tuesday, June 18, 2019

58 and 59

File: 58 n 59 CSS stuff.html

Code:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>58 and 59 CSS text play</title>

    <style>

        body {

            background-color:black;

            font-family: cursive;

            font-style:oblique;

        }

    h1 {

        text-align: center;

        color: white;

        text-shadow:4px 3px grey, 6px -1px greenyellow;

        font-size: 15vh;

        word-spacing: 0.5em;

        unicode-bidi: normal;

        letter-spacing:1vw;

    }

    h2 {

        color:red;

    }

h3 {

    color:green;

}

    img.knights {

        float:left;

        width: 360px;

        height: 240px;

    }

    img.eldar {

        width:360px;

        height:240px;

    }

    </style>

</head>

<body>

    <h1>Warhammer 40000</h1>

    <h2>Blood Angels</h2>

<img class="knights" src="https://i.ytimg.com/vi/tHRJ7AFW3ec/maxresdefault.jpg" alt="three Knights"><br>

<h3>Eldar</h3>

<img class"eldar" src="https://images-na.ssl-images-amazon.com/images/I/51Sp1LSEFbL._SX425_.jpg" alt="Khaine the Bloody Handed God">

</body>

</html>

Monday, May 27, 2019

Word press is so limiting in what you can do......now I know html/css/JS

All images are in my /Documents/My webpages/ folder....

Link to Wordpress page: http://easterhead.home.blog/author/badtabnz/

If you click the home page l;ink, I had no part in creating the home page...

Photo:

Wednesday, May 22, 2019

just playing with color blends and max-height / width

File is: blank.html

If I try to color blend the body, the page becomes lined.
If I leave it as a <div> then it works fine...

code:

html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="common.css"
</head>
<body>
<div><p style="text-align: center;">Here we go<br> A short look at wolverines<br> not the damn cartoon character<br>I mean the vicous little beasts that will take on great odds to defend their territory<br>or just for the hell of it<br>The Irish and Scottish of the beast world</p></div>
</body>
</html>

common.css:
body { margin:0 auto; background: #4dc3ff;}
div {
min-width: 80vh: min-height: 80vh; max-width: 90vw; max-height: 90vh;
color: white;
background: linear-gradient(to bottom right, #3333ff 0%, #990000 100%)
}

Monday, May 20, 2019

54 Header tags

The file is: 54.html

The code is:

<!DOCTYPE html>
<html>
<head>
<title>Head details</title> 
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials"> 
<meta name="keywords" content="HTML,CSS,XML,JavaScript"> 
<meta name="Chris Talbot" content="Same guy"> 
<style> body {background-image: URL("https://images.unsplash.com/photo-1496396543879-72dd3ec34186?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80");}
</style> 
<script> 
function myFunction() {
document.getElementById("demo").innerHTML = "A fish can swim!";
}
</script>
</head>
<body>

<br><p>All meta information goes before the body.</p><br>
<h1>My Web Page</h1>
<p id="demo">A Paragraph of great importance</p>
<button type="button" onclick="myFunction()">Press to reveal</button>

</body>
</html>

56 CSS boxes?

File is: 56.html

Code is:

<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: lightgrey;
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;
}
</style>
</head>
<body>

<div>This text <del>is the content of the box.</del>Dunedin is cold: the wind is cold. The rain is cold. The hail is cold. Bugger this for a joke; I'm moving to Invercargill</div>

</body>
</html>

55 Layouts

File is: 55.html

Code is:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Chris's Dunedin</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}

body {
font-family: Arial, Helvetica, sans-serif;
}

/* Style the header */
header {
background-color: #666;
padding: 30px;
text-align: center;
font-size: 35px;
color: white;
}

/* Create two columns/boxes that floats next to each other */
nav {
float: left;
width: 30%;
height: 300px; /* only for demonstration, should be removed */
background: #ccc;
padding: 20px;
}

/* Style the list inside the menu */
nav ul {
list-style-type: none;
padding: 0;
}

article {
float: left;
padding: 20px;
width: 70%;
background-color: #f1f1f1;
height: 300px; /* only for demonstration, should be removed */
}

/* Clear floats after the columns */
section:after {
content: "";
display: table;
clear: both;
}

/* Style the footer */
footer {
background-color: #777;
padding: 10px;
text-align: center;
color: white;
}

/* Responsive layout - makes the two columns/boxes stack on top of each other instead of next to each other, on small screens */
@media (max-width: 600px) {
nav, article {
width: 100%;
height: auto;
}
}
</style>
</head>
<body>

<header>
<h2>Dunedin</h2>
</header>

<section>
<nav>
<ul>
<li><a href="#">Places to see</a></li>
<li><a href="#">Things to eat</a></li>
<li><a href="#">What to do</a></li>
</ul>
</nav>

<article>
<h1>Where to go</h1>
<p>I'd personally recommend Queenstown;</p>
<p>Although, if you have to come to Dunedin: Try the Museum, catch an event at the Frans-Bar stadium, Inflatable world, the skating rink, The Octogon, a park...WHATEVER</p>
</article>
</section>

<footer>
<p>Footer ?? Like... Duh!</p>
</footer>

</body>
</html>

Wednesday, May 15, 2019

53

Code so far:

<!DOCTYPE html>

<html>

<head>

<title>Wolverine css dimensions</title>

<style>body {background-color: green;} </style>

</head>

<body style=" margin:0 auto;" >

<div></div> 

<div style=" max-width: 650px; height; 20px; width: 80vw; background-color: red;"><p>They smell REALLY bad</p></div><br>

<div style=" max-height: 60vh; height: 80vh; width: 50vw; border: dotted; background-color: powderblue;"><p>They will eat nearly anything they come across, plane or animal</p></div><br>

<div style=" 50px

</body>

</html>