I have to use codepen to write up a website and then get my code to pass the W3 validator. The problem is that, whichever way I try to check the code, it comes up with different error messages.
When I copy and paste the whole code into W3, it says that I need <DOCTYPE!> and the other things like that (that I'm not allowed to type into codepen, without getting an error message on that end).
However, when I go into debug mode and put the URL directly into W3, it comes up with a load of errors that don't exist- the code it specifies isn't anywhere in my code.
Has anyone else had issues getting codepen validated by w3?
edit: codepen is https://codepen.io/johng003/pen/rNjrrOb
:root{
font-family:"Montserrat", serif;}
body{
background-image:url("https://i.imgur.com/kfFhV7c.png");
}
#nav-bar{
position:fixed;
width:100%;
top:0px;
left:0px;
background-color: rgb(235, 52, 128);
padding:13px;
font-family:"Playfair Display", serif;
font-size: 18px;
z-index:98;
}
.nav-link{
margin: 0px 40px 10px 40px;}
.nav-link:link {
color: yellow;
background-color: transparent;
text-decoration: none;
}
.nav-link:visited {
color: white;
background-color: transparent;
text-decoration: none;
}
.nav-link:hover {
color: #F8B8E4;
background-color: transparent;
text-decoration: underline;
}
.header-img {
position:fixed;
left: 91%;
top:0%;
max-width: 9%;
min-width:7%;
height: auto;
z-index: 99;
}
h1{
position:relative;
left:40vw;
top: 25px;
font-size:40px;
color:rgb(235, 52, 128);
}
.offers:link {
color: rgb(235, 52, 128);
background-color: transparent;
text-decoration: underline;
}
.offers:visited {
color: purple;
background-color: transparent;
text-decoration: none;
}
.offers:hover {
color: purple;
background-color: transparent;
text-decoration: underline;
}
.donut-ignore{
font-size: 20px;
position:absolute;
top:75px;
left: 39vw;
}
h2{
color:rgb(235, 52, 128);
font-size: 25px;
}
.gallery-heading{
position:relative;
top: 15px;
}
.videointro{
font-size: 18px;
}
iframe{
border-width: 0px;
}
.donut-gallery{
display:flex;
flex-direction:row;
justify-content:space-around;
align-items:center;
flex-wrap:wrap;
}
#donut1, #donut2, #donut3, #donut4, #donut5, #donut6{
max-width:40vw;
clip-path:circle(45%)
}
#donut3{
max-height:300px;
}
#donut2{
max-height:465px;
}
#media (min-width: 400px){
#donut1, #donut2, #donut3, #donut4, #donut5, #donut6{
max-width:400px;
}
.flavours{
font-size:18px;
}
.largertext{
font-size: 18px;
}
.flavourlist{
font-size: 18px;
position:relative;
padding: 0px 0px 20px 0px;
}
.orderonline{
position: relative;
top:10px;
}
.instoreheader{position:relative;
top: 10px;}
<body>
<header id="header">
<nav id="nav-bar">
Donut Gallery
Order Online
Order In Store
</nav>
<img src="https://i.imgur.com/NK8Zbmn.png" alt="The store's logo; a black and white drawing of a donut" class="header-img">
</header>
<main>
<h1><em> Divine Donuts </em></h1>
<p class="donut-ignore"> Donut Ignore Our Fabulous <a target="_blank" href="https://www.donutdigest.com/blog/" class="offers"> Offers! </a> </p>
<article>
<h2 class="gallery-heading"> Donut Gallery </h2>
<p class="videointro"> This is how our divine donuts are made...</p>
<iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/DePRyZE5sn4" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<br>
<div class="donut-gallery">
<img id="donut1" src="https://i.imgur.com/yueQzkr.jpg" alt="A dozen donuts with sprinkles" class="donutimage1">
<img id="donut2" src="https://i.imgur.com/QfhD5o4.jpg" alt="A tower of colourful donuts" class="donutimage2">
<img id="donut3" src="https://i.imgur.com/oXPlX3S.jpg" alt="A donut with galaxy mirror glaze" class="donutimage3">
<img id="donut4" src="https://i.imgur.com/guK5rGP.jpg" alt="Halloween themed dounuts" class="donutimage4">
<img id="donut5" src="https://i.imgur.com/ER3hBG4.jpg" alt="An oversized pink sprinkles donut" class="donutimage5">
<img id="donut6" src="https://i.imgur.com/HOzPDAg.jpg" alt="A donut with cookies and cream filling" class="donutimage6">
</div>
</article>
<section id="buyers">
<div class="flavours">
<p> <strong> Decide on next month's special flavour now:</strong> </p>
<form action="https://www.freecodecamp.com/email-submit">
<fieldset>
<legend> Choose the next flavour of the month</legend>
<label for="Banana-and-peanut-butter"> Banana and Peanut butter</label>
<input id="Banana-and-peanut-butter" value="Banana" type="radio" name="donut-type">
<button accesskey="b"> or press b </button>
<label for="Marshmallow-and-salted-caramel">Marshmallow-and-salted-caramel</label>
<input id="Marshmallow-and-salted-caramel" value="Marshmallow" type="radio" name="donut-type">
<button accesskey="m"> or press m </button>
<label for="Blueberry-and-apple">Blueberry-and-apple</label>
<input id="Blueberry-and-apple" value="blueberry" type="radio" name="donut-type">
<button accesskey="a"> or press a </button>
<button type="submit">Submit</button>
</fieldset>
</form>
<br>
<p class="largertext"> Our past flavours of the month were...</p>
<ul>
<li class="flavourlist"> April: Rainbow Surprise </li>
<li class="flavourlist"> March: Bubblegum and popping candy </li>
<li class="flavourlist"> February: Biscoff and Oreos </li>
</ul>
</div>
<div id="order-online">
<h2 class="orderonline"> Order bespoke creations online </h2>
<p class="largertext"> To make large or bespoke orders, please fill out the form below and one of our donut devotees will be in touch before the end of the day... </p>
<form id="form" action="https://www.freecodecamp.com/email-submit">
<input type="text" placeholder="Name" required>
<input type="number" placeholder="Phone number" required>
<input id="email" name="email" type="email" placeholder="Email" required>
<input id="submit" type="submit" value="submit">
</form>
</div>
<br>
<div id="order-instore">
<h2 class="instoreheader"> Order in-Store </h2>
<p class="largertext"> To order in store, simply pop to our Antartica branch.
Opening times are 10AM-6PM 7 days a week. </p>
<img src="data:image/jpeg;base64,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" alt="A map showing the location of our antartica branch">
</div>
</section>
</main>
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
</body>
Error #2: Start tag seen without seeing a doctype first. Expected <!DOCTYPE html>.
You missing the <!DOCTYPE html> tag. it is not optional. It is required to tell the browser which version of HTML is used.
Error #1: Consider adding a lang attribute to the html start tag to declare the language of this document.
This mean that you should add as 2nd line a tag declaring the language of your website. This is helpful for search engines and screen-readers. As example: <html lang="en">
Error #3: Element head is missing a required instance of child element title.
Your <head></head> section is missing. Also part of the head-section is the <title> tag. There you are required to add a title that is also shown then inside the browser tab at the top.
Also part of the head content are meta data such as search tags. Also your links for external CSS, Scripts or libraries.
Last but not least, codepen is only a webbased site to see the result of soemthing or to share code snippets. Its not for fully programming a website. Its simliar to an IDE. If you want a fully working website then you should use an actual IDE such as Visual Studio Code as example.
Related
So I am making an HTML sidebar in Google Sheets using Apps Script. I am also using the Skeleton CSS framework.
So I'd like the submit button here to be centered:
I've tried this: making an align class in CSS, and then applying it to the button. I forgot to mention that all my other elements are aligned except the buttons.
<style>
body{
background-color: white;
color: black;
}
.align{
text-align: center;
}
.margin{
margin-bottom: 10px;
}
h1{
font-size: 20pt;
}
h2{
font-size: 16pt;
}
</style>
Here is my HTML code:
<body>
<h1 class = "align ">Welcome to the clothing expense custom menu bar!</h1>
<h2 class = "align">Here are the custom functions you can use:</h2>
<p class = "align"> See how much you've spent on a brand.</p>
<form onsubmit="runFunc()">
<input class = "u-full-width " id="brand" type = "text" placeholder="Enter brand name">
<div>
<button type="submit" class="button-primary align">Submit</button>
</div>
</form>
<p class = "align"> See how much you've spent on a type of clothing.</p>
<form onsubmit="runFuncTwo()">
<input class = "margin u-full-width" id="type" type = "text" placeholder="Enter clothing brand">
<div>
<button type="submit" class="button-primary align">Submit</button>
</div>
</form>
</body>
Thanks!
All of these 3 solutions should work, I would choose the second or third one.
If you make the div full-width and add align to it, it should work
<div class="u-full-width align">
<button type="submit" class="button-primary">Submit</button>
</div>
You can also make the div a flex, like so (Use classes instead of inline style)
<div class="u-full-width" style="display:flex; justify-content: center">
<button type="submit" class="button-primary">Submit</button>
</div>
You can also add margin:auto and float:none to the button (Use classes instead of inline style)
<button type="submit" class="button-primary"
style="margin:auto; float:none">Submit</button>
The code is:
button.button-primary.align {
width: 100%;
max-width: 150px;
margin: 0 auto;
display: block;
}
And here it is in action:
body{
background-color: white;
color: black;
}
.align{
text-align: center;
}
.margin{
margin-bottom: 10px;
}
h1{
font-size: 20pt;
}
h2{
font-size: 16pt;
}
/*new code from here*/
button.button-primary.align {
width: 100%;
max-width: 150px;
margin: 0 auto;
display: block;
}
<body>
<h1 class = "align ">Welcome to the clothing expense custom menu bar!</h1>
<h2 class = "align">Here are the custom functions you can use:</h2>
<p class = "align"> See how much you've spent on a brand.</p>
<form onsubmit="runFunc()">
<input class = "u-full-width " id="brand" type = "text" placeholder="Enter brand name">
<div>
<button type="submit" class="button-primary align">Submit</button>
</div>
</form>
<p class = "align"> See how much you've spent on a type of clothing.</p>
<form onsubmit="runFuncTwo()">
<input class = "margin u-full-width" id="type" type = "text" placeholder="Enter clothing brand">
<div>
<button type="submit" class="button-primary align">Submit</button>
</div>
</form>
</body>
css:
h1{
font-size: 20pt;
width:100%;
}
h2{
font-size: 16pt;
width:100%;
}
html:add all text content within span tag:
<h1 class = "align "><span>Welcome to the clothing expense custom menu bar! </span></h1>
I've set the pixel size in my CSS to 50px but in the browser when expand my navigation menu the it sets the px size to 55.15.. etc. This same problem affects the Log Action, View Action and Keysystem pages. It doesn't affect the facilities info page. There is a gap below the first link on the drop down menu as well. I image the pixel size of the text is causing this because, again, it doesn't happen on my main index page.
I've tried changing the px to an rem value that will scale it to 50px from the page default of 38px. It also doesn't solve the problem.
CSS is as follows. .nav_main a is where I have set the px size to 50px.
* {
font-family: Arial;
margin: 0px;
}
html,body
{
height: 100%;
margin: 0px;
padding: 0px;
font-size: 38px;
overflow: visible;
}
h1 {
display: block;
}
.nav_main {
display: block;
position: relative;
width: 100%;
background-color: #282828;
overflow: auto;
}
.nav_main a {
width: 100%;
text-decoration: none;
padding-top: 32px;
padding-bottom: 32px;
margin: 0;
text-align: center;
font-size: 50px;
color: #fff;
}
.nav_main .icon {
display: inline;
float: right;
width: auto;
padding: 27.5px;
}
.nav_main .icon_clicked {
position: absolute;
right: 0px;
top: 0px;
width: auto;
padding: 27.5px
}
This is the log action page html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Facilities Portal - Log Action</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<header>
<h1>Facilities Portal</h1>
<div id="navMain" class="nav_main">
<a id="facInfoL" href="index.html" style="display: none">Facilities Info</a>
<a id="logActionL" class="activeNav" href="logaction.html" style="display: none">Log Action</a>
<a id="viewActionL" href="viewaction.html" style="display: none">View Actions</a>
<a id="keySystemL" href="keysystem.html" style="display: none">Key System</a>
<a id="burgerIcon" class="icon" onclick="expandMenu()">☰</a>
</div>
</header>
<main>
<form action="#" id="logActionForm">
<p>Your Name: </p><input type="text" name="FullName" placeholder="Type your name here...">
<p>Email: </p><input type="email" name="EmailAddress" placeholder="Type your email here...">
<p>Issue: </p>
<select>
<option value"" disabled selected hidden>Please choose...</option>
<option value="hnf">Health and Safety</option>
<option value="comfort">Comfort</option>
<option value="other">Other</option>
</select>
<p>Description: </p><input type="text" name="Desc" placeholder="Brief description of issue...">
<p>Details: </p><input type="text" name="Details" placeholder="Extra details here...">
<p>Upload Picture</p><input type="file" name="pic" accept="image/*">
<button type="submit" form="logActionForm" value="submit">Submit</button>
<button type="reset" value="reset">Clear</button>
<button type="button" value="viewPrevActions">View Previous Actions</button>
</form>
</main>
<footer>
<p>Author: Scott Law</p>
<p>Copyright © 2019</p>
</footer>
<script src="js/common.js"></script>
</body>
</html>
This is the index page html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Facilites Portal Main</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<header>
<h1>Facilities Portal</h1>
<div id="navMain" class="nav_main">
<a id="facInfoL" class="activeNav" href="index.html" style="display: none">Facilities Info</a>
<a id="logActionL" href="logaction.html" style="display: none">Log Action</a>
<a id="viewActionL" href="viewaction.html" style="display: none">View Actions</a>
<a id="keySystemL" href="keysystem.html" style="display: none">Key System</a>
<a id="burgerIcon" class="icon" onclick="expandMenu()">☰</a>
</div>
</header>
<main>
<img class="portal-img" src="images/spanners-tools.jpg" alt="Log Action Img">
<img class="portal-img" src="images/clipboard.jpg" alt="View Actions Img">
<img class="portal-img" src="images/batch-books.jpg" alt="Facilities Infomation Img">
<img class="portal-img" src="images/close-up-keys.jpg" alt="Key System Img">
</main>
<footer>
<p>Author: Scott Law</p>
<p>Copyright © 2019</p>
</footer>
<script type="text/javascript" src="js/common.js"></script>
</body>
</html>
Browser picture for log action page (the error is on this page). Highlighted yellow is the problem. This occurs on the log action, view action and key system pages.
https://imgur.com/qDvZj8T
Browser picture for index page (it works correctly)
https://imgur.com/e9jVCSg
I would like for the browser to follow the CSS i've set like on the index page. The other pages don't follow suit for some reason.
The bottom paragraph on this HTML page is not following the other <p> in this HTML site. It may be because I forgot to end something, but I don't know.
<!DOCTYPE html>
<html lang="en">
<body style=";">
<head>
<body background="https://images.rapgenius.com/92abc49a4468f440d86e3c66541f0a2b.1000x991x1.jpg">
<title>Video Editor As A Career</title>
<style>
header{
background-color: #c6c6c6;
padding: 30px;
text-align: center;
font-size: 35px;
color: black;
}
p {
color: red;
font-size: 20px;
font-family: Helvetica;
}
nav ul {
list-style-type: none;
padding: 10;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 25%;
background-color: #f1f1f1;
position: fixed;
height: 40%;
overflow: auto;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
li a.active {
background-color: #4CAF50;
color: white;
}
li a:hover:not(.active) {
background-color: #555;
color: white;
}
section:after {
content: "";
display: table;
clear: both;
padding: 20;
}
#media (max-width: 600px) {
nav, article {
width: 100%;
height: auto;
}
}
</head>
</style>
<body>
<header style="font-family:comic sans ms;"><u><b>Video Editor As A Career</b></u></header>
<section>
<nav>
<ul>
<li>MyBlueprint </li>
<li>The Role of A Video Editor</li>
<li>Software</li>
<li>Requirements To Be A Video Editor</li>
<li>What Does A Video Editor Do</li>
<li>Colleges and Universities</li>
<li>Demand</li>
</ul>
</nav>
<div style="margin-left:25%;padding:1px 16px;height:1000px;">
<article>
<a name="targetname1"></a>
<h1 style="color:white;"> <center><b>The Role of A Video Editor</b></center></h1>
<p style="color:white;"> Have you ever seen any of those flashy commercials advertising a brand new product or a very high quality video on Youtube? Chances are is that the video was created by a video editor. Large companies like Microsoft or Cheerios have dedicateds video editors to make their new products look the best, sometimes even better! A video editor must attend either a University, College or Apprenticeship, which would have to be related to film. </p>
link text
<br>
<br>
<hr size=6 width=675 color="white">
<br>
<a name="targetname"></a>
<h1 style="color:white;"> <center><a style="color:white;" href="https://searchmicroservices.techtarget.com/definition/software"><b> Software</b></a></center></h1>
<p style="color:white;">Of course to edit videos you need some sort of software. Professionals use software such as Adobe Premiere or Vegas Pro 16 (older versions of these softwares are not to shabby). In theses softwares you are able to add keyframes, trim/cut the video and many other stylish features. Also a part of video editing is editing audio. For smaller companies you may be asked to not only to edit the video, but also edit the audio. This is no problem with Audacity which is free! </p>
<a href="https://www.audacityteam.org/">
<img src="https://www.audacityteam.org/wp-content/themes/wp_audacity/img/logo.png" width"150" height="150"></a>
<a href="https://www.vegascreativesoftware.com/ca/vegas-pro/">
<img align="right" src="https://vignette.wikia.nocookie.net/logopedia/images/0/0a/Sony_Vegas_Pro_14_icon.png/revision/latest?cb=20160925095337" width"150" height="150"></a>
<br>
<hr size=6 width=675 color="white">
<br>
<a name="targetname2"></a>
<table border="1" cellpadding="5" cellspacing="5">
<caption style="color:white;font-size:150%;" align="top"> <b>Requirements To Be A Video Editor</b></caption>
<tr><center>
<th bgcolor="#ffffcc"> A Masters Degree In Film Production</th>
<th bgcolor="#ffffcc"> Film Degree </th>
<th bgcolor="#ffffcc"> A Bachelor's Degree of Fine Arts</th></center>
<tr>
</table>
<br>
<p style="color:white;"> Video/film editing could be very profitable. The best of the best were able to make over $120,000! In Ontario the provincial average is $49,000, but with a high of $76,000. There is also other ways to make money such as websites like Youtube, Vimeo, Instagram and many other social platforms which would allow you to make money from ads on the website. Some have been able to make these video editing on these sites a full time job and have been very profitable!
<hr size=6 width=675 color="white">
<center>
<a name="targetname3"></a>
<h1 style="color:white;">What Does A Video Editor Do?<h1>
<iframe width="560" height="315" src="https://www.youtube.com/embed/lRgLUTXnZ6I" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</center>
<hr size=6 width=675 color="white">
<center>
<a name="targetname6"></a>
<h1 style="color:white;"><b>Colleges and Universities With Editing/Film Courses</b><h1>
<br>
<a href="http://sites.utoronto.ca/ic/mediaproduction/index.html">
<img src="https://media.licdn.com/dms/image/C560BAQE2yEMrkNmDVw/company-logo_200_200/0?e=2159024400&v=beta&t=b_kXBEkvYUuMueM85D5Il458Ekzgy8OEj5SPITi6P8w"></a>
<a href="https://www.okanagan.bc.ca/home.html">
<img src="https://pbs.twimg.com/profile_images/322923752/OKCollegeCol_400x400.gif" height="200px" width="200px" ></a>
<a href="https://stanfordvideo.stanford.edu/editing/">
<img src="https://upload.wikimedia.org/wikipedia/en/thumb/b/b7/Stanford_University_seal_2003.svg/1200px-Stanford_University_seal_2003.svg.png" height="200px" width="200px"></center></a>
<br>
<hr size=6 width=675 color="white">
<br>
<center><h1 style="color:white;"><b>The Life Of A Film/Video Editor</b><h1>
<a name="targetname5"></a>
<iframe width="560" height="315" src="https://www.youtube.com/embed/rB2_KSKVzko" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<hr size=6 width=675 color="white">
<center><h2 style="color:white;font-size:100%"><b>Companies Which Need Video/Editors</b><h2></center>
<a name="targetname6"></a>
**/Here is where the problem is, from here on down/**
<p1 style="color:white;font-size:50%"> Companies which currently require Video/Film editing services include, Universal needs a Graphic Designer and Animation Specialist. Also, Disney needs a Multiplatform Editor. So if you ever wanted to work in the movie business, maybe video editing is your way to go. A company more local, Pureblink requires an Editor/Motion Graphics Designer. There are many more opportunities for Video Editors everywhere!</p1>
<br>
<br>
<br>
Work Cited Page
</body>
</html>
Charis is right - the p1 tags at the bottom are the problem. Paragraph tags are marked with p - not p1, p2, p3, etc like headline tags i.e. h1, h2, h3, etc. This is what Charis was talking about.
As long as you replace the starting and closing p1 tags with p tags you'll be good to go.
<!DOCTYPE html>
<html lang="en">
<body style=";">
<head>
<body background="https://images.rapgenius.com/92abc49a4468f440d86e3c66541f0a2b.1000x991x1.jpg">
<title>Video Editor As A Career</title>
<style>
header{
background-color: #c6c6c6;
padding: 30px;
text-align: center;
font-size: 35px;
color: black;
}
p {
color: red;
font-size: 20px;
font-family: Helvetica;
}
nav ul {
list-style-type: none;
padding: 10;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 25%;
background-color: #f1f1f1;
position: fixed;
height: 40%;
overflow: auto;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
li a.active {
background-color: #4CAF50;
color: white;
}
li a:hover:not(.active) {
background-color: #555;
color: white;
}
section:after {
content: "";
display: table;
clear: both;
padding: 20;
}
#media (max-width: 600px) {
nav, article {
width: 100%;
height: auto;
}
}
</head>
</style>
<body>
<header style="font-family:comic sans ms;"><u><b>Video Editor As A Career</b></u></header>
<section>
<nav>
<ul>
<li>MyBlueprint </li>
<li>The Role of A Video Editor</li>
<li>Software</li>
<li>Requirements To Be A Video Editor</li>
<li>What Does A Video Editor Do</li>
<li>Colleges and Universities</li>
<li>Demand</li>
</ul>
</nav>
<div style="margin-left:25%;padding:1px 16px;height:1000px;">
<article>
<a name="targetname1"></a>
<h1 style="color:white;"> <center><b>The Role of A Video Editor</b></center></h1>
<p style="color:white;"> Have you ever seen any of those flashy commercials advertising a brand new product or a very high quality video on Youtube? Chances are is that the video was created by a video editor. Large companies like Microsoft or Cheerios have dedicateds video editors to make their new products look the best, sometimes even better! A video editor must attend either a University, College or Apprenticeship, which would have to be related to film. </p>
link text
<br>
<br>
<hr size=6 width=675 color="white">
<br>
<a name="targetname"></a>
<h1 style="color:white;"> <center><a style="color:white;" href="https://searchmicroservices.techtarget.com/definition/software"><b> Software</b></a></center></h1>
<p style="color:white;">Of course to edit videos you need some sort of software. Professionals use software such as Adobe Premiere or Vegas Pro 16 (older versions of these softwares are not to shabby). In theses softwares you are able to add keyframes, trim/cut the video and many other stylish features. Also a part of video editing is editing audio. For smaller companies you may be asked to not only to edit the video, but also edit the audio. This is no problem with Audacity which is free! </p>
<a href="https://www.audacityteam.org/">
<img src="https://www.audacityteam.org/wp-content/themes/wp_audacity/img/logo.png" width"150" height="150"></a>
<a href="https://www.vegascreativesoftware.com/ca/vegas-pro/">
<img align="right" src="https://vignette.wikia.nocookie.net/logopedia/images/0/0a/Sony_Vegas_Pro_14_icon.png/revision/latest?cb=20160925095337" width"150" height="150"></a>
<br>
<hr size=6 width=675 color="white">
<br>
<a name="targetname2"></a>
<table border="1" cellpadding="5" cellspacing="5">
<caption style="color:white;font-size:150%;" align="top"> <b>Requirements To Be A Video Editor</b></caption>
<tr><center>
<th bgcolor="#ffffcc"> A Masters Degree In Film Production</th>
<th bgcolor="#ffffcc"> Film Degree </th>
<th bgcolor="#ffffcc"> A Bachelor's Degree of Fine Arts</th></center>
<tr>
</table>
<br>
<p style="color:white;"> Video/film editing could be very profitable. The best of the best were able to make over $120,000! In Ontario the provincial average is $49,000, but with a high of $76,000. There is also other ways to make money such as websites like Youtube, Vimeo, Instagram and many other social platforms which would allow you to make money from ads on the website. Some have been able to make these video editing on these sites a full time job and have been very profitable!
<hr size=6 width=675 color="white">
<center>
<a name="targetname3"></a>
<h1 style="color:white;">What Does A Video Editor Do?<h1>
<iframe width="560" height="315" src="https://www.youtube.com/embed/lRgLUTXnZ6I" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</center>
<hr size=6 width=675 color="white">
<center>
<a name="targetname6"></a>
<h1 style="color:white;"><b>Colleges and Universities With Editing/Film Courses</b><h1>
<br>
<a href="http://sites.utoronto.ca/ic/mediaproduction/index.html">
<img src="https://media.licdn.com/dms/image/C560BAQE2yEMrkNmDVw/company-logo_200_200/0?e=2159024400&v=beta&t=b_kXBEkvYUuMueM85D5Il458Ekzgy8OEj5SPITi6P8w"></a>
<a href="https://www.okanagan.bc.ca/home.html">
<img src="https://pbs.twimg.com/profile_images/322923752/OKCollegeCol_400x400.gif" height="200px" width="200px" ></a>
<a href="https://stanfordvideo.stanford.edu/editing/">
<img src="https://upload.wikimedia.org/wikipedia/en/thumb/b/b7/Stanford_University_seal_2003.svg/1200px-Stanford_University_seal_2003.svg.png" height="200px" width="200px"></center></a>
<br>
<hr size=6 width=675 color="white">
<br>
<center><h1 style="color:white;"><b>The Life Of A Film/Video Editor</b><h1>
<a name="targetname5"></a>
<iframe width="560" height="315" src="https://www.youtube.com/embed/rB2_KSKVzko" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<hr size=6 width=675 color="white">
<center><h2 style="color:white;font-size:100%"><b>Companies Which Need Video/Editors</b><h2></center>
<a name="targetname6"></a>
**/Here is where the problem is, from here on down/**
<p style="color:white;font-size:50%"> Companies which currently require Video/Film editing services include, Universal needs a Graphic Designer and Animation Specialist. Also, Disney needs a Multiplatform Editor. So if you ever wanted to work in the movie business, maybe video editing is your way to go. A company more local, Pureblink requires an Editor/Motion Graphics Designer. There are many more opportunities for Video Editors everywhere!</p>
<br>
<br>
<br>
Work Cited Page
</body>
</html>
p1 tag that you use seems wrong.p element is not used as h element to have different "deegrees" based on the size you want to create.
Hey all I am hoping you guys can help me? I am trying to edit this and need to be able to add a url when someone clicks the button. Also the ability to download a file. What would I add for this?
<div class="optin" data-lb="editable-optional">
<div class="shadow"></div>
<img src="img/books-small.png" class="minor-image" />
<p>Enter your email to download the guide</p>
<div>
<input id="header-button" type="submit" value="Free Instant Access »" onclick="javascript:return false"/>
Just use the download tag. You can add the image inside the a tag.
<div class="optin" data-lb="editable-optional">
<div class="shadow"></div>
<a href="img/books-small.png" download><img class="minor-
image"/></a>
<p>Enter your email to download the guide</p>
<div>
<input id="header-button" type="submit" value="Free Instant Access »" onclick="javascript:return false"/>
Using <div> s is not recommended by W3C standards.
Why don’ t you just use the hyperlink <a> tag:
Free Instant Access »
You can use CSS styles to make the hyperlink <a> look like a buttom
(taken from W3Schools):
a:link, a:visited {
background-color: #f44336;
color: white;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover, a:active {
background-color: red;
}
I just got into html and css recently and am kinda stuck on this one. Im working on a login box and I cannot get the login box and the submit button to be perfectly aligned with each other.
The only way that kind of worked was if I wrote them both on one line like this, then they would be (horizontally) perfectly aligned but I wasnt able to change the space between them:
First attempt (code without the Dot after <):
<.input type="text" id="username">submit
Then I worked it out in some other way. It consists of an input type text and an input type submit in my html file.
In my CSS file im first calling the the Class in which all my login Inputs are nisted (.logsec for login section) and then the id of my input type text and input type submit.
The Class is called logsec (for Login section) and my input type submit is called id=Button and my input type text is called id=subinput.
HTML CODE:
<html lang="en">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="css/font.css">
<head>
<meta charset="utf-8">
<title>Main</title>
</head>
<body>
<div class="container">
<div class="brandname">
<h1 <id="title" class=""><span id="logo">Test</h1>
</div>
<div class="logsec">
<div class="box-header">
<p> login</p>
</div>
<input type="submit" id="button" value="submit" style="float:right"/>
<input type="text" id="subinput" style="width:100%;"/>
<p class="recover">Recover Password</p>
<h3> <p class="signup">signup </h3>
<footer> <p Class="footer">LOGIN</p></footer>
</div>
</body>
</html>
CSS CODE:
body {
background-color: grey;
font-size: 30px;
text-align: center;
}
.brandname {
margin-top: 300px;
}
.recover {
font-size: 15px;
text-align: center;
}
.signup {
font-size: 15px;
text-align: center;
}
/*///////////////////// LOGIN BUTTON ///////////////////////////////////////*/
.logsec [id=button] {
vertical-align: top;
Would really love if someone could help me out here.
Im terrible at it but i would Hope someone can help me.
Thanks Guys.
There were some errors in your code, one of which ".logsec [id=button]" was stopping the button lining up. I removed the float and used inline-block instead. Google it, I'm sure the W3C has some tutorials. Anyway, here's the working code:
CSS
body {
background-color: grey;
font-size: 30px;
text-align: center;
}
.brandname {
margin-top: 300px;
}
.recover {
font-size: 15px;
text-align: center;
}
.signup {
font-size: 15px;
text-align: center;
}
#subinput {
display: inline-block;
}
HTML
<div class="container">
<div class="brandname">
<h1 id="title"><span id="logo">Test</span></h1>
</div>
<div class="logsec">
<div class="box-header">
<p> login</p>
</div>
<input type="text" id="subinput"/>
<input type="submit" id="button" value="submit"/>
<p class="recover">Recover Password</p>
<h3> <p class="signup">signup </h3>
<footer> <p Class="footer">LOGIN</p></footer>
</div>
Here it is working in a fiddle (I hope, not sure how long the code saves for)
FIDDLE