Familjen Granberg

famgra.se - design och layout

famgra.se är gjord i ren HTML 5, CSS 3 och PHP. Bakom ligger en Apache server med PHP och mySQL installerat på en CentOS distribution. Om du vill ha inspiration till din egna websida eller se hur jag löst vissa tekniska detaljer på sidan så hittar du det här. Du får gärna kopiera och använda så mycket du vill av kod och annat om du finner det användbart. Bilder och textinnehåll är dock privat och får inte kopieras eller återanvändas.

Här hittar du liveuppdaterad html och css kod till första sidan på famgra.se.

HTML kod för famgra.se - index.php. Dra i nedre hörnet för att förstora eller förminska textfönstret

<!--Copyright © år 2019 Mikael Granberg

This program is free software; you can redistribute it and/or
modify it under the terms of the GNU General Public License
as published by the Free Software Foundation; either version 2
of the License, or (at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY OR FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program; if not, write to the Free Software
Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
-->
<!DOCTYPE HTML>
<html lang="sv" xml:lang="sv" xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link href='styles/mainstyle.css' rel='stylesheet' type='text/css'>
		<title>Familjen Granberg - Home</title>
		<script src="styles/fa/js/all.js"></script>
		<script type="text/javascript" src="scripts/common.js"></script>
		<script type="text/javascript">
		</script>
	</head>
	<body	onload="loadDoc('busarea','busstid_brasebacken.php'); autoloader('loadDoc(\'busarea\',\'busstid_brasebacken.php\')','30000');">
        <!-- Hidden content and tooltips  -->
        	
        
        
        <!-- ############## END ############  -->
        
        <div class="header">
        	<h1><a href="index.php">FAMiljen GRAnberg</a></h1>
        </div>
        
        <div style="overflow:auto">
        	<div class="left">
                <?php
                    #Add the same menu to all the pages from menu.php file
                    include 'menu.php';
                ?>
               	<div class="clock">
  					<iframe src="http://free.timeanddate.com/clock/i6t27iq5/n291/szw160/szh160/hoc000/hbw4/hfce4f1fb/cf100/hgr0/fav0/fiv0/mqc000/mqs3/mql25/mqw6/mqd96/mhc000/mhs3/mhl20/mhw6/mhd96/mmc000/mms3/mml10/mmw2/mmd96/hhw16/hmw16/hmr4/hsc000/hss3/hsl90" frameborder="0" width="160" height="160"></iframe>	
  				</div>
  				<p> </p>
         		<div id="busarea" class="busarea">
         			<!-- Här skall tidtabelen vara!  -->
         		</div>
          	</div>
              <div class="main">
                 <h2>Granberg Hills</h2>
                	<p class="breadtext">Välkommen till familjen Granberg. Vi bor på <a href="https://goo.gl/maps/F3qabNzCw93t6da7A" target="new">Öjersjövägen 6a</a> i <a href="https://www.partille.se/" target="new">Partille</a> eller <a href="https://www.facebook.com/granberghills/" target="new">Granberg Hills</a> som vi också kallar det. Vi har bott här i 
                		över tjugo år nu och börjar äntligen känna till området. Vi har en stor hund och tre katter som alltid vaktar huset åt oss. Se dig gärna omkring 
                		nu när du ändå har hittat hit.</p>
                	<img class="responsive_img" src="images/famgra_tree_2018-800x600.jpg" />
              </div>
      
          <div class="right">
            <h3>Om</h3>
            <p>Det här är familjen Granbergs hörn av Internet. Mikael Granberg heter jag som driver och underhåller stället. IT och teknik är två saker som tar upp väldigt mycket plats i mitt liv. För att hålla mig själv updaterad på det senaste inom webutveckling i alla dess former så driver jag den här syltan och några till som du hittar länkar till lite längre ner. <br/><br/>//Live long and prosper</p>
            <p class="small_about">famgra.se är helt responsiv och gjord helt och hållet i ren HTML 5 och CSS 3. Logiken bakom styrs av Apache, PHP och MySQL. Ikoner, gadgets och annat har jag lånat på olika ställen. Om du vill se hur sidan är uppbyggd för att få inspiration eller hjälp till din egna sida så hittar du allting <a href="share_famgra_layout.php">här.</a> Allting på dessa sidor får du lov att 
            använda och kopiera som du vill enligt <a href="license.php">GNU General Public License</a></p>
          </div>
        </div>
        
        <div class="newsrow">
            <div class="newsbox">
            	<h3>Länkar av famgra</h3>
            	<ul class="linklist">
            		<li><a href="https://www.mikaelgranberg.se" target="new">www.mikaelgranberg.se</a></li>
            		<li><a href="https://www.funktionswebben.se" target="new">www.funktionswebben.se</a></li>
            		<li><a href="http://www.famgracaravan.se" target="new">www.famgracaravan.se</a></li>
            		<li><a href="http://www.xn--jersjvgen-02a5qf.se/" target="new">www.öjersjövägen.se</a></li>
            	</ul>
        	<div class="spacer1"> </div>	
            <h3>Väder</h3>
            <div class="weather">
            	<a class="weatherwidget-io" href="https://forecast7.com/sv/57d7412d13/partille/" data-label_1="Partille" data-label_2="Göteborg" data-theme="original" >Partille Göteborg</a>
        		<script>
        			!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src='https://weatherwidget.io/js/widget.min.js';fjs.parentNode.insertBefore(js,fjs);}}(document,'script','weatherwidget-io-js');
        		</script>
        	</div>  		
        </div>
            <div class="newsbox">
            	<h3>Nyheter</h3>
            	<?php
            	        $timezone = new DateTimeZone('Europe/Stockholm');
                    	$rss = new DOMDocument();
                    	$rss->load('https://news.google.com/rss/topics/CAAqIQgKIhtDQkFTRGdvSUwyMHZNRE0wTTE4U0FtVnVLQUFQAQ?hl=sv&gl=SE&ceid=SE:sv');
                    	$feed = array();
                    	foreach ($rss->getElementsByTagName('item') as $node) {
                    		$item = array ( 
                    			'title' => $node->getElementsByTagName('title')->item(0)->nodeValue,
                    			'desc' => $node->getElementsByTagName('description')->item(0)->nodeValue,
                    			'link' => $node->getElementsByTagName('link')->item(0)->nodeValue,
                    			'date' => $node->getElementsByTagName('pubDate')->item(0)->nodeValue,
                    			);
                    		array_push($feed, $item);
                    	}
                    	$limit = 5;
                    	for($x=0;$x<$limit;$x++) {
                    		$title = str_replace(' & ', ' & ', $feed[$x]['title']);
                    		$link = $feed[$x]['link'];
                    		$description = $feed[$x]['desc'];
                    		$date = new DateTime($feed[$x]['date'],$timezone);
                    		$date = $date->format('l F d, Y');
                    		#echo '<p><strong><a href="'.$link.'" title="'.$title.'">'.$title.'</a></strong><br />xxx<br />';
                    		
                    		echo '<div class="newscontent"><p>'.$description.'</p></div>';
                    		echo '<div class="newspublished"><small><em>Publicerad: '.$date.'</em></small></p></div>';
                    	}
        ?>
           
            </div>
            <div class="newsbox">
            	<a href="linkstoothers.php"><h3>Länkar av andra</h3></a>
            	<ul class="linklist">
            		<li><a href="http://www.bredbandskollen.se/" target="new">www.bredbandskollen.se</a> - Testa ditt bredband</li>
            		<li><a href="https://www.omni.se" target="new">www.omni.se</a> - Alla nyheter, alla perspektiv</li>
            		<li><a href="http://www.1177.se" target="new">www.1177.se</a> - Vårdguiden</li>
            		<li><a href="https://polisen.se/" target="new">www.polisen.se</a> - Svenska Polisen</li>
            	</ul>
            	<div class="spacer1"> </div>
            	<div class="wikipedia_maincontent">
        			<h3 id="searchtitle">Sök i Wikipedia</h3>
        			<div id="form">
        					<form id="frmSearch" action="https://sv.wikipedia.org/wiki/Special:Search" target="new" method="get" accept-charset="UTF-8" name="frmSearch">
        						<input type="text" id="txtSearch" name="search" alt="Search Criteria" autocomplete="off" />
        						<input type="hidden" name="l" id="l" value="sv" />
        						<input type="hidden" name="e" value="wikipedia" />
        						<input type="hidden" name="s" value="sök" /> 
        						<input type="submit" id="cmdSearch" name="b" value="Sök" alt="Börja sök" />
        					</form>
        			</div>
        		</div>
        		<div class="spacer1"> </div>
        		<div class="wikipedia_donationfooter">        
        			<img src="https://www.wikipedia.se/img/wikimedia-button.png" border="0" alt="Ett Wikimedia projekt" title="Ett Wikimedia projekt" /></a>
        		</div>
        		<div class="wikipedia_footer-left">
        		    <a href="https://www.wikimedia.se/sv/omwikimediasverige">Om Wikimedia Sverige</a>
        		     - 
        		    <a href="https://www.wikimedia.se/sv/Integritetspolicy">Integritetspolicy</a>
        		</div>
            </div>
        </div>
        
        
        <div class="socialmedia">
        	<a href="https://www.facebook.com/granberghills/" target="new"><img src="images/facebook_32.png"></a>
        	<a href="https://twitter.com/Granberg75?lang=sv" target="new"><img src="images/twitter.png"></a>
        	<a href="https://www.linkedin.com/in/mikaelgranberg/" target="new"><img src="images/linkedin.png"></a>
        	<a href="https://www.instagram.com/mikaelgranberg75/?hl=sv" target="new"><img src="images/instagram.png"></a>
        </div>
        <div class="bottom">
        	Licensed under <a href="license.php">GNU General Public License</a><br/>
        	<div class="credits">Icons made by <a href="https://www.flaticon.com/authors/gregor-cresnar" title="Gregor Cresnar">Gregor Cresnar</a> from <a href="https://www.flaticon.com/" 			    title="Flaticon">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a></div>
        	<div class="credits">Icons made by <a href="https://www.flaticon.com/authors/smashicons" title="Smashicons">Smashicons</a> from <a href="https://www.flaticon.com/" 			    title="Flaticon">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" 			    title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a></div>
        </div>
	</body>
</html>

CSS Stylesheet kod för famgra.se - mainstyle.css. Dra i nedre hörnet för att förstora eller förminska textfönstret

@CHARSET "ISO-8859-1";

/* Import fonts to use from Google Font API */
@import url('https://fonts.googleapis.com/css?family=Orbitron|Raleway&display=swap');

/* Import Fontawesome from local storage */
@import url('fa/css/all.css');

/*Define default page color palette both for use as variable or directly as a class member */
:root{
	--color-primary-0:					#B5D4EC;
	--color-primary-1:					#E4F1FB;
	--color-primary-2:					#CDE4F5;
	--color-primary-3:					#9DC3E0;
	--color-primary-4:					#84B0D2;
	--color-link:						#527ea0;
	--color-link-visited: 				#00FF00;
}

/* Main Primary color */
	.color-primary-0 					{ color: #B5D4EC; }	
	.color-primary-1 					{ color: #E4F1FB; }
	.color-primary-2 					{ color: #CDE4F5; }
	.color-primary-3 					{ color: #9DC3E0; }
	.color-primary-4 					{ color: #84B0D2; }
	.color-link		 					{ color: #FF0000; }
	.color-link-visited 				{ color: #00FF00; }

/* Override default layout items such as body and header definitions */
body {
	font-family:					'Raleway', sans-serif;
	font-size: 						12px;
	background:						var(--color-primary-1);
}

h1 {
	font-family: 					'Orbitron', sans-serif;
	font-style: 					normal;
	font-weight: 					100;
	font-size: 						3vw;
	color:							var(--color-primary-1);
}

h2 {
	font-family: 					'Orbitron', sans-serif;
	font-style: 					normal;
	font-weight: 					100;
	font-size: 						18px;
	color:							var(--color-primary-4);
}

h1 a {
	text-decoration: 				none;
	color:							var(--color-primary-1);
}


h1 a .tooltiptext {
  	visibility: 					hidden;
  	width: 							0px;
  	height:	 						0px;
  	font-family:					'Raleway', sans-serif;
	font-size: 						12px;
	color:							var(--color-primary-1);
  	background-color: 				var(--color-primary-4);
  	text-align: 					center;
  	padding: 						5px 0;
  	border-radius: 					6px;
  	border-bottom-color:			var(--color-primary-0);
  	box-shadow: 					10px 10px 5px grey;
	top: 							15%;
  	left: 							50%;
  	z-index: 						20;
  	position: 						absolute;
}

h1 a:hover .tooltiptext {
 visibility: 						visible;
 width: 							200px;
 height: 							auto;
}

h3 {
	font-family: 					'Orbitron', sans-serif;
	font-style: 					normal;
	text-align:						center; 
	font-weight: 					100;
	font-size: 						2vw;
	color:							var(--color-primary-4);
}


h6 {
	font-family: 					'Orbitron', sans-serif;
	font-style: 					normal;
	font-weight: 					600;
	font-size: 						14px;
	color:							var(--color-primary-4);
	margin-top: 					10px;
	margin-bottom:					2px;
}


a {
	text-decoration: 				none;
	color:							var(--color-link);
	
	
	
}

/* Layout styles for different parts */

.spacer1{										/* Spacing element 1 */
	margin-top:						15px;
}

.small_about {									/* Layout for small about text */
	font-size:						9px;
	color: 							var(--color-primary-4);
}

.tooltip {
		background-color:       	var(--color-primary-2);
		border-style:           	solid;
		border-width:           	1px;
		filter:						drop-shadow(8px 8px 10px gray);
		width:                  	15vw;
		height:                 	auto;
		display:                	block;
		z-index:                	100;
		position:               	relative;
		padding:					4px;
}

.tooltip h1 {
		font-size: 					15px;
		font-weight: 				bold;
		color: 						black;
}

/* List (GRID) layout for linklist */
.link-table-grid {
		display: 					inline-grid;
		grid-template-columns: 		50% 50%;
		padding: 					10px;
}
.link-table {
		border: 					0px solid rgba(0, 0, 0, 0.8);
		padding: 					2px;
		font-size: 					12px;
		text-align: 				left;
}
	
.link-table table,th, td  {
		border:						0px;
}
	
.link-table th, td  {
		padding-left: 				10px;
}

.link-table td:first-child {
		font-size:					13px;
		
}

/* Responsive layout elements */
* {
  box-sizing: 						border-box;
}

.header{
	background-color:				var(--color-primary-3);
	padding:						2px;
	text-align:						center;
}

.left {
  float:							left;
  width:							20%;
  text-align:						left;
  display:block;
}

/* Menu style elements */

.menu ul {
	list-style: none;
	margin-left: 0px;
	padding-left: 0px;
}

.menu li:hover {
	font-weight: bold;
}

.menu li ul { 													/*Hide submenu items as default*/
  display: none;
} 

.menu ul li:hover > ul {										/*Show sub menu item when hovering over menu item*/
	display: block;
	font-weight: normal;
	
}


.menu a {														/*Menu link layout*/
  background-color: 				var(--color-primary-2);
  padding:							2px;
  padding-left:						15px;
  margin-top:						7px;
  display:							block;
  width:							100%;
  color:							black;
  text-decoration: 					none;
}

.menu ul li > ul a::before {
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900; 
	content: "\f02e \ ";
 }

.menu ul li > ul a {											/*Submenu link layout*/
	padding-left:					20px;
}   




.clock {														/* Layout for the analog clock iframe */
  display: 							flex;
  position: 						relative;
  margin: 							0px;
  justify-content:					center;
}

.clock iframe {
  align-self:						center;
  align-items: 						center;
  align-content: 					center;
  text-align: 						center;
}

.busarea {
	display:					block;
	width:						100%;
}

.main {
  float:							left;
  width:							60%;
  padding:							0 20px;
}

.right {
  background-color: 				var(--color-primary-2);
  float:							left;
  width:							20%;
  padding:							2px 15px 15px 15px;
  margin-top:						7px;
  text-align:						justify;
}

.newsrow {
	width: 							100%;
	display:						table;
	border-collapse: 				separate;
  	border-spacing: 				0px 0px;
  	margin-top: 					10px;
  	margin-bottom: 					10px;
}

.newsbox {
	display: 						table-cell;
	width:							33.333333%;
	background-color:	 			var(--color-primary-2);
  	padding:						15px;
  	text-align:						center;
  	border-left: 					5px solid;
  	border-right: 					5px solid;
	border-color:  					var(--color-primary-1);'
}

.newsbox:last-child {
	border-right: 					0px solid;
}

.newsbox:first-child {
	border-left: 					0px solid;
}

.bottom {
	float: 							center;
	background-color:				var(--color-primary-3);
	text-align:						center;
	padding:						10px;
	margin-top:						7px;
}

.socialmedia {
	float:	 						center;
	background-color:				var(--color-primary-3);
	text-align:						center;
	padding:						10px;
	margin-top:						7px;
}

div.socialmedia a{
	padding: 						10px;
	vertical-align: 				middle;	
}

.wikipedia_footer-left {							/* Wikipedia */
	font-size:						8px;
}

.wikipedia_footer-left a {
	color: 							var(--color-link);
	text-decoration: 				none;
}

.wikipedia_donationfooter {
	font-size:						8px;
	color: 							var(--color-link);
	text-decoration: 				none;
}

.wikipedia_maincontent{
	font-size:						10px;
	color: 							var(--color-link);
	text-decoration: 				none;
}

.credits {
	font-size: 						8px;	
}

/* Linklist layout for links in newsboxareas */

ul.linklist {
	list-style-image: 				url('images/worldwide.png');
	text-align: 					left;
}

ul.linklist li {

}

ul.linklist li {
	text-align:						justify;
	vertical-align: 				2cm;	
}

ul.linklist a{
	text-decoration:	 			none;
	color: 							var(--color-link);
	font-size: 						13px;
	vertical-align: 				top;
}

ul.linklist a:hover{
	text-decoration: 				none;
	color: 							blue;
}

/* Resource linklist - layout for resource or reference linklistst */
.resource-list {
	list-style: 					none;
	margin-left:					-25px;
}

.resource-list li {
	font-size:						10px;
	margin-bottom: 					15px;
	text-align: 					left;
}

.resource-list a {
	text-decoration: 				none;
	font-size: 						12px;
	color:							var(--color-link);	
}

.codearea {
	width:							100%;
	height: 						300px;
	text-align:						left;
	background-color: 				#282828;			/* Similar to old IBM black backround on Monochrome screen */
	color:							#00FF66;			/* As close as possible to old moncrome screen color, wavelength 502nm */
}

.newscontent {
	text-align: 					left;
}

.newscontent a {
	text-decoration: 				none;
	color: 							var(--color-link);
	font-size: 						13px;
	font-weight: 					bold;
}

.newscontent font {
	color: 							black;
	text-decoration: 				none;
	font-style: 					italic;
}

.newspublished {
	text-align: 					left;
}

.weather{
	padding-left: 					10px;
	padding-right: 					10px;
	padding-bottom: 				10px;
}

.responsive_img{
  max-width: 						100%;
  height: 							auto;
}

.breadtext {
	text-align: 					justify;
	text-overflow: 					clip;
}


/* Change layout properties depending on window size */
@media only screen and (max-width:1200px)						/* Stack newsboxes on top of each other if window size is less than 1200 px wide */
{
	.newsbox {
		display:			block;
		width:				100%;
		margin-left: 		0px;
		margin-right:		0px;
		margin-top:			10px;
		border: 			none 0px;
	}	
}


@media only screen and (max-width:850px) {						  /* Remove clock if window size is belov 850 px */

  	.clock {			
    	visibility: 		hidden;    
    	height:				0px;
  	}
  	.busarea {
  		visibility: 		hidden;    
    	height:				0px;	
  	
  	}
}

@media only screen and (max-width:620px) {						 /* For mobile phones: Stack all content tfor easier navigation on mobilephones and small screens */
  .left, .menu, .main, .right {
    width:					100%;  - 
  }
}

FAMiljen GRAnberg Gå tillbaka till första sidan

famgra.se - design och layout

Resurser

Länkar av famgra

Väder

Nyheter

Länkar av andra

Sök i Wikipedia