<!DOCTYPE html>
<html>
<head>
	<link rel='stylesheet' href='style.css'/>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<title>Helena Bourmault</title>
</head>
<body>
    <header id="banner">
	<h1>Helena Bourmault<h1>
	<img src="https://lh4.googleusercontent.com/-3R_vKAI2mxc/UuFmiTFxKII/AAAAAAAASR0/0kPwE9k6_0M/s275-no/IMG_2530-A300.jpg">
	</header>
	<h1>a life of travel</h1>
    <div class='columns'>
        <div class='lists'>
            <h2>COUNTRIES I HAVE VISITED</h2>
            <div class='magic1'>
                <h3>Australia</h3>
                <h3>Austria</h3>
                <h3>China</h3>
                <h3>Czech Republic</h3>
                <h3>Finland</h3>
                <h3>France</h3>
                <h3>Germany</h3>
                <h3>Hungary</h3>
                <h3>Malaysia</h3>
                <h3>Singapore</h3>
                <h3>Slovakia</h3>
                <h3>Switzerland</h3>
                <h3>Taiwan</h3>
                <h3>Thailand</h3>
                <h3>United Kingdom</h3>
                <h3>United States</h3>
            </div>
        </div>
        <div class='lists'>
            <h2>MY FAVORITE PLACES</h2>
            <div class='magic1'>
                <h3>Queensland, Australia</h3>
				<img class='magic2' src='http://3.bp.blogspot.com/-uURGiGZJPUs/UQZonxG-hbI/AAAAAAAAFuE/CNBoFPMqFHU/s400/DSC01040.JPG' />
                <h3>Hong Kong SAR, China</h3>
				<img class='magic2' src='http://1.bp.blogspot.com/-rwlNQwrgxJQ/URPT65B9hfI/AAAAAAAAGGg/cV4so82vyTQ/s640/p31.jpg' />
                <h3>Prague, Czech Republic</h3>
				<img class='magic2' src='http://1.bp.blogspot.com/-LPcyRfTQRAA/UTDpRnXpbVI/AAAAAAAAG7Y/_TF2c39RZuU/s640/IMG_0924.JPG' />
                <h3>Alps, France &  Switzerland</h3>
				<img class='magic2' src='http://3.bp.blogspot.com/-u1fAU7Oc7uU/Ushg6XUA_vI/AAAAAAAAQwI/UR7KbjokB-Y/s1600/DSC08373_Fotor.jpg' />
                <h3>Paris, France</h3>
				<img class='magic2' src='http://4.bp.blogspot.com/-yHOPKDRdU0A/UTihwxZxglI/AAAAAAAAHpQ/NynoG1Ivwe8/s640/IMG_4041.JPG' />
                <h3>London, England, UK</h3>
				<img class='magic2' src='http://2.bp.blogspot.com/-Y1Ike698C0g/UxYPeViDOMI/AAAAAAAATvg/cZ6Dz7RHXIU/s1600/DSC06084_Fotor.jpg' />
                <h3>Grand Canyon, Arizona, US</h3>
				<img class='magic2' src='http://1.bp.blogspot.com/-bK4qwt1w_Jw/UQ6yZagbgVI/AAAAAAAAGAQ/_cN8STRgcCc/s640/IMG_4073.JPG' />
            </div>
        </div>
        <div class='lists'>
            <h2>TRAVEL PLAN 2014</h2>
            <div class='magic1'>
                <h3>Feb: Muotka, Lapland, Finland</h3>
                <p class='magic2'>Our quest to search for the aurora borealis has been a failure, the one-week Valentine’s holiday in Muotka, a wilderness reserve in Lapland, however, was still a great one. Husky safari, snowmobile safari, snowshoe hike, visit to reindeer farm, etc. were all fun things to do there in the Arctic Circle. </p>
                <h3>Apr: Madrid, Spain</h3>
                <p class='magic2'>4-day-long-weekend in the region of Madrid: City of Madrid + San Lorenzo de El Escorial + Aranjuez - Can't wait to see this beautiful historic center of Spain!</p>
                <h3>May: Lisbon, Portual</h3>
                <p class='magic2'>Coming soon!</p>
                <h3>May: Rome, Italy</h3>
                <p class='magic2'>Coming soon!</p>
                <h3>Jun: Brussels, Belgium</h3>
                <p class='magic2'>Coming soon!</p>
                <h3>Aug: Santorini+Athens, Greece</h3>
                <p class='magic2'>Coming soon!</p>
                <h3>Dec: TBC</h3>
                <p class='magic2'>Coming soon!</p>
            </div>
        </div>
		<div class='lists'>
            <h2>2015-2016</h2>
            <div class='magic1'>
				<h3>Moscow+StPetersburg, Russia</h3>
                <h3>Norway</h3>
				<h3>Copenhagen, Denmark</h3>
				<h3>Amsterdam, Netherlands</h3>
				<h3>Milan+Venice+Florence, Italy</h3>
				<h3>Barcelona, Spain</h3>
				<h3>Neuschwanstein+Munich, Germany</h3>
				<h3>Sardinia, Italy</h3>
                <h3>Mont Saint-Michel, France</h3>  
            </div>
        </div>
	</div>
	<h1>blog: travel</h1>
	<div class='columns'>
		<div class='blogs'>
			<h4>Americas</h4>
			<a href="http://helenalovestravel.blogspot.co.uk/search/label/Americas" target="_blank"><img src="https://lh3.googleusercontent.com/-bK4qwt1w_Jw/UQ6yZagbgVI/AAAAAAAAGAQ/_cN8STRgcCc/w1153-h865-no/IMG_4073.JPG"></a>
			<a href="http://helenalovestravel.blogspot.co.uk/2011/08/usa.html" target="_blank"><h5>USA Honey June</h5></a>
			<p>Right after our wedding in early June, we departed on the 6th of June for this 3-week honeymoon in the United States.  We went from the West Coast where we visited San Francisco and Los Angeles in California, Las Vegas in Nevada, and Grand Canyon in Arizona, to Florida in the southeast where we spent around a week in Miami and Orlando, and finally to the capital Washington and New York City in the East.</p>
		</div>
		<div class='blogs'>
			<h4>Asia</h4>
			<a href="http://helenalovestravel.blogspot.co.uk/search/label/Asia" target="_blank"><img src="https://lh6.googleusercontent.com/-PfTKIPj7aOQ/UQp9gRGGz-I/AAAAAAAAF1E/z5wdJCTXJtg/w1153-h865-no/DSC03057.JPG"></a>
			<a href="http://helenalovestravel.blogspot.co.uk/2012/07/singaporexmalaysia.html" target="_blank"><h5>Singapore and Malaysia</h5></a>
			<p>You can be really annoyed at times when you need to put off or even call off a trip under constraints of cost, time and distance.  If you fancy a dream vacation in an idyllic resort amid the ocean but famous destinations like French Polynesia and Maldives are either too expensive or too far away from your current location, the oceanic island Sipadan located in the Celebes Sea off the east coast of Sabah in East Malaysia...</p>
		</div>
		<div class='blogs'>
			<h4>Australia</h4>
			<a href="http://helenalovestravel.blogspot.co.uk/search/label/Australia" target="_blank"><img src="https://lh6.googleusercontent.com/-f6mOyOD5oiI/UQZoosGz-KI/AAAAAAAAFuM/TJsJvqGqg0g/w1153-h865-no/DSC01054.JPG"></a>
			<a href="http://helenalovestravel.blogspot.co.uk/2012/01/australia.nsw-qld.html" target="_blank"><h5>From NSW to QLD</h5></a>
			<p>Upon arrival at Sydney Airport on the 23rd of December, we caught the Airport Train that brought us to city in 15 minutes.  Once we had reached the City Rail Network, it took only another 15 minutes before we could check in and drop our baggage at the hotel.  Already at this point we started to like Sydney as its transport network was so adequate, convenient, and tourist-friendly.  After that long-haul flight...</p>
		</div>
		<div class='blogs'>
			<h4>Europe</h4>
			<a href="http://helenalovestravel.blogspot.co.uk/search/label/Europe" target="_blank"><img src="https://lh4.googleusercontent.com/-07THqMRmauM/USTBE-Q6fSI/AAAAAAAAGrg/v24f6FEHq44/w1153-h865-no/montreux4.JPG"></a>
			<a href="http://helenalovestravel.blogspot.co.uk/2010/01/francexswitzerland.html" target="_blank"><h5>France and Switzerland</h5></a>
			<p>From the 24th of December to the 1st of 2010 I had a wonderful Christmas vacation with two of my French friends travelling from Paris to the French-speaking part of Switzerland, where we visited Geneva, Neuchâtel, Lausanne, and Montreux, from which we headed back to France and visited Évian-les-Bains, Annecy, Lyon, and Beaune on the way back to Paris. The route included a total of ten stops including the Château de...</p>
	    </div>
	</div>
	<h1>blog: cooking</h1>
	<div class='columns'>
		<div class='blogs'>
			<h4>Breakfast Goodies</h4>
			<a href="http://helenalovescooking.blogspot.co.uk/search/label/Breakfast%20Goodies" target="_blank"><img src="http://2.bp.blogspot.com/-VIWASu4C5m0/Ut0kQ4m2J4I/AAAAAAAASDs/jQkENbvSIG0/s1600/HLC20130612F.jpg"></a>
			<a href="http://helenalovescooking.blogspot.co.uk/2013/06/low-fat-low-sugar-bread-like-berries-muffins-yoghurt.html" target="_blank"><h5>Blueberries Muffins</h5></a>
			<h6>INGREDIENTS:</h6>
			<ul>
				<li>1 egg</li>
				<li>240ml fat-free plain greek yoghur</li>
				<li>80ml vegetable oil</li>
				<li>1tsp vanilla extract</li>
				<li>260g plain flour</li>
				<li>and...</li>
			</ul>
		</div>
		<div class='blogs'>
			<h4>Appetizers & Side Dishes</h4>
			<a href="http://helenalovescooking.blogspot.co.uk/search/label/Appetizers%20%26%20Side%20Dishes" target="_blank"><img src="http://4.bp.blogspot.com/-6tMpGcao1PM/Ucv33hm9xUI/AAAAAAAAL9A/K6yVaj_GV-U/s1600/HLC20130912B.JPG"></a>
			<a href="http://helenalovescooking.blogspot.co.uk/2013/09/low-calorie-zucchini-roasted-with-garlic.html" target="_blank"><h5>Roasted Zucchini with Garlic</h5></a>
			<h6>INGREDIENTS:</h6>
			<ul>
				<li>zucchinis</li>
				<li>olive oil</li>
				<li>salt</li>
				<li>garlic</li>
				<li>ground black pepper</li>
				<li>and...</li>
			</ul>
		</div>
		<div class='blogs'>
			<h4>Main Courses</h4>
			<a href="http://helenalovescooking.blogspot.co.uk/search/label/Main%20Courses" target="_blank"><img src="http://4.bp.blogspot.com/-0ZByesLn-_I/Ubjm-sOu4VI/AAAAAAAALWg/I2KN034YqKA/s1600/HLC20130612E.JPG"></a>
			<a href="http://helenalovescooking.blogspot.co.uk/2013/06/chicken-celery-carrots-cashew-nuts.html" target="_blank"><h5>Chicken, Veggies & Cashew Nuts</h5></a>
			<h6>INGREDIENTS:</h6>
			<ul>
				<li>425g chicken breasts, diced</li>
				<li>1 celery, cut into chunks</li>
				<li>200g baby carrots</li>
				<li>60g cashew nuts</li>
				<li>1-2 hot chillies, chopped</li>
				<li>and...</li>
			</ul>
		</div>
		<div class='blogs'>
			<h4>Desserts & Sweet Treats</h4>
			<a href="http://helenalovescooking.blogspot.co.uk/search/label/Desserts%20%26%20Sweet%20Treats" target="_blank"><img src="http://2.bp.blogspot.com/-4fSkK17B-dk/UeUJTJGqlmI/AAAAAAAAMtM/lJHp0OktwtI/s1600/HLC20130812F.jpg"></a>
			<a href="http://helenalovescooking.blogspot.co.uk/2013/08/dairy-free-low-sugar-custard-pastry-cream.html" target="_blank"><h5>Strawberries Custard Tarts</h5></a>
			<h6>INGREDIENTS:</h6>
			<ul>
				<li>300ml unsweetened soya milk</li>
				<li>3 large egg yolks</li>
				<li>30g sugar</li>
				<li>20g all purpose flour</li>
				<li>20g corn starch</li>
				<li>and...</li>
			</ul>
		</div>
	</div>
	<h1>about me</h1>
    <div id="aboutme">
			<table id="myinfo">
			<tr>
				<td>Motto</td>
				<td>Money is not yours until you spend it.</td>
			</tr>
			<tr>
				<td>Goal</td>
				<td>Sightsee the earth as much as possible until I die.</td>
			</tr>
			<tr>
				<td>Current City</td>
				<td>London, United Kingdom</td>
			</tr>
			<tr>
				<td>Favorite City</td>
				<td>Hong Kong SAR, China</td>
			</tr>
			<tr>
				<td>Favorite Countries</td>
				<td>Australia, Canada, Switzerland</td>
			</tr>
			<tr>
				<td style='vertical-align: top;'>Places I have visited</td>
				<td><iframe width="410" height="300" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps/ms?msid=201247483838469890564.0004cd461f476d82fbcfd&amp;msa=0&amp;ie=UTF8&amp;t=m&amp;ll=33.72434,16.171875&amp;spn=137.242901,288.984375&amp;z=1&amp;output=embed"></iframe><br /><small>View <a href="https://maps.google.com/maps/ms?msid=201247483838469890564.0004cd461f476d82fbcfd&amp;msa=0&amp;ie=UTF8&amp;t=m&amp;ll=33.72434,16.171875&amp;spn=137.242901,288.984375&amp;z=1&amp;source=embed" style="color:#0000FF;text-align:left">Places I have visited</a> in a larger map</small></td>
			</tr>
			</table>
			<div id="mygallery">
			<h3>Wedding Gallery</h3>
				<div>
					<img src="https://lh6.googleusercontent.com/-ORbI5hxTArg/TsiyZ_OiasI/AAAAAAAABtU/ReLfQC2y30o/w369-h553-no/IMG_2495-A300.jpg">
				</div>
				<div>
					<img src="https://lh3.googleusercontent.com/-ji3_sQRbess/TsizvNzin_I/AAAAAAAABu8/koJ7qVdV9fo/w369-h553-no/IMG_2542-A300.jpg">
				</div>
				<div>
					<img src="https://lh4.googleusercontent.com/-RskxsMYhonQ/Tsi4ZT6qwDI/AAAAAAAAGok/QAy0rzsfcls/w369-h553-no/IMG_2726-a303.jpg">
				</div>
				<div>
					<img src="https://lh3.googleusercontent.com/-Eb9NEq8s5W8/TtJUgLPYJMI/AAAAAAAACBE/24LWN6Cg5Yg/w369-h553-no/IMG_2860-a303.jpg">
				</div>
				<div>
					<img src="https://lh4.googleusercontent.com/-5SD-S6Ig0f0/TsizRXrUtrI/AAAAAAAAGqc/7r8aDFezDqY/w369-h553-no/IMG_2530-A300.jpg">
				</div>
				<div>
					<img src="https://lh5.googleusercontent.com/-bSKPrFnmQS0/Tsi0FORG97I/AAAAAAAAGjU/TA4xmgiVleY/w369-h553-no/IMG_2552-A300.jpg">
				</div>
				<div>
					<img src="https://lh3.googleusercontent.com/-c94cI_umx3U/Tsi5zV9J15I/AAAAAAAAGm0/MmXd4a0K8s0/w369-h553-no/IMG_2786-a303.jpg">
				</div>
				<div>
					<img src="https://lh6.googleusercontent.com/-lOJr2tTujyY/Tsi8DkT_SHI/AAAAAAAAB6s/Eq_IYdp7FPs/w369-h553-no/IMG_2912-a303.jpg">
				</div>
			</div>
	</div>
    <footer><p>Thank you for visiting my first webpage!</p></footer>
	<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src='script.js'></script>
</body>
</html>
body {
    width: 1200px;
    margin: auto;
    font-family: verdana,arial,sans-serif;
}

a {
	text-decoration:none;
}

#banner {
    position: relative;
    height: 300px;
    background: url("https://lh3.googleusercontent.com/-EIgq54KGSgk/Ush9UEmQFdI/AAAAAAAAQwk/ZxPUvhlRkFg/w1598-h352-no/DSC08484_Fotor.jpg") no-repeat;
    background-size: cover;
    color: #3B3D3C;
    font-size:20px;
    word-spacing: 5px;
    padding-left: 20px ;    
}

#banner img {
	width:120px;
	border: 2px solid white;
	border-radius: 100px;
	margin-left: 520px;
	margin-top: 150px;
	box-shadow: 0 0 10px 1px black;
	
}

#banner h1 {
	margin-top: 0;
	padding-top: 10px;
	font-size: 35px;
	border: none;
	text-shadow: none;
}

h1 {
	font-size: 30px;
	text-shadow: 2px 2px 4px #888C89;
	padding-bottom: 5px;
	border-bottom: 2px solid #DCDFE0;
	padding-top: 40px;
	margin-bottom: 0px;
	clear: both;
    
}

.columns > div {
    width: 280px;
    float: left;
    margin: 10px;
}

