How to create a CSS border for this CV? - html

I created a cv using HTML and CSS. But I tried to apply a CSS border around it but it didn't work.
The cv here is displayed in the center of the web page.
The HTML and CSS codes of the CV are shown below.
When adding the Border, if you want, change the HTML and CSS codes that I have already coded.
body {
font-family: sans-serif, Arial, Helvetica, sans-serif;
margin-top: 0;
}
/*********Header Section************/
#name {
text-align: center;
color: white;
}
#tp-no {
text-align: center;
padding-top: 5px;
color: white;
}
#mail {
text-align: center;
margin-top: -3px;
color: white;
}
header {
line-height: 4px;
}
#name .color-name {
color: #14a800;
}
header {
padding-top: 10px;
margin: auto;
max-width: 700px;
background-color: #3c4041f1;
height: 6rem;
}
/*********main-details-sec************/
#main-details-sec {
margin-top: 3em;
}
.column {
float: left;
width: 50%;
}
#main-details-sec {
content: "";
display: table;
clear: both;
margin: auto;
max-width: 600px;
}
.ol-list {
line-height: 25px;
}
.education {
color: #14a800;
}
.personal {
color: #14a800;
}
.school {
color: #14a800;
}
.contact {
color: #14a800;
}
span {
font-weight: bold;
}
/*********second-details-sec************/
#second-details-sec {
margin: auto;
max-width: 600px;
}
.other-edu {
color: #14a800;
}
.Extra {
color: #14a800;
}
<!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.0">
<link rel="stylesheet" href="style.css">
<title>My CV</title>
</head>
<body>
<header>
<h1 id="name"> <span class="color-name">Pathum</span> Sandeepa</h1>
<h4 id="tp-no">+94 76 XXXX XXX</h4>
<h4 id="mail">pathumXXXXXXX#gmail.com</h4>
</header>
<div id="main-details-sec">
<!--Education Details-->
<div class="column">
<h2 class="education">Education</h2>
<h4 class="exam-ol">G.C.E (O/L) Examination (XXXX)</h4>
<ul class="ol-list">
<li>Mathematics <span>X</span></li>
<li>ICT <span>X</span></li>
<li>Sinhala <span>X</span></li>
<li>Buddhist <span>X</span></li>
<li>History <span>X</span></li>
<li>Science <span>X</span></li>
<li>Life Skill & Civic Education <span>X</span></li>
<li>Art <span>X</span></li>
<li>English <span>X</span></li>
</ul>
<h4 class="exam-al">G.C.E (A/L) Examination (XXXX)</h4>
<ul class="al-list">
<li>Science for Technology <span>X</span></li>
<li>Information & Communication Technology <span>X</span></li>
<li>Engineering Technology <span>X</span></li>
</ul>
</div>
<!--Personal Details-->
<div class="column">
<div class="personal-details">
<h2 class="personal">Personal Details</h2>
<ul class="personal-list">
<li id="personal-data"> Full Name - Pathum XXXXXXX XXXXXXXXXXXXXX</li>
<li id="personal-data"> Name with initials - X.X. Pathum XXXXXXXX</li>
<li id="personal-data"> Date of Birth - XXXX.XX.XX</li>
<li id="personal-data"> Gender - Male</li>
<li id="personal-data"> NIC No - XXXXXXXXXX</li>
<li id="personal-data"> Marital Status - Single</li>
</ul>
</div>
<!--School-->
<div class="school-details">
<h2 class="school">School</h2>
<ul class="school-list">
<li id="school-data">XP/XT XXXXXXXXXX XXXX Vidyalaya</li>
<li id="school-data">X.X.X.XXXXXXXXX Central College, XXXXXXXX</li>
</ul>
</div>
<!--Contact-->
<div class="contact-details">
<h2 class="contact">Contact</h2>
<ul class="contact-list">
<li id="school-data">Mobile No- XXXXXXXX</li>
<li id="school-data">Gmail- pathumXXXXXXXXXXX.com</li>
<li id="school-data">Address- XXXXXXXX, XXXXXXXXXX</li>
</ul>
</div>
</div>
</div>
<div id="second-details-sec">
<div class="other-edu-details">
<h2 class="other-edu">Other Education Qualification</h2>
<ul class="other-edu-list">
<li id="other-edu-data">I followed Certificate Computer Course <strong>(MS Office Packege Certificate/Adobe Photoshop Certificate)</strong></li>
<li id="other-edu-data">I have successfully completed The <strong>Preparing to Manage Human Rescources Certificate Course</strong> conducted by Coursera</li>
<li id="other-edu-data">I successfully completed <strong>The Fundamentals of Digital Marketing Certificate</strong> from Google Digital Garage</li>
<li id="other-edu-data">I successfully completed <strong>Certificate in Cyber Security & Networking Course</strong> conducted by Department of Computing NextGen Campus</li>
<li id="other-edu-data">I have studied the <strong>Computer Certificate in Hardware Course</strong> issued by Aono Naoko Vocational Computer Training Institute and obtained the certificate</li>
</ul>
</div>
<div class="Extra-details">
<h2 class="Extra">Extra Curricular Activities</h2>
<ul class="Extra-list">
<li id="Extra-data">I have Dhamma School exam Certificates</li>
<li id="Extra-data">I have won school Art Competitions and obtained art certificates</li>
</ul>
</div>
</div>
</body>
</html>
Preview:


