Hey guys, please help me out, am working on my portfolio page, everything on page seem to be working perfectly fine, except for the social media icons that’s at the contacts section, it’s not working out; the icons keep clustering together, why I want it to be space out. below are my codes:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU"
crossorigin="anonymous">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<title>Personal Portolio</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<aside>
<nav class="nav-bar">
<img src="img/cassy2.jpg" alt="">
<a href="#home"><i class="material-icons md-36">home</i>
<p>Home</p>
</a>
<a href="#about"><i class="material-icons md-36">person</i>
<p>About</p>
</a>
<a href="#portfolio"><i class="material-icons md-36">image</i>
<p>portfolio</p>
</a>
<a href="#contact"><i class="material-icons md-36">mail</i>
<p>contact</p>
</a>
</nav>
</aside>
<nav class="mobile-nav">
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#portfolio">Portfolio</a>
<a href="#contact">Contact</a>
</nav>
<div class="introduction" id="welcome-section">
<header class="home" id="home">
<h1>I'm Obok Casmir</h1>
<h4>Web Developer, WordPress Designer, Front-End Developer and Watson Chatbot Designer</h4>
<img src="img/cassy1.jpg" alt="">
</header>
</div>
<!--This is the main content of portfolio page-->
<main class="main-content">
<section>
<div class="about" id="about">
<h2>About Me</h2>
<p><span>Hello, I'm Obok Casmir(Cassyblaise) </span> I'm web developer, wordpress designer and Watson
chatbots designer. life long life learner, and always ready for new opportunities. My hobbies are:
Reading, love good music, watching football and I like going out for a long walk. </p>
<p>I am very outgoing happy person and show this in my work. I can relate to the person in both my talking
and writing style. I have a style that is very direct and honest. Most people consider it easy to
understand what I'm saying even those who aren't native English speakers.
</p>
<p>I believe in users centered design and delivering the best possible experiences to clients. I have
experience with HTML, CSS3, Flexbox, CSS Grid, JavaScript, jQuery WordPress Design and also Watson
Chatbot Designer. I can use these technologies to build you a dynamic and personalized website from
scratch.
I also have some experience in the following online programs: WordPress, Webpack, Zoho, Git, Github,
Slack, and many others including proprietary versions. One of my best traits is that I can learn new
systems relatively easy, so even if I've never used your particular system. I am a quick learner.
</p>
<h3>My Skills</h3>
<p>Html5</p>
<div class="container">
<div class="skills html">95%</div>
</div>
<p>CSS3</p>
<div class="container">
<div class="skills css">80%</div>
</div>
<p>Bootstrap</p>
<div class="container">
<div class="skills bootstrap">75%</div>
</div>
<p>JavaScript</p>
<div class="container">
<div class="skills JS">65%</div>
</div>
<p>Watson Chatbot</p>
<div class="container">
<div class="skills watson-chatson">70%</div>
</div>
</div>
</section>
<section class="portfolio" id="projects">
<h2>portfolio</h2>
<div class="row-halves">
<div class="col" id="project-title">
<a href="https://codepen.io/cassyblaise/pen/aBjoZN" target="_blank" class="project-title">
<img src="img/productpage.png" alt="">
<h3>Business</h3>
<p>
Building Responsive and thoughtful websites for small and large businesses.
</p>
</a>
</div>
<div class="col" id="project-title">
<a href="https://codepen.io/cassyblaise/pen/xaRJvq" target="_blank" class="project-title">
<img src="img/surveyform.png" alt="">
<h3>Mobile</h3>
<p>
Fully Responsive, mobile ready design and implementation for all clients.
</p>
</a>
</div>
</div>
<div class="row-halves">
<div class="col" id="project-title">
<a href="https://codepen.io/cassyblaise/pen/JmZOOb" target="_blank" class="project-title">
<img src="img/docpage.png" alt="projects">
<h3>UX/UI Designs</h3>
<p>
Thoughtful and intuitive users experinces. all of my designs will be guaranteed to my clients.
</p>
</a>
</div>
<div class="col" id="project-title">
<a href="https://codepen.io/cassyblaise/pen/YjOorx" target="_blank" class="project-title">
<img src="img/tribute.png" alt="projects">
<h3>Personal</h3>
<p>
I also build and design for personal projects. no idea is too small. everyone deserve a voice on
the web.
</p>
</a>
</div>
</div>
</section>
<section class="contact" id="contact">
<h2>Contact</h2>
<div class="header">
<h1>Let's work together...</h1>
<p>How do you take your coffee?</p>
</div>
<div class="social-media">
<span class="fa-stack fa-lg">
<a href="https://twitter.com/cassyjnr" target="_blank" class="contact-details">
<i class=" fas fa-circle fa-stack-2x"></i>
<i class="fab fa-twitter fa-stack-1x fa-inverse"></i></a>
</span>
<span class="fa-stack fa-lg">
<a href="https://facebook.com/cassy.blaise.9" target="_blank" class="contact-details">
<i class="
fas fa-circle fa-stack-2x"></i>
<i class="fab fa-facebook fa-stack-1x fa-inverse"></i></a>
</span>
<span class="fa-stack fa-lg">
<a href="https://linkedin.com/in/obokcasmir/" target="_blank" class="contact-details">
<i class="
fas fa-circle fa-stack-2x"></i>
<i class="fab fa-linkedin fa-stack-1x fa-inverse"></i></a>
</span>
<span class="fa-stack fa-lg">
<a href="https://github.com/cassyblaise" target="_blank" class="contact-details">
<i class="
fas fa-circle fa-stack-2x"></i>
<i class="fab fa-github fa-stack-1x fa-inverse"></i></a>
</span>
<span class="fa-stack fa-lg">
<a href="https://codepen.io/cassyblaise" target="_blank" class="contact-details">
<i class="
fas fa-circle fa-stack-2x"></i>
<i class="fab fa-codepen fa-stack-1x fa-inverse"></i></a>
</span>
<span class="fa-stack fa-lg">
<a href="https://medium.com/@cassyblaise" target="_blank" class="contact-details">
<i class="
fas fa-circle fa-stack-2x"></i>
<i class="fab fa-medium fa-stack-1x fa-inverse"></i></a>
</span>
<a href="mailto:codecassy@gmail.com" target="_blank" class="contact-details"><i class="material-icons md-48">mail</i>
</a>
</div>
</section>
<footer>
<section class="bottom-bar">
<p>© 2018 | All rights reserved</p>
</section>
</footer>
</main>
</body>
</html>
*,
*::before,
*::after{
box-sizing: border-box;
}
*:focus{
outline: none;
}
body{
padding: 0;
margin: 0;
background: #000;
color: white;
font-family: 'oxygen', sans-serif;
}
a{
text-decoration: none;
}
img{
width: 100%;
}
.home img{
width: 100%;
-webkit-filter: grayscale(100%) contrast(100%);
filter: grayscale(100%) contrast(200%) brightness(60%);
}
.portfolio img{
filter: grayscale(100%);
}
aside{
position: fixed;
background: #222;
top: 0px;
left: 0px;
width: 120px;
height: 100%;
overflow: none;
z-index: 1;
text-align: center;
padding: 0;
}
aside img{
filter: grayscale(100%) contrast(50%) brightness(100%);
margin-bottom: -3px;
}
.material-icons .md-36{
font-size: 36px;
}
aside a{
display: block;
padding: 15px 0;
color: white;
font-size: 0.75em;
letter-spacing: 2px;
transition: all 0.35s;
text-transform: uppercase;
}
aside p {
margin: 0;
padding: 0;
}
aside a:hover{
background: #000;
}
aside nav a:nth-child(2){
background: #000;
}
aside nav a:nth-child(2):hover{
background: #b2b2b2;
color: #222;
}
#welcome-section{
max-width: 980px;
background: #000;
margin-left: 20%;
padding: 12px 50px 12px 50px;
}
header{
text-align: center;
letter-spacing: 2px;
}
header h1{
font-weight: bold;
font-size: 4em;
letter-spacing: 4px;
}
header h4{
font-weight: 300;
font-size: 1em;
letter-spacing: 4px;
color: #b2b2b2;
}
.main-content {
position: absolute;
margin-left: 140px;
padding: 20px;
margin-bottom: 100px;
}
.about,
.portfolio,
.contact{
line-height: 1.5em;
font-weight: 300;
letter-spacing: 1px;
}
.about h2,
.portfolio h2,
.contact h2{
text-transform: uppercase;
font-weight: 300;
padding-bottom: 10px;
margin: 100px 0 0 0;
letter-spacing: 4px;
}
.about p{
color: #b2b2b2;
}
.about span{
font-weight: 600;
color: white;
}
.about h3{
font-weight: 300;
margin: 50px 0;
}
.container{
width: 100%;
background-color: #b2b2b2;
}
.skills{
text-align: right;
padding-right: 20px;
line-height: 30px;
color: white;
background-color: #424242;
}
.html{
width: 95%;
}
.css{
width: 80%;
}
.bootstrap{
width: 75%;
}
.JS{
width: 65%;
}
.watson-chatson{
width: 70%;
}
.portfolio h3{
color: white;
font-weight: 300;
letter-spacing: 2px;
}
.portfolio p{
font-size: 0.879em;
}
.row-halves{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
justify-content: space-between;
margin: 20px 0;
-webkit-flex-pack: justify;
}
.row-halves .col{
width: 49%;
}
.col{
border: 1px solid #222;
background: #222;
color: #b2b2b2;
padding: 10px;
}
/*
.contact{
margin-top: 20px;
margin-bottom: 100px;
background: transparent;
padding: 20px 0;
}
*/
.social-media {
background: #C8F7C5;
width: 100%;
top: 50%;
text-align: center;
transform: translateY(-5%);
padding-bottom: 160px;
}
.social-media .contact-details {
display: inline-block;
width: 150px;
height: 150px;
font-weight: bold;
border-radius: 50%;
border: 2px dashed white;
text-decoration: none;
vertical-align: middle;
background-clip: content-box;
margin-right: 15px;
margin-left: 15px;
padding: 10px;
font-size: 70px;
transition: .5s;
color: #D7D0BE;
}
.contact-details span {
display: block;
text-align: center;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.social-media .contact-details:hover {
padding: 20px;
color: white;
margin-left: -5px;
transform: translateX(10px) rotate(360deg);
}
/*
.social-media .contact-details{
background-color: #222;
color: #b2b2b2;
}
*/
footer {
border-top: 1px solid #222;
}
/*
.top-bar{
padding: 20px 0;
text-align: center;
}
.top-bar a{
margin: 10px;
font-size: 2em;
color: #b2b2b2;
transition: all 0.35s;
display: inline-block;
}
.top-bar a:hover {
transform: scale(1.1);
color: #009688;
}
*/
.bottom-bar{
background: #000;
font-size: 0.75em;
text-align: center;
}
/* @media Query */
@media(max-width: 789px){
.row-halves{
display: block;
}
.row-halves .col{
width: 100%;
margin: 0 0 10px 0;
}
}
@media(max-width: 600px) {
.aside {
display: block;
}
section{
width: 100%;
margin: 0 auto;
padding: 12px 25px;
}
header{
margin-top: 80px;
}
header h1{
font-size: 3em;
line-height: 1.3em;
}
header h4 {
font-size: 1em;
letter-spacing: 2px;
}
.mobile-nav {
position: fixed;
width: 100%;
display: flex;
justify-content: space-around;
background: rgb(0, 0, 0, 0.8);
z-index: 1;
}
.mobile-nav a{
width: 100%;
color: #b2b2b2;
text-transform: uppercase;
font-size: 0.875em;
letter-spacing: 2px;
text-align: center;
padding: 10px 10px;
transition: all 0.35s;
}
.mobile-nav a:hover{
background: #b2b2b2;
color: #222;
}
}
@media(min-width:600px){
.mobile-nav{
display: none;
}
}