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.
Related
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.
I want to show a trailer and informational text next to it in my slick slider. However, they are positioned on top of each other whatever I try.
I have tried flexbox, and position them in rows. I also tried inline display, and float right and left for each div.
/* Styling the Trailer Slick Slider */
.single-item-rtl {
max-width: 1100px;
position: relative;
top: 0;
left: 0;
display: block;
margin-left: auto;
margin-right: auto;
float: left;
}
/* Styling the Trailer Content */
#captain-marvel,
#endgame {
display: inline-flex;
flex-direction: row;
max-width: 1000px;
}
<article id="secondThirdArticle">
<div class="middleh3">Trailers & New Releases</div>
</br>
<div class="inner-grid">
<div dir="rtl" class="single-item-rtl">
<div id="captain-marvel">
<div>
<h4> Captain Marvel </h4>
<p>The MCU’s most powerful hero is set to land on the big screen. Brie Larson stars as Carol Danvers, aka Captain Marvel, alongside Samuel L. Jackson as Nick Fury, and Jude Law as Walter Lawson. In the midst of an inter-galactic war that threatens
to destroy the Earth, Carol Danvers must rise to a seemingly impossible challenge. Following the post-credit teaser of Avengers: Infinity War Part One, Captain Marvel is one of the most eagerly anticipated films of the year.</p>
</div>
<div>
<iframe width="504" height="284" src="https://www.youtube.com/embed/Z1BCujX3pw8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</br>
</div>
<div id="endgame">
<div>
<h4> Avengers: Endgame </h4>
<p>The grave course of events set in motion by Thanos that wiped out half the universe and fractured the Avengers ranks compels the remaining Avengers to take one final stand in Marvel Studios' grand conclusion to twenty-two films, Avengers: Endgame.</p>
</div>
<div>
<iframe width="504" height="284" src="https://www.youtube.com/embed/TcMBFSGVi1c" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</br>
</div>
</div>
</div>
</br>
See All Trailers
</article>
`
I want some centred text with a header on the side of the trailer. They end up on top of each other. See website: http://www.student.city.ac.uk/~aczc972/
On the parent, use
display: flex;
align-items: center;
and it will line them up left-right. Just make sure the other components are direct children of the parent you put these styles on!
Use the grid exhibition layout. Basically you set a two columns: the text column and the trailer column and make sure that both occupy the role parent div. By doing so, you will properly separate both contents.
You may also search more properties of it such as spacing and better ways for organize your template. But basically, you could separate divs as follows:
html:
<div id="captain-marvel">
<div id="captain-marvel-title><h4> Captain Marvel </h4>
<p>The MCU’s most powerful hero is set to land on the big screen. Brie Larson stars as Carol Danvers, aka Captain Marvel, alongside Samuel L. Jackson as Nick Fury, and Jude Law as Walter Lawson. In the midst of an inter-galactic war that threatens to destroy the Earth, Carol Danvers must rise to a seemingly impossible challenge. Following the post-credit teaser of Avengers: Infinity War Part One, Captain Marvel is one of the most eagerly anticipated films of the year.</p>
</div>
<div id="captain-marvel-trailer">
<iframe width="504" height="284" src="https://www.youtube.com/embed/Z1BCujX3pw8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
css:
#captain-marvel{
display:grid;
grid-template-columns: 1fr 1fr;
}
#captain-marvel-title{
grid-column:1;
background: red;
}
#captain-marvel-trailer{
grid-column:2;
background: blue;
}
I colored the div so you can see the delimitation between both.
For more information, please check this link
Hope it helps!
/* Styling the Trailer Content */
#captain-marvel, #endgame {
display: inline-flex;
flex-direction: row;
max-width: 1000px;
width: 100%;
}
.left {
float: left;
width: 50%;
}
.right {
float: right;
width: 50%;
}
I am currently building my first webpage using a custom font from the CSS. This looks like this:
#font-face {
font-family: "Baiti";
src: url("./fonts/baiti.ttf");
}
body { font-family: "Baiti", serif }
.navbar
{
overflow: hidden;
background-color: #333;
position: fixed; /* Set the navbar to fixed position */
top: 0; /* Position the navbar at the top of the page */
width: 100%; /* Full width */
}
/* Links inside the navbar */
.navbar a {
float: right;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 20px;
text-decoration: none;
}
/* Change background on mouse-over */
.navbar a:hover {
background: #ddd;
color: black;
}
/* Main content */
.main {
margin-top: 30px; /* Add a top margin to avoid content overlay */
}
.container{
width:900px;
margin:auto;
}
.box-2 /*targeting class from HTML*/
{
border:8px dotted #ccc;
}
I am now putting some text into my page. Some is inside a table while other is outside of a table:
<html>
<head>
<title>innomotion media</title>
<!--reference CSS file, will only affect CSS PART, HTML comes first-->
<link rel="stylesheet"
type"text/css"
href="styles.css">
</head>
<body>
<!--NavBar-->
<div class="navbar">
Contact
What we do
Who we are
Home
</div>
<!--Heading-->
<div class="container"> <!--width set in css-->
<div align="center" style="padding-top: 50px">
<img
src="./img/banner_top.jpg"
width=100%
</img>
</div>
<div align="center" style="padding-top: 10px" >
<font color="#534f4f" size="+1">
<h1>Hello, friend.</h1>
</font>
</div>
<div align="justify">
<font color="#534f4f" size="+2" >
<p>We here at innomotion media, a young start up located in the heart of Hamburgs' city, will get your own app or (mobile) game going live in no time!
We offer you the cheapest but also the quickest way of getting your app or game finished and monetized.
Sit back and relax while we do all the work for you. Or get involved and create your own assets for us to use and therefore
shorten developement time. Our plans offer 100% flexibility, so that we will tailor the perfect plan for your individual needs.
</p>
</font>
</div>
<div align="center" class="box-2">
<div align="center>
<font color="#534f4f" size="+1">
<h1>Who we are</h1>
</font>
</div>
<div style="padding-left: 15px; padding-right: 15px">
<table border="0">
<tr> <!--tablerow-->
<th width=400px>
<div align="center">
<img
src="./img/me.png"
width=60%
</img>
</div>
</th>
<th width=400px>
<div align="justify">
<font color="#534f4f" size="+2" >
<h3>Julius Tolksdorf</h3>
<p>CEO of innomotion media and head of software developement.<br>
He will be your primary contact during the planning and developement processes.
Julius has already finished about 20 apps & games and has years of experience being an Android developer.
</p>
</font>
</div>
</th>
</rt> <!--for padding-->
<tr height=20px/>
</rt>
</table>
</div>
</div>
</div>
</body>
</html>
But the result looks like this:
So, if my eyes aren't deceiving me, both texts don't look the same, or do they? To me, the one inside the table seems to be "bolder" or "bigger" in a way? or maybe even a bit darker. However, this cannot be from the HTML code I wrote, or am I just blind here?
The problem is that you are using a th tag, which applies the style font-weight:bold (in my browser at least, and presumably yours).
One simple solution is to add a css rule to override this browser default. A better solution is probably to change the ths (table header) to tds (table cell).
I was able to find this problem by copying your html into the stack editor, then right clicking on the bold text, choosing Inspect, then going to computed properties and looking at the applied properties. I suggest you get comfortable with the inspector; it's invaluable in debugging webpage problems.
th {
font-weight:normal;
}
<div class="container"> <!--width set in css-->
<div align="center" style="padding-top: 50px">
<img
src="./img/banner_top.jpg"
width=100%
</img>
</div>
<div align="center" style="padding-top: 10px" >
<font color="#534f4f" size="+1">
<h1>Hello, friend.</h1>
</font>
</div>
<div align="justify">
<font color="#534f4f" size="+2" >
<p>We here at innomotion media, a young start up located in the heart of Hamburgs' city, will get your own app or (mobile) game going live in no time!
We offer you the cheapest but also the quickest way of getting your app or game finished and monetized.
Sit back and relax while we do all the work for you. Or get involved and create your own assets for us to use and therefore
shorten developement time. Our plans offer 100% flexibility, so that we will tailor the perfect plan for your individual needs.
</p>
</font>
</div>
<div align="center" class="box-2">
<div align="center>
<font color="#534f4f" size="+1">
<h1>Who we are</h1>
</font>
</div>
<div style="padding-left: 15px; padding-right: 15px">
<table border="0">
<tr> <!--tablerow-->
<th width=400px>
<div align="center">
<img
src="./img/me.png"
width=60%
</img>
</div>
</th>
<th width=400px>
<div align="justify">
<font color="#534f4f" size="+2" >
<h3>Julius Tolksdorf</h3>
<p>CEO of innomotion media and head of software developement.<br>
He will be your primary contact during the planning and developement processes.
Julius has already finished about 20 apps & games and has years of experience being an Android developer.
</p>
</font>
</div>
</th>
</rt> <!--for padding-->
<tr height=20px/>
</rt>
</table>
</div>
</div>
If you use the dev tools in Chrome to inspect the element, you will see that the font-weight is being inherited from the th cell. You should not be using table headers this way.
I would strongly recommend against using table-based layouts in modern web development, but in this instance, you should be putting your header on one row and move your image and paragraph to a new row, using proper td table cells.
[Edit]
To elaborate further, tables are the old way to achieve a small part of what the modern grid properties achieve. To achieve the desired layout, you will need to use two rows, the first of which should span both columns:
.center{
text-align:center;
}
<table border="0">
<tr>
<th colspan=2>
<h1>Julius Tolksdorf</h1>
</th>
</tr>
<tr>
<td class="center">
<img
src="https://images.pexels.com/photos/730896/pexels-photo-730896.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260"
width=60%
/>
</td>
<td class="center">
<font color="#534f4f" size="+2" >
<p>CEO of innomotion media and head of software developement.
<br>
He will be your primary contact during the planning and developement processes.
Julius has already finished about 20 apps & games and has years of experience being an Android developer.
</p>
</font>
</td>
</tr>
</table>
You are applying size = "+2" to all the text and not just the title
Change this:
<font color="#534f4f" size="+2" >
<h3>Julius Tolksdorf</h3>
<p>CEO of innomotion media and head of software developement.<br> He will be your primary contact during the planning and developement processes. Julius has already finished about 20 apps & games and has years of experience being an Android developer.</p>
</font>
To this:
<font color="#534f4f" size="+2" >
<h3>Julius Tolksdorf</h3>
</font>
<p>CEO of innomotion media and head of software developement.<br> He will be your primary contact during the planning and developement processes. Julius has already finished about 20 apps & games and has years of experience being an Android developer.</p>
Also, check class="box-2" which is assigned only to the first text
Hello i am new for css and html.. I need to remove the space between body and footer. Any help ?
I want to add an image at the same lines with paragraph
<!DOCTYPE html>
<html lang="en">
<head>
<title>Neotic</title>
</head>
<body>
<div>
<center><img src="{{STATIC_URL}}Neoticlogo.png" height="200" width="400" alt="Logo" ></center>
<center> <font face="Arial" size="14.18" color=" #587974" >Beat the markets with AI </font></center>
</div>
</br>
</br>
<div class='row' style="background: #3CB371" >
<div class="col-lg-4">
<p style=" color:#EDEDED; font-family: Arial; font-size:+9; padding-left: 90px; width:400px" align="justify"> Neotic is a trading support platform, that allows traders to test trading strategies and provides related trading recommendations leveraging artificial intelligence, without writing a single line of code.</p>
</br>
<p style=" color:#EDEDED; font-family: Arial; font-size:+9; padding-left: 90px; width:400px" align="justify"> The artificial intelligence is based on a machine learning algorithm that incorporates corporate fundamentals, historical prices and financial news</p>
<b> <p style=" color:#EDEDED; font-family: Arial; font-size:+10; padding-left: 90px; width:400px" align="justify"> We are upgrading our services and revamping our brand</p> </b>
</div>
<div class="well">
<center> <p class="text-muted" style="color:#EDEDED; font-family: Arial; font-size:+2" >©2017 Neotic. All rights reserved </p> </center>
</div>
</footer>
</body>
Okay. Fist of all... Please give all of your code and use up-to-date HTML5 code...
Using the poorly written code you provided, I made a JSFiddle.
<div class="well">
<center> <p class="text-muted" style="color:#EDEDED; font-family: Arial; font-size:+2" >©2017 Neotic. All rights reserved </p> </center>
</div>
</footer>
the div with the class well had a height of who knows what, so when I set the background color and the height at 20px, I came out with a result just like your picture.
PS: I removed the outdated center tags and added a text-align:; to the div style. I also fixed your </br> tags which were incorrect and reset them to <br/>. I also added missing starting elements like <footer> because of the </footer> in your code. Thanks to James and j08691 who pointed out that the <font> tags are also outdated. I fixed your code, but next time please check your HTML for outdated tags.
<title>Neotic</title>
<body>
<div>
<img src="{{STATIC_URL}}Neoticlogo.png" height="200" width="400" alt="Logo" style>
<h1 style="text-align: center;">
<font face="Arial" size="14.18" color=" #587974">Beat the markets with AI </font>
</h1>
</div>
<br/>
<br/>
<div class='row' style="background: #3CB371" >
<div class="col-lg-4">
<p style=" color:#EDEDED; font-family: Arial; font-size:+9; padding-left: 90px; width:400px" align="justify"> Neotic is a trading support platform, that allows traders to test trading strategies and provides related trading recommendations leveraging artificial intelligence, without writing a single line of code.</p>
<br/>
<p style=" color:#EDEDED; font-family: Arial; font-size:+9; padding-left: 90px; width:400px" align="justify"> The artificial intelligence is based on a machine learning algorithm that incorporates corporate fundamentals, historical prices and financial news</p>
<b> <p style=" color:#EDEDED; font-family: Arial; font-size:+10; padding-left: 90px; width:400px" align="justify"> We are upgrading our services and revamping our brand</p> </b>
</div>
<footer>
<div style="background-color:#333; height:20px;">
<p style="font-family: Arial; font-size:+2; text-align:center;color:#fff;" >©2017 Neotic. All rights reserved </p>
</div>
</footer>
I have two elements (map + description inside a box). When on a large screen, both elements appear on the same line, which is good. However, they stay on the left of the page and I would like them to sit in the middle.
Here is a fiddle of the below:
.map {
float: left padding: 10px;
width: 410px;
border: 1px solid black;
display: inline-block;
}
.map1 {
float: right padding: 10px;
width: 410px;
border: 1px solid black;
display: inline-block;
}
p {
float: left;
width: 100%;
}
<div class="map">
<iframe src="https://ctrc00.carto.com/builder/e2f49f3c-b793-11e6-9ceb-0ef24382571b/embed" width="100%" height="540" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
<p><i>
<u>Map 1: <strong>12,083 listings</strong> (Sept.2016)</i>
</u>
<h4><span style="color: #FFA500;"><strong>Activity:</strong></span></h4>
<br>
<strong>183</strong> estimated nights/year
<br>
<strong>$127</strong> price/night
<br>
<strong>50.2%</strong> estimated occupancy
<br>
<strong>$1920</strong> estimated income/month
<br>
<h4><span style="color: #FFA500;"><strong>Listing per Host:</strong></span></h4>
<br>
<strong>38.2%</strong> multi-listings
<br>
<strong>62.0%</strong> single listings
<br>
<br>
<h4><span style="color: #FFA500;"><strong>Room Type:</strong></span></h4>
<br>
<strong>55.3%</strong> entire homes/apartment
<br>
<strong>42.6%</strong> private rooms
<br>
<strong>2.1%</strong> shared rooms
<br>
</p>
</div>
<p>
<div class="map1">
<iframe src="https://ctrc00.carto.com/builder/221c9570-b794-11e6-ad89-0e8c56e2ffdb/embed" width="100%" height="540" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
<p><i><u>Map 2: <strong>15,640 listings</strong> (Sept.2016)</p></i>
</u>
<h4><span style="color: #FFA500;"><span style="color: #FFA500;"><strong>Activity:</strong></span></h4>
<br>
<strong>60</strong> estimated nights/year
<br>
<strong>$196</strong> price/night
<br>
<strong>16.3%</strong> estimated occupancy
<br>
<strong>$759</strong> estimated income/month
<br>
<br>
<h4><span style="color: #FFA500;"><strong>Listing per Host:</strong></span></h4>
<br>
<strong>28.5%</strong> multi-listings
<br>
<strong>71.5%</strong> single listings
<br>
<br>
<h4><span style="color: #FFA500;"><strong>Room Type:</strong></span></h4>
<br>
<strong>60.3%</strong> entire homes/apartment
<br>
<strong>37.9%</strong> private rooms
<br>
<strong>1.8%</strong> shared rooms
<br>
</p>
</div>
Above and under, I have some simple text/paragraph that are in the middle.
Just place your whole html code inside this
<div class="container"> </div>
and add one class only
.container{
display: flex;justify-content: center;width:100%;
}
.container {
justify-content: center;
display: flex;
}
<div class="container">
<p class="map_airbnb"><iframe src="https://prox.carto.com/builder/4dedf917-eb0c-4121-8c6d-f4ab2a6b75d3/embed" width="100%" height="540" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
<strong>Activity:</strong><br><br>
183 estimated nights/year<br>
$127 price/night<br>
50.2% estimated occupancy<br>
$1920 estimated income/month<br><br>
<strong>Listing per Host:</strong><br>
38.2% multi-listings<br>
62.0% single listings <br><br>
<strong>Room Type:</strong><br>
55.3% entire homes/apartment<br>
42.6% private rooms <br>
2.1% shared rooms <br>
</p>
<p class="map_airbnb1"><iframe src="https://prox.carto.com/builder/4dedf917-eb0c-4121-8c6d-f4ab2a6b75d3/embed" width="100%" height="540" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
<strong>Activity:</strong><br><br>
60 estimated nights/year<br>
$196 price/night<br>
16.3% estimated occupancy<br>
$759 estimated income/month<br><br>
<strong>Listing per Host:</strong><br>
28.5% multi-listings<br>
71.5% single listings <br><br>
<strong>Room Type:</strong><br>
60.3% entire homes/apartment<br>
37.9% private rooms <br>
1.8% shared rooms <br>
</p>
</div>
Put an external div or container to your maps and use justify-content:center
Use CSS Flexbox. Wrap these maps inside a container (in my case map_holder).
Have a look at the snippet below (Use full screen):
.map_holder {
display: flex;
justify-content: center;
}
body {
margin: 0;
}
<div class="map_holder">
<p class="map_airbnb"><iframe src="https://prox.carto.com/builder/4dedf917-eb0c-4121-8c6d-f4ab2a6b75d3/embed" width="100%" height="540" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
<strong>Activity:</strong><br><br>
183 estimated nights/year<br>
$127 price/night<br>
50.2% estimated occupancy<br>
$1920 estimated income/month<br><br>
<strong>Listing per Host:</strong><br>
38.2% multi-listings<br>
62.0% single listings <br><br>
<strong>Room Type:</strong><br>
55.3% entire homes/apartment<br>
42.6% private rooms <br>
2.1% shared rooms <br>
</p>
<p class="map_airbnb1"><iframe src="https://prox.carto.com/builder/4dedf917-eb0c-4121-8c6d-f4ab2a6b75d3/embed" width="100%" height="540" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
<strong>Activity:</strong><br><br>
60 estimated nights/year<br>
$196 price/night<br>
16.3% estimated occupancy<br>
$759 estimated income/month<br><br>
<strong>Listing per Host:</strong><br>
28.5% multi-listings<br>
71.5% single listings <br><br>
<strong>Room Type:</strong><br>
60.3% entire homes/apartment<br>
37.9% private rooms <br>
1.8% shared rooms <br>
</p>
</div>
Hope this helps!
You can use media queries for that, so just update your css like this:
.map_airbnb {
float:left;
width: 50%;
}
.map_airbnb1 {
float:right;
width: 50%;
}
#media screen and (max-width: 480px) {
.map_airbnb,
.map_airbnb1 {
width: 100%;
}
}
Here your original with this update https://jsfiddle.net/9ssukjg4/
Wrap both blocks in a div and use css3 flexbox. Fiddle. – Muhammad Usman 3 mins ago