You can add it to the body, just make sure you set the width and height values (I just used fit-content). You can then adjust your spacing on your left column so it's not touching the border.
Also, IDs should be unique, so I change those to classes.
I'd also recommend looking into flexboxes instead of using floats for your columns. https://css-tricks.com/snippets/css/a-guide-to-flexbox/
body {
font-family: sans-serif, Arial, Helvetica, sans-serif;
margin: 0 auto;
width: fit-content;
height: fit-content;
border: 1px solid black;
}
/*********Header Section************/
#name {
text-align: center;
color: white;
}
#tp-no {
text-align: center;
padding-top: 5px;
color: white;
}
#mail {
text-align: center;
margin-top: -3px;
color: white;
}
header {
line-height: 4px;
}
#name .color-name {
color: #14a800;
}
header {
padding-top: 10px;
margin: auto;
max-width: 700px;
background-color: #3c4041f1;
height: 6rem;
}
/*********main-details-sec************/
#main-details-sec {
margin-top: 3em;
}
.column {
float: left;
width: 50%;
}
#main-details-sec {
content: "";
display: table;
clear: both;
margin: auto;
max-width: 600px;
}
.ol-list {
line-height: 25px;
}
.education {
color: #14a800;
}
.personal {
color: #14a800;
}
.school {
color: #14a800;
}
.contact {
color: #14a800;
}
span {
font-weight: bold;
}
/*********second-details-sec************/
#second-details-sec {
margin: auto;
max-width: 600px;
}
.other-edu {
color: #14a800;
}
.Extra {
color: #14a800;
}
<!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.0">
<link rel="stylesheet" href="style.css">
<title>My CV</title>
</head>
<body>
<header>
<h1 id="name"> <span class="color-name">Pathum</span> Sandeepa</h1>
<h4 id="tp-no">+94 76 XXXX XXX</h4>
<h4 id="mail">pathumXXXXXXX#gmail.com</h4>
</header>
<div id="main-details-sec">
<!--Education Details-->
<div class="column">
<h2 class="education">Education</h2>
<h4 class="exam-ol">G.C.E (O/L) Examination (XXXX)</h4>
<ul class="ol-list">
<li>Mathematics <span>X</span></li>
<li>ICT <span>X</span></li>
<li>Sinhala <span>X</span></li>
<li>Buddhist <span>X</span></li>
<li>History <span>X</span></li>
<li>Science <span>X</span></li>
<li>Life Skill & Civic Education <span>X</span></li>
<li>Art <span>X</span></li>
<li>English <span>X</span></li>
</ul>
<h4 class="exam-al">G.C.E (A/L) Examination (XXXX)</h4>
<ul class="al-list">
<li>Science for Technology <span>X</span></li>
<li>Information & Communication Technology <span>X</span></li>
<li>Engineering Technology <span>X</span></li>
</ul>
</div>
<!--Personal Details-->
<div class="column">
<div class="personal-details">
<h2 class="personal">Personal Details</h2>
<ul class="personal-list">
<li class="personal-data"> Full Name - Pathum XXXXXXX XXXXXXXXXXXXXX</li>
<li class="personal-data"> Name with initials - X.X. Pathum XXXXXXXX</li>
<li class="personal-data"> Date of Birth - XXXX.XX.XX</li>
<li class="personal-data"> Gender - Male</li>
<li class="personal-data"> NIC No - XXXXXXXXXX</li>
<li class="personal-data"> Marital Status - Single</li>
</ul>
</div>
<!--School-->
<div class="school-details">
<h2 class="school">School</h2>
<ul class="school-list">
<li class="school-data">XP/XT XXXXXXXXXX XXXX Vidyalaya</li>
<li class="school-data">X.X.X.XXXXXXXXX Central College, XXXXXXXX</li>
</ul>
</div>
<!--Contact-->
<div class="contact-details">
<h2 class="contact">Contact</h2>
<ul class="contact-list">
<li class="school-data">Mobile No- XXXXXXXX</li>
<li class="school-data">Gmail- pathumXXXXXXXXXXX.com</li>
<li class="school-data">Address- XXXXXXXX, XXXXXXXXXX</li>
</ul>
</div>
</div>
</div>
<div id="second-details-sec">
<div class="other-edu-details">
<h2 class="other-edu">Other Education Qualification</h2>
<ul class="other-edu-list">
<li class="other-edu-data">I followed Certificate Computer Course <strong>(MS Office Packege Certificate/Adobe Photoshop Certificate)</strong></li>
<li class="other-edu-data">I have successfully completed The <strong>Preparing to Manage Human Rescources Certificate Course</strong> conducted by Coursera</li>
<li class="other-edu-data">I successfully completed <strong>The Fundamentals of Digital Marketing Certificate</strong> from Google Digital Garage</li>
<li class="other-edu-data">I successfully completed <strong>Certificate in Cyber Security & Networking Course</strong> conducted by Department of Computing NextGen Campus</li>
<li class="other-edu-data">I have studied the <strong>Computer Certificate in Hardware Course</strong> issued by Aono Naoko Vocational Computer Training Institute and obtained the certificate</li>
</ul>
</div>
<div class="Extra-details">
<h2 class="Extra">Extra Curricular Activities</h2>
<ul class="Extra-list">
<li class="Extra-data">I have Dhamma School exam Certificates</li>
<li class="Extra-data">I have won school Art Competitions and obtained art certificates</li>
</ul>
</div>
</div>
</body>
</html>


