We Keep Coding

How to get <div>s side by side [duplicate]

This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
How to place div side by side
(7 answers)
Closed 2 years ago.
I have created these divs that serve as buttons to redirect to a different site page, and for some reason I cannot get them to place side by side. I have tried everything including flexbox, and I cannot seem to get the divs side by side. What am I doing wrong.
IS there an easier way to go about what I want to accomplish? Or is it a simple easy mistake that I looked over.
html, body {
margin: 0;
height: 100%;
}
.img_container {
border: none;
width: 70%;
padding: 10px;
height: auto;
display: block;
justify-content: center;
align-items: center;
}
a {
text-decoration: none;
}
a:link, a:visited {
color: #b3ab7d;
}
a:hover {
color: #b3ab7d;
}
.background {
background: #104723;
width: 150px;
height: 150px;
}
.img {
width: 70%;
display: block;
margin: 0 auto;
}
a {
display: block;
text-align: center;
}
.text{
font-size: 70%;
}
*{
box-sizing: border-box;
}
.center {
justify-content: center;
align-items: center;
}
<div class="center">
<div class="img_container">
<a href="https://www.google.com" class="btn">
<div class="background">
<img class="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Angular_one_color_inverse_logo.svg/1024px-Angular_one_color_inverse_logo.svg.png" alt="logo" />
<span class="text">Access Control (AC)</span>
</div>
</a>
</div>
<div class="img_container">
<a href="https://www.google.com" class="btn">
<div class="background">
<img class="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Angular_one_color_inverse_logo.svg/1024px-Angular_one_color_inverse_logo.svg.png" alt="logo" />
<span class="text">Identification & Authentication (IA)</span>
</div>
</a>
</div>
<div class="img_container">
<a href="https://www.google.com" class="btn">
<div class="background">
<img class="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Angular_one_color_inverse_logo.svg/1024px-Angular_one_color_inverse_logo.svg.png" alt="logo" />
<span class="text">Media Protection (MP)</span>
</div>
</a>
</div>
<div class="img_container">
<a href="https://www.google.com" class="btn">
<div class="background">
<img class="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Angular_one_color_inverse_logo.svg/1024px-Angular_one_color_inverse_logo.svg.png" alt="logo" />
<span class="text">Physical Protection (PE)</span>
</div>
</a>
</div>
<div class="img_container">
<a href="https://www.google.com" class="btn">
<div class="background">
<img class="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Angular_one_color_inverse_logo.svg/1024px-Angular_one_color_inverse_logo.svg.png" alt="logo" />
<span class="text">System & Communications Protection (SC)</span>
</div>
</a>
</div>
<div class="img_container">
<a href="https://www.google.com" class="btn">
<div class="background">
<img class="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Angular_one_color_inverse_logo.svg/1024px-Angular_one_color_inverse_logo.svg.png" alt="logo" />
<span class="text">System & Information Integrity (SI)</span>
</div>
</a>
</div>
</div>

You have forgotten display: flex; in your .center class name.
Check your updated snippet.
html, body {
margin: 0;
height: 100%;
}
.img_container {
border: none;
width: 70%;
padding: 10px;
height: auto;
display: block;
justify-content: center;
align-items: center;
}
a {
text-decoration: none;
}
a:link, a:visited {
color: #b3ab7d;
}
a:hover {
color: #b3ab7d;
}
.background {
background: #104723;
width: 150px;
height: 150px;
}
.img {
width: 70%;
display: block;
margin: 0 auto;
}
a {
display: block;
text-align: center;
}
.text{
font-size: 70%;
}
*{
box-sizing: border-box;
}
.center {
display: flex;
justify-content: center;
align-items: center;
}
<div class="center">
<div class="img_container">
<a href="https://www.google.com" class="btn">
<div class="background">
<img class="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Angular_one_color_inverse_logo.svg/1024px-Angular_one_color_inverse_logo.svg.png" alt="logo" />
<span class="text">Access Control (AC)</span>
</div>
</a>
</div>
<div class="img_container">
<a href="https://www.google.com" class="btn">
<div class="background">
<img class="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Angular_one_color_inverse_logo.svg/1024px-Angular_one_color_inverse_logo.svg.png" alt="logo" />
<span class="text">Identification & Authentication (IA)</span>
</div>
</a>
</div>
<div class="img_container">
<a href="https://www.google.com" class="btn">
<div class="background">
<img class="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Angular_one_color_inverse_logo.svg/1024px-Angular_one_color_inverse_logo.svg.png" alt="logo" />
<span class="text">Media Protection (MP)</span>
</div>
</a>
</div>
<div class="img_container">
<a href="https://www.google.com" class="btn">
<div class="background">
<img class="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Angular_one_color_inverse_logo.svg/1024px-Angular_one_color_inverse_logo.svg.png" alt="logo" />
<span class="text">Physical Protection (PE)</span>
</div>
</a>
</div>
<div class="img_container">
<a href="https://www.google.com" class="btn">
<div class="background">
<img class="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Angular_one_color_inverse_logo.svg/1024px-Angular_one_color_inverse_logo.svg.png" alt="logo" />
<span class="text">System & Communications Protection (SC)</span>
</div>
</a>
</div>
<div class="img_container">
<a href="https://www.google.com" class="btn">
<div class="background">
<img class="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Angular_one_color_inverse_logo.svg/1024px-Angular_one_color_inverse_logo.svg.png" alt="logo" />
<span class="text">System & Information Integrity (SI)</span>
</div>
</a>
</div>
</div>

Display flex; seems to be missing.
.center {
display: flex;
justify-content: center;
align-items: center;
}

Just remove width from below class and add float left or right as pr need.
.img_container {
border: none;
width: auto;
padding: 10px;
height: auto;
display: block;
justify-content: center;
align-items: center;
float: left;
}

HTML/CSS Nav Bar Not Responding Correctly

