Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Scrollspy #48

Merged
merged 2 commits into from
Nov 29, 2019
Merged

Scrollspy #48

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1a7c50c
fix layout
CeoFred Nov 29, 2019
50205f2
Merge branch 'master' into scrollspy
CeoFred Nov 29, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
282 changes: 194 additions & 88 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,26 +21,29 @@


<div class="container">
<!-- code for the navigation bar -->
<nav class="navigation">
<span class="name">
<b>superstar dev</b>
</span>
<ul class="nav-list" id="navbar">
<li id="#home" class="active">Home</li>
<li id="about_us">About Us</li>
<li id="resume">Resume</li>
<li id="services">Services</li>
<li id="skills">Skills</li>
<li id="projects">Projects</li>
<li id="blog">My blog</li>
<li id="contact-us">Contact Us</li>
</ul>
<nav class="navbar navbar-expand-lg navbar-dark ftco_navbar ftco-navbar-light site-navbar-target" id="ftco-navbar">
<div class="container">
<a class="navbar-brand" href="index.html">Super Star dev</a>
<button class="navbar-toggler js-fh5co-nav-toggle fh5co-nav-toggle" type="button" data-toggle="collapse" data-target="#ftco-nav" aria-controls="ftco-nav" aria-expanded="false" aria-label="Toggle navigation">
<span class="oi oi-menu"></span> Menu
</button>


<div style="clear: both;"></div>
</nav>

<div class="collapse navbar-collapse" id="ftco-nav">
<ul class="navbar-nav nav ml-auto">
<li class="nav-item"><a href="#home-section" class="nav-link active"><span>Home</span></a></li>
<li class="nav-item"><a href="#about-section" class="nav-link"><span>About</span></a></li>
<li class="nav-item"><a href="#resume-section" class="nav-link"><span>Resume</span></a></li>
<li class="nav-item"><a href="#services-section" class="nav-link"><span>Services</span></a></li>
<li class="nav-item"><a href="#skills-section" class="nav-link"><span>Skills</span></a></li>
<li class="nav-item"><a href="#projects-section" class="nav-link"><span>Projects</span></a></li>
<li class="nav-item"><a href="#blog-section" class="nav-link"><span>My Blog</span></a></li>
<li class="nav-item"><a href="#contact-section" class="nav-link"><span>Contact</span></a></li>
</ul>
</div>
</div>
</nav>


<!-- Code for the slider -->
<div class="slider" style="width: 100%; height: 800px">

Expand Down Expand Up @@ -105,7 +108,7 @@ <h4>
<br>
<br>
<br>
<h4 style="color: white; font-size: 30px;">
<h4 style="color: white; font-size: 30px;text-align:left">
<b style="color: orange;">120</b> Project complete</h4>
</div>

Expand Down Expand Up @@ -237,76 +240,121 @@ <h1 class="Projects">Our Projects</h1>
<br>
<br>
<section class="blog" id="blog">
<div class="blog">
<h2 class="blog">Our Blog </h2>
<p> A small river named Duden flos by their place and suppies it with the necessary regelialia. </p>

</div>
<div class="picbox">
<div class="pic1">
<img src="/com.1.jpg" class="com1">
<h6 class="h6"> JUNE 21, 2019 ADMIN 3</h6>
<p class="head"> Why Lead Generation is Key for Business Growth</p>
<p class="text">

a small named Duben floes by theis place and supplies it with the necessary regelialia.
</p>
</div>
<div class="pic20">
<div class="pic2">
<img src="/com.2.jpg" class="com2">
<h6 class="h6"> JUNE 21, 2019 ADMIN 3</h6>
<p class="head"> Why Lead Generation is Key for Business Growth</p>
<p class="text">

a small named Duben floes by theis place and supplies it with the necessary regelialia.
</p>
</div>

</div>
<div class="pic21">
<div class="pic3">
<img src="/com.3.jpg" class="com3">
<h6 class="h6"> JUNE 21, 2019 ADMIN 3</h6>
<p class="head"> Why Lead Generation is Key for Business Growth</p>
<p class="text">
a small named Duben floes by theis place and supplies it with the necessary regelialia.

