- Joined
- Dec 6, 2020
- Messages
- 1
- Reaction score
- 0
Hi Guys,
Brand new to coding so please bear with me on here if I ask silly questions, each new trick is a brick for this house I am trying to build
I am trying to create a group of 4 social media icons that will sit side by side in the same location on the bottom right to my web pages. I was given some vague instructions by my tutor but they don't seem to be working, maybe you can see what I am doing wrong here.
An example of what they should appear like is in the image attached
This is my HTML
<!DOCTYPE html>
<html lang='en'>
<head>
<title> Home Page </title>
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<meta charset="utf-8">
</head>
<body>
<header>
<div class="container">
<img src='images/logo.png' style="width:180px;height:180px alt="logo"
class="logo">
<nav>
<ul>
<li><a href="index.html"> HOME </a></li>
<li><a href="tour.html"> TOUR </a></li>
<li><a href="tickets.html"> BUY TICKETS </a></li>
<li><a href="gallery.html"> GALLERY </a></li>
<li><a href="about.html"> ABOUT </a></li>
</ul>
</nav>
</div>
</header>
<img src='images/pic1.png' alt="home page image" class="image">
<div class="social-icons">
<img src='images/whatsapp.png' style="width:50px;height:50px" alt="whatsapp"
<img src='images/facebook.png' style="width:50px;height:50px" alt="facebook"
<img src='images/insta.png' style="width:50px;height:50px" alt="insta"
<img src='images/twitter.png' style="width:50px;height:50px" alt="twitter"
</div>
This is my CSS
body {
margin: 0;
background: #ffffff;
/* white */
color: white;
font-size: 18px;
font-family: "roboto", sans-serif;
font-weight: 300;
}
.container {
width: 80%;
margin: 0 auto;
}
header {
background: #121326;
height: 200px;
}
.logo {
float: left;
position: absolute;
left: 20px;
top: 0;
}
.image {
width: 100%;
}
nav {
float: right;
}
nav ul {
padding: 20px;
list-style: none;
}
nav li {
display: inline-table;
margin-left: 300px;
padding-top: 50px;
}
nav a {
color: #ffffff;
text-decoration: none;
text-transform: upper
}
nav a:hover {
color: #FCBA35;
}
.sidebar-image-gallery { width: 210px; }
.social-icons {
position: absolute;display: inline-block;
margin-left: auto;
margin-right: auto;
bottom:0;
right: 0;
}
I apologise if I didn't need to post the entire lines of code, and I am aware there is some code in there that should not be there, but I am learning. The issue is, my icons don't appear bottom right and seem to be on top of each other, but I can only see one.
Brand new to coding so please bear with me on here if I ask silly questions, each new trick is a brick for this house I am trying to build
I am trying to create a group of 4 social media icons that will sit side by side in the same location on the bottom right to my web pages. I was given some vague instructions by my tutor but they don't seem to be working, maybe you can see what I am doing wrong here.
An example of what they should appear like is in the image attached
This is my HTML
<!DOCTYPE html>
<html lang='en'>
<head>
<title> Home Page </title>
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<meta charset="utf-8">
</head>
<body>
<header>
<div class="container">
<img src='images/logo.png' style="width:180px;height:180px alt="logo"
class="logo">
<nav>
<ul>
<li><a href="index.html"> HOME </a></li>
<li><a href="tour.html"> TOUR </a></li>
<li><a href="tickets.html"> BUY TICKETS </a></li>
<li><a href="gallery.html"> GALLERY </a></li>
<li><a href="about.html"> ABOUT </a></li>
</ul>
</nav>
</div>
</header>
<img src='images/pic1.png' alt="home page image" class="image">
<div class="social-icons">
<img src='images/whatsapp.png' style="width:50px;height:50px" alt="whatsapp"
<img src='images/facebook.png' style="width:50px;height:50px" alt="facebook"
<img src='images/insta.png' style="width:50px;height:50px" alt="insta"
<img src='images/twitter.png' style="width:50px;height:50px" alt="twitter"
</div>
This is my CSS
body {
margin: 0;
background: #ffffff;
/* white */
color: white;
font-size: 18px;
font-family: "roboto", sans-serif;
font-weight: 300;
}
.container {
width: 80%;
margin: 0 auto;
}
header {
background: #121326;
height: 200px;
}
.logo {
float: left;
position: absolute;
left: 20px;
top: 0;
}
.image {
width: 100%;
}
nav {
float: right;
}
nav ul {
padding: 20px;
list-style: none;
}
nav li {
display: inline-table;
margin-left: 300px;
padding-top: 50px;
}
nav a {
color: #ffffff;
text-decoration: none;
text-transform: upper
}
nav a:hover {
color: #FCBA35;
}
.sidebar-image-gallery { width: 210px; }
.social-icons {
position: absolute;display: inline-block;
margin-left: auto;
margin-right: auto;
bottom:0;
right: 0;
}
I apologise if I didn't need to post the entire lines of code, and I am aware there is some code in there that should not be there, but I am learning. The issue is, my icons don't appear bottom right and seem to be on top of each other, but I can only see one.