.lists h2 {
    font-size: 15px;
    color: #2D2D2E;
    text-align: center;
    background-color: #C9C8CC;
    border-radius: 10px;
    box-shadow: 0 0 8px 0px black;
    padding: 8px;
    margin-bottom: 10px;
    cursor: pointer;
}

.lists img {
    width: 280px;
    height: 42px;
    border-radius: 10px;
    margin-bottom: 5px;
    
}

.lists iframe {
    border-radius: 10px;
    margin-bottom: 5px;
}

.magic1 {
    display: none;
}

.magic1 img {
    width: 240px;
    height: 180px;
    margin-top: 2px;
    margin-left: 20px;
}

.magic1 p {
    width: 240px;
    margin-left: 20px;
    text-align: justify;
	font-size: 12px;
}

.magic2 {
    display: none;
}


.magic1 h3 {
    font-size: 12px;
	text-align: center;
    background-color: #E7E6E8;
    padding: 5px;
    margin: 0;
    border-top: 1px solid white;
    border-bottom: 1px solid #B6B4B8;
    border-radius: 4px;
}

.blogs h4 {
    margin-top: 2px;
    margin-bottom: 3px;
}

.blogs img {
    width: 270px;
	height: 202px;
	box-shadow: 5px 5px 20px -5px #30302F;
	border: 5px double #CCCCC4;
}