</p>
</div>
</div>
</div>
<div class="bigpic">
<img src="/thecleanestdesk___B5Mrg5YolTv___.jpg" class="bigpic">
<section class="awards">
<div class="awards">
<h2 class="num">100</h2>
Awards
</div>
<div class="Projects">
<h2 class="num">1200</h2>
Complete Projects

<section class="ftco-section" id="blog-section">
<div class="container">
<div class="row justify-content-center mb-5 pb-5">
<div class="col-md-7 heading-section text-center ">
<h1 class="big big-2">Blog</h1>
<h2 class="mb-4">Our Blog</h2>
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia</p>
</div>
</div>
<div class="row d-flex">
<div class="col-md-4 d-flex ">
<div class="blog-entry justify-content-end">
<a href="single.html" class="block-20" style="background-image: url('https://hungry-cray-e01832.netlify.com/images/image_1.jpg');">
</a>
<div class="text mt-3 float-right d-block">
<div class="d-flex align-items-center mb-3 meta">
<p class="mb-0">
<span class="mr-2">June 21, 2019</span>
<a href="#" class="mr-2">Admin</a>
<a href="#" class="meta-chat"><span class="icon-chat"></span> 3</a>
</p>
</div>
<h3 class="heading"><a href="single.html">Why Lead Generation is Key for Business Growth</a></h3>
<p>A small river named Duden flows by their place and supplies it with the necessary regelialia.</p>
</div>
</div>
</div>
<div class="col-md-4 d-flex ">
<div class="blog-entry justify-content-end">
<a href="single.html" class="block-20" style="background-image: url('https://hungry-cray-e01832.netlify.com/images/image_2.jpg');">
</a>
<div class="text mt-3 float-right d-block">
<div class="d-flex align-items-center mb-3 meta">
<p class="mb-0">
<span class="mr-2">June 21, 2019</span>
<a href="#" class="mr-2">Admin</a>
<a href="#" class="meta-chat"><span class="icon-chat"></span> 3</a>
</p>
</div>
<h3 class="heading"><a href="single.html">Why Lead Generation is Key for Business Growth</a></h3>
<p>A small river named Duden flows by their place and supplies it with the necessary regelialia.</p>
</div>
</div>
</div>
<div class="col-md-4 d-flex ">
<div class="blog-entry">
<a href="single.html" class="block-20" style="background-image: url('https://hungry-cray-e01832.netlify.com/images/image_3.jpg');">
</a>
<div class="text mt-3 float-right d-block">
<div class="d-flex align-items-center mb-3 meta">
<p class="mb-0">
<span class="mr-2">June 21, 2019</span>
<a href="#" class="mr-2">Admin</a>
<a href="#" class="meta-chat"><span class="icon-chat"></span> 3</a>
</p>
</div>
<h3 class="heading"><a href="single.html">Why Lead Generation is Key for Business Growth</a></h3>
<p>A small river named Duden flows by their place and supplies it with the necessary regelialia.</p>
</div>
</div>
</div>
</div>
</div>
</section>

<section style="margin-top:150px;" class="ftco-section ftco-no-pt ftco-no-pb ftco-counter img" id="section-counter">
<div class="container">
<div class="row d-md-flex align-items-center">
<div class="col-md d-flex justify-content-center counter-wrap">
<div class="block-18">
<div class="text">
<strong class="number" data-number="100">100</strong>
<span>Awards</span>
</div>
</div>
</div>
<div class="col-md d-flex justify-content-center counter-wrap ">
<div class="block-18">
<div class="text">
<strong class="number" data-number="1200">1,200</strong>
<span>Complete Projects</span>
</div>
</div>
</div>
<div class="col-md d-flex justify-content-center counter-wrap ">
<div class="block-18">
<div class="text">
<strong class="number" data-number="1200">1,200</strong>
<span>Happy Customers</span>
</div>
</div>
</div>
<div class="col-md d-flex justify-content-center counter-wrap ">
<div class="block-18">
<div class="text">
<strong class="number" data-number="500">500</strong>
<span>Cups of coffee</span>
</div>
</div>
</div>
</div>
<div class="Happy">
<h2 class="num">1200</h2>
Happy Customers
</div>
<div class="Cups">
<h2 class="num">500</h2>
Cups of coffee
</div>
</section>
<section class="ftco-section ftco-hireme img margin-top" style="background-image: url(https://hungry-cray-e01832.netlify.com/images/bg_1.jpg)">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-7 text-center ">
<h2>I'm <span>Available</span> for freelancing</h2>
<p>A small river named Duden flows by their place and supplies it with the necessary regelialia.</p>
<p class="mb-0"><a href="#" class="btn btn-primary py-3 px-5">Hire me</a></p>
</div>
</div>
</div>
</section>
<div class="freelancing">
<h1 class="freelancing">

