A Pen by Martin Koedoot

Thumbnail
This awesome code was written by mrkoetje, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright mrkoetje ©

Technologies

  • HTML
  • CSS
  • JavaScript
    <!DOCTYPE html>
<html lang = "nl">
	<!--<img src="pics/hamburger.svg" alt="menu">/ href="javascript:scroll(0,0)
		
		
		-->
<head>
	<title>Mrkoetje Weblog</title>
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<link href='https://fonts.googleapis.com/css?family=Galdeano' rel='stylesheet' type='text/css'>
	<link href='https://fonts.googleapis.com/css?family=Quicksand' rel='stylesheet' type='text/css'>
	<!--<link rel="stylesheet" type="text/css" href="main.css"/>-->
	<link rel="stylesheet" media="screen and (max-width:1376px)" href="mainmobile.css">
	<script src="https://snapwidget.com/js/snapwidget.js"></script>
</head>

<body>	
	<div class="menuicon clearfix">
		<a href="#">TOP</a>
		<a href="#social">SOCIAL-MEDIA</a>
		<a href="javascript:hideshow(document.getElementById('menubalk').addEventListener("click",block);" ><img src="pics/hamburger.svg" alt="menu"></a>
		<a href="javascript:hideshow(document.getElementById('menubalk'))">MENU</a>
	</div>
	
<header>

	<div id="logo">
		<a href="index.html"><img src="pics/MartinWebdesignlogotekst.svg" alt="logotekst2"/></a>
	</div>

</header>
<nav>
	
<div id="opvulbalk">
</div>
<div id="menubalk" class="clearfix" style="display:none;">
	<ul>
		<li><a class="current" href="#"><img src="pics/arrow/redarrowleft4.png"/><span>&nbspWEBDESIGN&nbsp</span><img src="pics/arrow/redarrowright4.png"/></a></li>
		<li><a href="#">PORTFOLIO</a></li>
		<li><a href="#">BLOG</a></li>
		<li><a href="#">HOBBY'S</a></li>
	</ul>
</div>

	
</nav>

<div id="container">
	<br/>
<main>
		<div class="main">
		<h1>Webdesign:</h1>


<h4></h4>

<p>Ik ben sinds oktober 2014 begonnen met het mezelf aanleren van front-end talen (HTML, CSS, Javascript) om vanuit deze basis websites te kunnen bouwen. <figure class="floatleft"><img alt="html"/><figcaption>html code = basis</figcaption></figure><p>Als vanzelf is ook het design een belangrijk item, en hier heb ik inmiddels al wat online cursussen voor gevolgd.</p><br/>

