<nav>
<div class="wrapper">
<ul id="desktop-nav">
<li><a href="#homepage" class="links">Homepage</a></li>
<li><a href="#about" class="links">About Us</a></li>
<li><a href="#services" class="links">Services</a></li>
<li><a href="#contact" class="links">Contact</a></li>
<li><a href="#">External</a></li>
</ul>
</div>
<div class="btn-toggle-nav" onclick="toggleNav()"></div>
<div id="collapse-nav">
<ul>
<li><a href="#homepage" class="links" onclick="toggleNav()">Homepage</a></li>
<li><a href="#about" class="links" onclick="toggleNav()">About Us</a></li>
<li><a href="#services" class="links" onclick="toggleNav()">Services</a></li>
<li><a href="#contact" class="links" onclick="toggleNav()">Contact</a></li>
<li><a href="#" onclick="toggleNav()">External</a></li>
</ul>
</div>
<a href="#homepage" id="back-to-top"><img src="https://dnicolef.github.io/diamond-pre-work-voyage/img/top.png" alt="Back to top"></a>
</nav>
<section id="homepage" class="fixed-bg">
<header>
<div class="wrapper">
<h1>Diamond</h1>
<h4>Chingu Pre-Work | Tier One</h4>
</div>
</header>
</section>
<section id="about">
<div class="wrapper">
<div class="inner-wrapper">
<div id="green" class="third-width box">
<img src="https://dnicolef.github.io/diamond-pre-work-voyage/img/love.jpg" alt="">
<div class="box-content">
<h2>Column One</h2>
<p>Rigging execution dock weigh anchor log. Jack Tar bilged on her anchor killick jack. Pirate league bounty provost. Hearties pressgang Corsair sheet. Jack Ketch handsomely carouser gibbet.</p>
<div><button>Green</button></div>
</div>
</div>
<div id="blue" class="third-width box">
<img src="https://dnicolef.github.io/diamond-pre-work-voyage/img/maxshoes.jpg" alt="">
<div class="box-content">
<h2>Column Two</h2>
<p>Yo-ho-ho holystone list loaded to the gunwalls. Take a caulk gunwalls bilged on her anchor chase guns overhaul. Loaded to the gunwalls. Scuttle handsomely carouser pink execution dock.</p>
<div><button>Blue</button></div>
</div>
</div>
<div id="red" class="third-width box">
<img src="https://dnicolef.github.io/diamond-pre-work-voyage/img/dream.jpg" alt="">
<div class="box-content">
<h2>Column Three</h2>
<p>Keelhaul shrouds Davy Jones' Locker aye. Log Jolly Roger overhaul tack. Piracy dance the hempen jig draught walk the plank. Blow the man down barque topmast jolly boat.</p>
<div><button>Red</button></div>
</div>
</div>
</div>
<div class="inner-wrapper">
<div class="half-width box">
<img src="https://dnicolef.github.io/diamond-pre-work-voyage/img/mickey.jpg" alt="">
<div class="box-content">
<h2>Two-Column Left</h2>
<p>Clap of thunder loaded to the gunwalls six pounders broadside starboard wherry. Scuttle clipper broadside spanker crow's nest provost. Loot sutler dance the hempen jig cable log pinnace.</p> <p>Haul wind Arr cable bilge rat red ensign Gold Road. Loot list run a shot across the bow wherry gangway nipperkin. Hulk coffer hearties nipperkin smartly clap of thunder. Lugger gangway starboard Pirate Round nipper black jack.</p>
<p>Sink me bilge rat smartly cutlass. Long clothes doubloon gunwalls Privateer Jolly Roger knave. Yellow Jack gibbet Shiver me timbers stern wench fathom.</p>
</div>
</div>
<div class="half-width box">
<img src="https://dnicolef.github.io/diamond-pre-work-voyage/img/motorsport.jpg" alt="">
<div class="box-content">
<h2>Two-Column Right</h2>
<p>Haul wind Arr cable bilge rat red ensign Gold Road. Loot list run a shot across the bow wherry gangway nipperkin. Hulk coffer hearties nipperkin smartly clap of thunder. Lugger gangway starboard Pirate Round.</p>
<p>Black spot sheet nipper cog sutler. Jack Tar flogging hardtack walk the plank lass. League pink execution dock nipper black jack.</p>
<p>Clap of thunder loaded to the gunwalls six pounders broadside starboard wherry. Scuttle clipper broadside spanker crow's nest provost. Loot sutler dance the hempen jig cable log pinnace. Yawl lateen sail marooned scallywag capstan fore.</p>
<button class="basic">Read More</button>
</div>
</div>
</div>
</div>
</section>
<section id="services">
<div class="fixed-bg" id="services-img">
<div class="wrapper heading">
<h1>Our Services</h1>
<p>Jury mast lateen sail chantey spyglass spanker. Clap of thunder crack Jennys tea cup boom heave to swing the lead.</p>
</div>
</div>
<div class="wrapper" id="services-wrapper">
<div class="inner-wrapper" id="four-columns">
<div class="fourth-width box">
<img src="https://dnicolef.github.io/diamond-pre-work-voyage/img/oil.jpg" alt="">
<div class="box-content">
<h2 class="service-header">Column One</h2>
<p>Man-of-war take a caulk cable bilge rat. Black spot fire in the hole mutiny heave to. Cable lass run a rig brig.</p>
</div>
</div>
<div class="fourth-width box">
<img src="https://dnicolef.github.io/diamond-pre-work-voyage/img/book.jpg" alt="">
<div class="box-content">
<h2 class="service-header">Column Two</h2>
<p>Handsomely league run a rig Sink me. Keelhaul mutiny piracy landlubber or just lubber. Chase guns booty belay trysail.</p>
<button class="basic">Read It</button>
</div>
</div>
<div class="fourth-width box">
<img src="https://dnicolef.github.io/diamond-pre-work-voyage/img/rainbow.jpg" alt="">
<div class="box-content">
<h2 class="service-header">Column Three</h2>
<p>Blow the man down flogging lugsail clap of thunder. Grog blossom plunder snow walk the plank. Code of conduct red ensign prow scuppers.</p>
</div>
</div>
<div class="fourth-width box">
<img src="https://dnicolef.github.io/diamond-pre-work-voyage/img/white.jpg" alt="">
<div class="box-content">
<h2 class="service-header">Column Four</h2>
<p>Fore booty shrouds ballast. Hearties hang the jib draught Chain Shot. Run a shot across the bow parley mutiny boom.</p>
<button class="basic">Details</button>
</div>
</div>
</div>
<div class="inner-wrapper">
<div class="full-width box">
<img src="https://dnicolef.github.io/diamond-pre-work-voyage/img/work.jpg" alt="">
<div class="box-content">
<h2>One Big Column</h2>
<p>Booty interloper lugger cable fluke. Pinnace keelhaul blow the man down piracy lad. Heave to scuppers parrel execution dock grog. Crimp long clothes spike mutiny Plate Fleet. Run a shot across the bow gangway tackle sheet deadlights. Barbary Coast splice the main brace ye cackle fruit spanker.</p>
<p>Brig warp blow the man down gangway. Jolly boat Davy Jones' Locker Sink me Nelsons folly. Swing the lead furl man-of-war sloop. Crack Jennys tea cup man-of-war weigh anchor dance the hempen jig. Walk the plank square-rigged gun pillage.</p>
<button class="basic">Read More</button>
</div>
</div>
</div>
</div>
</section>
<section id="contact" class="fixed-bg">
<div class="wrapper">
<h1>Contact Form</h1>
<div>
<p>Loaded to the gunwalls heave down hulk maroon Davy Jones' Locker. Brig boom swing the lead fire in the hole galleon. Pink skysail Spanish Main to go on account schooner.</p>
</div>
<form>
<div class="form-left">
<input type="text" placeholder="Name">
<input type="email" placeholder="Email">
<input type="text" placeholder="Subject">
</div>
<div class="form-right">
<textarea rows="6" placeholder="Your message here..."></textarea>
<button type="submit">Send</button>
</div>
</form>
</div>
</section>
<footer>
<h4>Please Come Again!</h4>
<p>Copyright © 2019 Chingu Pre-Work</p>
</footer>*{
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
}
body {
background: #fff;
font-family: 'Open Sans', Helvetica, Arial, sans-serif;
font-size: 14px;
color: #333;
line-height: 22px;
}
h1 {
color: #fff;
text-shadow: 2px 2px 0 #000;
font-size: 2.57rem;
line-height: 3.43rem;
text-align: center;
}
.wrapper {
display: flex;
flex-flow: row wrap;
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
.inner-wrapper {
display: flex;
justify-content: space-between;
width: 100%;
}
.fixed-bg {
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.full-width {
width: 100%;
}
.half-width {
width: 48.5%;
}
.third-width {
width: 31.5%;
}
.fourth-width {
width: 22.5%;
}
.box {
background-color: #F2F2F2;
margin: 20px 0;
}
.box-content {
flex-direction: column;
justify-content: space-between;
padding: 20px;
}
.box-content p {
padding: 10px 0;
}
button {
padding: 10px 40px;
border: none;
outline: none;
border-radius: 10px;
font-size: 1.285rem;
margin: 10px 30px 15px;
border: 1px solid rgb(175, 55, 185);
cursor: pointer;
transition: all ease 0.2s;
}
.basic:hover {
background: #E6E6E6;
}
/* ===== NAVIGATION ===== */
nav {
position: fixed;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
background-color: rgb(119, 218, 61);
border-color: rgb(221, 132, 73);
width: 100%;
height: 70px;
z-index: 1;
}
nav ul {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
}
nav ul li {
display: flex;
flex-wrap: nowrap;
list-style-type: none;
margin: 0 10px;
}
nav ul li a {
display: flex;
flex-wrap: nowrap;
color: #fff;
text-decoration: none;
padding: 12px 25px;
border: 1px solid rgb(93, 133, 226);
font-size: 1.14rem;
border-radius: 8px;
}
nav ul li a:hover, .active {
background-color: #495060;
}
#collapse-nav {
display: none;
}
#back-to-top {
position: fixed;
right: 20px;
bottom: 20px;
}
#back-to-top img {
max-width: 40px;
}
:target:before {
content: "";
display: block;
height: 70px;
margin: -70px 0 0;
}
/* ===== HOMEPAGE ===== */
#homepage {
background-image: url('https://dnicolef.github.io/diamond-pre-work-voyage/img/coder.jpg');
height: 600px;
}
header {
display: flex;
justify-content: center;
align-items: center;
height: 600px;
}
header .wrapper {
flex-direction: column;
}
#homepage h1 {
font-size: 5.14rem;
line-height: 6.86rem;
text-transform: uppercase;
font-weight: lighter;
text-shadow: 1px 1px 0 rgb(243, 8, 204);
}
#homepage h4 {
color: #fff;
text-align: center;
font-size: 1.71rem;
line-height: 2.57rem;
text-shadow: 1px 1px 0 rgb(243, 8, 204);
}
/* ===== ABOUT US ===== */
#about {
padding: 50px 0;
}
#about .wrapper {
max-width: 1200px;
}
#about .inner-wrapper {
padding: 0 20px;
}
#about img {
max-width: 100%;
}
#green div, #blue div, #red div {
display: flex;
padding-top: 10px;
}
#green h2 {
color: #178927;
}
#green button {
background-color: #178927;
color: #fff;
border: none;
border-radius: 5px;
margin: 0 auto;
}
#green button:hover {
background-color: #1EAE31;
}
#blue h2 {
color: #1586C0;
}
#blue button {
background-color: #1586C0;
color: #fff;
border: none;
border-radius: 5px;
margin: 0 auto;
}
#blue button:hover {
background-color: #19A1E6;
}
#red h2 {
color: #862407;
}
#red button {
background-color: #862407;
color: #fff;
border: none;
border-radius: 5px;
margin: 0 auto;
}
#red button:hover {
background-color: #aa2e09;
}
button.basic {
background: #fff;
color: #333;
float: right;
}
/* ===== SERVICES ===== */
#services .wrapper {
max-width: 1200px;
}
#services-wrapper {
padding: 50px 20px;
}
#services-img {
background-image: url('https://dnicolef.github.io/diamond-pre-work-voyage/img/bg-3.jpg');
height: 300px;
}
#services .heading {
flex-direction: column;
justify-content: center;
height: 300px;
text-align: center;
border-radius: 4px;
padding: 5px;
}
#services .heading h1 {
margin-bottom: 25px;
color: white;
text-shadow: 1px 1px rgb(218, 135, 41);
}
#services .heading p {
width: 50%;
margin: 0 auto;
color: white;
font-size: 1.43rem;
text-shadow: 1px 1px rgb(218, 135, 41);
}
.box-content {
border-radius: 8px;
}
.service-header {
color: rgb(218, 179, 52);
}
.fourth-width img {
max-width: 100%;
border: 1px solid #ddd;
border-radius: 4px;
padding: 20px;
width: 229px;
}
.full-width img {
max-width: 100%;
}
/* ===== CONTACT ===== */
#contact {
background-image: url('https://dnicolef.github.io/diamond-pre-work-voyage/img/pond.jpg');
height: 580px;
display: flex;
justify-content: center;
align-items: center;
}
#contact .wrapper {
max-width: 720px;
}
#contact h1 {
width: 100%;
}
form {
width: 100%;
display: flex;
justify-content: space-around;
}
.form-left, .form-right {
display: flex;
flex-direction: column;
width: 350px;
}
.form-left {
margin-right: 10px;
}
.form-right {
margin-left: 10px;
}
#contact p, #contact form input, #contact textarea {
background: rgba(255,255,255,0.6);
color: #333;
line-height: 1.71rem;
outline: none;
border: none;
box-sizing: border-box;
margin: 10px;
padding: 5px 0 5px 10px;
border-radius: 4px;
}
#contact .form-left input {
line-height: 2.05rem;
}
#contact p {
padding: 20px 15px;
text-align: center;
}
::placeholder {
color:#333;
}
textarea {
font-family: 'Open Sans', sans-serif;
}
#contact button {
background-color: #b0b0e4;
color: #fff;
padding: 10px 20px;
width: 120px;
text-align: center;
margin-left: 10px;
}
#contact button:hover {
background-color: #e6e6e6;
color: #c0c0e7;
}
/* ===== FOOTER ===== */
footer {
text-align: center;
line-height: 3.43rem;
height: 150px;
display: flex;
flex-flow: column;
justify-content: space-around;
align-items: center;
}
footer h4 {
color: rgb(216, 87, 184);
font-size: 2.57rem;
font-style: italic;
text-shadow: 2px 2px 3px rgb(166, 245, 232);
margin-top: 10px;
}
window.onscroll = function() {scrollFunction()};
const button = document.getElementById("btnTop");
function removeClass(){
button.classList.remove('btnEnter');
}
function scrollFunction() {
if (document.body.scrollTop > 75 || document.documentElement.scrollTop > 75) {
if (button.style.display == "none") {
button.style.display = "block";
setTimeout(function(){ btnTop.classList.add('btnEnter'); }, 0005); // add 'btnEnter' class after 0005ms and...
button.addEventListener('transitionend', removeClass);
} else { button.style.display = "block"}
} else {
button.style.display = "none";
removeClass(); //and remove 'btnEnter' class
}
}
function topFunction() {
document.body.scrollIntoView({behavior: "smooth", block: "start"}); //For Safari
document.documentElement.scrollIntoView({behavior: "smooth", block: "start"}); // For Chrome, Firefox, IE and Opera
}
// PARALLAX
const parallax = document.querySelectorAll('.parallax');
window.addEventListener('scroll', function(){
const target = document.querySelectorAll('.parallax');
target.forEach(prllx => {
let pos = (window.pageYOffset - prllx.offsetTop) * prllx.dataset.rate + 'px';
prllx.style.backgroundPositionY = pos;
});
})
//SMOOTH SCROLL
const links = document.querySelectorAll(".navList_item");
links.forEach(link => link.addEventListener('click', scroll));
function scroll(e) {
e.preventDefault();
const targetId = e.target.getAttribute('href');
const destination = document.querySelector(targetId).offsetTop;
window.scrollTo({
top: destination,
left: 0,
behavior: 'smooth'
});
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.