.blogs img:hover {
	opacity: 0.6;
	-webkit-transition: all .5s linear 0;
	-o-transition: all .5s linear 0;
	-moz-transition: all .5s linear 0;
	transition: all .5s linear 0;
}

.blogs h5 {
	font-size: 15px;
	font-weight: normal;
	margin-top: 20px;
	margin-bottom: 0px;
	}
	
.blogs h5:hover {
	color: #FC0054;
	font-weight: bolder;
	text-shadow: 1px 1px 4px #8C898B;
	background-color: #FABBDF;
	box-shadow: 10px 10px 10px -5px #30302F;
	-webkit-transition: all .3s linear 0;
	transition: all .3s linear 0;
	}
	
.blogs p {
	margin-top: 5px;
	margin-right: 2px;
	font-size: 12px;
	text-align: justify;
}

.blogs h6 {
	margin-top: 5px;
	margin-bottom: -12px;
	}

.blogs li {
	list-style: none;
	font-size: 12px;
	}

#aboutme {
	clear: both;
	margin-top: 10px;
}

#myinfo {
	float: left;
	width: 600px;
	padding-right: 15px;
	margin-right: -20;
	}
	
#myinfo td {
	border: 1px solid white;
	padding: 4px;
	}
	
#myinfo td:first-child {
	width: 150px;
	font-size: 12px;
	font-weight: bold;
	background-color: #FAD9EA;
	}

#myinfo td:nth-child(2) {
	font-size: 14px;
	background-color: #FCEBF4;
	}
	
#myinfo iframe {
	padding: 3px;
	}
	
#mygallery {
	float: right;
	width: 600px;
	}

#mygallery div{
	position: relative;
	width: 120px;
	height: 180px;
	float: left;
	margin: 20px 15px;
}

#mygallery h3 {
	color: #828181;
	margin-top: 0;
	margin-left: 10px;
	padding-bottom: 10px;
	border-bottom: 2px dotted #CCCACB;
	}
	
#mygallery img{
	position: absolute;
	opacity: 0.5;
	width: 120px;
	bottom: 0;
	right: 0;
	box-shadow: 5px 5px 20px -5px #30302F;
	transition: all .5s linear 0;
	}
	
#mygallery img:hover {
	z-index: 1;
	opacity: 1;
	width: 280px;
	bottom: -40px;
	right: 10px;
	box-shadow: none;
	transition: all .5s linear 0;
	}
	
footer {
	clear: both;
	padding-top: 40px;
	}
	
footer p {
	padding-top: 8px;
	padding-bottom: 8px;
	font-size: 14px;
	font-weight: bold;
	text-align: center;
	background: -webkit-linear-gradient(right, #FA66B0, #FABEDC, #807D7E); /* For Safari */
	background: -o-linear-gradient(right, #FA66B0, #FABEDC, #807D7E); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(right, #FA66B0, #FABEDC, #807D7E); /* For Firefox 3.6 to 15 */
	background: linear-gradient(to right, #FA66B0, #FABEDC, #807D7E); /* Standard syntax */
	}
    $('.columns h2').on('click', function() {
        $(this).siblings('div').slideToggle('slow');      
    });
    
    $('.magic1 h3').on('mouseenter', function() {
        $(this).next('img').slideDown();
    });
    
    $('.magic1 h3').on('mouseleave', function() {
        $(this).next('img').slideUp();
    });
    
    $('.magic1 h3').on('mouseenter', function() {
        $(this).next('p').slideDown();
    });
    
    $('.magic1 h3').on('mouseleave', function() {
        $(this).next('p').slideUp();
    });
	
	
Created from scratch
0 forks
48 views

Browse more Codebits