<p>Ik ben met webdesign begonnen nadat ik een loopbaan traject, nou ja, eigenlijk 2 loopbaantrajecten, heb gevolgd met als doel &#233;cht te gaan weten wat ik wil.  Met welk werk ik zoveel mogelijk mijn talenten en potentie aanspreek. Of nee: Hoe ik er voor zorg dat ik het werk wat ik doe z&#243; leuk vind dat het niet meer als werk aanvoelt.<br/>
De uitkomst en inzicht die ik na het laatste traject verkreeg was dat ik vooral moet gaan <q><b>cre&#235;ren</b></q><p>Ik heb voor webdesign/front-end development gekozen.</p><br/>
<p>Ik zat namelijk als kind al hele middagen puur hobbymatig achter de MS-DOS computer simpele <q>basic</q>-code te typen.</p> <figure class="floatright"><img alt="gelukkig werken"/><figcaption>gelukkig werken</figcaption></figure>
<p>Ook heb ik enkele jaren geleden voor mijn band en ook een paar andere mensen met veel plezier een website gebouwd. Je bent bij webdevelopment nooit uitgeleerd!(wat in mijn geval een noodzaak is aangezien ik altijd uitdagingen nodig heb in mijn werk. Kortom: Het lijkt me gewoon ontzettend tof om mooie websites te maken, alleen al vanwege het feit dat het werk, als we het al werk mogen noemen, een perfecte symbiose is tussen duidelijk prominente persoonlijkheidskenmerken van mijzelf in het dagelijkse leven; namelijk een sensitieve & creatieve geest (cre&#235;ren) gecombineerd met een no-nonsense praktische doorzettersmentaliteit (code schrijven)</p>
<br/>

<h4>Mijn huidige doel(en):</h4>

<p>Mijn huidige doel is om simpelweg websites en (dus) code te schrijven om de geleerde stof in de praktijk te brengen. Ik merk dat het goed is geweest om veel tijd te stoppen in het aanleren van de basis, maar ik leer nu echt het meest van de praktijk. Wat het me uiteindelijk brengt dat weet ik nog niet en is ook niet te overzien. Een mogelijke weg is om bij een web geori&#235;nteerd bedrijf te gaan werken in een junior functie, of ik kan free-lancers om me heen verzamelen en in deze wisselende groep projecten aanpakken, eventueel op een locatie. In ieder geval ga ik de komende tijd een portfolio opbouwen, wat keiharde noodzaak is om deze wereld uberhaupt binnen te komen zonder verdere specifieke diploma's</p>

<h4>De technische kant:</h4>

<figure class="floatleft"><img alt="CSS = styling"/><figcaption>CSS = styling</figcaption></figure><p>Ik heb gekozen voor werken met HTML5 (en deels CSS3) Waarbij ik geen rekening hou met browsers ouder dan IE10. Dit is ideaal voor mijn situatie. Dit aangezien ik verwacht dat in de nabije toekomst cross-browser work-arounds nauwelijks meer nodig zijn en iedere browser heeft een engine die html5/CSS3 aan kan.<br/>
<p>Ik vind semantiek in de html belangrijk, maar niet heilig. Soms is ten gunste van de layout een semantische zonde mogelijk vind ik. Ik wil proberen zo min mogelijk te werken met classes om mijn CSS op te baseren. Liever nog richt ik mijn CSS op de DOM structuur en gebruik ik de cascade en specificiteit van CSS.</p>

<p>Verder ben ik gek op eenvoudige oplossingen. Waarom Javascript/jquery's als het in een relatief eenvoudige CSS ook mogelijk is? Je ziet soms enorme workarounds voor kleine problemen. Ik vind het een sport om om dat moment te gaan zoeken en te beredeneren hoe het eenvoudiger kan. Bijkomend voordeel is een snellere rendering van de pagina door de browser</p>

<h4>Deze website:</h4>

<p>Ik heb met deze website voor het eerst iets responsive willen maken. Ik heb 3 breakpoints gemaakt en voor de grotere schermen is alles zoveel als mogelijk fluid. e.e.a heb ik geschreven in het programma: Coda</p>
<br/>
<figure class="center"><img src="" alt="mijn workspace"/><figcaption>screenshot van mijn workspace</figcaption></figure>
<br/>
<br />
	</div>

</main>
<aside class="clearfix" id="social">
	<div class="aside">
		<h1>Social Media:</h1>
		<br/>
		<h4>Instagram:<p>@mrkoetje</p></h4>
		<!-- SnapWidget -->
<script src="https://snapwidget.com/js/snapwidget.js"></script>
<iframe src="https://snapwidget.com/embed/186785" class="snapwidget-widget" allowTransparency="true" frameborder="0" scrolling="no" style="border:none; overflow:hidden; width:100%; "></iframe></div>
		<h4>Twitter: <p>@mrkoetje</p></h4>
<a class="twitter-timeline"  href="https://twitter.com/mrkoetje" data-widget-id="580437974829146112">Tweets door @mrkoetje</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
	</div>
	</aside>
</div class="clouds">
</div>
<footer>
	<div id="media1">
		<a class="button" href="#"><img src="pics/contact.png" alt="contact" title="Contact"></a>
		<a class="button" href="#"><img src="pics/1462899910_facebook.png" alt="facebook" title="Facebook"></a>
		<a class="button" href="#"><img src="pics/1462899917_instagram.png" alt="instagram" title="Instagram"/></a>
	</div>
	<div id="media2">
		<a class="button" href="#"><img src="pics/1462899923_twitter.png" alt="twitter" title="Twitter"/></a>
		<a class="button" href="#"><img src="pics/1462899929_youtube.png" alt="youtube" title="Youtube"/></a>
		<a class="button" href="#"><img src="pics/1462899935_linkedin.png" 	alt="linkedin" title="Linkedin"/></a>
		</div>
	<br/>

	<a href="mailto:martin.koedoot@gmail.com"><img src="pics/martinadress.jpg" alt="Martin"/></a>
	<address><a href="mailto:martin.koedoot@gmail.com">Martin Koedoot</a><br/>Zierikzeestraat 13<br/>6845 BL Arnhem<br/>06-38400302<br/></address>
	<br/>
</footer>

</body>

</html>

/*Downloaded from https://www.codeseek.co/mrkoetje/a-pen-by-martin-koedoot-zBrrrX */
    /*	resets & overrides:	*/

p, #menubalk, #topmedia, #opvulbalk, ul, nav, li, a, h1, img	{
	margin:0;
	padding:0;
	}

a, img
	{
	border:none;	/*nodig ivm gedrag IE10 */
	}	

li	{
	list-style-type: none;
	}

body	{
		margin:0px;
	}


body	{
	background: white url('pics/backgroundmobile.jpg') no-repeat fixed center top;
	background-size:cover;
	font-size: 100%;
	}

 	
h1, h2, h4 {
	font-family: 'Galdeano', sans-serif;
	text-align: center;
	}

p, span, nav, a, address	{
	font-family: 'Quicksand', sans-serif;
	font-size: 1em;

	}

h4	{
	font-size:1em;
	text-align: center;
	text-transform: uppercase;
	
	}
	
h1	{
	font-size: 1.7em;
	text-align: center;
	}




	
figure	{
	margin:0;
	padding:0;
	}
	
figcaption	{
	border-bottom: 1px solid grey;
	font-size: small;
	text-align: center;
	} 
	
.floatleft {
	float:left;
	margin-right:1em;
	margin-bottom:1px;
	}
	
.floatright {
	float:right;
	margin-left:1em;
	margin-bottom:5px;
	}

/*	alles in het topmenu	*/


.menuicon	{
	background-color:rgba(216,211,211,1);
	box-sizing: border-box;
	display:block;
	height:35px;
	line-height:35px;
	position: fixed;
	top:0;
	width:100%;
	z-index: 100;
	}

.menuicon a	{
	color:black;
	float:right;
	font-size: 1em;
	margin-right:.3em;	
	text-decoration: none;
	}

.menuicon a:first-child	{
	float:left;
	margin-left: .5em;
	}
	
.menuicon a:first-child	{
	float:left;
	}
	
.menuicon a:nth-child(2)	{
	float:left;
	margin-left: 1.9em;
	}
	
.menuicon a:focus,.menuicon a:hover	{
	color:grey;
	}	
	

.menuicon img	{
	}

/*	alles in de header	*/



header	{
	background: lightgrey url('pics/cloudsmobile.jpg') no-repeat fixed;
	height:120px;
	position: relative;
	text-align:center;
	}
	
#logo	{
	background-color:rgba(156,151,151,0.3);
	background: linear-gradient(to right,rgba(151,151,151,0.5) , rgba(255,255,255,0.5), rgba(151,151,151,0.5));
	height:100px;
	line-height: 80px;
	overflow:auto;
	overflow:hidden;
	position:absolute; /*helaas noodzakelijk om logo beter te plaatsen */
	text-align: center; 	/*zorgt voor centering img in combi met vert align*/
	top:10px;
	width:100%;
	}
	