I'm
<span class="available"> Available</span> for freelancing
</h1>
<p class="txt">A small named Duben floes by theis place and supplies it with the necessary regelialia.</p>
<button class="hireme">HIRE ME</button>
</div>

</div>
</section>

<div class="contact-me">
Expand Down Expand Up @@ -336,7 +384,65 @@ <h5 style="font-size: 12px;">WEBSITE</h5>
<p style="font-size: 9px;font-weight:100; ">yoursite.com</p>
</div>
</div>

<footer class="ftco-footer ftco-section">
<div class="container">
<div class="row mb-5">
<div class="col-md">
<div class="ftco-footer-widget mb-4">
<h2 class="ftco-heading-2">About</h2>
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
<ul class="ftco-footer-social list-unstyled float-md-left float-lft mt-5">
<li class=""><a href="#"><span class="icon-twitter"></span></a></li>
<li class=""><a href="#"><span class="icon-facebook"></span></a></li>
<li class=""><a href="#"><span class="icon-instagram"></span></a></li>
</ul>
</div>
</div>
<div class="col-md">
<div class="ftco-footer-widget mb-4 ml-md-4">
<h2 class="ftco-heading-2">Links</h2>
<ul class="list-unstyled">
<li><a href="#"><span class="icon-long-arrow-right mr-2"></span>Home</a></li>
<li><a href="#"><span class="icon-long-arrow-right mr-2"></span>About</a></li>
<li><a href="#"><span class="icon-long-arrow-right mr-2"></span>Services</a></li>
<li><a href="#"><span class="icon-long-arrow-right mr-2"></span>Projects</a></li>
<li><a href="#"><span class="icon-long-arrow-right mr-2"></span>Contact</a></li>
</ul>
</div>
</div>
<div class="col-md">
<div class="ftco-footer-widget mb-4">
<h2 class="ftco-heading-2">Services</h2>
<ul class="list-unstyled">
<li><a href="#"><span class="icon-long-arrow-right mr-2"></span>Web Design</a></li>
<li><a href="#"><span class="icon-long-arrow-right mr-2"></span>Web Development</a></li>
<li><a href="#"><span class="icon-long-arrow-right mr-2"></span>Business Strategy</a></li>
<li><a href="#"><span class="icon-long-arrow-right mr-2"></span>Data Analysis</a></li>
<li><a href="#"><span class="icon-long-arrow-right mr-2"></span>Graphic Design</a></li>
</ul>
</div>
</div>
<div class="col-md">
<div class="ftco-footer-widget mb-4">
<h2 class="ftco-heading-2">Have a Questions?</h2>
<div class="block-23 mb-3">
<ul>
<li><span class="icon icon-map-marker"></span><span class="text">203 Fake St. Owerri,Nigeria</span></li>
<li><a href="#"><span class="icon icon-phone"></span><span class="text">+234 392 3929 210</span></a></li>
<li><a href="#"><span class="icon icon-envelope"></span><span class="text">[email protected]</span></a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">

Copyright ©<script>document.write(new Date().getFullYear());</script> All rights reserved | This webpage is made with <i class="icon-heart color-danger" aria-hidden="true"></i> by <a href="#" target="_blank">InternHub Super star Devs</a>
</div>
</div>
</div>
</footer>


<script src="./scripts/index.js"></script>
Expand Down
Loading