Do you mean something like this?
body{
font-family: sans-serif,Arial, Helvetica, sans-serif;
margin-top: 0;
}
#allcv {
border: 2px solid red;
max-width: 700px;
margin: 0 auto;
}
/*********Header Section************/
#name{
text-align: center;
color: white;
}
#tp-no{
text-align: center;
padding-top: 5px;
color: white;
}
#mail{
text-align: center;
margin-top: -3px;
color: white;
}
header{
line-height: 4px;
}
#name .color-name{
color: #14a800 ;
}
header{
padding-top: 10px;
margin: auto;
max-width: 700px;
background-color: #3c4041f1;
height: 6rem;
}
/*********main-details-sec************/
#main-details-sec{
margin-top: 3em;
}
.column{
float: left;
width: 50%;
}
#main-details-sec{
content: "";
display: table;
clear: both;
margin: auto;
max-width: 600px;
}
.ol-list{
line-height: 25px;
}
.education {
color: #14a800 ;
}
.personal{
color: #14a800 ;
}
.school{
color: #14a800 ;
}
.contact{
color: #14a800 ;
}
span{
font-weight: bold;
}
/*********second-details-sec************/
#second-details-sec{
margin: auto;
max-width: 600px;
}
.other-edu{
color: #14a800 ;
}
.Extra{
color: #14a800 ;
}
<!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.0">
<link rel="stylesheet" href="style.css">
<title>My CV</title>
</head>
<body>
<header>
<h1 id="name"> <span class="color-name">Pathum</span> Sandeepa</h1>
<h4 id="tp-no">+94 76 XXXX XXX</h4>
<h4 id="mail">pathumXXXXXXX#gmail.com</h4>
</header>
<div id="allcv">
<div id="main-details-sec">
<!--Education Details-->
<div class="column">
<h2 class="education">Education</h2>
<h4 class="exam-ol">G.C.E (O/L) Examination (XXXX)</h4>
<ul class="ol-list">
<li>Mathematics <span>X</span></li>
<li>ICT <span>X</span></li>
<li>Sinhala <span>X</span></li>
<li>Buddhist <span>X</span></li>
<li>History <span>X</span></li>
<li>Science <span>X</span></li>
<li>Life Skill & Civic Education <span>X</span></li>
<li>Art <span>X</span></li>
<li>English <span>X</span></li>
</ul>
<h4 class="exam-al">G.C.E (A/L) Examination (XXXX)</h4>
<ul class="al-list">
<li>Science for Technology <span>X</span></li>
<li>Information & Communication Technology <span>X</span></li>
<li>Engineering Technology <span>X</span></li>
</ul>
</div>
<!--Personal Details-->
<div class="column">
<div class="personal-details">
<h2 class="personal">Personal Details</h2>
<ul class="personal-list">
<li id="personal-data"> Full Name - Pathum XXXXXXX XXXXXXXXXXXXXX</li>
<li id="personal-data"> Name with initials - X.X. Pathum XXXXXXXX</li>
<li id="personal-data"> Date of Birth - XXXX.XX.XX</li>
<li id="personal-data"> Gender - Male</li>
<li id="personal-data"> NIC No - XXXXXXXXXX</li>
<li id="personal-data"> Marital Status - Single</li>
</ul>
</div>
<!--School-->
<div class="school-details">
<h2 class="school">School</h2>
<ul class="school-list">
<li id="school-data">XP/XT XXXXXXXXXX XXXX Vidyalaya</li>
<li id="school-data">X.X.X.XXXXXXXXX Central College, XXXXXXXX</li>
</ul>
</div>
<!--Contact-->
<div class="contact-details">
<h2 class="contact">Contact</h2>
<ul class="contact-list">
<li id="school-data">Mobile No- XXXXXXXX</li>
<li id="school-data">Gmail- pathumXXXXXXXXXXX.com</li>
<li id="school-data">Address- XXXXXXXX, XXXXXXXXXX</li>
</ul>
</div>
</div>
</div>
<div id="second-details-sec">
<div class="other-edu-details">
<h2 class="other-edu">Other Education Qualification</h2>
<ul class="other-edu-list">
<li id="other-edu-data">I followed Certificate Computer Course <strong>(MS Office Packege Certificate/Adobe Photoshop Certificate)</strong></li>
<li id="other-edu-data">I have successfully completed The <strong>Preparing to Manage Human Rescources Certificate Course</strong> conducted by Coursera</li>
<li id="other-edu-data">I successfully completed <strong>The Fundamentals of Digital Marketing Certificate</strong> from Google Digital Garage</li>
<li id="other-edu-data">I successfully completed <strong>Certificate in Cyber Security & Networking Course</strong> conducted by Department of Computing NextGen Campus</li>
<li id="other-edu-data">I have studied the <strong>Computer Certificate in Hardware Course</strong> issued by Aono Naoko Vocational Computer Training Institute and obtained the certificate</li>
</ul>
</div>
<div class="Extra-details">
<h2 class="Extra">Extra Curricular Activities</h2>
<ul class="Extra-list">
<li id="Extra-data">I have Dhamma School exam Certificates</li>
<li id="Extra-data">I have won school Art Competitions and obtained art certificates</li>
</ul>
</div>
</div>
</div>
I created another div called allcv that cluster every other div (except header) and center in the middle of page. If you want, you can put the header inside that div to.
Hope I helped.

Related

Coding <a> under <ul> confusion

I'm trying to get my codes work but not sure where's the issue. The links for the first 2 classes don't work and I cannot click on to open linked pages.
Here's the HTML:
footer {
width: calc(100%-80px);
padding: 40px 40px;
margin-top: 20px;
background-color: #111;
overflow: hidden;
}
footer ul {
width: fit-content;
float: left;
padding-left: 20px;
}
footer ul li {
display: block;
list-style-type: none;
font-family: 'Catamaran';
font-size: 24px;
color: #fff;
line-height: 40px;
}
.footer-links-news {
display: none;
}
.footer-sm {
width: 50px;
float:right;
}
.footer-sm img {
width: 100%;
margin-bottom: 10px;
}
<footer>
<ul class="footer-links-main">
<li>Home</li>
<li>Developer</li>
<li>Vietnam Virtual Tour</li>
<li>Hanoi Photo Gallery</li>
<li>Contact</li>
</ul>
<ul class="footer-links-news">
<li>Lastest News on Vietnam News</li>
<li>Soptlights</li>
<li>Economy</li>
<li>Life & Style</li>
<li>Enviroment</li>
</ul>
<div class="footer-sm">
<a href="#">
<img src="Images/plugsin-icon-yt.png" alt="Youtube Icon">
</a>
<a href="#">
<img src="Images/plugsin-icon-fb.png" alt="Facebook Icon">
</a>
<a href="#">
<img src="Images/plugsin-icon-tt.png" alt="Twitter Icon">
</a>
</div>
</footer>