I'm somewhat new to more involved web design, if you can really call it that!
I seem to be having some issues with my navigation bar.
It seems to work on all my sections apart from one, the about section.
I've included all the CSS code since I think this is where the problem is.
$(document).ready(function () {
$('.menu-toggler').on('click', function () {
$(this).toggleClass('open');
$('.top-nav').toggleClass('open');
});
$('.top-nav .nav-link').on('click', function () {
$('.menu-toggler').removeClass('open');
$('.top-nav').removeClass('open');
});
$('nav a[href*="#"]').not("#blog").on("click", function () {
$("#js-menu").toggleClass('active');
$("html, body").animate({
scrollTop: $($(this).attr("href")).offset().top
}, 500);
});
$("#up").on("click", function () {
$("html, body").animate({
scrollTop: 0
}, 1000);
});
});
/*Start global*/
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html{
font-size: 15px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
color: #e9e9e9;
}
body{
width: 100%;
height: 100%;
background: url("images/sitebg.jpg") no-repeat center fixed;
background-size: cover;
text-align: center;
}
section{
padding: 6rem 0;
}
a{
text-decoration: none;
color: #e9e9e9;
}
p{
font-weight: 300;
font-size: 1.8rem;
}
img{
width: 100%;
}
/*End global*/
/*Start reusable*/
.container{
width: 90%;
max-width: 120rem;
height: 100%;
margin: 0 auto;
position: relative;
padding: .3rem;
}
.section-heading{
text-align: center;
margin-bottom: 2.5rem;
}
.section-heading h1{
font-size: 3.5rem;
color: black;
text-transform: uppercase;
font-weight: 300;
position: relative;
margin-bottom: 1rem;
}
.section-heading h1::before,
.section-heading h1::after{
content: '';
position: absolute;
bottom: -5rem;
left: 50%;
transform: translateX(-50%);
background-color: rgba(255, 255, 255, 0.75);
}
.section-heading h1::before{
width: 10rem;
height: 3px;
border-radius: 0.8rem;
bottom: -4.5rem;
}
.section-heading h6{
font-size: 1.6rem;
font-weight: 300;
}
.has-margin-right{
margin-right: 5rem;
}
/*End reusable*/
/*Start header*/
header{
width: 100%;
height: 100%;
}
.top-nav{
width: 100%;
height: 100vh;
position: fixed;
top: -100vh;
z-index: 50;
background-color: #16162d;
border-bottom-right-radius: 100%;
border-bottom-left-radius: 100%;
transition: all 650ms cubic-bezier(1, 0, 0, 1);
}
.nav-list{
list-style: none;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
li{
margin: 0.2rem;
}
#font-face {
font-family: 'The Historia Demo';
src: url('/fonts/the_historia_demo-webfont.woff2') format('woff2'),
url('fonts/the_historia_demo-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
.nav-link{
font-family:"The Historia Demo", sans-serif;
font-size: 5rem;
padding: 1rem;
}
.nav-link:hover,
.nav-link:focus{
background: linear-gradient(to top, #ffe838, #fd57bf );
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.top-nav.open{
top: 0;
border-radius: initial;
}
.menu-toggler{
position: absolute;
top: 5rem;
right: 5rem;
width: 5rem;
height: 4rem;
display: flex;
flex-direction: column;
justify-content: space-between;
cursor: pointer;
z-index: 1500;
transition: transform 650ms ease-out;
}
.menu-toggler.open{
transform: rotate(-45deg);
}
.bar{
background: linear-gradient(to right, #ffe838, #fd57bf);
width: 100%;
height: 4px;
border-radius: .8rem;
}
.bar.half{
width: 50%;
}
.bar.start{
transform-origin: right;
transition: transform 650ms cubic-bezier(0.54, -0.81, 0.057, 0.57);
}
.open .bar.start{
transform: rotate(-450deg) translateX(.8rem);
}
.bar.end{
align-self: flex-end;
transform-origin: left;
transition: transform 650ms cubic-bezier(0.54, -0.81, 0.057, 0.57);
}
.open .bar.end{
transform: rotate(-450deg) translateX(-.8rem);
}
.landing-text{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
text-align: center;
z-index: 1;
}
.landing-text h1{
font-size: 15rem;
font-weight: 500;
font-family: "The Historia Demo", sans-serif;
background: linear-gradient(to top, #ffe838 30%, #fd57bf );
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
padding: 1rem;
user-select: none;
line-height: 1.1;
}
.landing-text h6{
font-size: 2rem;
font-weight: 300;
margin-bottom: 0.4rem;
}
.landingbtn {
margin: 1rem auto;
background-color:#16162d;
height: 3rem;
width: 15rem;
cursor: pointer;
transition: 0.2s ease-in;
border-radius: 1rem;
display: flex;
justify-content: center;
align-items: center;
text-transform: capitalize;
opacity: 0.5;
}
.landingbtn p {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-size: 2rem;
}
.landingbtn:hover {
transform: scale(1.05);
background-color: #221e3f;
}
/*End header*/
/*Start about*/
.about .container{
display: flex;
align-items: center;
justify-content: center;
margin-top: 60rem;
}
.about-heading{
text-align: center;
text-transform: uppercase;
line-height: 0;
margin-bottom: 6rem;
}
.about-heading h1{
font-size: 10rem;
opacity: .3;
}
.about-heading h6{
font-size: 2rem;
font-weight: 300;
}
.profile-img{
flex: 1;
margin-right: 5rem;
}
.about-details{
flex: 1;
}
.social-media{
margin-top: 5rem;
}
.social-media i{
font-size: 5rem;
transition: color 650ms;
padding: 1rem;
}
.fa-linkedin:hover{
color: #0e76a8;
}
.fa-github:hover{
color: #211F1F;
}
.fa-soundcloud:hover{
color: #ff7700;
}
/*End about*/
/*Start services*/
.my-skills{
margin-top: 3.5rem;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
grid-gap: 2.5rem;
text-align: center;
}
<body>
<header>
<div class="menu-toggler">
<div class="bar half start"></div>
<div class="bar"></div>
<div class="bar half end"></div>
</div>
<nav class="top-nav">
<ul class="nav-list">
<li>
Home
</li>
<li>
About
</li>
<li>
Services
</li>
<li>
Portfolio
</li>
<li>
Experience
</li>
<li>
Contact
</li>
</ul>
</nav>
<div class="landing-text">
<h1>Karanvir S. Ghatt</h1>
<h6>Full Stack Developer | Scientist | Artist </h6>
<h6> I Am
<a href="" class="typewrite" data-period="2000" data-type='[ " Creative.", " Driven.", " Analytical." ]'>
<span class="wrap"></span>
</a>
</h6>
<a class="landingbtn" href="#portfolio">
<p> See my work </p>
</a>
</div>
</header>
<section id="about" class="about">
<div class="container">
<div class="prolife-img" data-aos="fade-right" data-aos-delay="200">
<img src="images/profile(1).png" alt="avatar image">
</div>
<div class="about-details" data-aos="fade-left" data-aos-delay="400">
<div class="about-heading">
<h1>About</h1>
</div>
<p>
A confident individual offering skills in a range of areas,
from anlytical and formulation chemistry to, web development,
backend, hospitality and sales.
Self-taught full stack developer, offering skills in web-design,
python, data science and analysis.
</p>
<div class="social-media">
<ul class="nav-list">
<li>
<a href="#" class="icon-link">
<i class="fab fa-linkedin"></i>
</a>
</li>
<li>
<a href="#" class="icon-link">
<i class="fab fa-github"></i>
</a>
</li>
<li>
<a href="#" class="icon-link">
<i class="fab fa-soundcloud"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</section>
<section class="services" id="services">
<div class="container">
<div class="section-heading">
<h1 data-aos="zoom-in" data-aos-delay="100">Services</h1>
<h6 data-aos="zoom-in" data-aos-delay="100">What I Can Do For You</h6>
</div>
<div class="my-skills">
<div class="skill" data-aos="fade-left" data-aos-delay="300">
<div class="icon-container">
<i class="fas fa-code"></i>
</div>
<h1>Design & Development</h1>
<p>
Good web design is more thanjust pixelated information.
It should be seamless, it should be invisible.
In my hands, every project is bespoke and tailored to your specific needs and requirements.
In a few short months I have developed and deployed a number of websites, find our more in my portfolio.
</p>
</div>
<div class="skill" data-aos="fade-in" data-aos-delay="150">
<div class="icon-container">
<i class="fa fa-cogs"></i>
</div>
<h1>Design & Deployment</h1>
<p>
Over the last few months I have devloped my python skills, developing a number of applications,
and sucessfully depolying a few. I am drawn to data analysis and visulation, data can truly be beautiful.
Although not an expert, far from it, I am working everyday to expand my skillset.
What I have developed so far, in a short period of time, can show what I can do.
</p>
</div>
<div class="skill" data-aos="fade-right" data-aos-delay="300">
<div class="icon-container">
<i class="fa fa-dashboard"></i>
</div>
<h1>Versitility</h1>
<p>
I take pride in having a versitile skill-set, from sales, to business, to programming, to life sciences, to music and creative design.
Those 'soft-skils', and my exposiure to a range of feilds and industries, means that I'm sure there's some way I can be of service.
These are more words, included to make this look right.
</p>
</div>
</div>
</div>
</section>
<section class="portfolio" id="portfolio">
<div class="container">
<div class="section-heading" data-aos="zoom-in" data-aos-delay="100">
<h1 data-aos="fade-right" data-aos-delay="150">Portfolio</h1>
<h6 data-aos="fade-left" data-aos-delay="150">Veiw Recent Projects</h6>
</div>
</div>
<div class="row" data-aos="fade-down" data-aos-delay="200">
<!-- Portfolio Item 1 | AB Removals -->
<div class="column">
<div class="portfolio-container">
<div class="item" id="1">
<img src="/images/abremovals.png" style="width:100%" alt="">
<div class="text">
<h3>PROJECT 1</h4>
<p>Short Description</p>
</div>
<div class="button">Learn More</div>
</div>
</div>
<!-- Portfolio Item 2 | Resume -->
<div class="portfolio-container">
<div class="item" id="2">
<img src="/images/resume.png" style="width:100%" alt="">
<div class="text">
<h3>PROJECT 2</h4>
<p>Short Description</p>
</div>
<div class="button">Learn More</div>
</div>
</div>
</div>
<!-- Portfolio Item 3 | Resume -->
<div class="column">
<div class="portfolio-container">
<div class="item" id="3">
<img src="/images/portfolio.png" style="width:100%" alt="">
<div class="text">
<h3>PROJECT 3</h4>
<p>Short Description</p>
</div>
<div class="button">Learn More</div>
</div>
</div>
<!-- Portfolio Item 4 | Data Projects -->
<div class="portfolio-container">
<div class="item" id="4">
<img src="/images/covid.png" style="width:100%" alt="">
<div class="text">
<h3>PROJECT 4</h4>
<p>Short Description</p>
</div>
<div class="button">Learn More</div>
</div>
</div>
</div>
<!-- Portfolio Item 5 | Colour Detection -->
<div class="column">
<div class="portfolio-container">
<div class="item" id="5">
<img src="/images/testimage.gif" style="width:100%" alt="">
<div class="text">
<h3>PROJECT 5</h4>
<p>Short Description</p>
</div>
<div class="button">Learn More</div>
</div>
</div>
<!-- Portfolio Item 6 | Face Detection -->
<div class="portfolio-container">
<div class="item" id="6">
<img src="/images/testgiftwo.gif" alt="">
<div class="text">
<h3>PROJECT 6</h4>
<p>Short Description</p>
</div>
<div class="button">Learn More</div>
</div>
</div>
</div>
<!-- Portfolio Item 7 | Colour Detection -->
<div class="column">
<div class="portfolio-container">
<div class="item" id="7">
<img src="/images/testimage.gif" style="width:100%" alt="">
<div class="text">
<h3>PROJECT 7</h4>
<p>Short Description</p>
</div>
<div class="button">Learn More</div>
</div>
</div>
<!-- Portfolio Item 8 | Colour Detection -->
<div class="portfolio-container">
<div class="item" id="8">
<img src="/images/testimage.gif" style="width:100%" alt="">
<div class="text">
<h3>PROJECT 8</h4>
<p>Short Description</p>
</div>
<div class="button">Learn More</div>
</div>
</div>
</div>
<!-- Modal -->
<div id="preview" class="modal">
<div class="modal-content">
<span class="close">×</span>
<div id="details">
<h3 id="title"></h3>
<p id="info">SOME TEXT</p>
<div class="button" id="live">View</div>
<i class="fab fa-github-square" id="github"></i>
</div>
</div>
</div>
<!-- Item End -->
</section>
<section class="experience" id="experience">
<div class="container">
<div class="section-heading">
<h1 data-aos="fade-left" data-aos-delay="150">Work Experience</h1>
<h6 data-aos="fade-right" data-aos-delay="150">Previous Roles</h6>
</div>
<div class="timeline" data-aos="fade-down" data-aos-delay="200">
<ul>
<li class="date" data-date="Oct 2018 - Dec 2019">
<h1>Mettler Toledo | Sales Coordinator</h1>
<p>
The key aim of this role was to sell or introduce new corporate products or services to
established clients, along with prospecting for new business, the generation and qualification of sales leads.
Management of project execution actions and overall coordination between Internal and Outside Sales departments,
along with key stakeholders both inside, and beyond the business.
</p>
</li>
<li class="date" data-date="Mar 2018 - Jan 2019">
<h1>Vape.ABox | Flavourist - Lead Chemist</h1>
<p>
Set up and maintenance of the analytical laboratory on site, along with product procurement.
Demonstration of creation leadership potential through commercial projects & their execution.
Creation of new flavors and re-formulation of current flavours, with regards to specific technologies and delivery systems.
</p>
</li>
<li class="date" data-date="Mar 2018 - Jan 2019">
<h1>3M | QC Inhilations Chemist</h1>
<p>
Testing of pharmaceutical products for batch release, stability and complaints in line with departmental
and site procedures across a number of departments.
Completion of work and documentation to standards of compliance designated by external regulatory
bodies and internal Company procedures.
</p>
</li>
<h2>Further information regarding my work experience can be found in my Resume</h2>
</ul>
</div>
</div>
</section>
<section class="contact" id="contact">
<div class="container">
<div class="section-heading">
<h1 data-aos="fade-right" data-aos-delay="150">Contact</h1>
<h6 data-aos="fade-left" data-aos-delay="150">Contact Me</h6>
</div>
<form actions="" data-aos="fade-up" data-aos-delay="200">
<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="Enter Your Name..." required>
<label for="name">Email:</label>
<input type="email" id="email" name="email" placeholder="Enter Your E-mail..." required>
<label for="number">Contact Number:</label>
<input type="number" id="number" name="number" placeholder="Enter Your Contact Number...">
<label for="message">Message:</label>
<textarea name="subject" id="subject" cols="10" rows="10" placeholder="Enter Your Messgage..."></textarea>
<input type="submit" value="Subit">
</form>
</div>
</section>
<footer class="copyright">
<div class="up" id="up">
<i class="fas fa fa-chevron-up"></i>
</div>
<p>© 2020 Karanvir S. Ghattoraya</p>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/aos#next/dist/aos.js"></script>
<script src="main.js"></script>
</body>
</html>
Any insight would be greatly appreciated!!

You have the .container of about section with margin-top: 60rem;
so technically the anchor point is working but its position is at the
top of the document :(
To avoid this, you can change the position:absolute of the .landing-text to default value and the about section it will go down .landing-text with no margin-top to simulate its position. I hope this can help you.
Here is the code:
(Run code snippet with full page to see the solution)
$(document).ready(function () {
$('.menu-toggler').on('click', function () {
$(this).toggleClass('open');
$('.top-nav').toggleClass('open');
});
$('.top-nav .nav-link').on('click', function () {
$('.menu-toggler').removeClass('open');
$('.top-nav').removeClass('open');
});
$('nav a[href*="#"]').not("#blog").on("click", function () {
$("#js-menu").toggleClass('active');
$("html, body").animate({
scrollTop: $($(this).attr("href")).offset().top
}, 500);
});
$("#up").on("click", function () {
$("html, body").animate({
scrollTop: 0
}, 1000);
});
});
/*Start global*/
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html{
font-size: 15px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
color: #e9e9e9;
}
body{
width: 100%;
height: 100%;
background: url("images/sitebg.jpg") no-repeat center fixed;
background-size: cover;
text-align: center;
}
section{
padding: 6rem 0;
}
a{
text-decoration: none;
color: #e9e9e9;
}
p{
font-weight: 300;
font-size: 1.8rem;
}
img{
width: 100%;
}
/*End global*/
/*Start reusable*/
.container{
width: 90%;
max-width: 120rem;
height: 100%;
margin: 0 auto;
position: relative;
padding: .3rem;
}
.section-heading{
text-align: center;
margin-bottom: 2.5rem;
}
.section-heading h1{
font-size: 3.5rem;
color: black;
text-transform: uppercase;
font-weight: 300;
position: relative;
margin-bottom: 1rem;
}
.section-heading h1::before,
.section-heading h1::after{
content: '';
position: absolute;
bottom: -5rem;
left: 50%;
transform: translateX(-50%);
background-color: rgba(255, 255, 255, 0.75);
}
.section-heading h1::before{
width: 10rem;
height: 3px;
border-radius: 0.8rem;
bottom: -4.5rem;
}
.section-heading h6{
font-size: 1.6rem;
font-weight: 300;
}
.has-margin-right{
margin-right: 5rem;
}
/*End reusable*/
/*Start header*/
header{
width: 100%;
height: 100%;
}
.top-nav{
width: 100%;
height: 100vh;
position: fixed;
top: -100vh;
z-index: 50;
background-color: #16162d;
border-bottom-right-radius: 100%;
border-bottom-left-radius: 100%;
transition: all 650ms cubic-bezier(1, 0, 0, 1);
}
.nav-list{
list-style: none;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
li{
margin: 0.2rem;
}
#font-face {
font-family: 'The Historia Demo';
src: url('/fonts/the_historia_demo-webfont.woff2') format('woff2'),
url('fonts/the_historia_demo-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
.nav-link{
font-family:"The Historia Demo", sans-serif;
font-size: 5rem;
padding: 1rem;
}
.nav-link:hover,
.nav-link:focus{
background: linear-gradient(to top, #ffe838, #fd57bf );
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.top-nav.open{
top: 0;
border-radius: initial;
}
.menu-toggler{
position: absolute;
top: 5rem;
right: 5rem;
width: 5rem;
height: 4rem;
display: flex;
flex-direction: column;
justify-content: space-between;
cursor: pointer;
z-index: 1500;
transition: transform 650ms ease-out;
}
.menu-toggler.open{
transform: rotate(-45deg);
}
.bar{
background: linear-gradient(to right, #ffe838, #fd57bf);
width: 100%;
height: 4px;
border-radius: .8rem;
}
.bar.half{
width: 50%;
}
.bar.start{
transform-origin: right;
transition: transform 650ms cubic-bezier(0.54, -0.81, 0.057, 0.57);
}
.open .bar.start{
transform: rotate(-450deg) translateX(.8rem);
}
.bar.end{
align-self: flex-end;
transform-origin: left;
transition: transform 650ms cubic-bezier(0.54, -0.81, 0.057, 0.57);
}
.open .bar.end{
transform: rotate(-450deg) translateX(-.8rem);
}
.landing-text{
width: 100%;
}
.landing-text h1{
font-size: 15rem;
font-weight: 500;
font-family: "The Historia Demo", sans-serif;
background: linear-gradient(to top, #ffe838 30%, #fd57bf );
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
padding: 1rem;
user-select: none;
line-height: 1.1;
}
.landing-text h6{
font-size: 2rem;
font-weight: 300;
margin-bottom: 0.4rem;
}
.landingbtn {
margin: 1rem auto;
background-color:#16162d;
height: 3rem;
width: 15rem;
cursor: pointer;
transition: 0.2s ease-in;
border-radius: 1rem;
display: flex;
justify-content: center;
align-items: center;
text-transform: capitalize;
opacity: 0.5;
}
.landingbtn p {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-size: 2rem;
}
.landingbtn:hover {
transform: scale(1.05);
background-color: #221e3f;
}
/*End header*/
/*Start about*/
.about .container{
display: flex;
align-items: center;
justify-content: center;
}
.about-heading{
text-align: center;
text-transform: uppercase;
line-height: 0;
margin-bottom: 6rem;
}
.about-heading h1{
font-size: 10rem;
opacity: .3;
}
.about-heading h6{
font-size: 2rem;
font-weight: 300;
}
.profile-img{
flex: 1;
margin-right: 5rem;
}
.about-details{
flex: 1;
}
.social-media{
margin-top: 5rem;
}
.social-media i{
font-size: 5rem;
transition: color 650ms;
padding: 1rem;
}
.fa-linkedin:hover{
color: #0e76a8;
}
.fa-github:hover{
color: #211F1F;
}
.fa-soundcloud:hover{
color: #ff7700;
}
/*End about*/
/*Start services*/
.my-skills{
margin-top: 3.5rem;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
grid-gap: 2.5rem;
text-align: center;
}
<body>
<header>
<div class="menu-toggler">
<div class="bar half start"></div>
<div class="bar"></div>
<div class="bar half end"></div>
</div>
<nav class="top-nav">
<ul class="nav-list">
<li>
Home
</li>
<li>
About
</li>
<li>
Services
</li>
<li>
Portfolio
</li>
<li>
Experience
</li>
<li>
Contact
</li>
</ul>
</nav>
</header>
<div class="landing-text">
<h1>Karanvir S. Ghatt</h1>
<h6>Full Stack Developer | Scientist | Artist </h6>
<h6> I Am
<a href="" class="typewrite" data-period="2000" data-type='[ " Creative.", " Driven.", " Analytical." ]'>
<span class="wrap"></span>
</a>
</h6>
<a class="landingbtn" href="#portfolio">
<p> See my work </p>
</a>
</div>
<section id="about" class="about">
<div class="container">
<div class="prolife-img" data-aos="fade-right" data-aos-delay="200">
<img src="images/profile(1).png" alt="avatar image">
</div>
<div class="about-details" data-aos="fade-left" data-aos-delay="400">
<div class="about-heading">
<h1>About</h1>
</div>
<p>
A confident individual offering skills in a range of areas,
from anlytical and formulation chemistry to, web development,
backend, hospitality and sales.
Self-taught full stack developer, offering skills in web-design,
python, data science and analysis.
</p>
<div class="social-media">
<ul class="nav-list">
<li>
<a href="#" class="icon-link">
<i class="fab fa-linkedin"></i>
</a>
</li>
<li>
<a href="#" class="icon-link">
<i class="fab fa-github"></i>
</a>
</li>
<li>
<a href="#" class="icon-link">
<i class="fab fa-soundcloud"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</section>
<section class="services" id="services">
<div class="container">
<div class="section-heading">
<h1 data-aos="zoom-in" data-aos-delay="100">Services</h1>
<h6 data-aos="zoom-in" data-aos-delay="100">What I Can Do For You</h6>
</div>
<div class="my-skills">
<div class="skill" data-aos="fade-left" data-aos-delay="300">
<div class="icon-container">
<i class="fas fa-code"></i>
</div>
<h1>Design & Development</h1>
<p>
Good web design is more thanjust pixelated information.
It should be seamless, it should be invisible.
In my hands, every project is bespoke and tailored to your specific needs and requirements.
In a few short months I have developed and deployed a number of websites, find our more in my portfolio.
</p>
</div>
<div class="skill" data-aos="fade-in" data-aos-delay="150">
<div class="icon-container">
<i class="fa fa-cogs"></i>
</div>
<h1>Design & Deployment</h1>
<p>
Over the last few months I have devloped my python skills, developing a number of applications,
and sucessfully depolying a few. I am drawn to data analysis and visulation, data can truly be beautiful.
Although not an expert, far from it, I am working everyday to expand my skillset.
What I have developed so far, in a short period of time, can show what I can do.
</p>
</div>
<div class="skill" data-aos="fade-right" data-aos-delay="300">
<div class="icon-container">
<i class="fa fa-dashboard"></i>
</div>
<h1>Versitility</h1>
<p>
I take pride in having a versitile skill-set, from sales, to business, to programming, to life sciences, to music and creative design.
Those 'soft-skils', and my exposiure to a range of feilds and industries, means that I'm sure there's some way I can be of service.
These are more words, included to make this look right.
</p>
</div>
</div>
</div>
</section>
<section class="portfolio" id="portfolio">
<div class="container">
<div class="section-heading" data-aos="zoom-in" data-aos-delay="100">
<h1 data-aos="fade-right" data-aos-delay="150">Portfolio</h1>
<h6 data-aos="fade-left" data-aos-delay="150">Veiw Recent Projects</h6>
</div>
</div>
<div class="row" data-aos="fade-down" data-aos-delay="200">
<!-- Portfolio Item 1 | AB Removals -->
<div class="column">
<div class="portfolio-container">
<div class="item" id="1">
<img src="/images/abremovals.png" style="width:100%" alt="">
<div class="text">
<h3>PROJECT 1</h4>
<p>Short Description</p>
</div>
<div class="button">Learn More</div>
</div>
</div>
<!-- Portfolio Item 2 | Resume -->
<div class="portfolio-container">
<div class="item" id="2">
<img src="/images/resume.png" style="width:100%" alt="">
<div class="text">
<h3>PROJECT 2</h4>
<p>Short Description</p>
</div>
<div class="button">Learn More</div>
</div>
</div>
</div>
<!-- Portfolio Item 3 | Resume -->
<div class="column">
<div class="portfolio-container">
<div class="item" id="3">
<img src="/images/portfolio.png" style="width:100%" alt="">
<div class="text">
<h3>PROJECT 3</h4>
<p>Short Description</p>
</div>
<div class="button">Learn More</div>
</div>
</div>
<!-- Portfolio Item 4 | Data Projects -->
<div class="portfolio-container">
<div class="item" id="4">
<img src="/images/covid.png" style="width:100%" alt="">
<div class="text">
<h3>PROJECT 4</h4>
<p>Short Description</p>
</div>
<div class="button">Learn More</div>
</div>
</div>
</div>
<!-- Portfolio Item 5 | Colour Detection -->
<div class="column">
<div class="portfolio-container">
<div class="item" id="5">
<img src="/images/testimage.gif" style="width:100%" alt="">
<div class="text">
<h3>PROJECT 5</h4>
<p>Short Description</p>
</div>
<div class="button">Learn More</div>
</div>
</div>
<!-- Portfolio Item 6 | Face Detection -->
<div class="portfolio-container">
<div class="item" id="6">
<img src="/images/testgiftwo.gif" alt="">
<div class="text">
<h3>PROJECT 6</h4>
<p>Short Description</p>
</div>
<div class="button">Learn More</div>
</div>
</div>
</div>
<!-- Portfolio Item 7 | Colour Detection -->
<div class="column">
<div class="portfolio-container">
<div class="item" id="7">
<img src="/images/testimage.gif" style="width:100%" alt="">
<div class="text">
<h3>PROJECT 7</h4>
<p>Short Description</p>
</div>
<div class="button">Learn More</div>
</div>
</div>
<!-- Portfolio Item 8 | Colour Detection -->
<div class="portfolio-container">
<div class="item" id="8">
<img src="/images/testimage.gif" style="width:100%" alt="">
<div class="text">
<h3>PROJECT 8</h4>
<p>Short Description</p>
</div>
<div class="button">Learn More</div>
</div>
</div>
</div>
<!-- Modal -->
<div id="preview" class="modal">
<div class="modal-content">
<span class="close">×</span>
<div id="details">
<h3 id="title"></h3>
<p id="info">SOME TEXT</p>
<div class="button" id="live">View</div>
<i class="fab fa-github-square" id="github"></i>
</div>
</div>
</div>
<!-- Item End -->
</section>
<section class="experience" id="experience">
<div class="container">
<div class="section-heading">
<h1 data-aos="fade-left" data-aos-delay="150">Work Experience</h1>
<h6 data-aos="fade-right" data-aos-delay="150">Previous Roles</h6>
</div>
<div class="timeline" data-aos="fade-down" data-aos-delay="200">
<ul>
<li class="date" data-date="Oct 2018 - Dec 2019">
<h1>Mettler Toledo | Sales Coordinator</h1>
<p>
The key aim of this role was to sell or introduce new corporate products or services to
established clients, along with prospecting for new business, the generation and qualification of sales leads.
Management of project execution actions and overall coordination between Internal and Outside Sales departments,
along with key stakeholders both inside, and beyond the business.
</p>
</li>
<li class="date" data-date="Mar 2018 - Jan 2019">
<h1>Vape.ABox | Flavourist - Lead Chemist</h1>
<p>
Set up and maintenance of the analytical laboratory on site, along with product procurement.
Demonstration of creation leadership potential through commercial projects & their execution.
Creation of new flavors and re-formulation of current flavours, with regards to specific technologies and delivery systems.
</p>
</li>
<li class="date" data-date="Mar 2018 - Jan 2019">
<h1>3M | QC Inhilations Chemist</h1>
<p>
Testing of pharmaceutical products for batch release, stability and complaints in line with departmental
and site procedures across a number of departments.
Completion of work and documentation to standards of compliance designated by external regulatory
bodies and internal Company procedures.
</p>
</li>
<h2>Further information regarding my work experience can be found in my Resume</h2>
</ul>
</div>
</div>
</section>
<section class="contact" id="contact">
<div class="container">
<div class="section-heading">
<h1 data-aos="fade-right" data-aos-delay="150">Contact</h1>
<h6 data-aos="fade-left" data-aos-delay="150">Contact Me</h6>
</div>
<form actions="" data-aos="fade-up" data-aos-delay="200">
<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="Enter Your Name..." required>
<label for="name">Email:</label>
<input type="email" id="email" name="email" placeholder="Enter Your E-mail..." required>
<label for="number">Contact Number:</label>
<input type="number" id="number" name="number" placeholder="Enter Your Contact Number...">
<label for="message">Message:</label>
<textarea name="subject" id="subject" cols="10" rows="10" placeholder="Enter Your Messgage..."></textarea>
<input type="submit" value="Subit">
</form>
</div>
</section>
<footer class="copyright">
<div class="up" id="up">
<i class="fas fa fa-chevron-up"></i>
</div>
<p>© 2020 Karanvir S. Ghattoraya</p>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/aos#next/dist/aos.js"></script>
<script src="main.js"></script>
</body>
</html>

$(document).ready(function () {
$('.menu-toggler').on('click', function () {
$(this).toggleClass('open');
$('.top-nav').toggleClass('open');
});
$('.top-nav .nav-link').on('click', function () {
$('.menu-toggler').removeClass('open');
$('.top-nav').removeClass('open');
});
$('nav a[href*="#"]').not("#blog").on("click", function () {
$("#js-menu").toggleClass('active');
$("html, body").animate({
scrollTop: $($(this).attr("href")).offset().top
}, 500);
});
$("#up").on("click", function () {
$("html, body").animate({
scrollTop: 0
}, 1000);
});
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue';
color: #e9e9e9;
}
body {
text-align: center;
}
section {
padding: 6rem 0;
}
a {
text-decoration: none;
color: #e9e9e9;
}
p {
font-weight: 300;
font-size: 1.8rem;
}
img {
width: 100%;
}
/*End global*/
/*Start reusable*/
.container {
width: 90%;
max-width: 120rem;
height: 100%;
margin: 0 auto;
position: relative;
padding: .3rem;
}
.section-heading {
text-align: center;
margin-bottom: 2.5rem;
}
.section-heading h1 {
font-size: 3.5rem;
color: black;
text-transform: uppercase;
font-weight: 300;
position: relative;
margin-bottom: 1rem;
}
.section-heading h1::before,
.section-heading h1::after {
content: '';
position: absolute;
bottom: -5rem;
left: 50%;
transform: translateX(-50%);
background-color: rgba(255, 255, 255, 0.75);
}
.section-heading h1::before {
width: 10rem;
height: 3px;
border-radius: 0.8rem;
bottom: -4.5rem;
}
.section-heading h6 {
font-size: 1.6rem;
font-weight: 300;
}
.has-margin-right {
margin-right: 5rem;
}
/*End reusable*/
/*Start header*/
header {
width: 100%;
height: 100%;
}
.top-nav {
width: 100%;
height: 100vh;
position: fixed;
top: -100vh;
z-index: 50;
background-color: #16162d;
border-bottom-right-radius: 100%;
border-bottom-left-radius: 100%;
transition: all 650ms cubic-bezier(1, 0, 0, 1);
}
.nav-list {
list-style: none;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
li {
margin: 0.2rem;
}
#font-face {
font-family: 'The Historia Demo';
src: url('/fonts/the_historia_demo-webfont.woff2') format('woff2'), url('fonts/the_historia_demo-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
.nav-link {
font-family: "The Historia Demo", sans-serif;
font-size: 2rem;
padding: 1rem;
}
.nav-link:hover,
.nav-link:focus {
background: linear-gradient(to top, #ffe838, #fd57bf);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.top-nav.open {
top: 0;
border-radius: initial;
}
.menu-toggler {
position: absolute;
top: 5rem;
right: 5rem;
width: 5rem;
height: 4rem;
display: flex;
flex-direction: column;
justify-content: space-between;
cursor: pointer;
z-index: 1500;
transition: transform 650ms ease-out;
}
.menu-toggler.open {
transform: rotate(-45deg);
}
.bar {
background: linear-gradient(to right, #ffe838, #fd57bf);
width: 100%;
height: 4px;
border-radius: .8rem;
}
.bar.half {
width: 50%;
}
.bar.start {
transform-origin: right;
transition: transform 650ms cubic-bezier(0.54, -0.81, 0.057, 0.57);
}
.open .bar.start {
transform: rotate(-450deg) translateX(.8rem);
}
.bar.end {
align-self: flex-end;
transform-origin: left;
transition: transform 650ms cubic-bezier(0.54, -0.81, 0.057, 0.57);
}
.open .bar.end {
transform: rotate(-450deg) translateX(-.8rem);
}
.landing-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
text-align: center;
z-index: 1;
}
.landing-text h1 {
font-size: 5rem;
font-weight: 500;
font-family: "The Historia Demo", sans-serif;
background: linear-gradient(to top, #ffe838 30%, #fd57bf);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
padding: 1rem;
user-select: none;
line-height: 1.1;
}
.landing-text h6 {
font-size: 1.5rem;
font-weight: 300;
margin-bottom: 0.4rem;
}
.landingbtn {
margin: 1rem auto;
background-color: #16162d;
height: 3rem;
width: 15rem;
cursor: pointer;
transition: 0.2s ease-in;
border-radius: 1rem;
display: flex;
justify-content: center;
text-transform: capitalize;
opacity: 0.5;
}
.landingbtn p {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue';
font-size: 2rem;
}
.landingbtn:hover {
transform: scale(1.05);
background-color: #221e3f;
}
/*End header*/
/*Start about*/
.about .container {
display: flex;
align-items: center;
justify-content: center;
margin-top: 60rem;
}
.about-heading {
text-align: center;
text-transform: uppercase;
line-height: 0;
margin-bottom: 6rem;
}
.about-heading h1 {
font-size: 10rem;
opacity: .3;
}
.about-heading h6 {
font-size: 2rem;
font-weight: 300;
}
.profile-img {
flex: 1;
margin-right: 5rem;
}
.about-details {
flex: 1;
}
.social-media {
margin-top: 5rem;
}
.social-media i {
font-size: 5rem;
transition: color 650ms;
padding: 1rem;
}
.fa-linkedin:hover {
color: #0e76a8;
}
.fa-github:hover {
color: #211F1F;
}
.fa-soundcloud:hover {
color: #ff7700;
}
/*End about*/
/*Start services*/
.my-skills {
margin-top: 3.5rem;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
grid-gap: 2.5rem;
text-align: center;
}
#media only screen and (max-width: 600px) {
.nav-list {
display: block;
}
.nav-list{
margin-top: 48%;
margin-left: -7%;
}
.nav-list li{
margin-top: 10px;
}
.menu-toggler { width: 4rem;
height: 3rem;right: 4rem;}
.landing-text h1 {
font-size: 3rem; margin-bottom: 20px;}
.landingbtn { width: 10rem;}
.landingbtn p{font-size: 24px;}
.about-details{margin-left: -27%;}
.about-heading h1 {
font-size: 6rem;}
}
<body>
<header>
<div class="menu-toggler">
<div class="bar half start"></div>
<div class="bar"></div>
<div class="bar half end"></div>
</div>
<nav class="top-nav">
<ul class="nav-list">
<li>
Home
</li>
<li>
About
</li>
<li>
Services
</li>
<li>
Portfolio
</li>
<li>
Experience
</li>
<li>
Contact
</li>
</ul>
</nav>
<div class="landing-text">
<h1>Karanvir S. Ghatt</h1>
<h6>Full Stack Developer | Scientist | Artist </h6>
<h6> I Am
<a href="" class="typewrite" data-period="2000" data-type='[ " Creative.", " Driven.", " Analytical." ]'>
<span class="wrap"></span>
</a>
</h6>
<a class="landingbtn" href="#portfolio">
<p> See my work </p>
</a>
</div>
</header>
<section id="about" class="about">
<div class="container">
<div class="prolife-img" data-aos="fade-right" data-aos-delay="200">
<img src="images/profile(1).png" alt="avatar image">
</div>
<div class="about-details" data-aos="fade-left" data-aos-delay="400">
<div class="about-heading">
<h1>About</h1>
</div>
<p>
A confident individual offering skills in a range of areas,
from anlytical and formulation chemistry to, web development,
backend, hospitality and sales.
Self-taught full stack developer, offering skills in web-design,
python, data science and analysis.
</p>
<div class="social-media">
<ul class="nav-list">
<li>
<a href="#" class="icon-link">
<i class="fab fa-linkedin"></i>
</a>
</li>
<li>
<a href="#" class="icon-link">
<i class="fab fa-github"></i>
</a>
</li>
<li>
<a href="#" class="icon-link">
<i class="fab fa-soundcloud"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</section>
<section class="services" id="services">
<div class="container">
<div class="section-heading">
<h1 data-aos="zoom-in" data-aos-delay="100">Services</h1>
<h6 data-aos="zoom-in" data-aos-delay="100">What I Can Do For You</h6>
</div>
<div class="my-skills">
<div class="skill" data-aos="fade-left" data-aos-delay="300">
<div class="icon-container">
<i class="fas fa-code"></i>
</div>
<h1>Design & Development</h1>
<p>
Good web design is more thanjust pixelated information.
It should be seamless, it should be invisible.
In my hands, every project is bespoke and tailored to your specific needs and requirements.
In a few short months I have developed and deployed a number of websites, find our more in my portfolio.
</p>
</div>
<div class="skill" data-aos="fade-in" data-aos-delay="150">
<div class="icon-container">
<i class="fa fa-cogs"></i>
</div>
<h1>Design & Deployment</h1>
<p>
Over the last few months I have devloped my python skills, developing a number of applications,
and sucessfully depolying a few. I am drawn to data analysis and visulation, data can truly be beautiful.
Although not an expert, far from it, I am working everyday to expand my skillset.
What I have developed so far, in a short period of time, can show what I can do.
</p>
</div>
<div class="skill" data-aos="fade-right" data-aos-delay="300">
<div class="icon-container">
<i class="fa fa-dashboard"></i>
</div>
<h1>Versitility</h1>
<p>
I take pride in having a versitile skill-set, from sales, to business, to programming, to life sciences, to music and creative design.
Those 'soft-skils', and my exposiure to a range of feilds and industries, means that I'm sure there's some way I can be of service.
These are more words, included to make this look right.
</p>
</div>
</div>
</div>
</section>
<section class="portfolio" id="portfolio">
<div class="container">
<div class="section-heading" data-aos="zoom-in" data-aos-delay="100">
<h1 data-aos="fade-right" data-aos-delay="150">Portfolio</h1>
<h6 data-aos="fade-left" data-aos-delay="150">Veiw Recent Projects</h6>
</div>
</div>
<div class="row" data-aos="fade-down" data-aos-delay="200">
<!-- Portfolio Item 1 | AB Removals -->
<div class="column">
<div class="portfolio-container">
<div class="item" id="1">
<img src="/images/abremovals.png" style="width:100%" alt="">
<div class="text">
<h3>PROJECT 1</h4>
<p>Short Description</p>
</div>
<div class="button">Learn More</div>
</div>
</div>
<!-- Portfolio Item 2 | Resume -->
<div class="portfolio-container">
<div class="item" id="2">
<img src="/images/resume.png" style="width:100%" alt="">
<div class="text">
<h3>PROJECT 2</h4>
<p>Short Description</p>
</div>
<div class="button">Learn More</div>
</div>
</div>
</div>
<!-- Portfolio Item 3 | Resume -->
<div class="column">
<div class="portfolio-container">
<div class="item" id="3">
<img src="/images/portfolio.png" style="width:100%" alt="">
<div class="text">
<h3>PROJECT 3</h4>
<p>Short Description</p>
</div>
<div class="button">Learn More</div>
</div>
</div>
<!-- Portfolio Item 4 | Data Projects -->
<div class="portfolio-container">
<div class="item" id="4">
<img src="/images/covid.png" style="width:100%" alt="">
<div class="text">
<h3>PROJECT 4</h4>
<p>Short Description</p>
</div>
<div class="button">Learn More</div>
</div>
</div>
</div>
<!-- Portfolio Item 5 | Colour Detection -->
<div class="column">
<div class="portfolio-container">
<div class="item" id="5">
<img src="/images/testimage.gif" style="width:100%" alt="">
<div class="text">
<h3>PROJECT 5</h4>
<p>Short Description</p>
</div>
<div class="button">Learn More</div>
</div>
</div>
<!-- Portfolio Item 6 | Face Detection -->
<div class="portfolio-container">
<div class="item" id="6">
<img src="/images/testgiftwo.gif" alt="">
<div class="text">
<h3>PROJECT 6</h4>
<p>Short Description</p>
</div>
<div class="button">Learn More</div>
</div>
</div>
</div>
<!-- Portfolio Item 7 | Colour Detection -->
<div class="column">
<div class="portfolio-container">
<div class="item" id="7">
<img src="/images/testimage.gif" style="width:100%" alt="">
<div class="text">
<h3>PROJECT 7</h4>
<p>Short Description</p>
</div>
<div class="button">Learn More</div>
</div>
</div>
<!-- Portfolio Item 8 | Colour Detection -->
<div class="portfolio-container">
<div class="item" id="8">
<img src="/images/testimage.gif" style="width:100%" alt="">
<div class="text">
<h3>PROJECT 8</h4>
<p>Short Description</p>
</div>
<div class="button">Learn More</div>
</div>
</div>
</div>
<!-- Modal -->
<div id="preview" class="modal">
<div class="modal-content">
<span class="close">×</span>
<div id="details">
<h3 id="title"></h3>
<p id="info">SOME TEXT</p>
<div class="button" id="live">View</div>
<i class="fab fa-github-square" id="github"></i>
</div>
</div>
</div>
<!-- Item End -->
</section>
<section class="experience" id="experience">
<div class="container">
<div class="section-heading">
<h1 data-aos="fade-left" data-aos-delay="150">Work Experience</h1>
<h6 data-aos="fade-right" data-aos-delay="150">Previous Roles</h6>
</div>
<div class="timeline" data-aos="fade-down" data-aos-delay="200">
<ul>
<li class="date" data-date="Oct 2018 - Dec 2019">
<h1>Mettler Toledo | Sales Coordinator</h1>
<p>
The key aim of this role was to sell or introduce new corporate products or services to
established clients, along with prospecting for new business, the generation and qualification of sales leads.
Management of project execution actions and overall coordination between Internal and Outside Sales departments,
along with key stakeholders both inside, and beyond the business.
</p>
</li>
<li class="date" data-date="Mar 2018 - Jan 2019">
<h1>Vape.ABox | Flavourist - Lead Chemist</h1>
<p>
Set up and maintenance of the analytical laboratory on site, along with product procurement.
Demonstration of creation leadership potential through commercial projects & their execution.
Creation of new flavors and re-formulation of current flavours, with regards to specific technologies and delivery systems.
</p>
</li>
<li class="date" data-date="Mar 2018 - Jan 2019">
<h1>3M | QC Inhilations Chemist</h1>
<p>
Testing of pharmaceutical products for batch release, stability and complaints in line with departmental
and site procedures across a number of departments.
Completion of work and documentation to standards of compliance designated by external regulatory
bodies and internal Company procedures.
</p>
</li>
<h2>Further information regarding my work experience can be found in my Resume</h2>
</ul>
</div>
</div>
</section>
<section class="contact" id="contact">
<div class="container">
<div class="section-heading">
<h1 data-aos="fade-right" data-aos-delay="150">Contact</h1>
<h6 data-aos="fade-left" data-aos-delay="150">Contact Me</h6>
</div>
<form actions="" data-aos="fade-up" data-aos-delay="200">
<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="Enter Your Name..." required>
<label for="name">Email:</label>
<input type="email" id="email" name="email" placeholder="Enter Your E-mail..." required>
<label for="number">Contact Number:</label>
<input type="number" id="number" name="number" placeholder="Enter Your Contact Number...">
<label for="message">Message:</label>
<textarea name="subject" id="subject" cols="10" rows="10" placeholder="Enter Your Messgage..."></textarea>
<input type="submit" value="Subit">
</form>
</div>
</section>
<footer class="copyright">
<div class="up" id="up">
<i class="fas fa fa-chevron-up"></i>
</div>
<p>© 2020 Karanvir S. Ghattoraya</p>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/aos#next/dist/aos.js"></script>
</body>

footer with background image half in it

I have designed a footer for a website using Figma which looks like the image provided below:
see design Picture below
design image
Added working example
#f-text{
font-size: 14px;
color: #ffffff;
}
#footer-head{
font-family: 'Poppins', sans-serif;
font-size: 4.5em;
color: #ffffff;
}
#footer-text{
color: #818181;
font-size:17px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<footer class="footer mt-5" style="width:100%; padding-top: 100px; padding-bottom:40px; margin-top: 75px; position:absolute; background-color: #0C0C0C">
<div class="row">
<div class="col-sm-8 mx-auto my-auto text-center">
<div class="col-6">
<h5 id="footer-text">phone</h5>
<p style="color: #ffffff;" id="f-text">7879229242</p>
</div>
<div class="col-6 ">
<h5 id="footer-text">address</h5>
<ul class="list-unstyled mt-3" data-sal="slide-up" data-sal-delay="1400" data-sal-easing="ease-out-bouce" data-sal-duration="1200">
<p id="f-text">infront of kamal talkies, rajnandgaon, chattisgarah</p>
</ul>
</div>
<div class="col-6 text-center">
<h5 id="footer-text">follow us</h5>
<ul class="list-unstyled mt-3" data-sal="slide-up" data-sal-delay="2000" data-sal-easing="ease-out-bouce" data-sal-duration="1200">
<ol class="text-center">
<li style="display:inline-block; color: #ffffff;padding-right: 0.5em;" id="f-text">In</li>
<li style="display:inline-block;color: #ffffff; padding-right: 0.5em;" id="f-text">Fb</li>
<li style="display:inline-block;color: #ffffff; padding-right: 0.5em;" id="f-text">Tw</li>
<li style="display:inline-block;color: #ffffff; padding-right: 0.5em;" id="f-text">Yt</li>
</ol>
</ul>
</div>
</div>
<div class="col-sm-4">
<h5 id="footer-head">AW</h5>
<p style="color: #ffffff" id="f-text">AW Zone is a full-service Photography Agency based in rajnandgaon, founded by Ayush Waghmare.</p>
</div>
</div>
<p class="text-muted text-center mt-5 pt-5" id="footer-par" style="color:white; font-size: 13px;">Coded+designed by<span style="font-weight:medium;"> Semicolon</span> with passion and <i class="far fa-keyboard"></i></p>
</footer>
I need help with turning my design into working code.

Since you need the "background-image" to extend beyond the footer you cannot use background-image property on the footer itself.
Use a pseudo-element absolutely positioned and place the background image on that.
E.g.
body {
display: flex;
height: 100vh;
flex-direction: column;
justify-content: flex-end;
}
footer {
margin: 0 auto;
position: relative;
width: 80%;
height: 50vh;
background: black;
}
footer::after {
content: "";
width: 20vw;
height: 20vw;
background-image: url(http://www.fillmurray.com/460/460);
background-size: contain;
position: absolute;
right: 0;
top: 0;
transform: translate(50%, -50%);
z-index: -1
}
<footer>
</footer>

#f-text {
font-size: 14px;
color: #ffffff;
}
#footer-head {
font-family: 'Poppins', sans-serif;
font-size: 4.5em;
color: #ffffff;
}
#footer-text {
color: #818181;
font-size: 17px;
}
footer {
position: relative;
}
.footer-main {
width: 90%;
padding-top: 100px;
padding-bottom: 40px;
margin-top: 75px;
background-color: #0C0C0C;
}
.img-styling {
position: absolute;
right: 0;
top: 35px;
z-index: -1;
width: 30%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div>
<div class="footer-main">
<div class="row">
<div class="col-sm-8 mx-auto my-auto text-center">
<div class="col-6">
<h5 id="footer-text">phone</h5>
<p style="color: #ffffff;" id="f-text">7879229242</p>
</div>
<div class="col-6 ">
<h5 id="footer-text">address</h5>
<ul class="list-unstyled mt-3" data-sal="slide-up" data-sal-delay="1400" data-sal-easing="ease-out-bouce" data-sal-duration="1200">
<p id="f-text">infront of kamal talkies, rajnandgaon, chattisgarah</p>
</ul>
</div>
<div class="col-6 text-center">
<h5 id="footer-text">follow us</h5>
<ul class="list-unstyled mt-3" data-sal="slide-up" data-sal-delay="2000" data-sal-easing="ease-out-bouce" data-sal-duration="1200">
<ol class="text-center">
<li style="display:inline-block; color: #ffffff;padding-right: 0.5em;" id="f-text">In</li>
<li style="display:inline-block;color: #ffffff; padding-right: 0.5em;" id="f-text">Fb</li>
<li style="display:inline-block;color: #ffffff; padding-right: 0.5em;" id="f-text">Tw</li>
<li style="display:inline-block;color: #ffffff; padding-right: 0.5em;" id="f-text">Yt</li>
</ol>
</ul>
</div>
</div>
<div class="col-sm-4">
<h5 id="footer-head">AW</h5>
<p style="color: #ffffff" id="f-text">AW Zone is a full-service Photography Agency based in rajnandgaon, founded by Ayush Waghmare.</p>
</div>
</div>
<p class="text-muted text-center mt-5 pt-5" id="footer-par" style="color:white; font-size: 13px;">Coded+designed by<span style="font-weight:medium;"> Semicolon</span> with passion and <i class="far fa-keyboard"></i></p>
</div>
<img class="img-styling" src="https://www.androidcentral.com/sites/androidcentral.com/files/topic_images/2014/materialdesign_principles_metaphor.png" alt="image" />
</div>

How to fix the unusual webpage behaviour - multiple btn active of "portfolio"

I'm facing a problem in fixing up this unusual web page behavior. I have included Github page link. On removing nav tag the problem gets solved. But I need the nav tag.
I tried deleting the nav element from dev console and found the nav tag is effecting the below section "workshop_intro".
Here is the Github page link:
https://sarang13579.github.io/expt/
Github code:
https://github.com/sarang13579/expt
<section class="workshop_intro">
<div class="container py-2">
<h1 class="py-4"><strong>Gallery</strong></h1>
<p>Cut and Engraved products range</p>
<h2>PORTFOLIO</h2>
<div id="myBtnContainer">
<button class="btn active" onclick="filterSelection('all')"> Show all</button>
<button class="btn" onclick="filterSelection('wood')"> Wood Cutting and Engraving</button>
<button class="btn" onclick="filterSelection('stone')"> Stone Engraving</button>
<button class="btn" onclick="filterSelection('glass')"> Glass Engraving</button>
<button class="btn" onclick="filterSelection('others')"> Others Cutting and Engraving</button>
</div>
I expect the portfolio section "workshop_intro" button to highlight one at a time without removing nav tag.

The issue could be due to presence of another HTML element with the "active" class. the query document.getElementsByClassName("active"); is returning the li element from the nav bar
<li class="nav-item active">
<a class="nav-link px-5" href="index.html">Home</a>
</li>
To select the button more accurately you can use document.querySelector(".btn.active");
Below is the working code
filterSelection("all") // Execute the function and show all columns
function filterSelection(c) {
var x, i;
x = document.getElementsByClassName("column");
if (c == "all") c = "";
// Add the "show" class (display:block) to the filtered elements, and remove the "show" class from the elements that are not selected
for (i = 0; i < x.length; i++) {
w3RemoveClass(x[i], "show");
if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
}
}
// Show filtered elements
function w3AddClass(element, name) {
var i, arr1, arr2;
arr1 = element.className.split(" ");
arr2 = name.split(" ");
for (i = 0; i < arr2.length; i++) {
if (arr1.indexOf(arr2[i]) == -1) {
element.className += " " + arr2[i];
}
}
}
// Hide elements that are not selected
function w3RemoveClass(element, name) {
var i, arr1, arr2;
arr1 = element.className.split(" ");
arr2 = name.split(" ");
for (i = 0; i < arr2.length; i++) {
while (arr1.indexOf(arr2[i]) > -1) {
arr1.splice(arr1.indexOf(arr2[i]), 1);
}
}
element.className = arr1.join(" ");
}
// Add active class to the current button (highlight it)
var btnContainer = document.getElementById("myBtnContainer");
var btns = btnContainer.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function(){
var current = document.querySelector(".btn.active");
current.classList.remove("active");
this.classList.add("active");
});
}
.main {
max-width: 1000px;
margin: auto;
}
h1 {
font-size: 50px;
word-break: break-all;
}
.row {
margin: 8px -16px;
}
/* Add padding BETWEEN each column (if you want) */
.row,
.row > .column {
padding: 8px;
}
/* Create three equal columns that floats next to each other */
.column {
float: left;
width: 33.33%;
display: none; /* Hide columns by default */
}
/* Clear floats after rows */
.row:after {
content: "";
display: table;
clear: both;
}
/* Content */
.content {
background-color: white;
padding: 10px;
}
/* The "show" class is added to the filtered elements */
.show {
display: block;
}
/* Style the buttons */
.btn {
border: none;
outline: none;
padding: 12px 16px;
background-color: white;
cursor: pointer;
}
/* Add a grey background color on mouse-over */
.btn:hover {
background-color: #ddd;
}
/* Add a dark background color to the active button */
.btn.active {
background-color: #666;
color: white;
}
body, html {
font-family: 'Open Sans', sans-serif;
height: 100%;
overflow-x:hidden;
scroll-behavior: smooth;
}
* {
margin: 0;
padding: 0;
}
.row{
margin: 0;
}
/*HEADER*/
/* Header Section */
.intro {
display: table;
width: 100%;
min-height: 88vh;
padding: 0;
background: url(../images/tooplate_middle_alt2.png) top center no-repeat;
background-color: #f6f6f6;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
.intro .fa {
font-size: 94px;
margin-bottom: 40px;
color: #fff;
}
.intro h3 {
color: #fff;
font-size: 45px;
font-weight: 700;
margin-top: 0;
margin-bottom: 10px;
text-transform: uppercase;
}
.intro p {
color: #fff;
font-size: 22px;
margin-top: 20px;
line-height: 28px;
margin-bottom: 40px;
}
.intro .btn-custom {
border-top: 1px solid rgba(255,255,255,0.4);
border-bottom: 1px solid rgba(255,255,255,0.4);
}
header .intro-text {
margin-top: 100px;
margin-bottom: 100px;
text-align: center;
background-color: rgba(0,0,0,0.5);
padding: 25px 25px;
}
.intro-text i{
color: white;
/*size: 20px;*/
}
.intro-text a{
cursor: pointer;
/*transition: all 0.9s;
transition-property: all;
transition-duration: 0.9s;
transition-timing-function: ease;
transition-delay: 0s;*/
}
/*GRID - SECTION*/
.grid-list{
padding-top: 25px;
padding-bottom: 25px;
}
.r1 {
margin-bottom: 25px;
}
.r2{
margin-bottom: 25px;
}
.round img {
position: relative;
width: 165px;
height: 165px;
border-radius: 50%;
border: 10px solid rgba(0,0,0,0.1);
}
.more{
cursor: pointer;
}
.updates{
padding: 50px 0 50px 0;
background: #f6f6f6;
}
.update{
padding: 20px 0 20px 0;
}
.partners{
padding: 20px 0 20px 0;
}
.thumbnail{
max-height: 100%;
max-width: 100%;
object-fit: cover;
margin: 10px 0 10px 0;
}
/*FOOTER*/
footer {
background: #333;
width: 100%;
/*padding: 30px 0 20px;*/
}
footer .container{
padding: 30px 0 20px;
}
footer .social ul li {
display: inline-block;
padding: 0 20px;
}
footer p {
color: #666;
font-size: 15px;
}
.company{
padding-top: 25px;
}
.title {
color: grey;
}
.round2 img {
position: relative;
max-width: 65%;
height: auto;
border-radius: 50%;
border: 10px solid rgba(255,255,255,0.1);
}
.fakeimg {
background-color: #aaa;
width: 100%;
padding: 20px;
}
.blg_img img {
width: 100%;
padding: 20px;
height:auto;
object-fit: cover
}
.blg_img2 img {
width: 100%;
padding: 20px;
height:200px;
object-fit: cover
}
.span4 img {
margin-right: 15px;
}
.span4 .img-left {
float: left;
}
.span4 .img-right {
float: right;
}
.contact{
padding: 50px 0;
}
.our_company{
padding: 0 15px;
}
.products{
}
.blog{
margin: 25px 0;
}
/*Laser technology*/
.pimg img{
width: 100%;
}
.laser_page h1{
color: #007BFF;
}
.product-detail ul li {
display: inline-block;
background-color: #f9f9f9;
border: none;
margin: 8px 15px;
}
.product-detail ul li a {
text-align: left;
font-size: 12px;
color: #6d7a83;
line-height: 16px;
text-decoration: none;
padding: 10px 10px;
}
.laser_tech .carousel-caption {
bottom: auto;
top: -10px;
right: -125px;
}
.laser_tech .carousel h5{
color: #007bff;
font-weight: bolder;
font-size: 20px;
}
.laser_tech .carousel-indicators li{
background-color: #007bff;
}
.laser_tech .carousel-control-next-icon{
background-color: #000;
}
.laser_tech .carousel-control-prev-icon{
background-color: #000;
}
.laser_page .card{
padding: 15px 0;
margin: 15px 0;
}
.laser_page .card-img-top {
height: 145px;
}
.laser_page .card-body .btn-primary{
bottom: 0;
}
.CO2 h2{
color: #007BFF;
}
.CO2 img, .fiber img, .marking img{
max-height: 260px;
max-width: 330px;
}
.fiber h2{
color: #007BFF;
}
.sz{
font-size: 12px;
}
.marking h2{
color: #007BFF;
}
/*Laser workshop*/
.workshop_intro h1{
color: #007BFF;
}
.laser_work .card{
padding: 15px 0;
margin: 15px 0;
}
.laser_work .card-img-top {
height: 180px;
}
.laser_work .card-body .btn-primary{
bottom: 0;
* {
box-sizing: border-box;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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?family=Open+Sans" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/portfolio.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body class="d-flex flex-column" style="min-height: 100vh">
<main class="flex-fill">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#"><img src="images/tooplate_logo.png"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link px-5" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link px-5" href="about.html">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link px-5" href="blog.html">Blogs</a>
</li>
<!-- <li class="nav-item">
<a class="nav-link px-5" href="products.html">Products</a>
</li> -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle px-5" href="products.html" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Products
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<!-- <div class="dropdown-divider"></div> -->
<a class="dropdown-item" href="products.html">Products Page</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="laser_technology.html">Laser Technology</a>
<a class="dropdown-item" href="instruments.html">Instruments</a>
<a class="dropdown-item" href="laser_workshop.html">Laser Job Shop</a>
<a class="dropdown-item" href="service.html">Service</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link px-5" href="contact.html">Contact</a>
</li>
</ul>
</div>
</nav>
<!-- Laser Technology -->
<!-- <section class="laser_tech">
<div class="container">
<h1 class="py-4">Laser Job Shop</h1>
<div class="row py-4">
<div class="col-md-6">
<div class="round">
<div class="fakeimg">Fake Image</div>
</div>
</div>
<div class="col-md-6">
<div class="round">
<div class="fakeimg">Fake Image</div>
</div>
</div>
</div>
</div>
</section> -->
<!-- Laser Workshop -->
<section class="workshop_intro">
<div class="container py-2">
<h1 class="py-4"><strong>Gallery</strong></h1>
<p>Cut and Engraved products range</p>
<h2>PORTFOLIO</h2>
<div id="myBtnContainer">
<button class="btn active" onclick="filterSelection('all')"> Show all</button>
<button class="btn" onclick="filterSelection('wood')"> Wood Cutting and Engraving</button>
<button class="btn" onclick="filterSelection('stone')"> Stone Engraving</button>
<button class="btn" onclick="filterSelection('glass')"> Glass Engraving</button>
<button class="btn" onclick="filterSelection('others')"> Others Cutting and Engraving</button>
</div>
<!-- Portfolio Gallery Grid -->
<div class="row">
<div class="column wood">
<div class="content">
<img src="images/mountains.jpg" alt="Mountains" style="width:100%">
<h4>Mountains</h4>
<p>Lorem ipsum dolor..</p>
</div>
</div>
<div class="column wood">
<div class="content">
<img src="images/lights.jpg" alt="Lights" style="width:100%">
<h4>Lights</h4>
<p>Lorem ipsum dolor..</p>
</div>
</div>
<div class="column wood">
<div class="content">
<img src="images/nature.jpg" alt="Nature" style="width:100%">
<h4>Forest</h4>
<p>Lorem ipsum dolor..</p>
</div>
</div>
<div class="column stone">
<div class="content">
<img src="images/cars1.jpg" alt="Car" style="width:100%">
<h4>Retro</h4>
<p>Lorem ipsum dolor..</p>
</div>
</div>
<div class="column stone">
<div class="content">
<img src="images/cars2.jpg" alt="Car" style="width:100%">
<h4>Fast</h4>
<p>Lorem ipsum dolor..</p>
</div>
</div>
<div class="column stone">
<div class="content">
<img src="images/cars3.jpg" alt="Car" style="width:100%">
<h4>Classic</h4>
<p>Lorem ipsum dolor..</p>
</div>
</div>
<div class="column glass">
<div class="content">
<img src="images/people1.jpg" alt="People" style="width:100%">
<h4>Girl</h4>
<p>Lorem ipsum dolor..</p>
</div>
</div>
<div class="column glass">
<div class="content">
<img src="images/people2.jpg" alt="People" style="width:100%">
<h4>Man</h4>
<p>Lorem ipsum dolor..</p>
</div>
</div>
<div class="column glass">
<div class="content">
<img src="images/people3.jpg" alt="People" style="width:100%">
<h4>Woman</h4>
<p>Lorem ipsum dolor..</p>
</div>
</div>
<div class="column others">
<div class="content">
<img src="images/people1.jpg" alt="People" style="width:100%">
<h4>Girl</h4>
<p>Lorem ipsum dolor..</p>
</div>
</div>
<div class="column others">
<div class="content">
<img src="images/people2.jpg" alt="People" style="width:100%">
<h4>Man</h4>
<p>Lorem ipsum dolor..</p>
</div>
</div>
<div class="column others">
<div class="content">
<img src="images/people3.jpg" alt="People" style="width:100%">
<h4>Woman</h4>
<p>Lorem ipsum dolor..</p>
</div>
</div>
<!-- END GRID -->
</div>
</div>
</section>
</main>
<!-- FOOTER -->
<footer>
<div class="container text-center">
<div class="row">
<div class="col-md-12">
<div class="social">
<ul>
<li><i class="fab fa-facebook-square"></i></li>
<li><i class="fab fa-linkedin"></i></li>
<li><i class="fab fa-twitter-square"></i></li>
</ul>
</div>
<p>© example</p>
</div>
</div>
</div>
</footer>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>

Bootstrap colums algining veritcaly not horizontaly

I am currently working on a some columns that include images as thumbnails. I can not work out why the columns are not aligning horizontally like I would like them to be.
Here is the piece of html I'm referring to:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Townsville Rentals</title>
<!-- Bootstrap Css -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="Index.css" rel="stylesheet">
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<div class="wrapper">
<div class="header">
<img class="logo" src="images/logo.png" alt="logo">
<ul class="nav pull-right">
<li class="nav-text">HOME</li>
<li class="nav-text">ABOUT</li>
<li class="nav-text">PROPERTY OWNERS</li>
<li class="nav-text">TENATS</li>
<li class="nav-text">CONTACT US</li>
<li class="nav-number">1300 702 305</li>
</ul>
</div>
</div>
<div class="wrapper">
<div class="top-content">
<img class="arrows" src="images/arrows.png" alt="arrows">
<img class="slider" src="images/slider.png" alt="slider">
</div>
</div>
<div class="wrapper">
<h3 class="thumbnail-title"> OUR GUARANTEE TO YOU </h3>
<div class="row">
<div class=".col-md-2"><img src="images/extra.png" alt="extra"></div>
<div class=".col-md-4"><img src="images/fees.png" alt="fees"></div>
<div class=".col-md-4"><img src="images/four.png" alt="four"></div>
<div class=".col-md-4"><img src="images/realistic.png" alt="real"></div>
<div class=".col-md-4"><img src="images/regular.png" alt="reg"></div>
<div class=".col-md-4"><img src="images/relax.png" alt="relax"></div>
</div>
</div>
<div class="wrapper">
<div class="">
</div>
</div>
</body>
</html>
And here's the associated CSS:
html,body
{
margin-left: auto;
margin-right: auto;
width: 1370px;
}
.wrapper
{
margin-left: auto;
margin-right: auto;
width: 100%;
}
.header
{
margin: auto;
max-width: 1370px;
}
.logo
{
padding-left: 50px;
padding-top: 30px;
}
.nav
{
}
.nav-text
{
display: inline-block;
float: left;
font-family: "GothamSSm Meduim";
font-size: 12px;
font-style: bold;
list-style-type: none;
max-height: 100%;
max-width: 100%;
overflow: hidden;
padding-right: 70px;
top: 45px;
}
.nav-number
{
color: #45aa4a;
display: inline;
float: right;
font-family: "GothamSSm Meduim";
list-style-type: none;
max-height: 100%;
max-width: 100%;
overflow: hidden;
padding-right: 65px;
top: 45px;
}
.arrows
{
padding-left: 575px;
padding-right: 685px;
padding-top: 45px;
}
.slider
{
margin-left: auto;
margin-right: auto;
max-height: 100%;
max-width: 100%;
padding-top: 60px;
}
.thumbnail-title
{
margin-left: auto;
margin-right: auto;
padding-top: 250px;
text-align: center;
}
.thumbnail
{
border: 2px solid red;
display: inline;
}

Actually the whole width of the screen is divided in to 12 sections for all kinds of screen according to bootstrap grid system
So you have to divide according to grig system only
Please dont you .[dot] before class name in the tag like this
<div class=".col-md-2"><img src="images/extra.png" alt="extra"></div>
^
dot should be used in writing styles only!
for yout requirement try like this:
<div class="row">
<div class="col-md-2">
<img src="layouts/08.png" alt="extra"></div>
<div class="col-md-2">
<img src="layouts/11.png" alt="fees"></div>
<div class="col-md-2">
<img src="layouts/11.png" alt="four"></div>
<div class="col-md-2">
<img src="layouts/11.png" alt="real"></div>
<div class="col-md-2">
<img src="layouts/11.png" alt="reg"></div>
<div class="col-md-2">
<img src="layouts/11.png" alt="relax"></div>
</div>

Please refer to [jsfiddle]http://jsfiddle.net/matildayipan/vzg9fhot/3/
You added dot in your class attributes as it is mentioned.
But you also missed the class declaration in your css
<div class="wrapper">
<div class="header">
<img class="logo" src="images/logo.png" alt="logo">
<ul class="nav pull-right">
<li class="nav-text">HOME</li>
<li class="nav-text">ABOUT</li>
<li class="nav-text">PROPERTY OWNERS</li>
<li class="nav-text">TENATS</li>
<li class="nav-text">CONTACT US</li>
<li class="nav-number">1300 702 305</li>
</ul>
</div>
</div>
<div class="wrapper">
<div class="top-content">
<img class="arrows" src="images/arrows.png" alt="arrows">
<img class="slider" src="images/slider.png" alt="slider">
</div>
</div>
<div class="wrapper">
<h3 class="thumbnail-title"> OUR GUARANTEE TO YOU </h3>
<div class="row">
<div class="col-md-2"><img src="images/extra.png" alt="extra"></div>
<div class="col-md-4"><img src="images/fees.png" alt="fees"></div>
<div class="col-md-4"><img src="images/four.png" alt="four"></div>
<div class="col-md-4"><img src="images/realistic.png" alt="real"></div>
<div class="col-md-4"><img src="images/regular.png" alt="reg"></div>
<div class="col-md-4"><img src="images/relax.png" alt="relax"></div>
</div>
</div>
<div class="wrapper">
<div class="">
</div>
</div>
Css:
.col-md-2{
//add your css
}
.col-md-4{
//add your css
}
html,body {
margin-right: auto;
margin-left: auto;
width:1370px;
}
.wrapper{
margin-right: auto;
margin-left: auto;
width:100%;
}
/* Start of header*/
.header{
margin:auto;
max-width: 1370px;
}
.logo{
padding-left:50px;
padding-top:30px;
}
.nav-text{
display: inline-block;
list-style-type:none;
top:45px;
float: left;
font-family: "GothamSSm Meduim";
font-size:12px;
font-style:bold;
padding-right: 70px;
max-width:100%;
max-height: 100%;
overflow: hidden;
}
.nav-number{
display: inline;
list-style-type:none;
float:right;
top:45px;
padding-right:65px;
color:#45aa4a;
font-family: "GothamSSm Meduim";
max-width:100%;
max-height: 100%;
overflow:hidden;
}
/* End of header container*/
/* Start of top content*/
.arrows{
padding-right:685px;
padding-left: 575px;
padding-top:45px;
}
.slider{
margin-left: auto;
margin-right: auto;
padding-top:60px;
max-width:100%;
max-height: 100%;
}
/*end */
.thumbnail-title {
padding-top: 250px;
text-align: center;
margin-left: auto;
margin-right: auto;
}
.thumbnail{
display:inline;
border: 2px solid red;
}