Statistics
We looked inside some of the posts by jessy-webauthoring and here's what we found interesting.
Average Info
Notes Per Post
1
Likes Per Post
1
Reblog Per Post
0
Reply Per Post
0
Time Between Posts
4 days
Number of Posts By Type
Photo
7
Text
2
Link
8
Last Seen Tumblr Blogs
Fun Fact
In 2020, Tumblr had 29.4 million users in the US.
Photo
CSS - Grid
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>title</title> <link rel="stylesheet" href="style.css">
</head> <body> <div class="container"> <div class="one">One</div> <div class="two">Two</div> <div class="three">Three</div> <div class="four">Four</div> <div class="five">Five</div> <div class="six">Six</div> <div class="seven">Seven</div> <div class="eight">Eight</div> </div> </body> </html>
style.css
.container { width: 800px; margin: 1rem auto; display: grid; grid-template-columns: repeat(5,1fr); grid-auto-rows: 100px; grid-gap: 10px; padding: 10px; }
.container div { background-color: #FCBCB8; padding : 1rem; font-family: Helvetica; font-weight: bold; font-size: 0.9rem; }
.one { grid-column-start: 1; grid-column-end: 6; grid-row-start: 1; grid-row-end: 2; }
.two { grid-column: 1/3; grid-row: 2/4; }
.three { grid-column: 3/5; grid-row: 2/3; }
.four { grid-column: 5/6; grid-row: 2/4; }
.five { grid-column: 3/4; grid-row: 3/4; }
.six { grid-column: 4/5; grid-row: 3/4; }
.seven { grid-column: 4/6; grid-row: 4/5; }
.eight { grid-column: 1/4; grid-row: 4/5; }
0 notes
Text
CSS - Flexbox layout
- the same result as the previous week but applying with flexbox layout.
style.css
@font-face { font-family: "League Spartan"; src: url('fonts/leaguespartan-bold.woff') format('woff'); font-family: 'Oswald', sans-serif; }
body { font-family: "Helvetica Neue", Helvetica, Arial; background-color: #E5D0CC; }
#page { width: 90%; margin: 0 auto; background-color: #ffffff; }
#masthead{ background-color: #444554; padding : 1.5rem 2.7%; padding-top: 4rem; position: relative; }
#masthead h1 a { font-family: "League Spartan"; font-size: 4rem; text-decoration: none; color: white; }
.logo-image { position: absolute; left: 515px; bottom: 165px; }
#masthead p { color: #BFACB5; text-transform: lowercase; font-size: 1.5rem; padding: 0; margin: 0; }
nav { margin-top: 1rem; }
nav ul { list-style-type: none; padding: 0; margin: 0; display: flex; justify-content: space-evenly; }
nav ul li { display: block; }
nav a:link { color: white; font-family: Oswald; text-decoration: none; text-transform: uppercase; font-size: 1.5rem; padding: 1rem; }
nav a:focus { color: yellow; border-bottom: 1px solid #ffff00; }
nav a:active { color: yellow; border-bottom: 1px solid #ffff00; }
nav a:hover { color: yellow; border-bottom: 1px solid #ffff00; }
.main-aside { display: flex; justify-content: space-evenly; }
main { width: 61%; }
#content { padding: 1.5rem 2.7%; }
article { margin-bottom: 3em; border-bottom: 1px solid #7F7B82; }
article h2 { font-size: 2rem; margin: 0; }
article h2 a { text-decoration: none; }
article header { border-bottom: 1px solid #7F7B82; }
.article-body p { font-family: Georgia; line-height: 1.5; }
.article-body a { text-decoration: none; color: #7F7B82; }
.article-body a:hover { border-bottom: 1px solid #000000; }
.author { margin-top: 0; }
#article-footer-1 { text-align: right; margin-bottom: 4rem; margin-top: 2rem; }
#article-footer-1 a { padding: 1rem; background-color: #7F7B82; color: white; text-decoration: none; }
#article-footer-1 a:hover { background-color: #444554; }
#article-footer-2 { text-align: right; margin-bottom : 4rem; margin-top: 2rem; }
#article-footer-2 a { padding: 1rem; background-color: #7F7B82; color: white; text-decoration: none; }
#article-footer-2 a:hover { background-color: #444554; }
aside { width: 35%; }
#most-read { padding: 1rem; border: 1px solid #BFACB5; margin: 1.5rem; }
#most-read a { color: #444554; text-decoration: none; }
#most-read li { margin-bottom: 1rem; }
footer { background-color: #172121; padding: 1.5rem; }
footer p { color: white; }
footer li { color: white; }
footer a { color: white; }
@media screen and (min-width: 900px) { #page{ width: 900px; } }
@media screen and (max-width: 790px) {
img { max-width: 100%; } .logo-image { display: none; } nav a:link { font-size: 1rem; } #masthead { text-align: center; padding: 1.5rem; } }
@media screen and (max-width: 700px) { main { float: none; width: 100%; } #masthead { padding: 1rem; } aside { float: none; width: 100% } }
@media screen and (max-width: 600px) {
body { margin: 0; } #page { width: 100%; } #masthead { padding: 1.5rem; } #masthead h1 a { font-size: 2rem; }
#masthead p { display: none; } nav ul { flex-flow: column; width: 100% } nav ul li { border-bottom: 1px solid #ffffff; padding: 1rem; }
.main-aside { flex-wrap: wrap; } }
0 notes
Photo
CSS - Responsive web design
style.css
@font-face { font-family: "League Spartan"; src: url('fonts/leaguespartan-bold.woff') format('woff'); font-family: 'Oswald', sans-serif; }
body { font-family: "Helvetica Neue", Helvetica, Arial; background-color: #E5D0CC; }
#page { width: 90%; margin: 0 auto; background-color: #ffffff; }
#masthead{ background-color: #444554; padding : 1.5rem 2.7%; padding-top: 4rem; position: relative; }
#masthead h1 a { font-family: "League Spartan"; font-size: 4rem; text-decoration: none; color: white; }
.logo-image { position: absolute; left: 515px; bottom: 165px; }
#masthead p { color: #BFACB5; text-transform: lowercase; font-size: 1.5rem; padding: 0; margin: 0; }
nav { margin-top: 1rem; }
nav ul { list-style-type: none; padding: 0; margin: 0; }
nav ul li { display: inline;
}
nav a:link { color: white; font-family: Oswald; text-decoration: none; text-transform: uppercase; font-size: 1.5rem; padding: 1rem; }
nav a:focus { color: yellow; border-bottom: 1px solid #ffff00; }
nav a:active { color: yellow; border-bottom: 1px solid #ffff00; }
nav a:hover { color: yellow; border-bottom: 1px solid #ffff00; }
main { width: 61%; float: left; }
#content { padding: 1.5rem 2.7%; }
article { margin-bottom: 3em; border-bottom: 1px solid #7F7B82; }
article h2 { font-size: 2rem; margin: 0; }
article h2 a { text-decoration: none; }
article header { border-bottom: 1px solid #7F7B82; }
.article-body p { font-family: Georgia; line-height: 1.5; }
.article-body a { text-decoration: none; color: #7F7B82; }
.article-body a:hover { border-bottom: 1px solid #000000; }
.author { margin-top: 0; }
#article-footer-1 { text-align: right; margin-bottom: 4rem; margin-top: 2rem; }
#article-footer-1 a { padding: 1rem; background-color: #7F7B82; color: white; text-decoration: none; }
#article-footer-1 a:hover { background-color: #444554; }
#article-footer-2 { text-align: right; margin-bottom : 4rem; margin-top: 2rem; }
#article-footer-2 a { padding: 1rem; background-color: #7F7B82; color: white; text-decoration: none; }
#article-footer-2 a:hover { background-color: #444554; }
aside { width: 35%; float: right; }
#most-read { padding: 1rem; border: 1px solid #BFACB5; margin: 1.5rem; }
#most-read a { color: #444554; text-decoration: none; }
#most-read li { margin-bottom: 1rem; }
footer { clear: both; background-color: #172121; padding: 1.5rem; }
footer p { color: white; }
footer li { color: white; }
footer a { color: white; }
@media screen and (min-width: 900px) { #page{ width: 900px; } }
@media screen and (max-width: 790px) {
img { max-width: 100%; } .logo-image { display: none; } nav a:link { font-size: 1rem; } #masthead { text-align: center; } }
@media screen and (max-width: 700px) { main { float: none; width: 100%; } aside { float: none; width: 100% } }
@media screen and (max-width: 600px) {
body { margin: 0; } #page { width: 100%; } #masthead { padding: 1.5rem; } #masthead h1 a { font-size: 2rem; }
#masthead p { display: none; } nav ul li { display: block; border-bottom: 1px solid #ffffff; padding: 1rem; }
}
0 notes
Link
1 note
·
View note
Photo
CSS - Links, Lists and Webfonts
style.css
@font-face { font-family: "League Spartan"; src: url('fonts/leaguespartan-bold.woff') format('woff'); font-family: 'Oswald', sans-serif; }
body { font-family: "Helvetica Neue", Helvetica, Arial; background-color: #E5D0CC; }
#page { width: 900px; margin: 0 auto; background-color: #ffffff; }
#masthead{ background-color: #444554; padding : 1.5rem; padding-top: 4rem; position: relative; }
#masthead h1 a { font-family: "League Spartan"; font-size: 4rem; text-decoration: none; color: white; }
.logo-image { position: absolute; left: 515px; bottom: 165px; }
#masthead p { color: #BFACB5; text-transform: lowercase; font-size: 1.5rem; padding: 0; margin: 0; }
nav { margin-top: 1rem; }
nav ul { list-style-type: none; padding: 0; margin: 0; }
nav ul li { display: inline;
}
nav a:link { color: white; font-family: Oswald; text-decoration: none; text-transform: uppercase; font-size: 1.5rem; padding: 1rem; }
nav a:focus { color: yellow; border-bottom: 1px solid #ffff00; }
nav a:active { color: yellow; border-bottom: 1px solid #ffff00; }
nav a:hover { color: yellow; border-bottom: 1px solid #ffff00; }
main { width: 550px; float: left; }
#content { padding: 1.5rem; }
article { margin-bottom: 3em; border-bottom: 1px solid #7F7B82; }
article h2 { font-size: 2rem; margin: 0; }
article header { border-bottom: 1px solid #7F7B82; }
.article-body p { font-family: Georgia; line-height: 1.5; }
.article-body a { text-decoration: none; color: #7F7B82; }
.article-body a:hover { border-bottom: 1px solid #000000; }
.author { margin-top: 0; }
#article-footer-1 { text-align: right; margin-bottom: 4rem; margin-top: 2rem; }
#article-footer-1 a { padding: 1rem; background-color: #7F7B82; color: white; text-decoration: none; }
#article-footer-1 a:hover { background-color: #444554; }
#article-footer-2 { text-align: right; margin-bottom : 4rem; margin-top: 2rem; }
#article-footer-2 a { padding: 1rem; background-color: #7F7B82; color: white; text-decoration: none; }
#article-footer-2 a:hover { background-color: #444554; }
aside { width: 300px; float: right; padding : 1.5rem; }
#most-read { padding: 1rem; border: 1px solid #BFACB5; }
#most-read a { color: #444554; text-decoration: none; }
#most-read li { margin-bottom: 1rem; }
footer { clear: both; background-color: #172121; padding: 1.5rem; }
footer p { color: white; }
footer li { color: white; }
footer a { color: white; }
0 notes
Link
.my-picks {
font-family: “Ostrich Sans“, Jura, Forum, Italiana;
}
0 notes
Link
0 notes
Photo
CSS - Boxes, Floats and Position
Index.html
<head> <title>Jung Hey Yoon 2983780</title> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> </head>
Style.css
body {
font-family: "Helvetica Neue", Helvetica, Arial; background-color: #E5D0CC; }
#page { width: 900px; margin: 0 auto; background-color: #ffffff; }
#masthead{ background-color: #444554; padding : 1.5rem; }
#masthead p { color: #BFACB5; text-transform: lowercase; }
nav a { color: white; text-decoration: none; font-weight: bold; text-transform: uppercase; font-size: 0.875rem; }
main { width: 550px; float: left; }
#content { padding: 1.5rem; }
article { margin-bottom: 3em; border-bottom: 1px solid #7F7B82; }
article h2 { font-size: 2rem; margin: 0; }
article header { border-bottom: 1px solid #7F7B82; }
.article-body p { font-family: Georgia; line-height: 1.5; }
.article-body a { text-decoration: none; color: #7F7B82; }
.author { margin-top: 0; }
#article-footer-1 { text-align: right; margin-bottom : 4rem; }
#article-footer-2 { text-align: right; margin-bottom : 4rem; }
aside { width: 300px; float: right; padding : 1.5rem; }
#most-read { padding: 1rem; border: 1px solid #BFACB5; }
#most-read a { color: #444554; text-decoration: none; }
#most-read li { margin-bottom: 1rem; }
footer { clear: both; background-color: #172121; padding: 1.5rem; }
footer p { color: white; }
footer li { color: white; }
footer a { color: white; }
0 notes
Link
In the Web Authoring class, Ruairi mentioned 90s’ web design (especially about border-style). And it aroused my interest in the history of web design. I realised that I had never looked carefully at changes and development of web design. I would like to start keeping my eyes on it from now on.
0 notes
Photo
<!DOCTYPE html> <html lang="en"> <head> <title>Jung Hey Yoon 2983780</title> <meta charset="utf-8"> </head> <body> <div id="page"> <header id="masthead"> <a href="index.html"> <img src="images/logo.png" alt="site logo"> </a>
<p>All the news that's fit to mark-up</p>
<nav> <ul> <li><a href="news.html">News</a></li> <li><a href="reviews.html">Reviews</a></li> <li><a href="sports.html">Sports</a></li> <li><a href="culture.html">Culture</a></li> <li><a href="comment.html">Comment</a></li> <li><a href="about.html">About</a></li> </ul> </nav> </header>
<main> <div id="content"> <article> <header> <h2> <a href="article.html"> Hello Doggy! </a> </h2> <p class="author">Jesus Christ</p> </header> <div class="article-body"> <p>simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> <img src="images/dog.jpg" alt="dog photo"> <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p> </div> <div id="article-footer-1"> <p><a href="comments.html">Comments</a></p> </div> </article> <article> <header> <h2>Hello Cat</h2> <p class="author">Cat Lover</p> </header> <div class="article-body"> <p>simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> <img src="images/cat.jpg" alt="cat photo"> <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p> </div> <div id="article-footer-2"> <p><a href="comments.html">Comments</a></p> </div> </article> </div> </main>
<aside> <div id="most-read"> <h2>Most Read From Around The Web</h2> <ul> <li><a href="https://www.wired.com/story/ideas-joi-ito-great-digitization-event/">THE NEXT GREAT (DIGITAL) EXTINCTION</a></li> <li><a href="http://www.howdesign.com/creative-freelancer-blog/how-to-find-your-ideal-clients-customer-pain-points/">How to Find Your Ideal Client’s Pain Points</a></li> <li><a href="https://www.dexigner.com/news/31449">Felix Braden Releases Typeface Simulating a Handmade Woodprint</a></li> </ul> </div> </aside>
<footer> <p>© 2018 SpongeMedia</p> <ul> <li><a href="#">Terms and Conditions</a></li> <li><a href="#">Privacy Policy</a></li> <li><a href="#">Contact Us</a></li> </ul> </footer> </div> </body> </html>
0 notes
Link
We, human being, might have been hacked and controlled by internet.
0 notes
Link
0 notes
Text
<!DOCTYPE html>
<html> <head> <title>Worksheet 01 / Part 03</title> </head> <body> <h1>Beautiful</h1> <p>Beautiful</p> <p>is the<br>unmea<br>ning<br>of(sil</p> <p>ently)fal</p> <p>lin(e<br>ver<br>yw<br>here)s</P> <p>Now</p> <p><em><strong>by ee cummings</strong></em></p> </body> </html>
0 notes
Photo
<!DOCTYPE html> <html> <head> <title>Worksheet 01 / Part 02</title> </head> <body> <h1>HTML5 For Fun & Profit</h1> <p><em>by Jessy Jung Hey Yoon</em></p> <h2>What is the web?</h2> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> <h2>What is HTML?</h2> <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. <strong>The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.</strong> Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p> </body> </html>
0 notes