The text of the link needs to go inside the anchor:
<!-- this -->
Home
<!-- not this -->
Home

You need the anchor to actual contain something so it is clickable.
<ul class="footer-links-main">
<li>Home</li>
<li>Developer</li>

Text should be between HERE tags
<footer>
<ul class="footer-links-main">
<li>Home</li>
<li>Developer</li>
<li>Vietnam Virtual Tour</li>
<li>Hanoi Photo Gallery</li>
<li>Contact</li>
</ul>
<ul class="footer-links-news">
<li>Lastest News on Vietnam News</li>
<li>Soptlights</li>
<li>Economy</li>
<li>Life & Style</li>
<li>Enviroment</li>
</ul>
</footer>

Why doesnt my custom font load even though works in local?

Im trying to use a Raleway font family for my heading in my website. In local testing it works fine but when pushed to git and run on git pages it doesnt work. I have even specified the text font TTF file in directory but still doesnt work. What am I doing wrong?
The website
https://codesniper99.github.io/Portfolio/
my html index file
<!DOCTYPE html>
<!-- copyright akhil vaid if anybody copies this my code is here so good luck 2017UCO1521 -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="main.css">
</head>
<body style="color:black"></body>
<div class="container text-pri" style="font-family:Open-sans; padding: 0%;margin-right: 0%; ">
<!-- Header -->
<div class="parallax">
<span class="topbar" > ABOUT</span>
<span class="topbar" > SKILLS</span>
<span class="topbar" > EXPERIENCE</span>
<span class="topbar" > ACHIEVEMENTS</span>
<span class="topbar" > CONTACT ME</span>
<span class="center rcorners2 " style="font-family:Raleway ;font-size: 4.0em;">
<span style="color: #E04343;">A</span><span >KHIL</span>
<span style="color: #FFE800;">V</span><span>AID</span>
</span>
</div>
<!-- Introduction -->
<div class="intro rcorners1">
<h3 style="text-align: center;">ABOUT ME</h3><br>
<p>
I'm a second year Under-graduate student currently pursuing Computer Science and Engineering at
NSIT, New Delhi, India. I'm new to the industry and keen to expand my skill set.<br> <br> I have a curiosity in
the field of Web Development and Competitive Programming and using it to solve real world
problems and am willing to take up opportunities to delve into it.
<br>
<br>
</p>
</div>
<!-- Skills -->
<h5><b>
Skills and Technologies
</b>
</h5>
<ul>
<li>C++ (GNU 14.2), C
</li>
<br>
<li>
Java
</li>
<br>
<li>
Python 3.1
</li>
<br>
<li>
HTML (HTML -5, Canvas)
</li>
<br>
<li>
CSS3 (Boot-Strap, Materialize CSS Frameworks)
</li>
<br>
<li>
JavaScript (Learning)
</li>
<br>
<li>
ExpressJS (Learning)
</li><br>
<li>
Experience with Django Framework
</li><br>
<li>
Knowledge of Git and VCS
</li><br>
</ul>
<br>
<!-- Experience -->
<h5><b>
Experience
</b>
</h5>
<p>
<ul>
<li> Currently working as Lead Back-end Developer at ICTS (IntuiComp TeraScience) under
guidance of IIT-Delhi and Dr. Arpan Kar. Developing a Learning Management system for
machine learning students and professionals alike to take part in and avail lectures and
conduct hackathons globally. Has been successfully launched in Afghanistan, Hong-Kong,
France. [www.icts-learninganalytics.com] (2018-present)
</li>
<br>
<li>
Working as Lead-developer for a trading firm in creating proprietary software using MQL4
on MT4 and Uniglobe platform(2017-present)
</li>
<br>
<li>
Created RESTful API and website for an Android application focusing on decreasing Smoking
Addiction in individuals by positive reinforcement. It used Django framework and we created
our own local server.
</li>
<br>
<li>
Made a working Hospital-Management DBMS (Database Management system) for 3rd
Semester project. It was created using JDBC in Netbeans IDE.
</li>
<br>
<li>
Made an Android application to maintain attendance for college students. Developed in
native android
</li>
<br>
<li>
Came in top 100 teams in SE- Asia region in ACM-ICPC online qualifier round.
</li>
</ul>
</p>
<!-- Academics -->
<h5><b>
Academic Achievements
</b>
</h5>
<ul>
<li>Qualified for ACM-ICPC Regionals 2018-19 at IIT Kharagpur and Kanpur
</li>
<br>
<li>
Secured AIR- 2412 rank in JEE Mains.
</li>
<br>
<li>
Top 10% of College Department (COE)
</li>
<br>
<li>
Top 10% in CBSE class 12th result
</li>
<br>
<li>
10 CGPA in class 10th
</li>
<br>
<li>
Secured and qualified as a JSTSE scholar from State of New Delhi
</li>
</ul>
</div>
</body>
</html>
my main.css
.intro
{
background-color: #f5d7f8;
margin-left: 64px;
margin-right: 64px;
font-size: 23px;
margin-top: 50px;
padding-left: 64px;
padding-right: 64px;
padding-bottom: 30px;
padding-top:35px;
}
.rcorners1 {
border-radius: 25px;
padding: 20px;
}
.rcorners2 {
border-radius: 12px;
padding: 15px;
}
#font-face { font-family: Raleway; src: url('text/Raleway/Raleway-Light.TTF'); }
#font-face { font-family: Open-sans; src: url('text/open-sans/OpenSans-Regular.TTF'); }
.parallax {
background-image: url("images/laptop.jpg"); opacity: 0.75;
min-height: 650px;
background-attachment: fixed;
background-position: center;
width:100%;
height:100%;
background-repeat: no-repeat;
background-size: cover;
}
.text-pri{
background-color:whitesmoke;
}
body {
margin: 0 !important;
padding: 0 !important;
}
.center {
position: absolute;
left:30%;
top: 40%;
width: 40%;
min-width: 300px;
text-align: center;
background-color: black;
color: white;
opacity: 0.85;
font-size: 48px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.topbar{
color:white;position: relative;
padding-top: 30px;
margin-top:30px;
margin-left:30px;
font-size: 20px;
}
my git repo if needed
https://github.com/codesniper99/Portfolio

use Raleway google font I have import Raleway font into css so you not need to call from anywhere. and use this as font-family: 'Raleway', sans-serif;
Online font using is good for your site.
also use font-wight css for making font bold light as font-weight:200 , font-weight:300 , font-weight:600 same as imported css.
#import url('https://fonts.googleapis.com/css?family=Raleway:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i');
.intro
{
background-color: #f5d7f8;
margin-left: 64px;
margin-right: 64px;
font-size: 23px;
margin-top: 50px;
padding-left: 64px;
padding-right: 64px;
padding-bottom: 30px;
padding-top:35px;
}
.rcorners1 {
border-radius: 25px;
padding: 20px;
}
.rcorners2 {
border-radius: 12px;
padding: 15px;
}
/* #font-face { font-family: Raleway; src: url('text/Raleway/Raleway-Light.TTF'); }
#font-face { font-family: Open-sans; src: url('text/open-sans/OpenSans-Regular.TTF'); } */
.parallax {
background-image: url("https://codesniper99.github.io/Portfolio/images/laptop.jpg"); opacity: 0.75;
min-height: 650px;
background-attachment: fixed;
background-position: center;
width:100%;
height:100%;
background-repeat: no-repeat;
background-size: cover;
}
.text-pri{
background-color:whitesmoke;
}
body {
margin: 0 !important;
padding: 0 !important;
}
.center {
position: absolute;
left:30%;
top: 40%;
width: 40%;
min-width: 300px;
text-align: center;
background-color: black;
color: white;
opacity: 0.85;
font-size: 48px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.topbar{
color:white;position: relative;
padding-top: 30px;
margin-top:30px;
margin-left:30px;
font-size: 20px;
}
<!DOCTYPE html>
<!-- copyright akhil vaid if anybody copies this my code is here so good luck 2017UCO1521 -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="main.css">
</head>
<body style="color:black"></body>
<div class="container text-pri" style="font-family:Open-sans; padding: 0%;margin-right: 0%; ">
<!-- Header -->
<div class="parallax">
<span class="topbar" > ABOUT</span>
<span class="topbar" > SKILLS</span>
<span class="topbar" > EXPERIENCE</span>
<span class="topbar" > ACHIEVEMENTS</span>
<span class="topbar" > CONTACT ME</span>
<span class="center rcorners2 " style="font-family: 'Raleway', sans-serif;font-size: 4.0em;">
<span style="color: #E04343;">A</span><span >KHIL</span>
<span style="color: #FFE800;">V</span><span>AID</span>
</span>
</div>
<!-- Introduction -->
<div class="intro rcorners1">
<h3 style="text-align: center;">ABOUT ME</h3><br>
<p>
I'm a second year Under-graduate student currently pursuing Computer Science and Engineering at
NSIT, New Delhi, India. I'm new to the industry and keen to expand my skill set.<br> <br> I have a curiosity in
the field of Web Development and Competitive Programming and using it to solve real world
problems and am willing to take up opportunities to delve into it.
<br>
<br>
</p>
</div>
<!-- Skills -->
<h5><b>
Skills and Technologies
</b>
</h5>
<ul>
<li>C++ (GNU 14.2), C
</li>
<br>
<li>
Java
</li>
<br>
<li>
Python 3.1
</li>
<br>
<li>
HTML (HTML -5, Canvas)
</li>
<br>
<li>
CSS3 (Boot-Strap, Materialize CSS Frameworks)
</li>
<br>
<li>
JavaScript (Learning)
</li>
<br>
<li>
ExpressJS (Learning)
</li><br>
<li>
Experience with Django Framework
</li><br>
<li>
Knowledge of Git and VCS
</li><br>
</ul>
<br>
<!-- Experience -->
<h5><b>
Experience
</b>
</h5>
<p>
<ul>
<li> Currently working as Lead Back-end Developer at ICTS (IntuiComp TeraScience) under
guidance of IIT-Delhi and Dr. Arpan Kar. Developing a Learning Management system for
machine learning students and professionals alike to take part in and avail lectures and
conduct hackathons globally. Has been successfully launched in Afghanistan, Hong-Kong,
France. [www.icts-learninganalytics.com] (2018-present)
</li>
<br>
<li>
Working as Lead-developer for a trading firm in creating proprietary software using MQL4
on MT4 and Uniglobe platform(2017-present)
</li>
<br>
<li>
Created RESTful API and website for an Android application focusing on decreasing Smoking
Addiction in individuals by positive reinforcement. It used Django framework and we created
our own local server.
</li>
<br>
<li>
Made a working Hospital-Management DBMS (Database Management system) for 3rd
Semester project. It was created using JDBC in Netbeans IDE.
</li>
<br>
<li>
Made an Android application to maintain attendance for college students. Developed in
native android
</li>
<br>
<li>
Came in top 100 teams in SE- Asia region in ACM-ICPC online qualifier round.
</li>
</ul>
</p>
<!-- Academics -->
<h5><b>
Academic Achievements
</b>
</h5>
<ul>
<li>Qualified for ACM-ICPC Regionals 2018-19 at IIT Kharagpur and Kanpur
</li>
<br>
<li>
Secured AIR- 2412 rank in JEE Mains.
</li>
<br>
<li>
Top 10% of College Department (COE)
</li>
<br>
<li>
Top 10% in CBSE class 12th result
</li>
<br>
<li>
10 CGPA in class 10th
</li>
<br>
<li>
Secured and qualified as a JSTSE scholar from State of New Delhi
</li>
</ul>
</div>
</body>
</html>

Hey root of the your local directory and your github page might be different can you try with relative path starting with ./
src: url('./text/Raleway/Raleway-Light.TTF')

Putting space between options of a horizontal navigation bar

I've created a basic horizontal navigation bar. It has your generic options: Homepage, contact us, about, and games. However, even though contact us, games, and Homepage are close together, I want to make it so about is on the opposite side of the web page/navigation bar, far away from the others but still connected to it through a huge empty space of the navigation bar. How would I go about doing this? Below is my current CSS code if it helps:
.horiznavli {
display: inline;
padding:20px 32px 20px;
border-color: #333333;
background-color: #333;
color:white;
text-align: center;
font-family: "Lucida Grande", Times, Serif
}
.horiznavli:hover{
background-color: #4CAF50;
}
.horiznavli:active{
background-color: grey;
}
#HorizNav{
position: relative;
left: -60px
}
#HorizNav #spaced {
}
EDIT: My apologies here is the HTML code:
<!DOCTYPE HTML>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="frontpage.css">
<meta charset="UTF-8">
<meta name="description" content="Official Dark Matter Studios site">
<meta name="keywords" content="HTML, Studio, Game, Dark Matter">
<meta name="author" Content="Matt Jones">
<title> Dark Matter Studios </title>
</head>
<body>
<ol id = "HorizNav" style = "list-style-type:none">
<li class = "horiznavli"> HomePage </li>
<li class = "horiznavli"> About </li>
<li class = "horiznavli"> Games </li>
<li class = "horiznavli" id = "spaced"> Conact Us </li>
</ol>
<h1 id="title_screen"> Dark Matter Studios</h1>
<div id="wrapper">
<h1> What is Dark Matter Studios all about? </h1>
<p> Dark Matter studios is an independent game development dedicated to producing quality games out of a passion and love for gaming.<br>
Born from the frustration of anti-consumerism, microtransactions and DLC eccentric practices held by many AAA companies </p>
<br>
<br>
<h1> WHAT WE'RE ALL ABOUT </h1>
<p> Dark Matter Studios was founded around the principle of honesty and integrity with our fans. After all, without them we wouldn't get anywhere! Though Dark Matter studios holds itself responible the following standards: </p>
<ol style="list-style-type: circle">
<li> Honesty with our customers. </li>
<li> No Microtransactions or overpriced DLC</li>
<li> We are honest with our customers, we don't promise things and not deliver</li>
<li> We promise high quality games, with no graphical downgrades on release</li>
<li> We stick to our word, we do not mislead our customers to gain a quick buck off them</li>
</ol>
</div>
</body>
</html>

