<header class="navbar-container" id="header">
<nav id="nav-bar" class="nav-left">
<a class="nav-link" href="#Home" accesskey="1"><img id="header-img" src="https://png.icons8.com/1em/1600/607D8B/soccer-ball" alt="ball design" style="height:30px"></a>
<a class="nav-link" href="#Home" accesskey="h">Home</a>
<a class="nav-link" href="#News" accesskey="n">News</a>
<a class="nav-link" href="#Mission" accesskey="m">Mission</a>
<a class="nav-link" href="#Products" accesskey="p">Products</a>
<a class="nav-link" href="#Contact" accesskey="c">Contact</a>
</nav>
<div id="dispRight" class="nav-right">
<a href="#" id="dropdown" class="nav-drop"><i class="fa fa-bars"></i></a>
</div>
</header>
<div id="dropContain" class="drop-menu"></div>
<main class="main-container">
<section class="section" id="Home">
<div id="par"><p>The ball you need for any event.</p></div>
<div id="hed"><h1>Balls</h1></div>
</section>
<section class="section" id="News">
<div class="section-title"><h2>News</h2><hr></div>
<div class="news-item">
<div class="news-image">
<img src="https://saintswest.files.wordpress.com/2016/05/wp-1463929509389.jpg" alt="guy raising his hand to the air" style="height: 200px">
</div>
<div class="news-lead">
<h3>Balls Going Public</h3>
<p>After years of bouncing off all the walls, we've broken the fourth and we're coming at you!</p>
</div>
</div>
<div class="news-item">
<div class="news-image">
<img src="https://d.ibtimes.co.uk/en/full/1443063/world-cup.jpg" alt="hand raising the world cup trophy" style="height: 100px; margin-left:-20px;">
</div>
<div class="news-lead">
<h3>World Cup 2018 Underway</h3>
<p>See the best ball action on the pitch as national teams compete for world glory.</p>
</div>
</div>
<div class="news-item">
<div class="news-image">
<img src="https://www.bruceberg.com/wp-content/uploads/2014/11/nickmack9.jpg" alt="hand palming a basketball" style="height:220px; margin-top:-20px;">
</div>
<div class="news-lead">
<h3>The Ball's in Your Court</h3>
<p>After reviewing the physics of basketballs, we ask our customers, "What's the right amount of bounce?"</p>
</div>
</div>
</section>
<section class="section" id="Mission">
<div class="section-title"><h2>Our Mission</h2><hr></div>
<article>
<p>At Balls International, we have a saying: "Cube our pies for over three!" And we say it loud. We pride ourselves in ball production, and we inject that pride into every ball we sell. When you put your hands on a Balls ball, you're not just touching a spherical toy. You're touching pure pride.</p>
<p>Our mission at Balls is to produce the best balls. We aren't satisfied unless each of our customers gets the right ball. That's why we guarantee our balls for life. That's the Balls way.</p>
</article>
</section>
<section class="section" id="Products">
<div class="section-title"><h2>Products</h2><hr></div>
<div class="product-list">
<div class="product-desc" style="background-image:url('https://ae01.alicdn.com/kf/HTB1chCNKVXXXXbqXFXXq6xXFXXXl/Kids-Toys-PU-Foam-font-b-Basketball-b-font-for-Children-Boys-Girls-Perfect-Training-font.jpg')" alt="basketball">
<div class="prod-show"></div>
<div class="prod-hide">
<ul>
<li>Basketball</li>
<li>$2,900</li>
</ul>
</div>
</div>
<div class="product-desc" style="background-image:url('https://cdn.firespring.com/images/4c785460-a7e1-4a03-81c5-d99718c29178.jpg')" alt="soccer ball">
<div class="prod-show"></div>
<div class="prod-hide">
<ul>
<li>Soccer Ball</li>
<li>$4,900</li>
</ul>
</div>
</div>
<div class="product-desc" style="background-image:url('https://www.woogsworld.com/wp-content/uploads/2015/10/tennis-ball.jpg')" alt="tennis ball">
<div class="prod-show"></div>
<div class="prod-hide">
<ul>
<li>Tennis Ball</li>
<li>$1,499</li>
</ul>
</div>
</div>
<div class="product-desc" style="background-image:url('https://images-na.ssl-images-amazon.com/images/I/218tidASiNL._SX342_.jpg')" alt="ball bearing">
<div class="prod-show"></div>
<div class="prod-hide">
<ul>
<li>Ball Bearing</li>
<li>$99</li>
</ul>
</div>
</div>
</div>
</section>
<section class="section" id="Contact">
<div class="section-title"><h2>Contact</h2><hr></div>
<div class="virtual"><h3>Take a virtual tour of a soccer ball manufacturing facility!</h3></div>
<div class="virtual"><iframe id="video" type="text/html" width="288" height="162px"
src='https://www.youtube-nocookie.com/embed/zbLjk4OTRdI?rel=0&controls=0&showinfo=0' referrerpolicy='origin'></iframe></div>
<div class="contact-form"><h3>Contact us:</h3></div>
<form id="form" action="https://www.freecodecamp.com/email-submit">
<div class="form-item">
<label id="email-label" for="email">Email: </label>
<input id="email" type="email" name="email" placeholder="Valid e-mail address" required></div>
<div class="form-item">
<label id="text-label" for="comments">Please type your comments here:</label>
</div>
<div class="form-item"><textarea id="text-content"></textarea></div>
<div class="form-item"><input id="submit" type="submit" value="Submit"></div>
</form>
</section>
</main>
<footer class="foot-container">
<div class="company-mark">© 2018 Balls International</div>
</footer>
body{
background: none;
color: dimgray;
height: 100vh;
}
a{
text-decoration: none;
}
.navbar-container{
top: 0;
right: 0;
left: 0;
position: fixed;
min-height: 50px;
margin-bottom: 20px;
z-index: 1000;
background: silver;
border-radius: 3px;
box-shadow: 0 0 5px 2px dimgray;
display: flex;
font-family: sans-serif;
font-size: 1.2em;
line-height: 1.4em;
padding: 0;
justify-content: space-between;
}
.navbar-container a{
color: dimgray;
}
.nav-left{
display: flex;
}
.nav-left > a{
padding: 10px 16px 0px 16px;
}
.nav-right{
display: flex;
}
.nav-right > a{
padding: 10px 16px 0px 16px;
}
.nav-left > a:hover, .nav-right > a:hover{
background: dimgray;
color: white;
border-bottom: solid 1px gray;
border-radius: 3px;
}
.nav-left > a:focus{
color: black;
}
.nav-right .nav-drop{
display: none;
}
.drop-menu{
display: none;
}
main{
display: flex;
flex-direction: column;
margin: 60px 10px 10px 10px;
}
.section{
width: 600px;
margin: 10px auto 10px auto;
border-top: ridge 1px white;
box-shadow: 0px 2px 4px 2px dimgray;
}
.section-title{
line-height: 1em;
margin: 0 20px 0 20px;
font-family: Arial, Helvetica, sans-serif;
}
#Home{
height: 200px;
background-image: url("https://i.kinja-img.com/gawker-media/image/upload/s--t2h4dpTn--/c_scale,fl_progressive,q_80,w_800/lawtjj5wcev71jm6jnun.jpg");
background-size: 130%;
background-position: right;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 1px;
grid-template-areas:
"par par par"
". . ."
". hed hed";
}
#par{
font-size: 1em;
font-family: sans-serif;
grid-area: par;
padding: 10px 0 0 20px;
color: white;
}
#hed{
font-family: sans-serif;
text-align: center;
grid-area: hed;
padding: 0 50px 10px 0;
color: black;
}
#News{
display: flex;
flex-direction: column;
}
#News h1{
}
.news-item{
width: 100%;
min-height: 120px;
margin: 0 auto 0 auto;
display: grid;
grid-template-columns: minmax(100px, 160px) minmax(200px, 440px);
grid-template-rows: 1fr;
grid-gap: 5px 5px;
border-bottom: solid 1px dimgray;
}
.news-image{
width: 96px;
height: 96px;
margin: auto auto auto 15px;
overflow: hidden;
border-radius: 3px;
box-shadow: 0px 0px 4px 1px silver;
display: flex;
}
.news-lead{
color: black;
font-family: "Times New Roman", Times, serif;
margin: 0 30px 0 0;
}
.news-lead p{
text-align: justify;
}
#Mission article{
margin: 0 20px 0 20px;
text-align: justify;
color: black;
}
#Products{
padding-bottom: 10px;
}
.product-list{
width: 100%;
display: flex;
flex-wrap: wrap;
}
.product-desc{
height: 280px;
width: 280px;
display: flex;
margin: 5px auto 5px auto;
overflow: hidden;
background-size: cover;
background-position: center;
border-radius: 50%;
box-shadow: 0px 0px 10px 4px white inset;
}
.prod-show{
height: 100%;
width: 30%;
}
.prod-hide{
height: 100%;
width: 70%;
background: hsla(328, 7%, 44%, 0.65);
padding-top: 20px;
display: flex;
flex-direction: column;
font-family: Arial, Helvetica, sans-serif;
font-weight: 600;
color: black;
}
.prod-hide ul {
list-style-type: none;
list-style-position: outside;
line-height: 2em;
font-size: 1.1em;
}
#Contact{
display: flex;
flex-direction: column;
padding-bottom: 20px;
}
#Contact form{
margin: auto;
display: flex;
flex-direction: column;
}
.virtual{
margin: auto;
font-family: Arial, Helvetica, sans-serif;
}
.virtual h3{
text-align: center;
}
#video{
}
.form-item{
margin: 0 auto 5px auto;
}
.contact-form{
margin: auto;
font-family: Arial, Helvetica, sans-serif;
}
#text-content{
width: 300px;
height: 200px;
}
#submit{
font-size: 1em;
box-shadow: 0 0 3px 1px gray;
}
.main-container{
display: flex;
display: flex;
flex-direction: column;
}
.content-container{
min-width: 310px;
}
.foot-container{
display: flex;
flex-shrink: 0;
}
.company-mark{
margin-left: auto;
margin-right: auto;
min-width: 100px;
}
@media (max-width: 620px){
/*.nav-left a:not(:first-child) {display: none;}*/
.nav-right .nav-drop{
display: block;
}
}
@media (max-width: 620px){
.section{
width: 400px;
}
.drop-menu.responsive{
position: absolute;
right: 5px;
top: 50px;
display: flex;
flex-direction: column;
background: silver;
margin-top: 5px;
box-shadow: 0 0 4px 2px gray;
}
.drop-menu.responsive a{
color: dimgray;
min-height: 40px;
line-height: 20px;
font-family: sans-serif;
font-size: 1.2em;
line-height: 1.4em;
padding: 10px 16px 0px 16px;
text-align: center;
}
.drop-menu.responsive a:hover{
background: dimgray;
color: white;
}
}
@media (min-width: 420px){
#video{
width: 384px;
height: 216px;
}
}
var smallScreen = window.matchMedia("(max-width: 620px)");
var largeScreen = window.matchMedia("(min-width: 621px)");
function respondScreenMini(mini){
if (mini.matches){
var x = document.getElementById("nav-bar");
var y = document.getElementById("dropContain");
while (x.children.length>1){
y.appendChild(x.children[1]);
}
}
}
function respondScreenMaxi(maxi){
if (maxi.matches){
var x = document.getElementById("nav-bar");
var y = document.getElementById("dropContain");
while (y.children.length > 0) {
x.appendChild(y.children[0]);
}
}
}
function navDropSwitch(self=this) {
this.preventDefault;
var y = document.getElementById("dropContain");
if (y.className === "drop-menu") {
y.className += " responsive";
} else {
y.className = "drop-menu";
}
}
document.addEventListener("DOMContentLoaded", function(){
respondScreenMini(smallScreen);
smallScreen.addListener(respondScreenMini);
respondScreenMaxi(largeScreen);
largeScreen.addListener(respondScreenMaxi);
document.getElementById('dropdown').addEventListener('click', navDropSwitch);
})
External CSS
External JavaScript
This Pen doesn't use any external JavaScript resources.