I'm currently building a one-page website for a coding school application. I'm nearly there but since yesterday, the external hypertext links I've put in my HTML code won't work. It was working perfectly fine until then and now you can't click on them. I don't see how the code is wrong.
The internal anchors (navigation bar items to go to different parts of the page) are working great, but I have trouble with the external links that lead to other website. The anchors are images of NGOs (WWF, Sea Shepherds, Greenpeace). I used to be able to go to their website from there.
Any help would be most welcome, since the project is due on the 12th of march!
Thank very much everyone!
Snippet:
$(document).ready(function() {
$('.js-scrollTo').on('click', function() {
var page = $(this).attr('href');
var speed = 750;
$('html, body').animate({
scrollTop: $(page).offset().top
}, speed);
return false;
});
});
$(document).ready(function() {
$('body').append('Haut');
});
$('.top_link').css({
'position': 'fixed',
'right': '20px',
'bottom': '50px',
'display': 'none',
'padding': '20px',
'background': '#fff',
'-moz-border-radius': '40px',
'-webkit-border-radius': '40px',
'border-radius': '40px',
'opacity': '0.9',
'z-index': '2000'
});
$(window).scroll(function() {
posScroll = $(document).scrollTop();
if (posScroll >= 550)
$('.top_link').fadeIn(600);
else
$('.top_link').fadeOut(600);
});
#font-face {
font-family: 'Old Standard TT';
src: url(OldStandard-Regular.ttf);
}
#font-face {
font-family: 'Bahiana-Regular';
src: url(Bahiana-Regular.otf);
}
header {
background-image: url("http://imageshack.com/a/img924/6688/ocZGBh.jpg");
background-size: cover;
min-height: 515px;
background-repeat: no-repeat;
background-position: center;
padding-top: 70px;
margin: auto;
}
nav {
width: 100%;
position: fixed;
height: 100%;
}
nav ul {
width: inherit;
display: table;
margin-top: 0px;
background-color: white;
float: left;
margin: 100%, auto;
}
nav ul li {
display: table-cell;
width: 16%;
}
ul li a {
display: block;
text-align: center;
color: rgba(0, 0, 0, .7);
text-decoration: none;
padding: 8px 8px 17px 8px;
font-family: 'Bahiana';
font-size: 25px;
}
body {
background-color: #DFDFDD;
margin: 0px;
}
h1 {
font-family: 'Old Standard TT', serif;
font-size: 25px;
color: #9e9c9c;
text-align: center;
margin-top: 15px;
}
h2 {
font-family: 'Old Standard TT', serif;
font-size: 30px;
color: #77D9D2;
text-align: center;
margin-left: 300px;
margin-right: 300px;
}
h3 {
font-family: "Old Standard TT", serif;
font-size: 20px;
color: #77D9D2;
}
section {
margin-top: 100px;
margin-bottom: 200px;
}
.pres,
.his,
.support {
text-align: center;
margin-left: 300px;
margin-right: 300px;
font-size: 20px;
color: #9e9c9c;
font-family: "Helvetica", sans-serif;
}
.pres-large {
font-family: 'Old Standard TT', serif;
font-size: 25px;
color: #77D9D2;
}
.des {
padding: 10px;
font-size: 15px;
font-family: "Helvetica", sans-serif;
text-align: justify;
color: #5F6C70;
}
.row {
display: flex;
margin: 60px 0;
text-align: center;
}
.card {
background-color: white;
width: 80%;
height: 800px;
margin-top: 25px;
margin-bottom: 25px;
}
.card.card-left {
margin: 0 5% 0 15%;
}
.card.card-right {
margin: 0 15% 0 5%;
}
.photo {
width: 100%;
}
#his {
clear: both;
}
table {
margin: auto;
}
table,
th,
td {
border-style: hidden;
text-align: center;
font-size: 20px;
font-family: 'Bahiana', Helvetica, sans-serif;
color: #9e9c9c;
width: 80%;
table-layout: fixed;
}
td {
width: 100px;
}
.tickets {
color: #77D9D2;
}
#gp {
float: left;
width: 200px;
margin-top: 20px;
}
#ssh {
float: right;
width: 200px;
margin-top: 15px;
}
#wwf {
width: 200px;
margin-left: 50px;
}
.press {
font-size: 25px;
font-family: "Old Standard TT";
color: #5F6C70;
text-align: center;
margin-left: 300px;
margin-right: 300px;
}
.separation {
display: block;
margin-left: auto;
margin-right: auto;
}
footer {
font-family: "Bahiana";
text-align: center;
font-size: 30px;
color: rgba(0, 0, 0, .7);
background-color: white;
margin-bottom: 10px;
padding-bottom: 0px;
}
<body>
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<nav>
<ul>
<li id="nav-what"> <a class="js-scrollTo" href="#what">What is the Wild Circus</a></li>
<li id="nav-how"> <a class="js-scrollTo" href="#how">How does that work</a></li>
<li id="nav-history"> <a class="js-scrollTo" href="#his">History</a></li>
<li id="nav-tour"> <a class="js-scrollTo" href="#tour">Tour Dates</a></li>
<li id="nav-support"> <a class="js-scrollTo" href="#support">Support</a></li>
<li id="nav-press"> <a class="js-scrollTo" href="#press">Press</a></li>
</ul>
</nav>
<header>
<h1>
<img src="http://imageshack.com/a/img922/8683/f9lHHB.png"> <br>
Welcome to the most Amazing and Grandiloquent Sock Puppet show !!
</h1>
</header>
<section id="what">
<img class="separation" src="http://imageshack.com/a/img924/1005/SQ06K9.png">
<h2>WHAT IS THE WILD CIRCUS?</h2>
<div class="pres">
<p>Did you know that because of Climate changing, the northpole ice floe is melting away a bit more every year and it gives polar bears a hard time to find food? <br>
<br>
Did you know that because of deforestation, Apes don’t know where to live anymore ? <br>
<br>
Times are quite hard for our furry friends, right now…But don’t feel sorry or helpless, there’s still a lot of stuff we can do to help them out !
</p>
<p class="pres-large">Oscar the Polar Bear, Maurice the Orang-utan, Freddy the Sloth and many more of their friends are waiting for you to show you where and how they live and why it’s important to keep them in their natural habitat. They will show you all the things you can do to help ! <br>
The wild Circus is an educationnal and entertaining way to discover some of the most endangered species of our world. Especially designed for kids, our shows bring you Orcas, Tucans, Polar Bears, Orangutans, sea turtles in their true environnement so you can discover how they live, why they are in danger and how to protect them. <br>
Through multiple funny and witty playlets, kids will learn facts and tips about wildlife and its preservation. We aim to bring knowledge and good times altogether. It’s a wonderful way to learn and have fun !
</p>
</div>
<img class="separation" src="http://imageshack.com/a/img924/2082/DjtUHh.png">
</section>
<section id="how">
<img class="separation" src="http://imageshack.com/a/img924/1005/SQ06K9.png">
<h2>HOW DOES IS WORK?</h2>
<div class="pres">
<p>The show is divided in several playlets. Each playlet covers a certain habitat, with multiple animals, each of them with a strong personnality the Kids will simply fall in love with them ! <br>
Every single animal is made of a giant sock and accessories and animated by one of our awesome puppet masters <br>
At the end of the show, kids will be able to meet them in person and ask any questions they want
</p>
</div>
<div class="row">
<div id="jungle" class="card card-left">
<h3>Welcome to the Jungle</h3>
<img class="photo" src="http://imageshack.com/a/img922/6589/OIQIpr.jpg">
<p class="des">Maurice the Orang-Utan, Stanley the Rhino and Krisha the Tigress are taking you to Sumatra Island. You will discover a beautiful, deep forest : the jungle. It’s currently dying from deforestation and so, all those gorgeous animals are losing their home. Let’s see what solution we can find to protect them</p>
<img class="separation" src="http://imageshack.com/a/img924/2082/DjtUHh.png">
</div>
<div id="sea" class="card card-right">
<h3>Twenty thousands Leagues under the Sea</h3>
<img class="photo" src="http://imageshack.com/a/img921/111/Zr6ZHn.jpg">
<p class="des">Have you ever seen the clear waters of the great barrier reef, off the coast of Australia? Like in Pixar’s Finding Nemo, it’s a very colourful world with sea turtles, clownfishs, starfishs and corals. But overfishing and climate change are a threat to this paradise. On our trip to the Coral Triangle, we’ll meet Rita the Turtle, Cabo the clowfish and loads and loads of other fantastic creatures, so they can tell their story.</p>
<img class="separation" src="http://imageshack.com/a/img924/2082/DjtUHh.png">
</div>
</div>
<div class="row">
<div id="santa" class="card card-left">
<h3>The Land of Santa</h3>
<img class="photo" src="http://imageshack.com/a/img924/1781/6fNY6c.jpg">
<p class="des">Temperatures in the Arctic are rising twice as fast as in the rest of the planet! When the ice melts, the sea level rises and polar bears like Oscar are having trouble finding food and a home. Plus, the pollution of waters by shipping traffic and drilling for petrol in this area is dramatically harmful for plankton, which is the basic food of tons of different sea creatures, like Bella the gigantic humpback whale. Santa’s not too happy about it and might even come and give us a hand to save those majestic mammals !</p>
<img class="separation" src="http://imageshack.com/a/img924/2082/DjtUHh.png">
</div>
<div id="lung" class="card card-right">
<h3>The Lungs of the Planet</h3>
<img class="photo" src="http://imageshack.com/a/img922/1086/2ceBcx.jpg">
<p class="des">Last stop of our trip, but not least : The Amazon. The Amazon is the most gigantic, dense tropical forest called the Lung of the planet. It’s the home of one in ten known species on earth but also of many unnumbered undiscovered species of insects, monkeys, exotic birds. The Amazon is also the biggest victim of deforestation today and it is literally dying. And every animal even so tiny living there is dying with it. There is a clear link between the health of the Amazon and the health of the rest of the planet.<br>
The Amazon is gonna be our biggest stop cause there’s so much to see, so much to do. It is critical to preserve the tropical forest so we can promise a brighter future for Alvin the Spider Monkey, Freddy the Sloth, Mara the Tucan but also for every single living being on this planet, including you !<br>
Come on then, we’re waiting for you !!!
</p>
<img class="separation" src="http://imageshack.com/a/img924/2082/DjtUHh.png">
</div>
</div>
</section>
<section id="his">
<img class="separation" src="http://imageshack.com/a/img924/1005/SQ06K9.png">
<h2>HISTORY</h2>
<p class="his">The story of the Wild Circus begins in 2006 when Elena Woodward, a Oregon kindergarden teacher started discussing environnement issues with her class of 3 and 4 years olds. The kids reacted strongly, fully understanding and feeling the injustice of our world toward the wildlife. Elena resented the fact that somehow, the kids are the fiercest defenders of nature but most of the time they just don’t know what’s happening to it. With her brother Ethan, she had this crazy idea to create a place where Kids could learn about wild animals and their preservation in an educationnal and entertaining way. They wanted something clever but simple and fun. Their love of socks did the rest. And so was born the Wild Circus.
They started performing in schools in Oregon but then it just caught on fire, becoming this huge success we now know ! After touring the US and Canada in 2016, The Wild Circus is now coming to Europe to share their knowledge and good spirits !
</p>
<img class="separation" src="http://imageshack.com/a/img924/2082/DjtUHh.png">
</section>
<section id="tour">
<img class="separation" src="http://imageshack.com/a/img924/1005/SQ06K9.png">
<h2>TOUR DATES</h2>
<table>
<tr>
<td>April 16</td>
<td>Birmingham</td>
<td class="tickets">Get Tickets</td>
</tr>
<tr>
<td>April 17</td>
<td>London</td>
<td class="tickets">Get Tickets</td>
</tr>
<tr>
<td>April 20</td>
<td>Glasgow</td>
<td class="tickets">Get Tickets</td>
</tr>
<tr>
<td>April 21</td>
<td>Dublin</td>
<td class="tickets">Get Tickets</td>
</tr>
<tr>
<td>April 24</td>
<td>Paris</td>
<td class="tickets">Get Tickets</td>
</tr>
<tr>
<td>April 26</td>
<td>Amsterdam</td>
<td class="tickets">Get Tickets</td>
</tr>
<tr>
<td>April 27</td>
<td>Copenhagen</td>
<td class="tickets">Get Tickets</td>
</tr>
<tr>
<td>April 29</td>
<td>Stockholm</td>
<td class="tickets">Get Tickets</td>
</tr>
<tr>
<td>April 31</td>
<td>Berlin</td>
<td class="tickets">Get Tickets</td>
</tr>
<tr>
<td>May 2</td>
<td>Frankfurt</td>
<td class="tickets">Get Tickets</td>
</tr>
<tr>
<td>May 3</td>
<td>Milano</td>
<td class="tickets">Get Tickets</td>
</tr>
<tr>
<td>May 4</td>
<td>Prague</td>
<td class="tickets">Get Tickets</td>
</tr>
<tr>
<td>May 5</td>
<td>Vienna</td>
<td class="tickets">Get Tickets</td>
</tr>
<tr>
<td>May 7</td>
<td>Madrid</td>
<td class="tickets">Get Tickets</td>
</tr>
</table>
<img class="separation" src="http://imageshack.com/a/img924/2082/DjtUHh.png">
</section>
<section id="support">
<img class="separation" src="http://imageshack.com/a/img924/1005/SQ06K9.png">
<h2>THEY SUPPORT US, WE SUPPORT THEM!</h2>
<p class="support">
There's a lot of NGO that help preserving wildlife on an everyday basis. We love them and we know how important and crucial their job is. 10% of the tickets fare is going to them so they keep going protecting what's most treasurable on earth! Don't hesitate to support them too! You can meet them at the end of the show as they tour with us most of the time. If you want to donate or learn more about them and their work, here's their website links:<br>
<img src="https://cupom.com/wp-content/uploads/sites/12/2012/12/greenpeace-logo-e1356599879308.jpeg" id="gp"> <br>
<img src="https://totallyvegan.files.wordpress.com/2011/02/sea_shepherd.jpg" id="ssh"> <br>
<img src="http://logok.org/wp-content/uploads/2014/08/WWF_logo-1024x768.png" id="wwf"> <br>
</p>
<img class="separation" src="http://imageshack.com/a/img924/2082/DjtUHh.png">
</section>
<section id="press">
<img class="separation" src="http://imageshack.com/a/img924/1005/SQ06K9.png">
<h2>PRESS</h2>
<p class="press">
"If you haven't seen this already, rush before it's too late. It's clever, witty and hilarious!" <i>-The independent-</i><br>
"Nature is calling for help in the smartest kid show to date. Go for it and bring your kids, siblings, nephews... The planet thanks you" <i>-Vanity Fair-</i><br>
"Best. Show. Ever!!!" <i>-The New York Times-</i><br>
</p>
<img class="separation" src="http://imageshack.com/a/img924/2082/DjtUHh.png">
</section>
<footer>
<p>Eh! Wanna play a fun game while waiting to see the show? Go and check out Robozzle </p>
</footer>
</body>
If you remove height 100% from here:
nav {
width: 100%;
position: fixed;
/* height: 100%; */
}
And put target="_blank" to anchors all working fine
Related
I am currently working on a web page and I have encountered an issue with my list items. The dots and numbers that usually appear next to each list item are not showing up. Additionally, when i remove the overflow-x: hidden; property in my CSS the list items numbers and dots show immediately, the texts are showing all the time though.
**THIS IS THE HTML**
<body>
<main>
<section>
<div>
<h2 id="getting-started" class="heading-color mt-5">
GETTING STARTED
</h2>
<p>
There are 2 ways to join Fyre Skin Brand Partnership Program.
</p>
<ol>
<li>
Join directly from the Fyre Skin website by clicking the
link.
<a href="https://brandpartner.fyreskin.com.ng/register"
>Register</a
>
</li>
<li>
Join using the link of a brand partner that recommended you
and they automatically become you Up-line partner and you
their Down-line partner.
</li>
</ol>
<p>
If you decide to join, the startup registration is 25,000
Naira with a monthly renewal of 10,000 Naira.
</p>
<p>Your monthly subscription gives you access to</p>
<ul>
<li>
Your own back office dashboard were you can see your
commission, payments, pending payments, bonuses, sales made
using your link, clients who bought using your link, team
members profile, team members sales and profit and marketing
tools .
</li>
<li>
Your own personalise Fyre Skin website that your potential
clients can shop with.
</li>
<li>
Your personalised brand partnership link for potential
clients .
</li>
<li>
Your personalised Networking link for building your own
team.
</li>
<li>Growth and development training for personal growth.</li>
<li>A community of entrepreneurs that you can learn from.</li>
</ul>
<p>
<span class="fw-bold">How to get started - </span>For us at
Fyre Skin convenience is everything that why we built a
website that’s swift and easy to access by both brand partners
and clients.
</p>
<ol>
<li>
After signing up and creating an account, login into your
back office the click copy
<span class="fw-bold">‘default brand partners link’</span>.
Share your link on
<span class="fw-bold">social platforms</span> that can be
visible potential clients.
</li>
<img src="" />
<div>
<ol>
<li>Create a target audience</li>
<li>
Set a daily goal target that includes number of people and
how much he want to make.
</li>
<li>Set the amount of times he want to work a week.</li>
<li>Products and services he want to market (optional)</li>
</ol>
</div>
<p>Target: 40% male, 60% female</p>
<p>Goals: 4 people a day, ₦50,000 a day</p>
<p>Work: 4 times a week</p>
<p>
<span>
*lets assume Ade already did his homework by attending our
webinars, where he learnt how to market like a pro and he
already posted his business links on every social platform
and uses his online messaging apps.
</span>
</p>
<div>
<div class="heading-color mt-5">
<h5 style="margin-left: 10px">DAY 1</h5>
</div>
<p>
Ade’s target for the day is 4 people and he got 2 men and 2
women.
</p>
<p><span>MEN</span></p>
<p>1st man did deep tissue massage and jelly pedicure</p>
<p>
2nd man never left his house, he just order online 1 ultra
shade Creamy gel and 1 Lightening glow milk
</p>
<p><span>WOMEN</span></p>
<p>
1st woman did a brightening facials and braided her hair
</p>
<p>
2nd woman did a botanical pedicure and botanical manicure
</p>
<div>
<table
class="table table-responsive table-bordered border-dark"
>
<tr class="th">
<th>MEN</th>
<th>PRICE</th>
<th>WOMEN</th>
<th>PRICE</th>
</tr>
<tr>
<td>Deep Tissues massage</td>
<td>12,000</td>
<td>Brightening facials</td>
<td>9,000</td>
</tr>
<tr>
<td>Jelly Pedicure</td>
<td>5,000</td>
<td>Corn row</td>
<td>5,000</td>
</tr>
<tr>
<td>Ultra shade creamy gel</td>
<td>5,000</td>
<td>Botanical pedicure</td>
<td>5,000</td>
</tr>
<tr>
<td>Lightening glow milk</td>
<td>10,000</td>
<td>Botanical manicure</td>
<td>3,000</td>
</tr>
<tr>
<td>TOTAL</td>
<td>32,000</td>
<td>TOTAL</td>
<td>22,000</td>
</tr>
</table>
<div class="heading-color "><h5 class="total">OVERALL TOTAL =54,000</h5></div>
</div>
</div>
<div>
<div class="heading-color mt-5">
<h5 style="margin-left: 10px">DAY 2</h5>
</div>
<p>Ade repeated same target as day 1.</p>
<p>
4 people but this time his message only attracted 4 women
who just wanted to do the best friends package and relax
themselves.
</p>
<p><span>WOMEN</span></p>
<p>2 best-friends package comprises of 3 services each -</p>
<p>
deep cleansing facials, Swedish massage and botanical
pedicure
</p>
<div>
<table
class="table table-responsive table-bordered border-dark"
>
<tr class="th">
<th>WOMEN</th>
<th>PRICE</th>
</tr>
<tr>
<td>Best friend package</td>
<td>42,000</td>
</tr>
<tr>
<td>Best friend package</td>
<td>42,000</td>
</tr>
</table>
<div class="heading-color">
<h5 class="total" >OVERALL TOTAL =84,000</h5>
</div>
</div>
</div>
<div>
<div class="heading-color mt-5">
<h5 style="margin-left: 10px">DAY 3</h5>
</div>
<p>
Same target, same goal. 4 people. Repeated strategy brings
repeated results
</p>
</body>
</html>
MY CSS
#import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
/* Custom color variables */
*{
box-sizing: border-box;
}
body{
overflow-x: hidden;
}
:root {
--primary: #e67e22;
--secondary: #16a085;
--success: #2ecc71;
--danger: #e74c3c;
--warning: #F0FF42;
--info: #3498db;
--light: #f5f5f5;
--dark: #2c3e50;
}
.container
{
font-weight: 400;
}
img{
width: auto;
border-radius: 1rem;
}
a{
font-family: 'Roboto', sans-serif;
}
p{
text-align: left;
}
button {
height: 50px;
}
.header{
margin-left: 50px;
}
.sidebar{
background-color: #F0FF42;
}
.heading-color{
background-color: #F0FF42;
}
span{
font-weight: bold;
}
.th{
background-color: #F0FF42;
}
li{
font-weight: 600;
}
td{
font-weight: 600;}
.total{
text-align: center;
}
#media (max-width : 450px){
.container{
width: 375px;
margin: 2rem auto;
}
}
I have tried several solutions such as using different CSS selectors to target the list items, and also tried to override the overflow-x property with overflow-x: visible; but it gives me an overflow on my webpage. I have also checked for any other conflicting CSS styles that may be causing the issue, but I have not found any.
The list items' numbers and dots are showing in my snippet.
Try this:
#import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
/* Custom color variables */
*{
box-sizing: border-box;
}
body{
overflow-x: hidden;
}
:root {
--primary: #e67e22;
--secondary: #16a085;
--success: #2ecc71;
--danger: #e74c3c;
--warning: #F0FF42;
--info: #3498db;
--light: #f5f5f5;
--dark: #2c3e50;
}
.container
{
font-weight: 400;
}
img{
width: auto;
border-radius: 1rem;
}
a{
font-family: 'Roboto', sans-serif;
}
p{
text-align: left;
}
button {
height: 50px;
}
.header{
margin-left: 50px;
}
.sidebar{
background-color: #F0FF42;
}
.heading-color{
background-color: #F0FF42;
}
span{
font-weight: bold;
}
.th{
background-color: #F0FF42;
}
li{
font-weight: 600;
}
td{
font-weight: 600;
}
.total{
text-align: center;
}
#media (max-width : 450px){
.container{
width: 375px;
margin: 2rem auto;
}
}
<html>
<body>
<main>
<section>
<div>
<h2 id="getting-started" class="heading-color mt-5">GETTING STARTED</h2>
<p>There are 2 ways to join Fyre Skin Brand Partnership Program.</p>
<ol>
<li>Join directly from the Fyre Skin website by clicking the link.
Register
</li>
<li>Join using the link of a brand partner that recommended you and they automatically become you Up-line partner and you their Down-line partner.
</li>
</ol>
<p>If you decide to join, the startup registration is 25,000 Naira with a monthly renewal of 10,000 Naira.</p>
<p>Your monthly subscription gives you access to</p>
<ul>
<li>Your own back office dashboard were you can see your commission, payments, pending payments, bonuses, sales made using your link, clients who bought using your link, team members profile, team members sales and profit and marketing tools.</li>
<li>Your own personalise Fyre Skin website that your potential clients can shop with.</li>
<li>Your personalised brand partnership link for potential clients.</li>
<li>Your personalised Networking link for building your own team.</li>
<li>Growth and development training for personal growth.</li>
<li>A community of entrepreneurs that you can learn from.</li>
</ul>
<p><span class="fw-bold">How to get started - </span>For us at Fyre Skin convenience is everything that why we built a website that’s swift and easy to access by both brand partners and clients.</p>
<ol>
<li>After signing up and creating an account, login into your back office the click copy <span class="fw-bold">‘default brand partners link’</span>. Share your link on <span class="fw-bold">social platforms</span> that can be visible potential clients.</li>
<img src="" />
<div>
<ol>
<li>Create a target audience</li>
<li>Set a daily goal target that includes number of people and how much he want to make.</li>
<li>Set the amount of times he want to work a week.</li>
<li>Products and services he want to market (optional)</li>
</ol>
</div>
<p>Target: 40% male, 60% female</p>
<p>Goals: 4 people a day, ₦50,000 a day</p>
<p>Work: 4 times a week</p>
<p>
<span>*lets assume Ade already did his homework by attending our webinars, where he learnt how to market like a pro and he already posted his business links on every social platform and uses his online messaging apps.
</span>
</p>
<div>
<div class="heading-color mt-5">
<h5 style="margin-left: 10px">DAY 1</h5>
</div>
<p>Ade’s target for the day is 4 people and he got 2 men and 2 women.</p>
<p><span>MEN</span></p>
<p>1st man did deep tissue massage and jelly pedicure</p>
<p>2nd man never left his house, he just order online 1 ultra shade Creamy gel and 1 Lightening glow milk</p>
<p><span>WOMEN</span></p>
<p>1st woman did a brightening facials and braided her hair</p>
<p>2nd woman did a botanical pedicure and botanical manicure</p>
<div>
<table class="table table-responsive table-bordered border-dark">
<tr class="th">
<th>MEN</th>
<th>PRICE</th>
<th>WOMEN</th>
<th>PRICE</th>
</tr>
<tr>
<td>Deep Tissues massage</td>
<td>12,000</td>
<td>Brightening facials</td>
<td>9,000</td>
</tr>
<tr>
<td>Jelly Pedicure</td>
<td>5,000</td>
<td>Corn row</td>
<td>5,000</td>
</tr>
<tr>
<td>Ultra shade creamy gel</td>
<td>5,000</td>
<td>Botanical pedicure</td>
<td>5,000</td>
</tr>
<tr>
<td>Lightening glow milk</td>
<td>10,000</td>
<td>Botanical manicure</td>
<td>3,000</td>
</tr>
<tr>
<td>TOTAL</td>
<td>32,000</td>
<td>TOTAL</td>
<td>22,000</td>
</tr>
</table>
<div class="heading-color ">
<h5 class="total">OVERALL TOTAL =54,000</h5>
</div>
</div>
</div>
<div>
<div class="heading-color mt-5">
<h5 style="margin-left: 10px">DAY 2</h5>
</div>
<p>Ade repeated same target as day 1.</p>
<p>4 people but this time his message only attracted 4 women who just wanted to do the best friends package and relax themselves.</p>
<p><span>WOMEN</span></p>
<p>2 best-friends package comprises of 3 services each -</p>
<p>deep cleansing facials, Swedish massage and botanical pedicure</p>
<div>
<table class="table table-responsive table-bordered border-dark">
<tr class="th">
<th>WOMEN</th>
<th>PRICE</th>
</tr>
<tr>
<td>Best friend package</td>
<td>42,000</td>
</tr>
<tr>
<td>Best friend package</td>
<td>42,000</td>
</tr>
</table>
<div class="heading-color">
<h5 class="total" >OVERALL TOTAL =84,000</h5>
</div>
</div>
</div>
<div>
<div class="heading-color mt-5">
<h5 style="margin-left: 10px">DAY 3</h5>
</div>
<p>
Same target, same goal. 4 people. Repeated strategy brings
repeated results
</p>
</body>
</html>
I'm trying to make a little indie game site, and I'd like to make the section of each entry that contains the title and tags of the game a lighter green than the portion holding the description and picture.
body {
margin: 0;
padding-top: 150;
padding-bottom: 0;
}
.fixed-header {
width: 100%;
position: fixed;
background: #75b478;
color: black;
text-align: center;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: large;
top: 0;
z-index: 1;
margin: 0;
}
.container {
width: 100%;
background-color: #589c5b;
overflow: auto;
margin: 0;
}
nav a {
color: rgb(255, 255, 255);
text-decoration: none;
padding: 5px 35px 10px;
display: inline-block;
width: 20%;
height: 25px;
line-height: 25px;
margin: 0;
}
a:link, a:visited, a:hover, a:active {
text-decoration: none;
color: rgb(255, 255, 255);
}
article {
background-color: #67aa69;
text-align: center;
width: 30%;
padding: 2;
position: relative;
border-radius: 10%;
}
.section {
text-align: center;
margin-top: 50px;
font-family: 'Andika', sans-serif;
}
.tags {
font-style: italic;
font-family: 'Source Sans Pro', sans-serif;
}
.games {
display: flex;
flex-direction: row;
justify-content: space-evenly;
margin-top: 50px;
margin-bottom: 50px;
}
img {
width: 100%;
height: 250px;
border-radius: 15%;
}
p {
font-family: 'Lato', sans-serif;
}
h2 {
padding-left: 2px;
padding-right: 2px;
}
<DOCTYPE! html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<html lang="en-US">
<head>
<link rel="stylesheet" href="page.css">
<title>Indie Games List</title>
<link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital#1&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Andika:wght#700&display=swap" rel="stylesheet">
</head>
<body>
<div class="fixed-header">
<h1>Indie Games</h1>
<div class="container">
<nav>
To Play
Reviews
Indie-x
Favorites
</nav>
</div>
</div>
<h1 class="section" id="platformers">Platformers</h1>
<div class="games">
<article>
<h2>Hollow Knight</h2>
<p class="tags">Difficult, Souls-like</p>
<hr>
<p>"Forge your own path in Hollow Knight! An epic action adventure through a vast ruined kingdom of insects and heroes. Explore twisting caverns, battle tainted creatures and befriend bizarre bugs, all in a classic, hand-drawn 2D style."</p>
<img src="hollow-knight.png">
</article>
<article>
<h2>Celeste</h2>
<p class="tags">Difficult, Amazing Soundtrack</p>
<hr>
<p>"Help Madeline survive her inner demons on her journey to the top of Celeste Mountain, in this super-tight platformer from the creators of TowerFall. Brave hundreds of hand-crafted challenges, uncover devious secrets, and piece together the mystery of the mountain."</p>
<img src="celeste.png">
</article>
<article>
<h2>Ori and the Blind Forest/Will of the Wisps</h2>
<p class="tags">Amazing Soundtrack, Metroidvania</p>
<hr>
<p>"Ori and the Blind Forest tells the tale of a young orphan destined for heroics, through a visually stunning action-platformer crafted by Moon Studios for PC."</p>
<img src="ori.png">
</article>
</div>
<div class="games">
<article>
<h2>Cuphead</h2>
<p class="tags">Difficult, Hand-Drawn</p>
<hr>
<p>"Cuphead is a classic run and gun action game heavily focused on boss battles. Inspired by cartoons of the 1930s, the visuals and audio are painstakingly created with the same techniques of the era, i.e. traditional hand drawn cel animation, watercolor backgrounds, and original jazz recordings."</p>
<img src="cuphead.png">
</article>
</div>
<hr>
<h1 class="section" id="horror">Horror</h1>
<div class="games">
<article>
<h2>Omori</h2>
<p class="tags">Psychological Horror, RPG, Amazing Soundtrack</p>
<hr>
<p>"Explore a strange world full of colorful friends and foes. When the time comes, the path you’ve chosen will determine your fate... and perhaps the fate of others as well."</p>
<img src="omori.png">
</article>
<article>
<h2>Needy Streamer Overload</h2>
<p class="tags">Psychological Horror, Visual Novel, Streaming</p>
<hr>
<p>"NEEDY STREAMER OVERLOAD is a “multi-ending ADV” depicting daily life with “OMGkawaiiAngel”, a young girl with a rather extreme need for approval attempting to become the #1 “Internet Angel” (streamer)."</p>
<img src="nso.png">
</article>
<article>
<h2>Little Nightmares 1 & 2</h2>
<p class="tags">Psychological Horror, Platformer, Puzzle</p>
<hr>
<p>"Immerse yourself in Little Nightmares, a dark whimsical tale that will confront you with your childhood fears! Help Six escape The Maw – a vast, mysterious vessel inhabited by corrupted souls looking for their next meal."</p>
<img src="ln.png">
</article>
</div>
<div class="games">
<article>
<h2>Sally Face</h2>
<p class="tags">Psychological Horror, Hand-Drawn, Mystery</p>
<hr>
<p>"Delve into a dark adventure following the boy with a prosthetic face and a tragic past. Unravel the sinister mysteries of Sally's world to find the truth that lies hidden beneath the shadows."</p>
<img src="sallyface.png">
</article>
<article>
<h2>FAITH: The Unholy Trinity</h2>
<p class="tags">Psychological Horror, Retro, Supernatural</p>
<hr>
<p>"What you are about to do has not been approved by the Vatican. As a young priest, struggle against demons, insane cultists, and your own weakening faith in this pixel horror game inspired by the era of classic 8-bit gaming and the "Satanic Scare" of the 1980s."</p>
<img src="faith.png">
</article>
<article>
<h2>Carrion</h2>
<p class="tags">Psychological Horror, Villain Protagonist, Lovecraftian</p>
<hr>
<p>"CARRION is a reverse horror game in which you assume the role of an amorphous creature of unknown origins, stalking and consuming those that imprisoned you."</p>
<img src="carrion.png">
</article>
</div>
<div class="games">
<article>
<h2>Milk inside a bag of milk inside a bag of milk</h2>
<p class="tags">Psychological Horror, Psychedelic, Visual Novel</p>
<hr>
<p>"A short story about what sort of challenges everyday little things can be. Help the girl buy milk, be the first not to disappoint her."</p>
<img src="milk.png">
</article>
<article>
<h2>Iron Lung</h2>
<p class="tags">Psychological Horror, Underwater, Walking Simulator</p>
<hr>
<p>"A short horror game where you pilot a tiny submarine through an ocean of blood on an alien moon."</p>
<img src="ironlung.png">
</article>
<article>
<h2>Madison</h2>
<p class="tags">Psychological Horror, Supernatural, Exploration</p>
<hr>
<p>"MADiSON is a first person psychological horror game that delivers an immersive and terrifying experience. With the help of an instant camera, connect the human world with the beyond, take pictures and develop them by yourself. Solve puzzles, explore your surroundings and most importantly, survive."</p>
<img src="madison.png">
</article>
</div>
<div class="games">
<article>
<h2>Bendy and the Ink Machine/Dark Revival</h2>
<p class="tags">Survival Horror, Unique Art Style, Adventure</p>
<hr>
<p>"Bendy and the Ink Machine is the first person puzzle action horror game that will forever ruin your childhood love of cartoons."</p>
<img src="bendy.png">
</article>
<article>
<h2>Choo-Choo Charles</h2>
<p class="tags">Survival Horror, Open-World, FPS</p>
<hr>
<p>"Navigate an open-world island in an old train, upgrade it over time, and use it to fight an evil spider train named Charles."</p>
<img src="choo.png">
</article>
<article>
<h2>Don't Starve</h2>
<p class="tags">Survival Horror, Open-World, Unique Art Style</p>
<hr>
<p>"Don't Starve is an uncompromising wilderness survival game full of science and magic. Enter a strange and unexplored world full of strange creatures, dangers, and surprises. Gather resources to craft items and structures that match your survival style."</p>
<img src="ds.png">
</article>
</div>
<div class="games">
<article>
<h2>The Mortuary Assistant</h2>
<p class="tags">Survival Horror, Supernatural, Mystery</p>
<hr>
<p>"Alone with the dead... Embalm corpses, banish demons, save your soul."</p>
<img src="tma.png">
</article>
<article>
<h2>Endoparasitic</h2>
<p class="tags">Survival Horror, Third-Person Shooter, Space</p>
<hr>
<p>"Three limbs ripped off, infected with a deadly parasite, you must save your research. Drag yourself through the corridors of a secret research lab on a remote asteroid, fight off horribly mutated monsters, inject countless syringes of vaccines, and survive at all costs."</p>
<img src="endo.png">
</article>
</div>
</body>
I've tried changing the background color of my h2 and .tags elements, but that just sends a light green line across the entire screen. Ideally, I'd like to keep the shape of my boxes and simply change the color above the < br>. All suggestions appreciated!
Put the h2 and p tag in a div and change the background color of that, rather than the individual tags.
So change this
<h2>Hollow Knight</h2>
<p class="tags">Difficult, Souls-like</p></div>
To this
<div class="upper-section">
<h2>Hollow Knight</h2>
<p class="tags">Difficult, Souls-like</p>
</div>
Set the upper section CSS to
.upper-section {
background-color: #39cb34;
}
You should get something like this.
.upper-section {
background-color: #39cb34;
}
p {
font-family: 'Lato', sans-serif;
}
h2 {
padding-left: 2px;
padding-right: 2px;
}
.tags {
font-style: italic;
font-family: 'Source Sans Pro', sans-serif;
}
article {
background-color: #67aa69;
text-align: center;
width: 30%;
padding: 2;
position: relative;
border-radius: 10%;
}
<article>
<div class="upper-section">
<h2>Hollow Knight</h2>
<p class="tags">Difficult, Souls-like</p>
<hr>
</div>
<p>"Forge your own path in Hollow Knight! An epic action adventure through a vast ruined kingdom of insects and heroes. Explore twisting caverns, battle tainted creatures and befriend bizarre bugs, all in a classic, hand-drawn 2D style."</p>
<img src="hollow-knight.png">
</article>
I am trying to recreate the html/css portion of the Starbucks website. Things are going great, the issue I am having however is that I cannot get my text on the same line as the image files. The official Starbucks website (https://www.starbucks.com/) has the text description and the image on the same line. What am I missing in my code? If this can be solved with flexbox properties, that would be great. Thanks.
html {
font-family: noto sans jp, sans-serif;
}
body {
display: flex;
flex-wrap: wrap;
}
img {
width: 500px;
}
h1 {
font-size: 40px;
letter-spacing: 5px;
}
.header {
background-color: rgb(221, 255, 247);
padding: 20px;
font-size: 20px;
text-align: center;
}
.star {
background-color: rgb(226, 0, 0);
color: white;
}
.drinks {
background-color: rgb(226, 0, 0);
color: white;
}
.cookie {
background-color: rgb(0, 54, 24);
color: white;
}
.card {
background-color: rgb(221, 255, 247);
color: black;
}
.people {
background-color: rgb(0, 54, 24);
color: white;
}
.terms {
text-align: center;
padding: 30px;
}
table {
font-size: 20px;
line-height: 50px;
border-bottom: 1px solid black;
padding: 30px;
}
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght#300&display=swap" rel="stylesheet">
<main>
<nav>
<img>
<ul>
<li>Menu</li>
<li>Rewards</li>
<li>Gift Cards</li>
</ul>
</nav>
<header class='header'>
<p>We’re working hard to put the health and well-being of our partners and customers first in all that we do. Learn more</p>
</header>
<section class='star'>
<img src='star.png' alt='star'>
<h3>Wishing you the warmest Rewards</h3>
<p>Starbucks® Rewards members can now pay any way they’d like in the app and collect Stars to redeem for free holiday faves. Positively jolly.*</p>
<p class='button'>Get the app</p>
</section>
<section class='drinks'>
<img src='drinks.png' alt='drinks'>
<h1>HOLIDAY YOUR WAY</h1>
<p>So many convenient ways to get your festive favorites.</p>
<p class='button'>Explore seasonal drinks</p>
</section>
<section class='cookie'>
<img src='cookie.png' alt='cookie'>
<h1>BAKING SPIRITS BRIGHT</h1>
<p>The new Cranberry Orange Scone: made with crème fraîche, dried cranberries, orange zest and a drizzle of vanilla icing.</p>
<p>Order now</p>
</section>
<section>
<h1>CARRY THE MERRY</h1>
</section>
<section class='card'>
<img src='card.jpg' alt='card'>
<h3>Earning 4,500 Bonus Stars is Super Starifying</h3>
<p>$0 intro annual fee for your first year with the Starbucks® Rewards Visa® Card. Plus your Stars won’t expire—an exclusive Starbucks benefit for cardmembers. Now that’s Super Starifying.**</p>
<p>Learn more</p>
</section>
<section class='people'>
<img src='people.jpg' alt='people'>
<h3>Fueling our democracy</h3>
<p>See how our partners (employees) have been involved in civic engagement, making their voices heard and strengthening their communities.</p>
<p>Read more</p>
</section>
<section>
<p class='terms'>
*Starbucks Rewards benefits are available at participating Starbucks stores. Some restrictions apply. See Starbucks.com/terms
</p>
<p class='terms'>
**Under the Starbucks Rewards Program, Stars earned do not expire as long as your Starbucks® Rewards Visa® Credit Card account is open. If your Starbucks® Rewards Visa® Credit Card account is closed for any reason, your Stars will expire six (6) months
after the calendar month in which that account was closed. Chase credit cards are issued by Chase Bank USA, N.A. Deposit products are provided by JPMorgan Chase Bank, N.A. Member FDIC
</p>
</section>
<table>
<thead>
<tr>
<th>About Us</th>
<th>Careers</th>
<th>Social Impact</th>
<th>For Business Partners</th>
<th>Ways To Order</th>
</tr>
</thead>
<tbody>
<tr>
<td>Our Heritage</td>
<td>Culture and Values</td>
<td>Ethical Sourcing</td>
<td>Landlord Support Center</td>
<td>Order on the Web</td>
</tr>
<tr>
<td>Our Coffee</td>
<td>Inclusion, Diversity, and Equity</td>
<td>Leading in Sustainability</td>
<td>Supplies</td>
<td>Downoad the App</td>
</tr>
<tr>
<td>Stories and News</td>
<td>College Achievement Plan</td>
<td>Strengthening Communities</td>
<td>Corporate Gift Card Sales</td>
<td>Delivery</td>
</tr>
<tr>
<td>Investor Relations</td>
<td>U.S. Careers</td>
<td>Creating Opportunities</td>
<td>Office and Footservice Coffee</td>
<td>Google Assistant</td>
</tr>
<tr>
<td>Policies and Standards</td>
<td>International Careers</td>
<td>Global Social Impact Report</td>
<td></td>
<td></td>
</tr>
<tr>
<td>Customer Service</td>
</tr>
</tbody>
</table>
<footer>
<ul>
<li>Privacy Policy</li>
<li>Terms of Use</li>
<li>CA Supply Chain Act</li>
<li>Submit Your Idea</li>
<li>Cookie Preference</li>
</ul>
<p>© 2020 Starbucks Coffee Company. All rights reserved.</p>
</footer>
</main>
Your text with tags h1 and p must be wrapped in a container div ( <div class="text_section"> ) for the correct distribution of the picture and text using the flex rule.
For the flex rule, I created a selector:
main section:not(:last-of-type) {
display: flex;
align-items: center;
}
:not(:last-of-type) - this means that the rule will apply to all specified containers except the last one. Since the latter is not the section with the picture in your example.
Was it necessary?
html {
font-family: noto sans jp, sans-serif;
}
body {
display: flex;
flex-wrap: wrap;
}
main {
}
main section:not(:last-of-type) {
display: flex;
align-items: center;
}
.text_section {
margin-left: 50px;
}
img {
width: 500px;
}
h1 {
font-size: 40px;
letter-spacing: 5px;
}
.header {
background-color: rgb(221, 255, 247);
padding: 20px;
font-size: 20px;
text-align: center;
}
.star {
background-color: rgb(226, 0, 0);
color: white;
}
.drinks {
background-color: rgb(226, 0, 0);
color: white;
}
.cookie {
background-color: rgb(0, 54, 24);
color: white;
}
.card {
background-color: rgb(221, 255, 247);
color: black;
}
.people {
background-color: rgb(0, 54, 24);
color: white;
}
.terms {
text-align: center;
padding: 30px;
}
table {
font-size: 20px;
line-height: 50px;
border-bottom: 1px solid black;
padding: 30px;
}
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght#300&display=swap" rel="stylesheet">
<main>
<nav>
<img>
<ul>
<li>Menu</li>
<li>Rewards</li>
<li>Gift Cards</li>
</ul>
</nav>
<header class='header'>
<p>We’re working hard to put the health and well-being of our partners and customers first in all that we do. Learn more</p>
</header>
<section class='star'>
<img src='https://static3.depositphotos.com/1000992/133/i/450/depositphotos_1337508-stock-photo-a-free-flying-white-dove.jpg' alt='star'>
<div class="text_section">
<h3>Wishing you the warmest Rewards</h3>
<p>Starbucks® Rewards members can now pay any way they’d like in the app and collect Stars to redeem for free holiday faves. Positively jolly.*</p>
<p class='button'>Get the app</p>
</div>
</section>
<section class='drinks'>
<img src='https://static3.depositphotos.com/1000992/133/i/450/depositphotos_1337508-stock-photo-a-free-flying-white-dove.jpg' alt='drinks'>
<div class="text_section">
<h1>HOLIDAY YOUR WAY</h1>
<p>So many convenient ways to get your festive favorites.</p>
<p class='button'>Explore seasonal drinks</p>
</div>
</section>
<section class='cookie'>
<img src='https://static3.depositphotos.com/1000992/133/i/450/depositphotos_1337508-stock-photo-a-free-flying-white-dove.jpg' alt='cookie'>
<div class="text_section">
<h1>BAKING SPIRITS BRIGHT</h1>
<p>The new Cranberry Orange Scone: made with crème fraîche, dried cranberries, orange zest and a drizzle of vanilla icing.</p>
<p>Order now</p>
</div>
</section>
<section>
<h1>CARRY THE MERRY</h1>
</section>
<section class='card'>
<img src='https://static3.depositphotos.com/1000992/133/i/450/depositphotos_1337508-stock-photo-a-free-flying-white-dove.jpg' alt='card'>
<div class="text_section">
<h3>Earning 4,500 Bonus Stars is Super Starifying</h3>
<p>$0 intro annual fee for your first year with the Starbucks® Rewards Visa® Card. Plus your Stars won’t expire—an exclusive Starbucks benefit for cardmembers. Now that’s Super Starifying.**</p>
<p>Learn more</p>
</div>
</section>
<section class='people'>
<img src='https://static3.depositphotos.com/1000992/133/i/450/depositphotos_1337508-stock-photo-a-free-flying-white-dove.jpg' alt='people'>
<div class="text_section">
<h3>Fueling our democracy</h3>
<p>See how our partners (employees) have been involved in civic engagement, making their voices heard and strengthening their communities.</p>
<p>Read more</p>
</div>
</section>
<section>
<p class='terms'>
*Starbucks Rewards benefits are available at participating Starbucks stores. Some restrictions apply. See Starbucks.com/terms
</p>
<p class='terms'>
**Under the Starbucks Rewards Program, Stars earned do not expire as long as your Starbucks® Rewards Visa® Credit Card account is open. If your Starbucks® Rewards Visa® Credit Card account is closed for any reason, your Stars will expire six (6) months
after the calendar month in which that account was closed. Chase credit cards are issued by Chase Bank USA, N.A. Deposit products are provided by JPMorgan Chase Bank, N.A. Member FDIC
</p>
</section>
<table>
<thead>
<tr>
<th>About Us</th>
<th>Careers</th>
<th>Social Impact</th>
<th>For Business Partners</th>
<th>Ways To Order</th>
</tr>
</thead>
<tbody>
<tr>
<td>Our Heritage</td>
<td>Culture and Values</td>
<td>Ethical Sourcing</td>
<td>Landlord Support Center</td>
<td>Order on the Web</td>
</tr>
<tr>
<td>Our Coffee</td>
<td>Inclusion, Diversity, and Equity</td>
<td>Leading in Sustainability</td>
<td>Supplies</td>
<td>Downoad the App</td>
</tr>
<tr>
<td>Stories and News</td>
<td>College Achievement Plan</td>
<td>Strengthening Communities</td>
<td>Corporate Gift Card Sales</td>
<td>Delivery</td>
</tr>
<tr>
<td>Investor Relations</td>
<td>U.S. Careers</td>
<td>Creating Opportunities</td>
<td>Office and Footservice Coffee</td>
<td>Google Assistant</td>
</tr>
<tr>
<td>Policies and Standards</td>
<td>International Careers</td>
<td>Global Social Impact Report</td>
<td></td>
<td></td>
</tr>
<tr>
<td>Customer Service</td>
</tr>
</tbody>
</table>
<footer>
<ul>
<li>Privacy Policy</li>
<li>Terms of Use</li>
<li>CA Supply Chain Act</li>
<li>Submit Your Idea</li>
<li>Cookie Preference</li>
</ul>
<p>© 2020 Starbucks Coffee Company. All rights reserved.</p>
</footer>
</main>
I'm trying to build a simple web page. It has a logo in the upper left corner, and on the same line to the right is a navbar. That all works fine. The problem is that I want to then have text below the logo & navbar (full width). No matter what I try, the text starts in the same line as the logo and navbar. How can I force the text to start below the logo & navbar?
Here's the html:
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="Temp.css" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="logo" style="display:inline;">
<a href="Temp.html">
<img src="robert-half-technology-logo-600(40).gif"/>
</a>
</div>
<nav class="navbar navbar-fixed-top">
<div class="container-fluid">
<ul class="nav navbar-nav pull-right">
<li class="active">Home</li>
<li>About Us</li>
<li>Careers</li>
<li>Contact Us</li>
</ul>
</div><br/><br/>
</nav>
<div class="container">
<div class="row">
<div class="col-md-8">
<h1>About Us</h1>
<p class="normaltext">
Founded in 1948, Robert Half has a long company history of innovation, always guided by high ethical standards and the belief that finding the right fit for a client and candidate creates an engaged and energized workforce.
</p>
<p class="normaltext">
We pioneered the idea of professional staffing services nearly 70 years ago and, as the needs of businesses have evolved, so have we. In 1986, when current leadership acquired the Robert Half business from founder Bob Half, the staffing industry was much different than it is today. Our leadership team saw potential in moving toward a more specialized staffing approach and began placing temporary workers at higher skill levels. Our clients and candidates found value in professional-level staffing, which is why we launched a series of temporary professional staffing divisions in the finance and accounting, legal, creative and marketing, technology and administrative fields. And in 2002, we again saw opportunity and introduced Protiviti, a global independent risk consulting and internal audit service, to support companies as they faced more stringent financial reporting and disclosure practices under new regulations such as Sarbanes-Oxley.
</p>
<p class="normaltext">
Explore Robert Half’s history, learn about our leadership and accolades and see how we have found opportunity in innovation to create a $5 billion professional services organization.
</p>
<h2>1940s: The beginning</h2>
<table style="width:100%" class="normaltext">
<tr>
<td>1948</td>
<td>Robert Half founded by Bob and Maxine Half.</td>
</tr>
</table>
<h2>1960s: High ethical standards become a cornerstone</h2>
<table style="width:100%" class="normaltext">
<tr>
<td>1963</td>
<td style="padding-left:20px;">Bob Half speaks out against discriminatory recruiting and staffing practices in a letter to the Association of Personnel Agencies of New York.</td>
</tr>
</table>
<h2>1970s: A decade of firsts</h2>
<table style="width:100%" class="normaltext">
<tr>
<td>1973</td>
<td style="padding-left:20px">Robert Half opens its first international location in London.</td>
</tr>
<tr>
<td>1973</td>
<td style="padding-left:20px;">Accountemps, the first of many professional staffing divisions, is launched, thus beginning Robert Half’s specialized approach to temporary staffing.</td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>
And here's the css:
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
float: left;
}
a {
display: block;
padding: 8px;
background-color: #dddddd;
}
.logo {
position: fixed;
z-index: 2000;
}
.video {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
z-index: -100;
-ms-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX (-50%) translateY(-50%);
}
h1 {
text-align:center;
color:#a01b35;
}
.normaltext {
font-size: 18px;
font-family: "Futura BT W01 Book",OpenSansRegular,"Open Sans Regular",sans-serif;
line-height: 1.25;
}
Give margin-top to the container as much as need to accomodate Header height and give top:0px css to .logo class.
.container {
width: 1170px;
margin-top: 100px;
}
.logo{
position: fixed;
z-index: 2000;
top: 0px;
}
It's is because you are using a fixed navbar and logo so it sits on top of your container below.
Just apply a margin-top to your .container class and top:0 to your .logo class:
.container {
margin-top: 50px; //use what ever you need here for spacing.
}
.logo {
position: fixed;
top: 0;
z-index: 2000;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
float: left;
}
a {
display: block;
padding: 8px;
background-color: #dddddd;
}
.logo {
position: fixed;
z-index: 2000;
}
.video {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
z-index: -100;
-ms-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX (-50%) translateY(-50%);
}
h1 {
text-align:center;
color:#a01b35;
}
.normaltext {
font-size: 18px;
font-family: "Futura BT W01 Book",OpenSansRegular,"Open Sans Regular",sans-serif;
line-height: 1.25;
}
.container {
margin-top: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="Temp.css" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="logo" style="display:inline;">
<a href="Temp.html">
<img src="robert-half-technology-logo-600(40).gif"/>
</a>
</div>
<nav class="navbar navbar-fixed-top">
<div class="container-fluid">
<ul class="nav navbar-nav pull-right">
<li class="active">Home</li>
<li>About Us</li>
<li>Careers</li>
<li>Contact Us</li>
</ul>
</div><br/><br/>
</nav>
<div class="container">
<div class="row">
<div class="col-md-8">
<h1>About Us</h1>
<p class="normaltext">
Founded in 1948, Robert Half has a long company history of innovation, always guided by high ethical standards and the belief that finding the right fit for a client and candidate creates an engaged and energized workforce.
</p>
<p class="normaltext">
We pioneered the idea of professional staffing services nearly 70 years ago and, as the needs of businesses have evolved, so have we. In 1986, when current leadership acquired the Robert Half business from founder Bob Half, the staffing industry was much different than it is today. Our leadership team saw potential in moving toward a more specialized staffing approach and began placing temporary workers at higher skill levels. Our clients and candidates found value in professional-level staffing, which is why we launched a series of temporary professional staffing divisions in the finance and accounting, legal, creative and marketing, technology and administrative fields. And in 2002, we again saw opportunity and introduced Protiviti, a global independent risk consulting and internal audit service, to support companies as they faced more stringent financial reporting and disclosure practices under new regulations such as Sarbanes-Oxley.
</p>
<p class="normaltext">
Explore Robert Half’s history, learn about our leadership and accolades and see how we have found opportunity in innovation to create a $5 billion professional services organization.
</p>
<h2>1940s: The beginning</h2>
<table style="width:100%" class="normaltext">
<tr>
<td>1948</td>
<td>Robert Half founded by Bob and Maxine Half.</td>
</tr>
</table>
<h2>1960s: High ethical standards become a cornerstone</h2>
<table style="width:100%" class="normaltext">
<tr>
<td>1963</td>
<td style="padding-left:20px;">Bob Half speaks out against discriminatory recruiting and staffing practices in a letter to the Association of Personnel Agencies of New York.</td>
</tr>
</table>
<h2>1970s: A decade of firsts</h2>
<table style="width:100%" class="normaltext">
<tr>
<td>1973</td>
<td style="padding-left:20px">Robert Half opens its first international location in London.</td>
</tr>
<tr>
<td>1973</td>
<td style="padding-left:20px;">Accountemps, the first of many professional staffing divisions, is launched, thus beginning Robert Half’s specialized approach to temporary staffing.</td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>
I am trying to make this page responsive. As you can see when I resize the browser the text is scrunched rather than moving to the bottom of the image. Any help would be greatly appreciated!
Here is my HTML:
<div id="content-wrapper">
<div class="container">
<div class="content">
<div class="line">
<h2 class="text-center exec-header">Executive
Directors</h2>
</div>
<article class="ninecol">
<div class="content-item first cf" id="maja">
<figure>
<img alt="" class="bio-pics" src=
"/wp-content/themes/creativeforces/images/majapic.jpg"
width="250px">
</figure>
<h3 class="name">Maja Miletich</h3>
<h5 class="job-title">CEO</h5>
<div class="description">
<p>Maja Miletich is the CEO of Zip Zap Zop Kids,
LLC. Maja has worked with children on many levels.
Having a brother with Autism has given Maja an
understanding of how powerful communication is for
ALL children. Maja has worked for years as a
teacher where she practices emergent
curriculum.</p>
<p>Maja has studied theater and improv at A.C.T. in
San Francisco as well as graduated from The Second
City Training Center in Hollywood where she studied
improv and sketch comedy.</p>
<p>Maja has her Bachelors Degree in Early Childhood
Education. Maja's focus is on inclusive classrooms
where curriculum is designed to allow children and
young adults to feel comfortable expressing
themselves in whichever way they feel most
comfortable</p>
<p>Maja believes when we can share with one another
what has been taught then, and only then, are we
actually learning.</p>
</div>
</div>
<hr>
<div class="content-item first cf" id="april">
<figure>
<img alt="" class="bio-pics" src=
"/wp-content/themes/creativeforces/images/april2.jpg"
width="250px">
</figure>
<h3 class="name">April Miletich</h3>
<h5 class="job-title">CFO</h5>
<div class="description">
<p>April Rasmussen, PhD has been a credentialed
English teacher since 2008 and has taught
everything from advanced placement English language
and composition to literature through film, and
English as a second language support classes. Her
passion is for the art of story and also
storytelling as a tool for student growth. She
holds advanced degrees in education, mythology and
depth-psychology.</p>
</div>
</div>
</article>
</div>
<div class="line">
<h3 class="text-center exec-header">Board of Directors</h3>
</div>
<div class="content-item first cf" id="ari">
<figure>
<img alt="" class="bio-pics" src=
"/wp-content/themes/creativeforces/images/ari.jpg" width=
"250px">
</figure>
<h3 class="name">Ari Schenider</h3>
<h5 class="job-title">President</h5>
<div class="description">
<p>Ari Schneider is a graduate of The Second City
Conservatory and has a (BA) Hons from The Guildford School
of Acting in England. He has been a cast member of the
all-ages improv review The Really Awesome Improv Show
(Voted Best Kid’s Comedy Show) at The Second City in
Hollywood for the past 3 years. He also is affiliated with
the mentorship program, YSF (The Young Screenwriters
Foundation) at New Rhodes as well as teaching afer-school
improv with Zip Zap Zop Kids, LLC.</p>
</div>
</div>
<hr>
<div class="content-item first cf" id="debra">
<figure>
<img alt="" class="bio-pics" src=
"/wp-content/themes/creativeforces/images/debra.jpg" width=
"250px">
</figure>
<h3 class="name">Debra Gliozzi</h3>
<h5 class="job-title">Treasurer</h5>
<div class="description">
<p>Debra Kratochvil Gliozzi is a first generation American
and first in her family to attend college. Her career spans
35 years and two distinct industries. Debra is currently an
administrator and educator in Danville, California. She
brought her MBA and business experience to San Ramon Valley
High School and integrated Business Computers (an ROP
course), Personal Finance and Introduction to Business and
Entrepreneurship into the curriculum. Debra says that her
goal is to equip students with skills that prepare them for
the real world. It is the most important thing I can
do.</p>
<p>This is her second career after transitioning from the
Telecommunications Industry where she held management
positions at Calix Inc., SBC Communications, Pacific Bell,
MCI and Sprint. Her vast experiences included Forecasting,
Accounting, Business Analysis, Market Financials,
Competitive Assessment, Product Development, Product
Marketing, Procurement, Quality Management and Sales
Operations & Planning.</p>
</div>
</div>
<hr>
<div class="content-item first cf" id="debra">
<figure>
<img alt="" class="bio-pics" src=
"/wp-content/themes/creativeforces/images/melina.jpg"
width="250px">
</figure>
<h3 class="name">Melina Johnson</h3>
<h5 class="job-title">Secretary</h5>
<div class="description">
<p>Melina Johnson is a self-employed entrepreneur who
created her own home organizing business. Melina is the
mother of two children, her son having Autism. She has
spent countless hours dedicated to researching and
providing her son with the best therapies and services to
help him with his growth and development. Every therapist
and teacher, over the years, has told Melina that her
natural sense of humor has been the best therapy she could
provide to her son - Humor and laughter open up doors to
cognitive and social development. And it’s fun!</p>
<p>Melina’s education has been in the health sciences,
having a degree in Dental Hygiene. After years of hygiene
practice, she decided to create a job for herself that
would utilize her natural organizational skills, and allow
her creativity and fun. Melina continues to grow her home
organizing business and raise her children with a strong
sense of responsibility, and a positive outlook on
life.</p>
</div>
</div>
</div>
</div>
and CSS:
.line {
overflow: hidden;
text-align: center;
}
.exec-header{
margin-top: 15px;
display: inline-block;
padding: 0 15px;
position: relative;
font-family: Roboto Condensed;
font-weight: bold;
font-size: 30px;
}
.content .ninecol {
padding-right: 4.6875%;
padding-left: 4.6875%;
}
.exec-header:before{
right: 100%;
}
.exec-header:before, .exec-header:after {
background: #333333;
content: "";
display: block;
height: 3px;
position: absolute;
top: 50%;
width: 96%;
}
.content {
overflow: hidden;
margin: 0 auto;
max-width: 1200px;
}
.content-item.first {
padding-top: 0;
background: 0;
overflow:hidden;
}
.content-item {
margin-left: -2.18978%;
margin-right: -2.18978%;
padding: 30px 2.18978%;
}
#maja{
margin-top: 10px;
}
#ari{
margin-top: 10px;
}
.exec-header:after {
left: 100%;
}
.cf:before, .cf:after {
content: " ";
display: table;
}
.content-item figure {
}
figure img {
padding-bottom: 14px;
}
.bio-pics {
display: block;
max-width: 100%;
height: auto;
-ms-interpolation-mode: bicubic;
-moz-user-drag: -moz-none;
-webkit-user-drag: none;
user-drag: none;
}
h3.name {
margin-bottom: .75em;
line-height: 1.2em;
font-family: Roboto Condensed;
font-weight: bold;
}
.content-item figure {
float: left;
margin-right: 5.83942%;
margin-bottom: 0;
}
.content-item .description, .content-item .details {
overflow: hidden;
}
.content-item .description {
min-height: 0;
}
h5.job-title{
font-family: Roboto Condensed;
font-weight: bold;
margin-top: -16px;
}
try by adding float:left ; in description class in css file
it should work also add an display inline-block to div with id=maja