.horiznavli {
float:left;
padding:20px 32px 20px;
border-color: #333333;
background-color: #333;
color:white;
text-align: center;
font-family: "Lucida Grande", Times, Serif
}
.horiznavli:hover{
background-color: #4CAF50;
}
.horiznavli:active{
background-color: grey;
}
#HorizNav{
position: relative;
left: -60px
}
#HorizNav #spaced {
}
#HorizNav.ul li:nth-child(3)
{
float:right!important;
margin-left:100px!important;
}

It's better if you had added your html code as well. Anyway if you are using bootstrap you can use this code and no need of css.
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Homepage <span class="sr-only">(current)</span></li>
<li>Contact us</li>
<li>Games</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>About</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
Otherwise if you are using html and css only, use this code.
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
</style>
</head>
<body>
<ul>
<li>Home</li>
<li>Games</li>
<li>Contact</li>
<li style="float:right">About</li>
</ul>
</body>
Tell me if this is what you wanted.

How to blur a banner photo in CSS Style?

So my banner is in a .wrapper.style1 and I've used a webkit-filter to blur the photo but everything gets blurred the Nav Bar and the information inside the Banner. How could I fix this so only the image is being blurred?
Here is the section of my CSS:
.wrapper {
padding: 6em 0em 4em 0em;
}
.wrapper.style1 {
padding: 0em;
background: url(../images/mlg.jpg); #222222 no-repeat;
-webkit-filter: blur(10px);
background-size: cover;
}
.wrapper.style2 {
background: #f2f2f2;
}
.wrapper.style2 .major {
text-align: left !important;
}
.wrapper.style2 .major h2 {
display: block;
margin-bottom: 0.70em;
letter-spacing: 1px;
line-height: 1.4em;
text-transform: uppercase;
font-size: 1.8em;
font-weight: 400;
}
.wrapper.style2 .major .byline {
letter-spacing: normal;
line-height: 1.6em;
text-transform: capitalize;
font-size: 1.4em;
}
.wrapper.style2 h3 {
display: block;
margin-bottom: 1em;
letter-spacing: 1px;
line-height: 1.4em;
text-transform: uppercase;
font-size: 1.6em;
font-weight: 400;
}
.wrapper.style3 {
padding-bottom: 6em;
background: #82b440;
text-align: center;
color: white;
}
.wrapper.style3 .container {
padding-left: 6em;
padding-right: 6em;
}
.wrapper.style3 p {
font-size: 1.6em;
}
.wrapper.style4 {
background: white;
}
.wrapper.style5 {
background: #82b440;
text-align: center;
color: white;
}
.wrapper.style5 .image {
display: block;
width: 60%;
margin: 0em auto 2em auto;
}
.wrapper.style5 .image img {
border-radius: 50%;
border: 10px solid;
border-color: white;
}
Here is a copy of some of the HTML:
<html>
<head>
<title>NueroEdge | Powered By Anazro</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<!--[if lte IE 8]><script src="css/ie/html5shiv.js"></script><![endif]-->
<script src="js/jquery.min.js"></script>
<script src="js/jquery.dropotron.min.js"></script>
<script src="js/skel.min.js"></script>
<script src="js/skel-layers.min.js"></script>
<script src="js/init.js"></script>
<script src="js/footage.js"></script>
<noscript>
<link rel="stylesheet" href="css/skel.css" />
<link rel="stylesheet" href="css/style.css" />
</noscript>
<!--[if lte IE 8]><link rel="stylesheet" href="css/ie/v8.css" /><![endif]-->
</head>
<body class="homepage">
<!-- Header Wrapper -->
<div class="wrapper style1">
<!-- Header -->
<div id="header">
<div class="container">
<!-- Logo -->
<h1><a href="index.html" img src="images/NueroEdgeText.png" alt="NueroEdge" style="width:105px;height:55px">
<!-- Nav -->
<nav id="nav">
<ul>
<img src="images/NueroEdgeText.png" alt="NueroEdge" style="width:105px;height:55px">
<li class="active">
Home
<ul>
<li>About Us</li>
<li>Contact Us</li>
</li>
</ul>
<li>Anazro Store</li>
<li>Application</li>
<li>
Roster
<ul>
<li>Call Of Duty</li>
<li>Streaming</li>
<li>Staff</li>
</ul>
</li>
<li>
More...
<ul>
<!--<li>Lorem ipsum dolor</li>-->
<li>
LeaderBoard
<ul>
<li>
Ryan Tarson
<ul>
<li><img src="images/ryantarson.png" alt="TECGaming" style="width:50px;height:50px">Ryan Tarson AKA: TECGaming</li>
<li><Strong>Age:</Strong> 17</li>
<li><Strong>Current Favourite Game:</Strong> Grand Theft Auto V PC</li>
<li>I am Ryan Loves video games, computers and coding specifically Java, He plays really all types of</li>
<li>games from a wide range and is willing to play any games from any genre to. He has a great and</li>
<li>fun personality which would keep you hooked on his stream like it was a drug. Ryan is the type</li>
<li>of streamer that is willing to do anything to keep his fans entertained. He has streamed before </li>
<li>but never streamed seriously but planning to do so. I am the website Programmer as well!</li>
<li>Click the links below and become apart of my life!</li>
<div class="row double">
<li>Twitter</li>
<li>YouTube</li>
</div>
</ul>
</li>
<br>
<li>
Kavin I.
<ul>
<li><img src="images/profile.jpeg" alt="NueroEdge" style="width:50px;height:50px">Kavin I. AKA: KaVn Ne</li>
<li><Strong>Age:</Strong> 16</li>
<li><Strong>Current Favourite Game:</Strong> Advanced Warefare</li>
<li>Kavin I. AKA KaVn Ne is Co-Founder along Side Ryan Tarson, Kavin loves video games</li>
<li>mostly Call of Duty because that’s all he ever plays. He mostly plays all he</li>
<li>ever plays. He mostly plays competitively and will stream singles matches or just</li>
<li>random hangouts with fans but he would play other games if Call of Duty is down</li>
<li> or someone requests something different. Kavin loves computers and any type of</li>
<li>electronics for some odd reason. Kavin has a unique personality and which could</li>
<li>make you become addicted to watching him play video games BEWARE!</li>
<div class="row double">
<li>Twitter</li>
<li>YouTube</li>
</div>
</ul>
</li>
<br>
<li>
Nick Marchitelli
<ul>
<li><img src="images/Praise.jpg" alt="Praise" style="width:50px;height:50px">Nick Marchitelli AKA: Praise</li>
<li><Strong>Age:</Strong> 16</li>
<li><Strong>Current Favourite Game:</Strong> N/A</li>
<li>Player and Captain for NueroEdge Call of Duty eSports Team.</li>
<br>
<li>Usually plays the supportive role on the team and also calls most of the shots and plays since he</li>
<li>is captain but everyone has their time to shine if no plays aren’t working.</li>
<li>Hybrid player AR and SMG role.</li>
<li>Currently in 16th place In North America for win on GameBattles</li>
<li>Been Playing Competitive Since COD Ghost</li>
<li>Won a few Online Twitter Tournaments with his team.</li>
<li><Strong>Previous affiliations:</strong></li>
<li>✦<Strong> Spectra eSports</Strong></li>
<li>✦<Strong> Livid eSports</Strong></li>
<div class="row double">
<li>Twitter</li>
<li>UMG Gaming</li>
</div>
</ul>
</li>
<br>
<li>
Luke Pondillo
<ul>
<li><img src="images/profile.jpeg" alt="nueroedge" style="width:50px;height:50px">Luke Pondillo AKA: Flusso</li>
<li><Strong>Age:</Strong> 16</li>
<li><Strong>Current Favourite Game:</Strong> N/A</li>
<li>Player for NueroEdge Call of Duty eSports Team.</li>
<br>
<li>Usually plays the Objective role on the team he nice on the sticks with his spot on AR skills but</li>
<li>also can use a SMG, which makes him a hybrid player. The kind of player who can step up when </li>
<li>the team needs it.</li>
<li>Been Playing Competitive Since COD Ghost.</li>
<li>Won a few Online Twitter Tournaments with his team.</li>
<li><Strong>Previous affiliations:</strong></li>
<li>✦<Strong> Spectra eSports</Strong></li>
<li>✦<Strong> Livid eSports</Strong></li>
<div class="row double">
<li>Twitter</li>
<li>YouTube</li>
</div>
</ul>
</li>
<br>
<li>
Joseph Balasico
<ul>
<li><img src="images/palm.jpeg" alt="palm" style="width:50px;height:50px">Joseph Balasico AKA: Palm</li>
<li><Strong>Age:</Strong> 15</li>
<li><Strong>Current Favourite Game:</Strong> N/A</li>
<li>Player for NueroEdge Call of Duty eSports Team.</li>
<br>
<li>Usually plays the Slayer role on the team he is known to be getting 30+ kills in every respawn</li>
<li>and He is a hybrid player where he can use an AR and a SMG. His slaying skill itself helps guide </li>
<li>his team to victory.</li>
<li>Like to use an AR and SMG which makes him a Hybrid Player</li>
<li>Been Playing Competitive COD since COD Ghost.</li>
<li>Won a few Online Twitter Tournaments with his team.</li>
<li><Strong>Previous affiliations:</strong></li>
<li>✦<Strong> Spectra eSports</Strong></li>
<li>✦<Strong> Livid eSports</Strong></li>
<div class="row double">
<li>Twitter</li>
<li>YouTube</li>
</div>
</li>
</ul>
</li>
</ul>
<!--<li>Veroeros feugiat</li>-->
</ul>
</li>
</nav>
</div>
</div>
<!-- Banner -->
<<div id="banner">
<section class="container">
<h2>NueroEdge</h2>
<span>NueroEdge Outstanding performance at MLG Event</span>
<p>Looking for more fantastic players for our team!</P>
Sign Up
</section>
</div>
</div>

