Edit:
https://i.sstatic.net/kVeHk.jpg
Picture 1 code:
main.css
body {
font-family: arial;
font-size: 14px;
color: #1D2130;
background-image: linear-gradient(top, rgb(200,225,245) 15%, rgb(240,240,240) 60%);
// more CSS properties here
}
#main-body {
height: 1000px;
width: 60%;
// additional styles for main body
}
// more CSS rules...
https://i.sstatic.net/GPQad.jpg
Picture 2 code:
Main.css
body {
font-family: arial;
font-size: 14px;
color: #1D2130;
background-image: linear-gradient(top, rgb(200,225,245) 15%, rgb(240,240,240) 100%);
// more CSS properties here
}
// more CSS rules...
index.html (pretty much the same for both pages)
<!DOCTYPE html>
<html lang="en" class="no-js" ng-app="developerBlog">
<head>
// head section content here
</head>
<body ng-controller="BlogController as blog">
<svg class="hidden">
<defs>
<path id="tabshape" d="M80,60C34,53.5,64.417,0,0,0v60H80z"></path>
</defs>
</svg>
<header>
// header content here
</header>
<div id="content-wrapper">
<div class="inner clearfix">
<section id="main-content">
<div class="tabs tabs-style-shape">
<nav>
<ul>
<li>
<a href="#section-shape-1">
<span>Start</span>
</a>
</li>
// more list items for tabs
</ul>
</nav>
<div class="content-wrap">
<section id="section-shape-1">
<start></start>
</section>
// more sections for different tabs
</div>
</div>
</section>
</div>
</div>
<script src="javascripts/cbpFWTabs.js"></script>
<script>
(function() {
[].slice.call( document.querySelectorAll('.tabs') ).forEach(function(el){
new CBPFWTabs(el);
});
})();
</script>
</body>
</html>
Previous post:
AngularJS - Loading my directives suddenly not working?
Website:
If you need further assistance with fixing the issue, feel free to provide more details about the problem you are experiencing. Learning from experience is a great way to improve your CSS skills!