I'm very new to html, here is my code:
.social-media {
height: 100px;
width: 100px;
border-radius: 25px;
}
<div class="social-media">
<a href="https://twitter.com/mytwitter" target="_blank">
<img src="http://icons.iconarchive.com/icons/limav/flat-gradient-social/256/Twitter-icon.png" alt="my twitter">
</a>
</div>
the twitter image is not changing from the css
Try this:
.social-media img {
height: 100px;
width: 100px;
border-radius: 25px;
}
Add Separate style for image to make it occupy full width of the parent
.social-media {
height: 100px;
width: 100px;
border-radius: 25px;
}
.social-media img{
width: 100%;
}
<div class="social-media">
<img src="http://icons.iconarchive.com/icons/limav/flat-gradient-social/256/Twitter-icon.png" alt="my twitter">
</div>
Your css is not targeting the image directly :
give your image an Id or Class so you target that specifically
.social-media-image {
height: 100px;
width: 100px;
border-radius: 25px;
}
<div class="social-media">
<a href="https://twitter.com/mytwitter" target="_blank">
<img class="social-media-image" src="http://icons.iconarchive.com/icons/limav/flat-gradient-social/256/Twitter-icon.png" alt="my twitter">
</a>
</div>
you could target the image directly from the social media class
.social-media img {
height: 100px;
width: 100px;
border-radius: 25px;
}
<div class="social-media">
<a href="https://twitter.com/mytwitter" target="_blank">
<img src="http://icons.iconarchive.com/icons/limav/flat-gradient-social/256/Twitter-icon.png" alt="my twitter">
</a>
</div>
check out link on how css selector work
Related
I'm working on a freecodecamp project and I can't seem to get any of the content to look normal when I zoom in or view it on my phone.
The "BTS" title is supposed to be on the center of the image but the text moves around and the image doesn't fill up the page all the way whenever I zoom in. Same goes for the circular images on the bottom. I'm trying to create two rows: 4 images on the first and 3 on the second row.
I have no idea what went wrong with my code.
What I included was only the parts that were messing up. The entire page is here
#img-div {
position: relative;
max-width: 100%;
height: auto;
}
#title {
position: absolute;
width: 100%;
top: 30%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-family: "Bodoni Moda", serif;
font-size: 200px;
text-align: center;
}
#members {
width: 100%;
background: white;
display: flex;
flex-wrap: wrap;
}
#members2 {
width: 100%;
background: white;
display: flex;
flex-wrap: wrap;
}
.smaller-image {
width: 200px;
}
.border {
border-width: 0px;
border-radius: 50%;
<div class="container" id="bts-wsj">
<img id="img-div" src="https://i.imgur.com/Th9Y0WO.jpg" alt="BTS-WSJ" style="width: 100%;">
<h1 id="title">BTS</h1>
</div>
<div class="container" id="members">
<a href="#"><img class="smaller-image border" src="https://i.imgur.com/HuZWnjV.jpg" alt="jimin">
<p>Jimin</p>
<a href="#"><img class="smaller-image border" src="https://i.imgur.com/yk5C7kz.jpg" alt="jungkook">
<p>Jungkook</p>
<a href="#"><img class="smaller-image border" src="https://i.imgur.com/JBEGNJw.jpg" alt="jin">
<p>Jin</p>
<a href="#"><img class="smaller-image border" src="https://i.imgur.com/7SJwU5t.jpg" alt="rm">
<p>RM</p>
<div class="container" id="members2">
<a href="#"><img class="smaller-image border" src="https://i.imgur.com/pOFFDdi.jpg" alt="j-hope" id="hobi">
<p>J-Hope</p>
<a href="#"><img class="smaller-image border" src="https://i.imgur.com/tjMeZ9d.jpg" alt="v" id="v">
<p>V</p>
<a href="#"><img class="smaller-image border" src="https://i.imgur.com/MNB1YBS.jpg" alt="suga" id="suga">
<p>Suga</p>
</div>
In your Html code, complete div and a tag. in BTS title to set mobile view use media query CSS so when you show your site in mobile view set as proper. Use this code to set your circular images in a row.
body {
margin: 0;
}
#img-div {
position: relative;
max-width: 100%;
height: auto;
}
#bts-wsj {
position: relative;
}
#title {
position: absolute;
width: 100%;
top: 30%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-family: "Bodoni Moda", serif;
font-size: 200px;
text-align: center;
}
#members,
#members2 {
width: 100%;
background: white;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
text-align: center;
}
#members a,
#members2 a {
padding: 20px;
}
.smaller-image {
width: 200px;
}
.border {
border-width: 0px;
border-radius: 50%;
}
#media only screen and (max-width: 1024px) {
#title {
font-size: 150px;
}
}
#media only screen and (max-width: 768px) {
#title {
font-size: 100px;
}
}
#media only screen and (max-width: 480px) {
#title {
font-size: 50px;
}
}
<div class="container" id="bts-wsj">
<img id="img-div" src="https://i.imgur.com/Th9Y0WO.jpg" alt="BTS-WSJ" style="width: 100%;">
<h1 id="title">BTS</h1>
</div>
<div class="container" id="members">
<a href="#">
<img class="smaller-image border" src="https://i.imgur.com/HuZWnjV.jpg" alt="jimin">
<p>Jimin</p>
</a>
<a href="#">
<img class="smaller-image border" src="https://i.imgur.com/yk5C7kz.jpg" alt="jungkook">
<p>Jungkook</p>
</a>
<a href="#">
<img class="smaller-image border" src="https://i.imgur.com/JBEGNJw.jpg" alt="jin">
<p>Jin</p>
</a>
<a href="#">
<img class="smaller-image border" src="https://i.imgur.com/7SJwU5t.jpg" alt="rm">
<p>RM</p>
</a>
</div>
<div class="container" id="members2">
<a href="#">
<img class="smaller-image border" src="https://i.imgur.com/pOFFDdi.jpg" alt="j-hope" id="hobi">
<p>J-Hope</p>
</a>
<a href="#">
<img class="smaller-image border" src="https://i.imgur.com/tjMeZ9d.jpg" alt="v" id="v">
<p>V</p>
</a>
<a href="#">
<img class="smaller-image border" src="https://i.imgur.com/MNB1YBS.jpg" alt="suga" id="suga">
<p>Suga</p>
</a>
</div>
On my contact gif I have used the social media symbols as a link to my social media sites, however, the Twitter and the GitHub link is not working and I cannot figure out why. The Facebook and the CodePen link does work. Also is there a better way correctly line and organize the Here is the links so that they can stay more consistent? site if you want to take a look for yourself misaelalopez.com. Thank you for your help!
#contact
{
background-image: url(https://lh3.googleusercontent.com/-2wI0PCtgivjkGQruaV-_2JYgbuD-yNFkRLN_DGAPXHxFq5gac-lnc5IheHflI6V_Z9AtgJjyfF-LBGa4tt_W6XB2Xs26xEyAH46S7kJlgiyHeIbi-ZM62zJuHcjJuZNnhO9lMGt6jw);
height: 250px;
padding: 300px;
margin: 0 auto;
background-size: cover;
}
#contact h1
{
color: white;
position: relative;
text-align: center;
}
#contact h2
{
color: white;
position: relative;
text-align: center;
}
.facebook
{
position: relative;
float: left;
}
.twitter
{
position: relative;
left: 50px;
float: left;
}
.instagram
{
position: relative;
left: 100px;
float: left;
}
.gitHub
{
position: relative;
left: 150px;
float: left;
}
.codePen
{
position: relative;
left: 200px;
}
<div id="contact">
<div class="Content">
<div class="facebook">
<a target="_blank" href="https://facebook.com/misael.a.lopez"><img src="http://www.freeiconspng.com/uploads/facebook-transparent-12.png"></a>
</div>
<div class="twitter">
<a target="_blank" href="https://twitter.com/cables25"><img src="https://s3.amazonaws.com/piktochartv2-dev/v2/uploads/a8f46883-78d7-4dfc-b0b3-be090e70e2b3/27c835d6dd2cbb4b696abd3e7ac9c0370bbedefe_original.png"></a>
</div>
<div class="instagram">
<a target= "_blank" href= "https://www.instagram.com/misael2590/?hl=en"><img src= "http://bbcpersian7.com/images/instagram-clipart-png-transparent-background-3.jpg" alt="Instagram"></a>
</div>
<div class="gitHub">
<a target= "_blank" href="https://github.com/Misael2590"><img src="https://cdn4.iconfinder.com/data/icons/iconsimple-logotypes/512/github-256.png" alt="GitHub"></a>
</div>
<div class="codePen">
<a target= "_blank" href="https://codepen.io/misael25900/"><img src= "http://blog.codepen.io/wp-content/uploads/2012/06/Button-Fill-Black-Large.png" alt="CodePen"></a>
</div>
<br>
<h1>Reach out to me!</h1>
<h2>Email me at Misael25900#gmail.com</h2>
</div>
</div>
Try this..
#contact
{
background-image: url(https://lh3.googleusercontent.com/-2wI0PCtgivjkGQruaV-_2JYgbuD-yNFkRLN_DGAPXHxFq5gac-lnc5IheHflI6V_Z9AtgJjyfF-LBGa4tt_W6XB2Xs26xEyAH46S7kJlgiyHeIbi-ZM62zJuHcjJuZNnhO9lMGt6jw);
height: 250px;
padding: 300px;
margin: 0 auto;
background-size: cover;
}
#contact h1
{
color: white;
position: relative;
text-align: center;
}
#contact h2
{
color: white;
position: relative;
text-align: center;
}
.facebook
{
position: relative;
float: left;
}
.twitter
{
position: relative;
left: 50px;
float: left;
}
.instagram
{
position: relative;
left: 100px;
float: left;
}
.gitHub
{
position: relative;
left: 150px;
float: left;
}
.codePen
{
position: relative;
left: 200px;
float: left;
}
<div id="contact">
<div class="Content">
<div class="facebook">
<a target="_blank" href="https://facebook.com/misael.a.lopez"><img src="http://www.freeiconspng.com/uploads/facebook-transparent-12.png" width="20px" height="20px"></a>
</div>
<div class="twitter">
<a target="_blank" href="https://twitter.com/cables25"><img src="https://s3.amazonaws.com/piktochartv2-dev/v2/uploads/a8f46883-78d7-4dfc-b0b3-be090e70e2b3/27c835d6dd2cbb4b696abd3e7ac9c0370bbedefe_original.png" width="20px" height="20px"></a>
</div>
<div class="instagram">
<a target= "_blank" href= "https://www.instagram.com/misael2590/?hl=en"><img src= "http://bbcpersian7.com/images/instagram-clipart-png-transparent-background-3.jpg" alt="Instagram" width="20px" height="20px"></a>
</div>
<div class="gitHub">
<a target= "_blank" href="https://github.com/Misael2590"><img src="https://cdn4.iconfinder.com/data/icons/iconsimple-logotypes/512/github-256.png" alt="GitHub" width="20px" height="20px"></a>
</div>
<div class="codePen">
<a target= "_blank" href="https://codepen.io/misael25900/"><img src= "http://blog.codepen.io/wp-content/uploads/2012/06/Button-Fill-Black-Large.png" alt="CodePen" width="20px" height="20px"></a>
</div>
<br>
<h1>Reach out to me!</h1>
<h2>Email me at Misael25900#gmail.com</h2>
</div>
</div>
The links ' don't work ' because you arrange the divs in a wrong way. They overlap each other. So the codepen div is overlapping the twitter,instagram,github links. Because it's positioned on top of them > you set left:200px which moves the codepen div 200px from left but because it doesn't have floaT:left like the others, it has by default width:100% , where 100% is the width of the entire #contact .content
If you set float:left to the divs, this is not the way to arrange them. You need to set them a width. Having 5 divs, that's 100%/5 = 20% . And because you want some margins between them ( spaces ) , you can use calc() as shown below.
Also that padding:300px on #contact is a very bad idea. I don't know what you were trying to achieve with that. Anyway, i changed that also
( Changed a bit your html also because using float gets the elements out of their default float in the document )
All CSS styles are at the top of the code, in HTML i added a .footer-content div wrapping around the footer text
#contact .Content {
float:left;
width:100%;
}
#contact .Content > div {
float: left;
width: calc(20% - 15px);
margin: 0 7.5px;
}
.footer-content {
float: left;
width: 100%;
}
img {
max-width: 100%
}
#contact {
background-image: url(https://lh3.googleusercontent.com/-2wI0PCtgivjkGQruaV-_2JYgbuD-yNFkRLN_DGAPXHxFq5gac-lnc5IheHflI6V_Z9AtgJjyfF-LBGa4tt_W6XB2Xs26xEyAH46S7kJlgiyHeIbi-ZM62zJuHcjJuZNnhO9lMGt6jw);
height: 250px;
padding:300px 30px;
width:100%;
margin: 0 auto;
background-size: cover;
}
#contact h1 {
color: white;
position: relative;
text-align: center;
}
#contact h2 {
color: white;
position: relative;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div id="contact">
<div class="Content">
<div class="facebook">
<a target="_blank" href="https://facebook.com/misael.a.lopez"><img src="http://www.freeiconspng.com/uploads/facebook-transparent-12.png"></a>
</div>
<div class="twitter">
<a target="_blank" href="https://twitter.com/cables25"><img src="https://s3.amazonaws.com/piktochartv2-dev/v2/uploads/a8f46883-78d7-4dfc-b0b3-be090e70e2b3/27c835d6dd2cbb4b696abd3e7ac9c0370bbedefe_original.png"></a>
</div>
<div class="instagram">
<a target="_blank" href="https://www.instagram.com/misael2590/?hl=en"><img src="http://bbcpersian7.com/images/instagram-clipart-png-transparent-background-3.jpg" alt="Instagram"></a>
</div>
<div class="gitHub">
<a target="_blank" href="https://github.com/Misael2590"><img src="https://cdn4.iconfinder.com/data/icons/iconsimple-logotypes/512/github-256.png" alt="GitHub"></a>
</div>
<div class="codePen">
<a target="_blank" href="https://codepen.io/misael25900/"><img src="http://blog.codepen.io/wp-content/uploads/2012/06/Button-Fill-Black-Large.png" alt="CodePen"></a>
</div>
</div>
<div class="footer-content">
<h1>Reach out to me!</h1>
<h2>Email me at Misael25900#gmail.com</h2>
</div>
</div>
I am trying to put a few images in a row and display text that is directly underneath them and centered this is for my college work. I have tried some code but could not get it to work.
<div class="test">
<p>
<a href="https://www.facebook.com">
<img height="200px" style="display: block; margin-left: 100px; float: left;border: 2px solid white; border-radius: 100%; margin-top: 30px;" src="https://scontent-lhr3-1.xx.fbcdn.net/v/t1.0-9/12512240_1005566046198664_2775546349199755757_n.jpg?oh=a37edadd99a4631e165accf6bd193a9f&oe=58C8AD58">
<h3>Test</h3>
</a>
</p>
<p>
<a href="https://www.facebook.com">
<img height="200px" style="display: block; margin-left: 500px; float: left;border: 2px solid white; border-radius: 100%; margin-top: 30px;" src="https://scontent-lhr3-1.xx.fbcdn.net/v/t1.0-9/12512240_1005566046198664_2775546349199755757_n.jpg?oh=a37edadd99a4631e165accf6bd193a9f&oe=58C8AD58">
<h3>Test</h3>
</a>
</p>
<p>
<a href="https://www.facebook.com">
<img height="200px" style="display: block; margin-left: 500px; float: left;border: 2px solid white; border-radius: 100%; margin-top: 30px;" src="https://scontent-lhr3-1.xx.fbcdn.net/v/t1.0-9/12512240_1005566046198664_2775546349199755757_n.jpg?oh=a37edadd99a4631e165accf6bd193a9f&oe=58C8AD58">
<h3>Test</h3>
</a>
</p>
</div>
Personally I would do so:
.test a {
margin-left: 10px;
float: left;
text-align: center;
overflow: auto;
}
.test a img {
width: 100px;
border:2px solid white;
border-radius: 50%;
}
<div class="test">
<a href="https://www.facebook.com">
<img src="https://scontent-lhr3-1.xx.fbcdn.net/v/t1.0-9/12512240_1005566046198664_2775546349199755757_n.jpg?oh=a37edadd99a4631e165accf6bd193a9f&oe=58C8AD58">
<h3>Test</h3>
</a>
<a href="https://www.facebook.com">
<img src="https://scontent-lhr3-1.xx.fbcdn.net/v/t1.0-9/12512240_1005566046198664_2775546349199755757_n.jpg?oh=a37edadd99a4631e165accf6bd193a9f&oe=58C8AD58">
<h3>Test</h3>
</a>
<a href="https://www.facebook.com">
<img src="https://scontent-lhr3-1.xx.fbcdn.net/v/t1.0-9/12512240_1005566046198664_2775546349199755757_n.jpg?oh=a37edadd99a4631e165accf6bd193a9f&oe=58C8AD58">
<h3>Test</h3>
</a>
</div>
Key points:
Use HTML for markup. Use CSS for style. Separate them.
The p tag is not necessary.
To float the three block on one line you have to set 'float:left' to the <a> element not in the img.
If we use a float based layout we have to Clearing floats (because the floats' container doesn't want to stretch up to accomodate the floats). This is why I added 'overflow: auto' to the container named '.test'
Last but not least, there are tons of method for lay-out things with CSS. I recommend watching Flexbox.
First of all, close your <p> tags.
Then personally I would an inline-block to the p and remove the margin-left on the img.
.test {
text-align: center;
}
img {
display: block;
float: left;
border: 2px solid white;
border-radius: 100%;
margin-top: 30px;
}
p {
display: inline-block;
}
You needed to two things:
HTML wrapping DIVs to be able to control your blocks.
Using CSS
Please, try this fiddle which may meet your requirement:
<style>
div.test {
width:auto;
margin: auto;
}
div.block {
float: left;
}
div.block a{
display:inline-block;
margin-left: 50px;
}
div.block img {
border: 2px solid white;
border-radius: 100%;
width:150px;
}
h3 {
text-align: center;
}
</style>
<div class="test">
<div class='block'>
<a href="https://www.facebook.com">
<img src="https://scontent-lhr3-1.xx.fbcdn.net/v/t1.0-9/12512240_1005566046198664_2775546349199755757_n.jpg?oh=a37edadd99a4631e165accf6bd193a9f&oe=58C8AD58">
<h3>Test</h3>
</a>
</div>
<div class='block'>
<a href="https://www.facebook.com">
<img src="https://scontent-lhr3-1.xx.fbcdn.net/v/t1.0-9/12512240_1005566046198664_2775546349199755757_n.jpg?oh=a37edadd99a4631e165accf6bd193a9f&oe=58C8AD58">
<h3>Test</h3>
</a>
</div>
<div class='block'>
<a href="https://www.facebook.com">
<img src="https://scontent-lhr3-1.xx.fbcdn.net/v/t1.0-9/12512240_1005566046198664_2775546349199755757_n.jpg?oh=a37edadd99a4631e165accf6bd193a9f&oe=58C8AD58">
<h3>Test</h3>
</a>
</div>
</div>
I'm trying to change an image that is placed in a button on hover. So far, I have managed for the image itself to change when you hover over it but not for when the button itself is hovered. Here is the code.
<style>
.btn-large{
width: 300px;
height: 350px;
}
.movie{
width: 90px;
height: 90px;
position: relative;
margin-top: 25px;
}
#hardware:hover, #hardware:active{
background: #23c6c8;
color: white;
}
</style>
<a href="#" class="btn btn-large" id="hardware">
<figure>
<img class="movie" alt="ticket" src="http://i.imgur.com/u8wsfFL.png" onmouseover="this.src='http://i.imgur.com/BuK26gd.png'" onmouseout="this.src='http://i.imgur.com/u8wsfFL.png'" />
</figure>
<div class="details">
<h2>All Tickets</h2></br>
<p>View all tickets</p>
</div>
</a>
you need to move the event handlers to the anchor instead of the img and search for the img tag
Demo
<a href="#" class="btn btn-large" id="hardware"
onmouseover="this.getElementsByTagName('img')[0].src ='http://i.imgur.com/BuK26gd.png'"
onmouseout="this.getElementsByTagName('img')[0].src = 'http://i.imgur.com/u8wsfFL.png'">
<figure>
<img class="movie" alt="ticket" src="http://i.imgur.com/u8wsfFL.png" />
</figure>
<div class="details">
<h2>All Tickets</h2></br>
<p>View all tickets</p>
</div>
</a>
use something like this
<style>
.btn-large{
width: 300px;
height: 350px;
}
.image{
width: 90px;
height: 90px;
position: relative;
margin-top: 25px;
background:url("http://i.imgur.com/u8wsfFL.png");
}
.btn-large:hover .image{
background:url("http://i.imgur.com/BuK26gd.png");
}
.btn-large:hover .details{
background: #23c6c8;
color: red;
}
</style>
<div class="btn-large">
<div class="image">
</div>
<div class="details">
<h2>All Tickets</h2></br>
<p>View all tickets</p>
</div>
</div>
.btn-large {
width: 300px;
height: 350px;
}
.details {
background: url("http://i.imgur.com/u8wsfFL.png") no-repeat;
height: 90px;
}
.details:hover,
.details:active {
background: url("http://i.imgur.com/BuK26gd.png") no-repeat;
}
figure {
height: 90px;
}
<a href="#" class="btn btn-large" id="hardware">
<div class="details">
<figure>
</figure>
<h2>All Tickets</h2>
</br>
<p>View all tickets</p>
</div>
</a>
Quite simple - just add css for details and figure to your stylesheet and set a background image and a different one on hover. You can remove the alternating imgs from your html
Here is a fiddle
I need a little help...
I can't understand why my links on my images won't work...
I have been searching for so long time, but i can't find the reason why it won't work! Please help me...
Thank you so much!
.container {
width: 80%;
max-width: 1240px; /*maks bredde*/
min-height: 500px;
margin: 0 auto; /*midtstiller container og setter den øverst*/
}
header {
background-color: #292929;
width: 80%;
position: fixed;
margin-top: 5px;
}
header img{
width: 8%;
float: left;
margin-left: 20px;
margin-top: 15px;
margin-bottom: 15px;
height: 4%;
}
#navlogoer {
width: 40%;
margin-left: 75%;
margin-top: -65px;
}
<div class="container">
<header>
<a href="index.html">
<img src="images/Opheimlogooransje.png" alt="opheim logo"/></a>
<nav id="navlogoer">
<a href="https://itunes.apple.com/no/album/summerbeach-feat.-tiril-sundf/id981300584?i=981300598&uo=6&at=&ct=">
<img src="images/ITuneslogocroped.png" alt="Itunes logo"/></a>
<a href="https://open.spotify.com/artist/0VaCp9BRPhNezjr5Z3va5l">
<img src="images/Spotifylogocroped.png" alt="Spotify logo"/></a>
<a href="https://www.youtube.com/channel/UCohhdrYONwzIeMW61Ibgszw/feed">
<img src="images/youtubelogocroped.png" alt="Youtube logo"/></a>
<a href="https://soundcloud.com/jesperopheim">
<img src="images/Soundcloudlogocroped.png" alt="Soundcloud"/></a>
<a href="https://no.7digital.com/artist/opheim/">
<img src="images/7digitallogocroped.png" alt="7digital logo"/></a>
</nav>
</header>
</div>
According to your question, all the links are working fine. Actually the correct syntax for making the images as links is as follows:
<pre><code><img src="" alt="" /></code></pre>
Hey you have done something wrong here
header img{
width: 8%;
float: left;
margin-left: 20px;
margin-top: 15px;
margin-bottom: 15px;
height: 4%;
}
Change it as
header a{
width: 8%;
float: left;
margin-left: 20px;
margin-top: 15px;
margin-bottom: 15px;
height: 4%;
display:block;
}
and
header img{
width: 100%;
}
Your code works fine, I checked.
Here is sample DEMO
I just replaced images only.
So you check the location of your images.
<div class="container">
<header>
<a href="index.html">
<img src="http://s17.postimg.org/ahbud601n/klematis2.jpg" alt="opheim logo"/></a>
<nav id="navlogoer">
<a href="https://itunes.apple.com/no/album/summerbeach-feat.-tiril-sundf/id981300584?i=981300598&uo=6&at=&ct=">
<img src="images/ITuneslogocroped.png" alt="Itunes logo"/></a>
<a href="https://open.spotify.com/artist/0VaCp9BRPhNezjr5Z3va5l">
<img src="images/Spotifylogocroped.png" alt="Spotify logo"/></a>
<a href="https://www.youtube.com/channel/UCohhdrYONwzIeMW61Ibgszw/feed">
<img src="http://s17.postimg.org/ahbud601n/klematis2.jpg" alt="Youtube logo"/></a>
<a href="https://soundcloud.com/jesperopheim">
<img src="http://s17.postimg.org/ahbud601n/klematis2.jpg" alt="Soundcloud"/></a>
<a href="https://no.7digital.com/artist/opheim/">
<img src="http://s17.postimg.org/ahbud601n/klematis2.jpg" alt="7digital logo"/></a>
</nav>
</header>
</div>
</body>
</html>