Hello I'm making a simple web page and I want to set six images which are actually social media icons on different positions on the page, I have tried whatever I knew but it's not setting up according to my requirements, here is the code, please help me I'm stuck.
h1 {
font-family: 'Shadows Into Light', cursive;
font-size: 370%;
display: block;
text-align: center;
margin-top: 20%;
margin-left: 0%;
}
#color {
color: rgb(82, 195, 241);
}
span {
color: rgb(239, 102, 157);
}
p {
font-family: 'Shadows Into Light', cursive;
font-size: 200%;
color: rgb(82, 195, 241);
right: 0%;
left: 59%;
top: 51%;
bottom: 200%;
position: absolute;
font-weight: bold;
}
#next {
color: black;
font-size: 75%;
font-family: 'Amatic SC', cursive;
}
#about {
color: rgb(82, 195, 241);
font-size: 100%;
font-family: 'Shadows Into Light', cursive;
}
#about:hover{
color: rgb(239, 102, 157);
}
body {
background-image: url(http://ift.tt/2cNVjpz);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
margin: 0;
padding: 0;
}
ul {
font-family: 'Shadows Into Light', cursive;
font-weight: bold;
font-size: 1em;
margin: 0;
padding: 0;
list-style-type: none;
position: fixed;
bottom: 0;
text-align: center;
}
li {
display: inline;
}
a {
text-decoration: none;
color: black;
}
a:hover {
color: black;
font-size: 2em;
}
#nav {
width: 100px;
margin-left: auto;
margin-right: auto;
}
img {
position: fixed;
clear: both;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>KIDS NURSERY</title>
<link href="http://ift.tt/1LFj29o" rel="stylesheet">
<link href="http://ift.tt/1Qg7abR" rel="stylesheet">
<link href="style.css" rel="stylesheet">
</head>
<body>
<div id="color">
<h1>
KIDS <span>NURSERY</span>
</h1>
</div>
<div id="nav">
<ul>
<li><a href="index.html">HOME</a></li>
<li><a href="about.html">ABOUT</a></li>
<li><a href="contact.html">CONTACT</a></li>
</ul>
</div>
<p><span id="next">NEXT /</span><a id="about" href="about.html"> ABOUT</a></p>
<img id="youtube" src="http://ift.tt/2d1g8kr" />
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire