The Twinz Website: Responsive Blog Theme Using Javascript

I absolutely LOVE being an identical twin. With a design that I originally built using General Assembly’s Dash course, I changed the coding up a bit and designed the website below to celebrate how awesome it is being a twin in the modeling industry! Our stage-name is “The Twinz” so I named our blog accordingly. I imagine somewhere down the road I’ll be asked to help a client build a personal blog, and I can show them this example and how easy it was to make. I added in a fun Javascript command that creates a pop-up that says “Twinz rule!!!” Whenever someone hits a like button. Pretty cool, eh? The site is only a front-end design, not yet a functioning domain and website, but here is the code I used to build it, as well as the finished product design:

The Twinz Website:

Screen Shot 2014-09-19 at 1.28.50 AM

Here’s a Link for a Closer Look:

https://dash.generalassemb.ly/cpierce278/build-your-own-blog-theme

Skills I Learned By Making this Website:

Header, li, a, ul, links, display, margins, border-radius, max-width, article, margin: 0 auto; script, on(), button, alert, hex color, media queries, RGBA color.

Here’s what I still need to work on; in this case I did not have a large enough file to use as the background image, and the files that I do have from this particular twin photo-shoot we did together are HUGE files, which would blow up the size of the entire page. I admit that I still need to learn how to resize a high resolution full-sized background image to fit the screen. Let’s see if I do better on the next site I create!

Check Out the Code I Wrote:

<!DOCTYPE html>
<head>
<link href=”/normalize.css” rel=”stylesheet”>
<style>
header {
text-align: center;
background: url(‘https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQcApw9Op5xc95XpTDAPrHpfGfPxvzuOaBUdF48sR03ekVNxqdJ&#8217;);
background-size: cover;
color: white;
}
a {
color: white;
}
h1 {
font-size: 70px;
}
img {
margin: 40px 0px 0px 0px;
border: 10px solid white;
border-radius: 90px;
}
ul {
padding: 10px;
background: rgba(0,0,0,0.5);
}
li {
display: inline;
padding: 0px 10px 0px 10px;
}
article {
max-width: 500px;
padding: 20px;
margin: 0 auto;
}
@media (max-width: 500px) {
h1 {
font-size: 36px;
padding: 5px;
}
li {
padding: 5px;
display: block;
}
}
</style>
</head>
<body>
<header>
<img src=”http://images.ak.instagram.com/profiles/profile_287051556_75sq_1398311073.jpg”&gt;
<h1>The <br /> Twinz</h1>
<ul>
<li><a href=”#”>About Us</a></li>
<li><a href=”#”>Our Modeling Portfolio</a></li>
<li><a href=”#”>Fun Twin Facts</a></li>
</ul>
</header>
<article>
<h2>All Odds Are In Our Favor</h2>
<p>Here’s some fun facts about twins! About 1 in every 100 births are twins, one in every 400 twin pregnancies yield identical twins, and 1 in 800 sets of IDENTICAL twins yield “mirror image” twins. Another awesome fact is that with twin births, there’s usually one vertex (head first), one breech (bottom first), and there is a 40% likelihood of this (usually the second twin is breech), as with us. Betchya didn’t know that!</p>
<button>Like</button>
</article>
<article>
<h2>Being Mirror Image Twins</h2>
<p>If you are mirror image twins it means that you are also identical twins, like us! Mirror image twins have small mirror image differences but are actually genetically identical; this means you have the exact same DNA!Some parts of the body are commonly mirrored; mirroring of appendix or heart or other internal organs is rare. We have some examples of our own mirroring: We are opposite handed (Flame is left-handed and Lake right). We tend to have mirror image dental problems. Our cowlicks (tuft of hair at fringe) are on opposite sides. People often have two different size feet; with us the opposite foot is larger. We look very similar to each other but the resemblance is even stronger if we stand facing each other (as though in a mirror) rather than side by side. Or get both of us facing into a mirror and things start to look very confusing. Our finger prints don’t seem to conform to being mirror image – instead they are nearly identical (only one pair of fingers has any major difference).</p>
<button>Like</button>
</article>
<article>
<h2>Who is Who?</h2>
<p>That’s easy, I’m Corri and my twin is Karri! Only you can’t tell who is writing this by looking at my typing… so I might as well be Karri. At the same time, I am not sure Karri knows if she’s Corri or not, she only knows that she is <i>her</i> and I am not her. She doesn’t know that her real name is Karri because she doesn’t remember ever being called specifically “Karri” without people confusing her for “Corri”. So she may as well be Corri, and I may as well be Karri. Such confusion is the very essence of understanding twins – which is normal! Haha, we guess since we don’t know who is who, why should we tell you? 😉 ;)</p>
<button>Like</button>
</article>
<script>
$(“button”).on(“click”, function() {
alert(“Twinz Rule!!!”);
});
</script>
</body>
</html>

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s