I've done this a few times before with several different solutions. What I found the most useful is using the ::before selector. You inherit every background-property you specified and apply the filter.
.wrapper.style1 {
padding: 0em;
background: url(../images/mlg.jpg); #222222 no-repeat;
background-size: cover;
}
.wrapper.style1::before {
content = "";
background: inherit;
background-size: inherit;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
-webkit-filter: blur(10px);
}
Sadly, blur doesn't leave sharp edges, so you probably have to zoom in a bit to cover that up.

You can not apply filter to the container div. For that you either call the image using tag or use different container div for image.
Use this stackoverflow question - How to apply a CSS 3 blur filter to a background image

how to make to div in same row

I created 3 divs:
header
menu
display area
I created three tag and I need to align two divs in the same row — the menu div in the left and display in the right.
I am getting error in that I tried many examples and none of them are working.
The header should be fixed in top
and others should be as it is
What could be the problem, and how can I fix it?
HTML
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<title>Blueprint: Vertical Icon Menu</title>
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="css/leftmenu.css" />
<link rel="stylesheet" type="text/css" href="flaticon.css" />
<script src="js/modernizr.custom.js"></script>
<style>
body {position: relative;font-family: 'Lato', Calibri, Arial, sans-serif; color: #47a3da;}
body, html { font-size: 100%; height: 100%; padding: 0; margin: 0;}
a {color:#f0f0f0;text-decoration: none;}
a:hover {color: #000;}
#footer{height: 50px;background-color: #ddd;width: 100%;}
#header{z-index: 1;top: 0;margin-top: 0px;position: fixed;height: 90px;width: 100%;background-color: #ddd;}
.dis123{width: 500px;height: 500px;background-color: #ddd;text-align: left;
display: block;
margin-left: auto;
margin-right: auto;}
</style>
</head>
<div id="header">
Head
</div>
<body>
<div class="postleftmen">
<ul class="cbp-vimenu">
<li>SELECT CATEGORY</li>
<li>MOBILE & TABLET</li>
<li>ELECTRONICS & COMPUTER</li>
<li>Vehicles</li>
<li>Home & Furniture</li>
<li>Pets</li>
<li>Books, CDs & Hobbies</li>
<li>Clothing & Accessories</li>
<li>Kids & Baby</li>
<li>Sports & Health</li>
<li>Services</li>
<li>Jobs</li>
<li>Real Estate</li>
</ul>
</div>
<div class="dis123">
display
</div>
<div id="footer">
footer
</div>
</body>
</html>

You need to use float:left property two show two DIVS in row. and then use clear:both for div to place footer.
HTML
<div id="header">
Head
</div>
<div class="postleftmen">
<ul class="cbp-vimenu">
<li>SELECT CATEGORY</li>
<li>MOBILE & TABLET</li>
<li>ELECTRONICS & COMPUTER</li>
<li>Vehicles</li>
<li>Home & Furniture</li>
<li>Pets</li>
<li>Books, CDs & Hobbies</li>
<li>Clothing & Accessories</li>
<li>Kids & Baby</li>
<li>Sports & Health</li>
<li>Services</li>
<li>Jobs</li>
<li>Real Estate</li>
</ul>
</div>
<div class="dis123">
display
</div>
<div style="clear:both"> </div>
<div id="footer">
Footer
</div>
CSS
body {position: relative;font-family: 'Lato', Calibri, Arial, sans-serif; color: #47a3da;}
body, html { font-size: 100%; height: 100%; padding: 0; margin: 0;}
a {color:#f0f0f0;text-decoration: none;}
a:hover {color: #000;}
#header{height: 90px;width: 100%;background-color: #ddd;}
#footer
{
height: 50px;width: 100%;background-color: #ddd;
}
.dis123
{
width:60%;
float:left; height: 500px;background-color: #ddd;text-align: left;
}
.postleftmen
{
width:40%;
float:left;
}
DEMO