So I am making this little game, where you need drag text under the images.
I need to make little tabs under the images where the text is needed to be dragged onto.
I thought of placing a div around the image, and another div in the div for the tab, in css I styled the tab to be 25px in height. but the 25px, isn't going under the image in the same div, it's above the other images in that row..
this is what I see, http://prntscr.com/9yv7m8
the red space is the tab, that needs to go under the pictures..
How can I fix this properly?
This is my code,
CSS
body, html {
margin-left: 10%;
margin-right: 10%;
padding: 0px;
height: 100%;
font-family: georgia, "Comic Sans MS";
background-color: #f0f0f0;
}
header {
height: 5%;
border-bottom: thick solid grey;
}
footer {
height: 5%;
border-top: thick solid grey;
}
.points {
float: right;
}
.container {
width: 100%;
height: 90%;
}
.plaatje {
width: 100px;
height: 100px;
}
.plaatje2 {
float: left;
width: 25%;
}
.igen {
font-size: 25px;
font-weight: bold;
}
.sprint {
float: right;
}
.copyright {
position: relative;
bottom: 20px;
left: 65px;
font-size: 10px;
}
.img {
width: 25%;
height: 25%;
float: left;
}
.img2 {
width: 25%;
height: 25%;
float: left;
}
.answer {
height: 25px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Words</title>
<link rel="stylesheet" href="css/style.css" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<script>
</script>
</head>
<body>
<header>
<span class="fa fa-refresh" style="font-size:25px;"></span><span class="igen"> igen</span>
<span class="points"><i class="fa fa-thumbs-o-up" style="font-size:24px"></i>Rigtige: 0 <i class="fa fa-thumbs-o-down" style="font-size:24px"></i>Forkerte: 0</span>
</header>
<div class="container">
<div>
<img class="img" src="img/cat.jpg" alt="cat" />
<div class="answer">
</div>
</div>
<img class="img" src="img/beak.jpg" alt="beak" />
<img class="img" src="img/spoon.jpg" alt="spoon" />
<img class="img" src="img/milk.jpg" alt="milk" />
<img class="img2" src="img/egg.jpg" alt="egg" />
<img class="img2" src="img/thee.jpg" alt="tea" />
<img class="img2" src="img/meel.jpg" alt="meel" />
<img class="img2" src="img/passport.jpg" alt="passport" />
</div>
<footer>
<img class="dansk" id="dansk" src="img/dansk2.jpg" alt="dansk" />
<img class="sprint" id="sprint" src="img/sprint2.png" alt="sprint" />
<center><span class="copyright"> ©2013 laerdansk / FC-Sprint² Leerbedrijf bronnen </span></center>
</footer>
</body>
</html>
I'm not sure is this you looking for...
<html>
<title>test</title>
<head>
</head>
<body>
<style>
.top{background-color: #900; width: 100%; height: 100px;}
.middle{background-color: #090; width: 100%; height: 600px; float: left;}
.sidebar{background-color: #ccc; width: 10%; height: 600px; float: left;}
.container{background-color: #000; width: 90%; height: 600px; float: left;}
.row{background-color: #fff; width: 100%; height: 100px; float: left;}
.footer{background-color: #090; width: 100%; height: 100px; float: left;}
.slice{background-color: #069; width: 33%; height: 100px; float: left;}
</style>
<div class="top">top</div>
<div class="middle">
<div class="sidebar">sidebar</div>
<div class="container">
<div class="row">
<div class="slice">1</div>
<div class="slice">2</div>
<div class="slice">3</div>
</div>
<div class="row">
<div class="slice">1</div>
<div class="slice">2</div>
<div class="slice">3</div>
</div>
<div class="row">
<div class="slice">1</div>
<div class="slice">2</div>
<div class="slice">3</div>
</div>
</div>
</div>
<div class="footer">
footer
</div>
</body>
</html>
Related
I would like to add some texts next to centered images. I want to keep images in the center of my page and texts just floating on sides of pictures (without moving images to the sides of the page)
my goal
This is my code (with a random free image for question purposes only):
.whole h2 {
margin-top: 15px;
text-align: center;
}
.row1 {
height: 250px;
margin: 0 auto;
}
.img1 {
margin: 0 auto;
width: 200px;
display:block;
}
.text1 {
text-align: right;
float: left;
}
.img2 {
margin: 0 auto;
width: 200px;
display: block;
}
.row2 {
height: 250px;
margin: 0 auto;
}
.text2 {
text-align: left;
float: right;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="whole">
<h2>Experience</h2>
<div class="row1">
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/285/open-book_1f4d6.png" class="img1" alt="img1">
<div class="text1">
<h3>year</h3>
<p>xxxxxxxxxxxxx</p>
</div>
</div>
<div class="row2">
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/285/open-book_1f4d6.png" class="img2" alt="img1">
<div class="text2">
<h3>year</h3>
<p>xxxxxxxxxxxxx</p>
</div>
</div>
</div>
</body>
</html>
I've tried using inline-block for images, but then I couldn't center them. In general, the texts somehow push the images away from the center and I cannot find a similar case as mine online. Thank you in advance for any hints.
easiest way with your code is to use position absolute
.whole h2 {
margin-top: 15px;
text-align: center;
}
.row1 {
height: 250px;
margin: 0 auto;
position:relative;
}
.img1 {
margin: 0 auto;
width: 200px;
display: block;
}
.text1 {
text-align: right;
position:absolute;
top:20%;
left:15%;
}
.img2 {
margin: 0 auto;
width: 200px;
display: block;
}
.row2 {
height: 250px;
margin: 0 auto;
position:relative;
}
.text2 {
text-align: left;
position:absolute;
top:20%;
right:15%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="whole">
<h2>Experience</h2>
<div class="row1" >
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/285/open-book_1f4d6.png" class="img1" alt="img1">
<div class="text1">
<h3>year</h3>
<p>xxxxxxxxxxxxx</p>
</div>
</div>
<div class="row2">
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/285/open-book_1f4d6.png" class="img2" alt="img1">
<div class="text2">
<h3>year</h3>
<p>xxxxxxxxxxxxx</p>
</div>
</div>
</div>
</body>
</html>
or we could do this with flex: when you use absolute it takes the element out of the regular dom flow. Better yo use flex, makes responsive designs easier
.whole h2 {
margin-top: 15px;
text-align: center;
}
.row1 {
height: 250px;
margin: 0 auto;
display:flex;
align-items:center;
}
.img1 {
margin: 0 auto;
display: block;
}
.text1{
text-align:right;}
.r1{
width:30%;}
.img2 {
margin: 0 auto;
display: block;
}
.row2 {
height: 250px;
margin: 0 auto;
display:flex;
align-items:center;
}
.text2 {
text-align: left;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="whole">
<h2>Experience</h2>
<div class="row1">
<div class="text1 r1">
<h3>year</h3>
<p>xxxxxxxxxxxxx</p>
</div>
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/285/open-book_1f4d6.png" class="img1 r1" alt="img1">
<div class='r1'> </div>
</div>
<div class="row2">
<div class='r1'> </div>
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/285/open-book_1f4d6.png" class="img2 r1" alt="img1">
<div class="text2 r1">
<h3>year</h3>
<p>xxxxxxxxxxxxx</p>
</div>
</div>
</div>
</body>
</html>
Trying to rebuild a part of the Pixar site, having trouble with the logo. Is there a way to resize the image in CSS? Or do I have to resize the image in Photoshop and add it that way?
HTML CODE:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/style.css">
<title>Pixar Mock Up</title>
</head>
<body>
<header>
<div class="logo logo-size"></div>
<nav class="nav">
<ul>
<li>FEATURE FILMS</li>
<li>SHORT FILMS</li>
<li>CAREERS</li>
<li>EXTRAS</li>
<li>TECHNOLOGY</li>
<li>ABOUT</li>
</nav>
</header>
<main>
<div class="hero hero-size">
<div class="hero-text">
<h2>FEATURE FILMS</h2>
</div>
</div>
<div class="films">
<div class="posters">
<img src="images/incredibles2.jpg"alt="The Incredibles">
<p class="poster1">The Incredibles</p>
</div>
<div class="posters">
<img src="images/coco.jpg" alt="Coco">
<p class="poster2">Coco</p>
</div>
<div class="posters">
<img src="images/cars.jpg" alt="Cars3">
<p class="poster3">Cars</p>
</div>
</div>
<div class="posters">
<img src="images/dory.jpg"alt="Finding Dory">
<p class="poster1">Finding Dory</p>
</div>
<div class="posters">
<img src="images/dino.jpg" alt="The Good Dinosaur">
<p class="poster2">The Good Dinosaur</p>
</div>
<div class="posters">
<img src="images/inside.jpg" alt="Inside Out">
<p class="poster3">Inside Out</p>
</div>
</main>
</body>
</html>
CSS CODE:
body {
max-width: 1700px;
min-width: 700px;
background-color: white;
padding: 0px;
margin: 0px;
}
.logo {
margin: 25px 80px;
background: url('../logo/logo.jpg') left no-repeat;
}
.logo-size{
width: 170px;
height: 51px;
}
.hero {
background: url('../hero/hero.jpg');
background-position: center;
background-repeat: no-repeat;
}
.hero-size {
height: 550px;
width: 100%;
}
.hero-text {
font-size: 42px;
color: white;
float: left;
position: relative;
top: 175px;
left: 500px;
letter-spacing: 4px;
}
.nav li {
display: inline;
}
.nav ul {
margin: 0px 100px;
}
.nav a {
color: black;
position: fixed;
position: relative;
bottom: 61px;
float: right;
padding-right: 30px;
text-decoration: none;
}
.posters {
text-align: center;
padding: 0px;
float: right;
display: block;
width: 30%;
position: relative;
right: 80px;
margin: 80px 0px;
}
.posters img{
height: 275px;
width: 200px;
}
The Size/Width I want
The Full Image
To sum up, I am trying to get the image found in the second link to fit in the width defined in the first image (width set to 170px). I have tried setting it to 'width: auto', but that did not work.
It would be better if you use img instead of a div with a background for the logo, you'll have more control,
<img src="../logo/logo.jpg" />
But if you have to use a div, add background-size:cover to .logo
https://www.w3schools.com/cssref/css3_pr_background-size.asp
I face some problem in my html and css.
My requirement like this image:-
My code below:-
#font-face {
font-family: "OpenSans-CondLight";
src: url('fonts/OpenSans-CondLight.woff') format('woff');
}
#font-face {
font-family: "Rubik-BoldItalic";
src: url('fonts/Rubik-BoldItalic.woff') format('woff');
}
#font-face {
font-family: "RobotoSlab-Regular";
src: url('fonts/RobotoSlab-Regular.woff') format('woff');
}
/*header area */
header{
height: 350px;
background: #050000;
overflow: hidden;
display: block;
}
.container{
background: #050000;
}
.top-area{
float: left;
width: 20%;
font-family: "Rubik-BoldItalic";
font-size: 60px;
color: #FFFFFF;
text-transform: uppercase;
overflow: hidden;
}
.logo-area {
width: 60%;
overflow: hidden;
display: block;
position: relative;
z-index: 9999;
}
.logo-area img {
width: 500px;
height: auto;
z-index: 9999;
margin-left: 35px;
}
.search-box {
width: 25%;
float: right;
margin: -300px 73px 0 0;
}
.all-events {
overflow: hidden;
background: #FF9D34;
height: 100px;
width: 80%;
margin: auto;
display: block;
position: absolute;
top: 178px;
border-radius: 10px;
z-index: 0;
}
.all-events .left-side span{
float: left;
color: #000000;
text-transform: uppercase;
font-size: 25px;
padding-left: 20px;
padding-top: 40px;
}
.all-events .left-side .glyphicon {
font-size: 45px;
color: #000;
}
.all-events .right-side span{
float: right;
color: #000000;
text-transform: uppercase;
font-size: 25px;
}
.main-content {
width: 100%;
height: 100%;
overflow: hidden;
display: block;
background: #FF931D;
margin: auto;
}
.main-content .left-content .top-content{
float: left;
overflow: hidden;
display: block;
width: 55%;
height: 340px;
margin-top: 22px;
}
.main-content .left-content .top-content img {
width: 600px;
height: 300px;
}
.main-content .left-content .bottom-content{
float: left;
overflow: hidden;
display: block;
width: 75%;
height: 340px;
margin-top: 10px;
}
.main-content .left-content .bottom-content img {
width: 600px;
height: 300px;
}
.main-content .right-content {
float: right;
overflow: hidden;
display: block;
width: 40%;
margin: -688px 52px 0 0;
}
.main-content .right-content img {
width: 522px;
height: 648px;
}
footer{
overflow: hidden;
display: block;
height: 410px;
width: 90%;
margin: auto;
background-color: #FF931D;
}
footer .left-footer {
float: left;
width: 350px;
overflow: hidden;
display: block;
}
footer .middle-footer {
width: 350px;
overflow: hidden;
display: block;
}
.about {
height: 400px;
width: 400px;
border-radius: 50%;
background: #fff;
float: right;
position: relative;
top: -79px;
}
.about p {
position: absolute;
font-family: "OpenSans-CondLight";
font-size: 25px;
text-align: center;
top: 62px;
}
.about img {
width: 80px;
height: auto;
position: relative;
top: 240px;
left: 98px;
margin-left: 31px;
}
.button {
font-size: 15px;
color: blue;
cursor: pointer;
}
.button:active{
color: #000;
}
.caption {
background: #fff;
width: 599px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta content="IE=edge">
<title>Spotlight</title>
<!-- style -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="css/normalize.css" media="all" />
<link rel="stylesheet" type="text/css" href="style.css" media="all">
<!-- js -->
<link rel="stylesheet" type="text/css" href="js/modernizr.js" media="all" />
</head>
<body>
<header>
<div class="container">
<div class="top-area">
<h2>24 hour event</h2>
</div>
<div class="logo-area">
<img src="images/logo.gif" alt="Logo">
</div>
<div class="search-box">
<div class="row">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button"><span class="glyphicon glyphicon-search"></span></button>
</span>
<input type="text" class="form-control" placeholder="Search for...">
</div>
</div>
</div>
<div class="all-events">
<div class="left-side">
<span>donate here</span>
<div class="donate_img">
<img src="images/07.tif" alt="">
</div>
</div>
<div class="right-side">
<span>all events faq</span>
</div>
</div>
</div>
</header>
<section class="main-content">
<div class="container">
<div class="left-content">
<div class="top-content">
<img src="images/damien-rice-tour-italia.jpg" alt="">
<div class="caption">
<span>Damien Rice, Kildare Culture Centre at 8pm. Ref: DMK</span>
<div class="button">
Book now
</div>
</div>
</div>
<div class="bottom-content">
<img src="images/glenhansard_100x445.jpg" alt="">
<div class="caption">
<span>Glen Hansard, Olympia Theatre Dublin at 7pm. Ref: GHO </span>
<div class="button">Book now
</div>
</div>
</div>
</div>
<div class="right-content">
<img src="images/tommytiernan.jpg" alt="">
<div class="caption">
<span>Tommy Tiernan, Cork Comedy Club at 7pm. Ref: GHO</span>
<div class="button">Book now
</div>
</div>
</div>
</div>
</section>
<footer>
<div class="container">
<div class="left-footer">
<span>Click on the blue <div class="button">Book now</div> now link on any
event enter your email and you will recive your
ticket via email.
Alternativly or if you have any questions not
listed on the faq tab you can book your tocket
dierectly with us qouting the event refrence
number.
</span>
</div>
<div class="middle-footer">
<span>phone:0741237451
email:24hourevent#spotlight.ie
get involved
Would you like to volunteer even one
hour of your time. Make a diffrence
contact us at:
volunteer#spotlight.ie
</span>
</div>
<div class="about">
<p>ABOUT <br>
Focas Ireland works with
people who are homeless or
who are at risk of losing there
homes across ireland.
<br> Focas Ireland website click </p>
<img src="images/d2c4efe596a6d313c1005ff33ff627ff.jpeg" alt="focus">
<img src="images/here_fixed_wm.jpg" alt="download">
</div>
<div class="social-icons">
<img src="images/youtube heart shaped free social media icon .png" alt="you tube">
<img src="images/Facebook heart shaped free social media icon.png" alt="facebook">
<img src="images/twitter heart shaped free social media icon.png" alt="twitter">
</div>
</div>
</footer>
</body>
</html>
My main problem is in my footer I can't change the color. Image bottom side. Can anyone help me?
You can try adding this line of CSS:
footer:after {
content: "";
display: table;
clear: both;
}
I can't seem to get my Div container with my images to center. I tried margin 0 auto; and adding a width.
body{
margin: 0px;
}
.main{
height: 950px;
background: url(../Images/Mountain.jpg) center center/cover no-repeat;
}
#media screen and (min-width: 1000px;){
#container{
height: 1000px;
width: 1000px;
margin: 0 auto;
}
}
.header{
margin-top: 0px;
width: 100%;
}
.logo{
float: left;
margin-top: 10px;
margin-left: 50px;
}
nav{
float: right;
margin-top: 26px;
margin-right: 50px;
}
.navBar{
color: #fff;
font-size: 20px;
margin-left: 25px;
text-decoration: none;
}
.navBar:hover{
text-decoration: underline;
}
span{
width: 100%;
}
h1{
font-size: 80px;
color: #fff;
text-align: center;
clear: both;
padding-top: 200px;
}
h2{
font-size: 36px;
color: #fff;
text-align: center;
clear: both;
margin-top: 50px;
}
/*Header Section*/
#head{
width: 100%;
height: 400px;
background: url(https://static.pexels.com/photos/6934/beach-vacation-water-summer.jpg) center center/cover no-repeat;
}
.port{
padding-top: 75px;
}
.portfolio{
width: 300px;
height: 250px;
}
.padding{
margin-left: 50px;
}
.container_port{
width: 1000px;
margin-left: auto;
margin-right: auto;
}
<!DOCTYPE html>
<html>
<head>
<title>-------</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<link rel="shortcut icon" type="text/css" href="http://placehold.it/50x50">
<link rel="stylesheet" href="CSS/Style.css">
</head>
<body>
<div id="head">
<div class="header">
<img class="logo" src=http://placehold.it/100x100>
<nav>
<a class="navBar" href="#">Home</a>
<a class="navBar" href="#">Portfolio</a>
<a class="navBar" href="#">Blog</a>
<a class="navBar" href="#">Testimonials</a>
</nav>
</div>
<span>
<h1 class="port">Portfolio</h1>
</span>
</div>
<div id="container_port">
<div class="one">
<img class="portfolio" src="http://placehold.it/300x300">
<img class="portfolio padding" src="http://placehold.it/300x300">
<img class="portfolio padding" src="http://placehold.it/300x300">
</div>
<div class="two">
<img class="portfolio" src="http://placehold.it/300x300">
<img class="portfolio padding" src="http://placehold.it/300x300">
<img class="portfolio padding" src="http://placehold.it/300x300">
</div>
<div class="three">
<img class="portfolio" src="http://placehold.it/300x300">
<img class="portfolio padding" src="http://placehold.it/300x300">
<img class="portfolio padding" src="http://placehold.it/300x300">
</div>
<div class="four">
<img class="portfolio" src="http://placehold.it/300x300">
<img class="portfolio padding" src="http://placehold.it/300x300">
<img class="portfolio padding" src="http://placehold.it/300x300">
</div>
</div>
</body>
</html>
This should get you close:
#container_port {
text-align: center;
}
EDIT: I also just noticed that you have .container_port in your CSS above while it's clearly an ID and not a CLASS.
the image element is an inline-block element. You could change it to a block-level element or you could use margin: 0 50%;
I have been stuck with this problem for almost two days already, I am a quite new programmer, and it's probably quite easy to solve.
I have to make a small game with images and words, but the images won't resize. Before they would just resize in <style> however I wanted them, but now they won't even move an inch.
I am sure that the stylesheet is linked correctly because everything else works just fine.
This is my code, can someone figure out how to solve this?
I already looked for answers everywhere but nothing fits the right criteria..
body, html {
margin-left: 10%;
margin-right: 10%;
padding: 0px;
height: 100%;
font-family: georgia, "Comic Sans MS";
background-color: #f0f0f0;
}
header {
border-bottom: thick solid grey;
}
footer {
border-top: thick solid grey;
}
.points {
float: right;
}
.plaatje {
width: 100px;
height: 100px;
}
.plaatje2 {
float: left;
width: 25%;
}
.igen {
font-size: 25px;
font-weight: bold;
}
.sprint {
float: right;
}
.copyright {
position: relative;
bottom: 20px;
left: 65px;
font-size: 10px;
}
.img {
background-color: red;
width: 25%;
height: 100px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Words</title>
<link rel="stylesheet" href="css/style.css" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<script>
</script>
</head>
<body>
<header>
<span class="fa fa-refresh" style="font-size:25px;"></span><span class="igen"> igen</span>
<span class="points"><i class="fa fa-thumbs-o-up" style="font-size:24px"></i>Rigtige: 0 <i class="fa fa-thumbs-o-down" style="font-size:24px"></i>Forkerte: 0</span>
</header>
<div class="container">
<div class="img">
<img src="img/cat.jpg" alt="cat" />
</div>
<div class="img">
<img src="img/beak.jpg" alt="beak" />
</div>
<div class="img">
<img src="img/spoon.jpg" alt="spoon" />
</div>
<div class="img">
<img src="img/milk.jpg" alt="milk" />
</div>
</div>
<footer>
<img class="dansk" id="dansk" src="img/dansk2.jpg" alt="dansk" />
<img class="sprint" id="sprint" src="img/sprint2.png" alt="sprint" />
<center><span class="copyright"> ©2013 laerdansk / FC-Sprint² Leerbedrijf bronnen </span></center>
</footer>
</body>
</html>
<div class="img">
<img src="img/spoon.jpg" alt="spoon" />
</div>
is wrong...
it should be:
<div>
<img class="img" src="img/spoon.jpg" alt="spoon" />
</div>
that way your css will target the actual image and give it a size...
.img {
background-color: red;
width: 25%;
height: 100px;
}
You need to specify the images as img under div class img. So, it should be like:
.img img {
background-color: red;
width: 25%;
height: 100px;
}
But as #foreyez said it's always better practice to give your class a better name so you can distinguish them from the HTML/CSS default parameters such as img
Here is your code:
https://jsfiddle.net/debraj/2dyn6vbt/