Introduktion till webbutveckling (DA156A)

Malmö Högskola

Föreläsning 8 - Att bygga en webbsida


Det finns ingen powerpoint till dagens föreläsning, men exempelsidan som vi byggde kan ni komma åt på olika sätt:

HTML


    <!doctype html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<meta name="viewport" content="width=device-width, initial-scale=1">
    		<title>Star Wars</title>
    		<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
    		<link href="style.css" rel="stylesheet">
    	</head>

    	<body>
    		<header>
    			<nav id="main-nav">
    				<a href="index.html">Star Wars</a>
    				<a href="#" id="show-menu">Menu</a>
    				<ul>
    					<li><a href="#">Home</a></li>
    					<li><a href="#">Death star</a></li>
    					<li><a href="#">Hall of fame</a></li>
    					<li><a href="#">Join us</a></li>
    					<li><input type="search" placeholder="Search here..."></li>
    				</ul>
    			</nav>
    		</header>
    		<div id="jumbo">
    			<article>
    				<h1>You don't believe in the Force, do you?</h1>
    				<p>A tremor in the Force. The last time I felt it was in the presence of my old master. I need your help, Luke. She needs your help. I'm getting too old for this sort of thing. I'm surprised you had the courage to take the responsibility yourself.</p>
    				<a href="#" id="join-us-btn">Join us!</a>
    			</article>
    		</div>

    		<div class="br"></div>

    		<article id="movies">
    			<h2>Movies</h2>
    			<figure>
    				<h3>I. The phantom menace</h3>
    				<img src="images/1.png" alt="Episode 1">
    				<figcaption>
    					Lucas ipsum dolor sit amet yoda darth lando k-3po skywalker hutt calrissian endor darth sidious. Cade fett darth c-3po antilles. Wedge kenobi binks skywalker hutt windu kenobi organa.
    				</figcaption>
    			</figure>
    			<figure>
    				<h3>II. Attack of the clones</h3>
    				<img src="images/2.png" alt="Episode 2">
    				<figcaption>
    					Lucas ipsum dolor sit amet yoda darth lando k-3po skywalker hutt calrissian endor darth sidious. Cade fett darth c-3po antilles. Wedge kenobi binks skywalker hutt windu kenobi organa.
    				</figcaption>
    			</figure>
    			<figure>
    				<h3>III. Revenge of the sith</h3>
    				<img src="images/3.png" alt="Episode 3">
    				<figcaption>
    					Lucas ipsum dolor sit amet yoda darth lando k-3po skywalker hutt calrissian endor darth sidious. Cade fett darth c-3po antilles. Wedge kenobi binks skywalker hutt windu kenobi organa.
    				</figcaption>
    			</figure>
    			<figure>
    				<h3>IV. A new hope</h3>
    				<img src="images/4.png" alt="Episode 4">
    				<figcaption>
    					Lucas ipsum dolor sit amet yoda darth lando k-3po skywalker hutt calrissian endor darth sidious. Cade fett darth c-3po antilles. Wedge kenobi binks skywalker hutt windu kenobi organa.
    				</figcaption>
    			</figure>
    			<figure>
    				<h3>V. The empire strikes back</h3>
    				<img src="images/5.png" alt="Episode 5">
    				<figcaption>
    					Lucas ipsum dolor sit amet yoda darth lando k-3po skywalker hutt calrissian endor darth sidious. Cade fett darth c-3po antilles. Wedge kenobi binks skywalker hutt windu kenobi organa.
    				</figcaption>
    			</figure>
    			<figure>
    				<h3>VI. A new hope</h3>
    				<img src="images/6.png" alt="Episode 6">
    				<figcaption>
    					Lucas ipsum dolor sit amet yoda darth lando k-3po skywalker hutt calrissian endor darth sidious. Cade fett darth c-3po antilles. Wedge kenobi binks skywalker hutt windu kenobi organa.
    				</figcaption>
    			</figure>
    			<figure>
    				<h3>VII. The force awakens</h3>
    				<img src="images/7.png" alt="Episode 7">
    				<figcaption>
    					Lucas ipsum dolor sit amet yoda darth lando k-3po skywalker hutt calrissian endor darth sidious. Cade fett darth c-3po antilles. Wedge kenobi binks skywalker hutt windu kenobi organa.
    				</figcaption>
    			</figure>
    		</article>

    		<footer>
    			<article>
    				<section>
    					<h4>Links</h4>
    					<ul>
    						<li><a href="#">Home</a></li>
    						<li><a href="#">Death Star</a></li>
    						<li><a href="#">Hall of fame</a></li>
    						<li><a href="#">Connections</a></li>
    						<li><a href="#">Join us</a></li>
    					</ul>
    				</section>
    				<section>
    					<h4>Official links</h4>
    					<ul>
    						<li><a href="#">starwars.com</a></li>
    						<li><a href="#">deathstarproject.com</a></li>
    						<li><a href="#">yodastinks.com</a></li>
    						<li><a href="#">jointhedarksida.com</a></li>
    					</ul>
    				</section>
    				<section>
    					<h4>Contact us</h4>
    					<p>Simply visit the death star</p>
    				</section>
    			</article>
    		</footer>

    	</body>
    </html>

CSS