#logo img	{
	display:inline-block;
	height:100%;
	margin: auto 0px;
	width:%;	
	}

/*		alles in de NAV		*/


nav	{
	font-family: 'Quicksand', sans-serif;	
	text-align:center;
	}

			
nav #opvulbalk	{
	background-color:rgba(216,211,211,1);
	height:15px;
	}
	
nav ul	{
	margin:0 auto;
	width:85%;
	}
	
		
nav a	{
	background-color:rgba(216,211,211,1);
	border-radius: .5em .5em;
	border:0px solid grey;
	display:block;
	font-size:1.2em;
	margin-top:0.5em;
	padding:2%;
	text-decoration: none;
	}

nav #menubalk .current 	{
	background:rgba(186,181,181,1);
	color:white;
	}
	
.current img	{
	display:inline-block;
	vertical-align: middle;
	width:5%;
	}

nav a:link	{
	color:black;
	}

nav a:focus, nav a:hover	{
	background-color:rgba(186,181,181,1);
	color:white;
	}

/*	alles in de MAIN	*/


main	{
	border-bottom: 1px dotted grey;
	padding:5%;
	}

main img[alt^="html"]	{
	content: url('pics/htmlmobile.jpg');
	}
main img[alt^="gelukkig"]	{
	content: url('pics/Gelukkigwerkenmobile.jpg');
	}
main img[alt^="CSS"]	{
	content: url('pics/CSSmobile.jpg');
	}
main img[alt^="mijn"]	{
	content: url('pics/workspacemobile.jpg');
	width:100%;
	}

aside	{
	background-color: white;
	padding:10%;
	}


/*	alles in de footer	*/

footer	{
	background-color: rgba(186,181,181,.5);
	}
	
.clouds	{
	background: white url('pics/cloudsmobile.jpg') repeat fixed top;
	background-size: contain;
	height:50px;

	}

#media1, #media2	{
	display:flex;
	flex-direction: row;
	justify-content: space-between;
	overflow:hidden;
	}
	
#media1	{
	border-top:1px dotted grey;
	}
	
	
.button a, .button img	{
	height:60px;
	margin:1em;
	width:60px;
	}

footer img	{
	border-radius: 10px 10px;
	float:left;
	margin-left:1em;
	}
	

address	{
	border-right:1px solid grey;
	font-style: normal;
	line-height: 1.6em;
	margin-right:1em;
	text-align: center;
	text-align:right;
	}

footer a	{
	color:black;
	font-weight: bold;
	text-decoration: none;
	}

footer a:focus, footer a:hover {
	color:grey;
	}




/*Downloaded from https://www.codeseek.co/mrkoetje/a-pen-by-martin-koedoot-zBrrrX */
    
function hideshow(which){
if (!document.getElementById){
return}
if (which.style.display=="block"){
which.style.display="none";
window.scrollTo(0,0)}
else {
which.style.display="block";
window.scrollTo(0,0)}
}




Comments