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
Related
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.
I've already checked the code on DevTools and it shows the problem:
The icon is actually wider than I would like. I've already tried changing its size, padding, margin, etc, but with no good results. Does anyone know how to solve this problem?
Code can be found here
<a href="#about">
<i class="fa fa-angle-double-down fa-stack-1x" style="color: black";></i>
</a>
element.style {
color: black;
}
.fa, .fas {
font-weight: 900;
font-size: 35px;
}
Remove the .fa-stack-1x class on your icon. That will fix it. That class specifically is setting the width to be 100%. I removed it on my browser and it works fine with out it.
You need to add this css code, this prevent icon to be larger (width) and to be centered (left):
.fa-stack-1x, .fa-stack-2x {
left: inherit !important;
width: auto !important;
}
const projectName = 'tribute-page';
html, body {
height: 100%;
width: 100%;
background-color: black;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
}
p, h1, h3, h4, cite, ul {
color: #D9D4D0;
font-family: font-family: 'Neucha', cursive;
font-family: 'Open Sans Condensed', sans-serif;;
}
a:link {
text-decoration: none;
}
a:visited {
color: white;
text-decoration: none;
}
a:hover {
color: #D9B384;
text-decoration: none;
}
.header {
width: 100%;
height: 700px;
background: url(https://media.gazetadopovo.com.br/2012/12/7cc68ffc5247e851268670d802a50453-gpMedium.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.text-vertical-center {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-shadow: -1px 1px 0 #D9D4D0,
1px 1px 0 #D9D4D0,
1px -1px 0 #D9D4D0;
-1px -1px 0 #D9D4D0;
-webkit-text-fill-color: black;
}
.text-vertical-center h1 {
margin-bottom: 0;
font-size: 80px;
}
.text-vertical-center h3 {
margin-top: 0;
font-size: 25px;
}
element.style {
color: black;
}
.fa, .fas {
font-weight: 900;
font-size: 35px;
}
.fa-stack-1x, .fa-stack-2x {
left:inherit !important;
width: auto !important;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/39c2eebbd7.js" crossorigin="anonymous"></script>
<title>Tribute to Caetano Veloso</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Neucha&family=Open+Sans+Condensed:wght#300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main id="main">
<header class="header">
<div class="text-vertical-center">
<h1>Caetano Veloso</h1>
<h3 id="subheading">an aging chameleon</h3>
<a href="#about">
<i class="fa fa-angle-double-down fa-stack-1x" style="color: black";></i>
</a>
</div>
</header>
<section id="tribute-info" class="container">
<h3 id="about">These are the main events in Caetano's life:</h3>
<ul>
<li><strong>1942</strong> - Born in Santo Amaro, Bahia, Brazil</li>
<li>
<strong>1959</strong> - Hears for the first time the song Chega de Saudade, by Bossa Nova's father João Gilberto. He later recalled: "It was the clearest landmark a song has ever left in my life"
</li>
<li>
<strong>1963</strong> - First musical work. After impressing the director Álvaro Guimarães with a speech on how João Gilberto revitalized Samba, Caetano is invited to compose the soundtrack to the plays Boca de Ouro, by Nelson Rodrigues, and A Exceção e a Regra, by Bertold Bretch.
</li>
<li>
<strong>1965</strong> - Moves to Rio de Janeiro with his sister Maria Betânia
</li>
<li>
<strong>1967</strong> - Releases, in a partnership with Gal Costa, his first album Domingo.
</li>
<li>
<strong>1967</strong> - Releases his first self-titled solo album, giving birth to the Tropicalist movement, which would change the history of Brazilian music.
</li>
<li>
<strong>1968</strong> - Caetano performs the provocative song É Proibido Proibir with Os Mutantes at the 3ª International Song Festival to a booing crowd. Caetano then improvises an angry, and now historical, speech against the judges and the public.
</li>
<li>
<strong>1968</strong> - Because of his political views, Caetano is sent to jail by the Military Regime.
</li>
<li>
<strong>1969</strong> - Caetano moves to England with his friend Gilberto Gil, where he lives in exile until 1972.
</li>
<li>
<strong>1971</strong> - Releases one of his best albums, the acclaimed Transa, which contained covers and songs with English subtitles.
<li>
<strong>1972</strong> - Returns to Brazil and performs with João Gilberto and Gal Costa at TV Tupi.
</li>
<li>
<strong>1980</strong> - Caetano starts growing in popularity abroad, especially in Portugal, Israel, France and Africa.
</li>
<li>
<strong>1983</strong> - Meets Paula Lavigne, who was 14 years old. She would later become his long-time wife, with whom Caetano had 2 kids.
</li>
<li>
<strong>1990</strong> - Participates in the Montreaux Jazz Festival in Switzerland.
</li>
<li><strong>1991</strong> - Writes a profound article to the New York Times about the cultural implications of Carmem Miranda</li>
<li>
<strong>2002</strong> - Launches a book about the tropicalia movement, Tropical Truth: A Story of Music and Revolution in Brazil.
</li>
<li>
<strong>2010</strong> - The artist becomes a constant meme object on the internet.
</li>
<li>
<strong>2016</strong> - Caetano performs at the Rio Olimpic Games with Anitta.
</li>
<li>
<strong>2020</strong> -
Wins a millionaire judicial dispute against Olavo de Carvalho, the intellectual mentor of the Bolsonaro family
</li>
</ul>
<div id="popular-albums-section" class="container">
<div class="row">
<h3 class="popular-albums-header">Caetano's best albums</h3>
<div class="margin-bottom col-sm-6 col-md-3 text-center">
<h4><strong>Transa</strong> - 1972</h4>
<img class="album-photo img-responsive" src="images/caetanotransa.png" alt="Transa album cover">
</div>
<div class="margin-bottom col-sm-6 col-md-3 text-center">
<h4><strong>Qualquer coisa</strong> - 1975</h4>
<img class="album-photo img-responsive" src="images/qualquercoisa.png" alt="Qualquer Coisa album cover">
</div>
<div class="margin-bottom col-sm-6 col-md-3 text-center">
<h4><strong>Cinema Transcendental</strong> - 1979</h4>
<img class="album-photo img-responsive" src="images/Cinema_Transcendental_cover.png" alt="Cinema Transcendental Cover">
</div>
<div class="margin-bottom col-sm-6 col-md-3 text-center">
<h4><strong>Bicho</strong> - 1977</h4>
<img class="album-photo img-responsive" src="images/Capa_de_Bicho.png" alt="Bicho album cover">
</div>
<div class="margin-bottom col-sm-6 col-md-3 text-center">
<h4><strong>Cores, Nomes</strong> - 1982</h4>
<img class="album-photo img-responsive" src="images/coresnomescover.png" alt="Cores, Nomes album cover">
</div>
</div>
</div>
<br>
<p>
"When imagined by American critics, the most frequent cliché used about the legendary singer Caetano Veloso is that he is the Bob Dylan of Brazil. In that case, the best Dylan song to associate with Veloso would be "Forever Young," because Veloso is one of the most restlessly creative, forward-looking musicians of our time."
</p>
<cite>-- Author Ed Morales</cite>
</blockquote>
<h3>If you're interested, you should read more about this incredible human being on his
<a id="tribute-link" href="https://en.wikipedia.org/wiki/Caetano_Veloso" target="_blank">Wikipedia entry</a>.
</h3>
</section>
</main>
</body>
</html>
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')
I'm trying to put my two lists beside the image that is centered in the middle one on each side but the two lists have to be centered and not all the way right or left.
Thanks in advance.
*Please fullscreen the html snippet.
div.main p {
color: white;
font-size: 20px;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
}
div.main h1 {
color: white;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-decoration: underline;
text-align: center;
font-size: 36px;
}
div.material {
float: left;
}
div.material h2 {
color: white;
font-size: 20px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-decoration: underline;
}
div.list li {
color: white;
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
text-align: left;
list-style-type: none;
}
div.materialy {
float: right;
}
div.materialy h2 {
color: white;
font-size: 20px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-decoration: underline;
}
div.listy li {
color: white;
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
list-style-type: none;
text-align: right;
}
div.method p {
color: white;
font-size: 20px;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
text-decoration: underline;
font-weight: bold;
}
div.method li {
color: white;
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
list-style-type: none;
line-height: 40px;
}
div.skill li {
font-weight: bold;
font-style: italic;
font-size: 18px;
}
div.skill p {
font-style: italic;
text-decoration: none;
font-size: 16px;
color: #F00;
}
div.image img {
display: block;
margin: 0 auto;
}
body {
background-color: blue;
}
div.nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
font: Arial, Helvetica, sans-serif black;
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
border-radius: 5px;
border-bottom: solid black;
border-top: solid black;
border-left: solid black;
border-right: solid black;
background: #09F;
/* For browsers that do not support gradients */
background: -webkit-linear-gradient(#09F, #9FF);
/* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#09F, #9FF);
/* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#09F, #9FF);
/* For Firefox 3.6 to 15 */
background: linear-gradient(#09F, #9FF);
/* Standard syntax (must be last) */
}
div.nav li {
float: left;
}
div.nav li a {
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
div.nav li a:hover {
background-color: #0FC;
}
<!DOCTYPE html>
<html>
<link href="style4.css" type="text/css" rel="stylesheet" />
<head>
<title>Tips</title>
</head>
<div class="nav">
<ul>
<li>Home
</li>
<li>Tips
</li>
<li>Learn
</li>
<li>Contact
</li>
</ul>
</div>
<body>
<div class="main">
<h1>Welcome to the tips page!</h1>
<p>
<br>Artists typically use great techniques to make their art more professional looking and it also helps them improve their skills at drawing.
<br>They use different types of mediums, tools, and art supplies to enhance the looks of their artwork.</p>
</div>
<div class="material">
<h2>Materials for a beginner or newbie:</h2>
</div>
<div class="image">
</br>
</br>
</br>
<div class="list">
<ul>
<li>HB #2 Pencil</li>
<li>Clean white vinyl eraser</li>
<li>White printer paper</li>
<li>Good lighting or desk lamp</li>
</ul>
</div>
<img src="person-drawing.jpg" height="296" width="395"></div>
<div class="materialy">
<h2>Materials for the advanced:</h2>
<div class="listy">
<ul>
<li>Staedtler Design/Drafting Pencil Set</li>
<li>Clean white vinyl eraser</li>
<li>Gum eraser</li>
<li>Kneaded eraser</li>
<li>White printer paper</li>
<li>Good lighting or desk lamp</li>
<li>Blending sticks</li>
<li>0.5/0.7 mechanical pencils</li>
<li>0.5/0.7 mechanical pencil lead</li>
<li>Fine tip liner marker</li>
<li>Adjustable drafting table</li>
</ul>
</div>
</div>
</br>
<div class="method">
<p>Here are some good methods and techniques to practice drawing skills:</p>
<ul>
<div class="skill">
<li>Drawing is a skill</li>
<p>*Drawing isn't some magical activity that people are born with! It can be taught and learnt from also, anyone can be skilled at drawing!</p>
</div>
<li>Drawing or sketching lightly</li>
<li>Observe your artwork while drawing regularly</li>
<li>Look for basic shapes</li>
<li>Take your time</li>
<li>Use guidelines/structure to form the foundation of the drawing</li>
<li>Use resources if needed</li>
<li>Be consistent</li>
<li>Relax and have fun</li>
<li>Keep practicing constantly</li>
</ul>
</div>
</body>
</html>
Here is the rewritten code:
https://jsfiddle.net/vsjka9r7/
<div class="nav">
<ul>
<li>Home</li>
<li>Tips</li>
<li>Learn</li>
<li>Contact</li>
</ul>
</div>
<div class="main">
<h1>Welcome to the tips page!</h1>
<p><br>
Artists typically use great techniques to make their art more professional looking and it also helps them improve their skills at drawing.
<br>
They use different types of mediums, tools, and art supplies to enhance the looks of their artwork.
</p>
</div>
<div class="centerContentController">
<div class="leftList">
<div class="material">
<h2>Materials for a beginner or newbie:</h2>
</div>
<br>
<br>
<br>
<div class="list">
<ul>
<li>HB #2 Pencil</li>
<li>Clean white vinyl eraser</li>
<li>White printer paper</li>
<li>Good lighting or desk lamp</li>
</ul>
</div>
</div>
<img src="person-drawing.jpg" height="296" width="395" class="materialsImg">
<div class="rightList">
<div class="materialy">
<h2>Materials for the advanced:</h2>
<div class="listy">
<ul>
<li>Staedtler Design/Drafting Pencil Set</li>
<li>Clean white vinyl eraser</li>
<li>Gum eraser</li>
<li>Kneaded eraser</li>
<li>White printer paper</li>
<li>Good lighting or desk lamp</li>
<li>Blending sticks</li>
<li>0.5/0.7 mechanical pencils</li>
<li>0.5/0.7 mechanical pencil lead</li>
<li>Fine tip liner marker</li>
<li>Adjustable drafting table</li>
</ul>
</div>
</div>
<br>
</div>
</div>
<div class="bottomContent">
<div class="method">
<p>Here are some good methods and techniques to practice drawing skills:
</p>
<ul>
<div class="skill">
<li>Drawing is a skill</li>
<p>*Drawing isn't some magical activity that people are born with! It can be taught and learnt from also, anyone can be skilled at drawing!</p>
</div>
<li>Drawing or sketching lightly</li>
<li>Observe your artwork while drawing regularly</li>
<li>Look for basic shapes</li>
<li>Take your time</li>
<li>Use guidelines/structure to form the foundation of the drawing</li>
<li>Use resources if needed</li>
<li>Be consistent</li>
<li>Relax and have fun</li>
<li>Keep practicing constantly</li>
</ul>
</div>
Does that work for ya?
If not I am here to help :)
What I changed:
I simply created a div container to contain the image and the two unordered list.
I then created a div for each of the unordered list and floated them to the right/left. For the center image I positioned it in the center.
First of all, you have to put all DIV tags inside BODY. Then you have to clean up a little your DIVs. In order not to rewrite the whole HTML code, I would suggest you to use a table for the lists:
<!DOCTYPE html>
<html>
<link href="style4.css" type="text/css" rel="stylesheet" />
<head>
<title>Tips</title>
</head>
<body>
<div class="nav">
<ul>
<li>Home
</li>
<li>Tips
</li>
<li>Learn
</li>
<li>Contact
</li>
</ul>
</div>
<div class="main">
<h1>Welcome to the tips page!</h1>
<p>
<br>Artists typically use great techniques to make their art more professional looking and it also helps them improve their skills at drawing.
<br>They use different types of mediums, tools, and art supplies to enhance the looks of their artwork.</p>
</div>
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td align="center" width="33%">
<div class="material">
<h2>Materials for a beginner or newbie:</h2>
</div>
<div class="list">
<ul>
<li>HB #2 Pencil</li>
<li>Clean white vinyl eraser</li>
<li>White printer paper</li>
<li>Good lighting or desk lamp</li>
</ul>
</div>
</td>
<td align="center" width="33%">
<div class="image">
</br>
</br>
</br>
<img src="person-drawing.jpg" height="296" width="395">
</div>
</td>
<td align="center" width="33%">
<div class="materialy">
<h2>Materials for the advanced:</h2>
<div class="listy">
<ul>
<li>Staedtler Design/Drafting Pencil Set</li>
<li>Clean white vinyl eraser</li>
<li>Gum eraser</li>
<li>Kneaded eraser</li>
<li>White printer paper</li>
<li>Good lighting or desk lamp</li>
<li>Blending sticks</li>
<li>0.5/0.7 mechanical pencils</li>
<li>0.5/0.7 mechanical pencil lead</li>
<li>Fine tip liner marker</li>
<li>Adjustable drafting table</li>
</ul>
</div>
</div>
</td>
</tr>
</table>
</br>
<div class="method">
<p>Here are some good methods and techniques to practice drawing skills:</p>
<ul>
<div class="skill">
<li>Drawing is a skill</li>
<p>*Drawing isn't some magical activity that people are born with! It can be taught and learnt from also, anyone can be skilled at drawing!</p>
</div>
<li>Drawing or sketching lightly</li>
<li>Observe your artwork while drawing regularly</li>
<li>Look for basic shapes</li>
<li>Take your time</li>
<li>Use guidelines/structure to form the foundation of the drawing</li>
<li>Use resources if needed</li>
<li>Be consistent</li>
<li>Relax and have fun</li>
<li>Keep practicing constantly</li>
</ul>
</div>
</body>
</html>
Attempting to put the Nav bar containing Home, Menu, etc on the left of the page, and the rest in the center, and the windingroad.jpg floated to the right of all the text. I am lost in how to split these into multiple columns and continue, any help would be appreciated.
~HTML~
<head>
<meta charset="UTF-8">
<title>JavaJam Coffee House</title>
<link rel="stylesheet" type="text/css" href="javajam.css">
<style>
#nav {
background-color:#999;
width:100px;
padding-top: 10px;
font-weight: bold;
float:left; }
#nav a {text-decoration: none;
padding-bottom: 15px;
a:link; { color: #996633;}
a:visited { color: #ccaa66;}
a:hover { color: #330000;
}
#nav ul { list-style-type: none;}
</style>
</head>
<body>
<h1>
<img src="javalogo.gif" alt="JavaJam Coffee House"
width="619" height="117">
</h1>
<p>Follow the winding road to JavaJam...</p>
<div id="nav wrapper">
<ul class="nav">
<li>Home</li>
<li>Menu</li>
<li>Music</li>
<li>Jobs</li>
</ul>
</div>
<main>
<div id="wrapper">
<img src="windingroad.jpg" alt="Winding Road"
width="333" height="156" class="floatright">
</div>
<ul>
<li>Specialty Coffee and Tea</li>
<li>Bagels, Muffins, and Organic Snacks</li>
<li>Music and Poetry Readings</li>
<li>Open Mic Night</li>
</ul>
</main>
<p>
12312 Main Street<br>
Mountain Home, CA 93923<br>
1-888-555-5555
</p>
<footer>
<p>Copyright © 2014 Javajam Coffee House</p>
<p><a href="#college.edu">
a#college.edu</a>.</p>
</footer>
</body>
</html>
There are many ways to achieve this, but here is one way:
body {
margin: 0;
padding: 0;
}
#navigation {
width: 200px;
position: fixed;
top: 0;
bottom: 0;
z-index: 1000;
overflow-y: auto;
background-color: gray;
}
#main {
margin-left: 200px;
padding: 5px;
}
<div id="navigation">
<h1>
<img src="javalogo.gif" alt="JavaJam Coffee House" width="619" height="117">
</h1>
<p>Follow the winding road to JavaJam...</p>
<div>
<ul class="nav">
<li>Home</li>
<li>Menu</li>
<li>Music</li>
<li>Jobs</li>
</ul>
</div>
</div>
<div id="main">
<div>
<div id="wrapper">
<img src="windingroad.jpg" alt="Winding Road" width="333" height="156" class="floatright">
</div>
<ul>
<li>Specialty Coffee and Tea</li>
<li>Bagels, Muffins, and Organic Snacks</li>
<li>Music and Poetry Readings</li>
<li>Open Mic Night</li>
</ul>
</div>
<p>
12312 Main Street<br>
Mountain Home, CA 93923<br>
1-888-555-5555
</p>
<footer>
<p>Copyright © 2014 Javajam Coffee House</p>
<p>a#college.edu.</p>
</footer>
</div>
Wrap your navigation into one container and your content into another container then apply css to separate split these two containers so it can be left and right.
Also, for your css id attribute it cannot contain more than one word, because this value is unique.