style.css


    body {
    	margin: 0px;
    	font-family: 'Montserrat', sans-serif;
    	background-image: url("images/brushed.png");
    }

    body > header {
    	height: 50px;
    	line-height: 50px;
    	position: fixed;
    	top: 0;
    	left: 0;
    	right: 0;
    	box-shadow: 0 0 20px #000;

    	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#45484d+0,000000+100;Black+3D+%231 */
    	background: #45484d; /* Old browsers */
    	background: linear-gradient(to bottom, #45484d 0%,#000000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    }

    #main-nav {
    	max-width: 1200px;
    	margin: auto;
    	padding: 0 10px;
    }

    #main-nav > a {
    	float: left;
    	color: #eee;
    	text-decoration: none;
    }

    #main-nav > ul {
    	float: right;
    	list-style: none;
    	margin: 0px;
    	padding: 0px;
    }

    #main-nav > ul > li {
    	float: left;
    }

    #main-nav > ul > li > a{
    	padding: 0 20px;
    	display: block;
    	color: #eee;
    	text-decoration: none;
    	transition: all 0.5s;
    }

    #main-nav > ul > li > a:hover {
    	background-color: #000;
    }

    #main-nav > ul > li  > input{
    	width: 125px;
    	transition: all 0.5s;
    	border-radius: 5px;
    	border: 0px;
    	padding: 8px;
    	margin-left: 20px;
    }

    #main-nav > ul > li  > input:focus{
    	width: 250px;
    }

    #show-menu {
    	display: none;
    }

    #jumbo {
    	height: 450px;
    	width: 100%;
    	background-image: url("images/starwars-fanart2.jpg");
    	background-position: center;

    	display: flex;
    	align-items: center;
    	justify-content: center;
    }

    #jumbo > article {
    	width: 50%;
    	background-color: rgba(255, 255, 255, 0.8);
    	padding: 20px;
    	box-sizing: border-box;
    	border-radius: 10px;
    	text-align: center;
    }

    #join-us-btn {
    	width: 200px;
    	color: #333;
    	background-color: #eee;
    	height: 40px;
    	line-height: 40px;
    	display: block;
    	border: 2px #999 solid;
    	margin: auto;
    }

    .br {
    	height: 10px;
    	width: 100%;
    	background-color: #111;
    	box-shadow: 0 0 20px #000;
    }

    #movies {
    	max-width: 1200px;
    	margin: auto;
    	padding: 10px;

    	display: flex;
    	flex-wrap: wrap;
    	align-items: center;
    	justify-content: flex-start;
    }

    #movies > figure {
    	width: 23%;
    	margin: 2% 1%;
    	background-color: #fff;
    	box-shadow: 0 0 5px #333;
    }

    #movies > figure > h3{
    	background-color: #000;
    	color: #eee;
    	margin: 0px;
    	padding: 10px;
    }

    #movies > figure > img{
    	float: left;
    	margin-right: 5px;
    }

    #movies > figure > figcaption {
    	padding: 5px;
    	font-size: 12px;
    }

    #movies > h2 {
    	width: 100%;
    	border-bottom: 2px solid #000;
    	padding: 10px;
    }

    body > footer  {
    	background-color: #000;
    	box-shadow: 0 0 20px #000;
    	overflow: hidden;
    	margin-top: 20px;
    }

    body > footer  > article {
    	max-width: 1200px;
    	margin: auto;
    	color: #eee;
    }

    body > footer  > article > section {
    	width: calc(100%/3);
    	float: left;
    }

    body > footer  > article a {
    	color: #fff;
    }

    @media screen and (min-width: 601px) and (max-width: 900px) {
    	#main-nav > ul > li > a{
    		font-size: 12px;
    		padding: 0 5px;
    	}

    	#main-nav > ul > li  > input{
    		width: 120px;
    	}

    	#main-nav > ul > li  > input:focus{
    		width: 120px;
    	}

    	#movies > figure {
    		width: calc((10%/3)/2);
    		width: 30%;
    	}
    }

    @media screen and (max-width: 600px) {
    	#main-nav > ul {
    		position: fixed;
    		top: 49px;
    		left: 0;
    		right: 0;
    		background-color: #000;
    		box-shadow: 0 0 10px #000;
    		max-height: 0px;
    		overflow: hidden;
    		transition: all 0.5s;
    	}

    	#main-nav > ul > li {
    		float: none;
    		width: 100%;
    	}

    	#main-nav > ul > li  > input{
    		width: 96%;
    		margin: 0 2%;
    	}

    	#main-nav > ul > li  > input:focus{
    		width: 96%;
    		margin: 0 2%;
    	}

    	#main-nav > #show-menu {
    		float: right;
    		display: block;
    	}

    	#show-menu:hover + ul {
    		max-height: 300px;
    	}

    	#show-menu + ul:hover {
    		max-height: 300px;
    	}

    	#jumbo > article {
    		width: 90%;
    		margin-top: 49px;
    	}

    	#movies > figure {
    		width: 100%;
    	}

    	body > footer > article > section {
    		width: 100%;
    		float: none;
    		padding: 10px;
    		box-sizing: border-box;
    	}
    }

Användning av allt material är fritt, om motsatsen inte anges. Länka gärna! Formellt utrycks detta med licensen Creative Commons Erkännande 4.0 Sverige.

Webbplatsen drivs av Anton Tibblin, som också ansvarar för kursen Introduktion till webbutveckling, fristående distanskurs, Malmö högskola.