SBD3 MA3 Layout


This weeks task is to recreate a layout, and so I did.

	background-color: lightyellow;
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif"
		background-color: teal;
			max-width: 1440px;
			padding: 2rem;
			margin: 0 auto
		nav ul{
		nav li{
			display: inline-block;
			font-size: 2rem
		nav a:link{
			color: black;
		nav a:hover{
			color: white
		nav a:visited{
			color: blue
			max-width: 1440px;
			margin: 2rem auto
		main section{
			background-color: white;
			border: 2px dashed black;
			padding: 2rem

The result

The next task was to use flex-box and grids to create a layout. I tried to recreate the layout and styling from the example. This is my result.

I used 76 lines of css to achieve this.

The next task is responsive design and how to apply media queries to make the site responsive. I transformed the previous mentioned website into a mobile website (768px and smaller). This is the result

This took 40 lines of code.

More to explorer

SBD3 CA Hans & Helga burgers

This is the course assignment for Screen Based Design 3 (SBD3 CA). I chose to make a menu for Hans & Helga.

SBD3 MA3 Styling images

This week, I work with images. The task is to create a background-image (on the body tag, but I will not do that). In my sketches for the Norwegian Seafood

SBD3 MA2 Pseudo-classes

In css you can use pseudo-classes to reference an element in a certain state, for example, when a user hovers over an element, or to address certain instances of an