<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<link type="text/css" rel="stylesheet" href="styles.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?fa...:300,300i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet">
<script src="js/main.js"></script>
<title>Website</title>
</head>
<body>
<div class="outer-container">
<div class="sidebar">
<div class="sidebar-container">
<div class="profile">
<img src="images/profile.jpg" alt="">
<h3>name goes here</h3>
<p>Programmer</p>
</div>
<!--menu item-->
<ul>
<li>
<a href="index.html" class="active" id="home">
<span class="icon"><i class="fas fa-home"></i></span>
<span class="item">Home</span>
</a>
</li>
<li>
<a id="formButton" >
<span class="icon"><i class="fas fa-home"></i></span>
<span class="item">Form Validation</span>
</a>
</li>
<li>
<a href="">
<span class="icon"><i class="fas fa-home"></i></span>
<span class="item">My Resume</span>
</a>
</li>
<li>
<a href="#" target="_blank">
<span class="icon"><i class="fas fa-home"></i></span>
<span class="item">LinkedIn</span>
</a>
</li>
<li>
<a href="./blog" target="_blank">
<span class="icon"><i class="fas fa-home"></i></span>
<span class="item">Blog</span>
</a>
</li>
<li>
<a href="">
<span class="icon"><i class="fas fa-home"></i></span>
<span class="item">My JQuery Demo</span>
</a>
</li>
<li>
<a id="ajaxButton">
<span class="icon"><i class="fas fa-home"></i></span>
<span class="item">AJAX</span>
</a>
</li>
</ul>
</div>
</div>
<div class="main-comtainer">
<section id="main">
<div class="main-container">
<h1>name</h1>
<p>I'm stupid with CSS</p>
</div>
</section>
<section id="about">
<div class="aboutus">
<h2>About</h2>
<p>Something about myself...</p>
</div>
</section>
<section id="skills">
<div class="skills">
<h2>Skills</h2>
<p>SKILLS GOES HERE</p>
</div>
</section>
<section id="mywork">
<div class="mywork">
<h2>My Work</h2>
<p>ITEM BOXES GOES HERE</p>
</div>
</section>
<section id="contact">
<div class="contact">
<h2>contact</h2>
<p>contact goes</p>
</div>
</section>
</div>
</div>
</div>
</body>
</html>@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
*{
list-style: none;
text-decoration: none;
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Open Sans', sans-serif;
}
#main {
padding: 450px;
background-color: #0f0b0b;
background-size: cover;
background-position: center top;
background-repeat: no-repeat;
}
body {
background: #f5f6fa;
}
.outer-container {
display: flex;
width: 100%;
height: 100%;
}
/*Sidebar */
.sidebar{
display:flex;
}
.sidebar-container {
background: rgb(5, 68, 104);
top: 0;
left: 0;
width: 225px;
height: 100%;
padding: 20px 0;
transition: all 0.5s ease;
z-index: 1;
}
.sidebar .profile{
margin-bottom: 30px;
text-align: center;
}
.sidebar .profile img {
display: block;
width: 100px;
height: 100px;
border-radius: 50%;
margin: 0 auto;
}
.sidebar .profile h3{
color: #ffffff;
margin: 10px 0 5px;
}
.sidebar .profile p{
color: rgb(206, 240, 253);
font-size: 14px;
}
.sidebar ul li a {
display: block;
padding: 13px 30px;
border-bottom: 1px solid #10558d;
color: rgb(241, 237, 237);
font-size: 16px;
position: relative;
}
.sidebar ul li a .icon{
color: #dee4ec;
width: 30px;
display: inline-block;
}
/* Sidebar Link hover */
.sidebar ul li a:hover,
.sidebar ul li a.active{
color: #0c7db1;
background:white;
border-right: 2px solid rgb(5, 68, 104);
}
.sidebar ul li a:hover .icon,
.sidebar ul li a.active .icon{
color: #0c7db1;
}
.sidebar ul li a:hover:before,
.sidebar ul li a.active:before{
display: block;
}
.main-comtainer {
display: flex;
flex: 1 1 0%;
flex-direction: column;
}
/* about me */
#about {
top: 0;
bottom: 0;
right: 0;
left: 0;
width: 100%;
height: 140px;
background: #858585;
z-index: 0;
transform: skewY(0deg);
position: relative;
}
.aboutus h2 {
font-family: Arial;
text-align: center;
font-size: 16px;
}
/* skills */
#skills {
top: 0;
bottom: 0;
right: 0;
left: 0;
width: fixed;
height: 140px;
background: #FEFEFE;
z-index: 0;
transform: skewY(0deg);
position: relative;
}
.skills h2 {
font-family: Arial;
text-align: center;
font-size: 16px;
}
/* mywork */
#mywork {
top: 0;
bottom: 0;
right: 0;
left: 0;
width: fixed;
height: 140px;
background: #FEFEFE;
z-index: 0;
transform: skewY(0deg);
position: relative;
}
.mywork h2 {
font-family: Arial;
text-align: center;
font-size: 16px;
}
/* contact */
#contact {
top: 0;
bottom: 0;
right: 0;
left: 0;
width: fixed;
height: 140px;
background: #FEFEFE;
z-index: 0;
transform: skewY(0deg)
}
.contact h2 {
font-family: Arial;
text-align: center;
font-size: 16px;
}
