Day 13 - Beverage

Developer
Christian
Size
3,587 Kb
Views
18,216
  1. Day 13 - Beverage Previews
  2. Day 13 - Beverage HTML Codes
  3. Day 13 - Beverage CSS Codes
  4. Day 13 - Beverage JS Codes

How do I make an day 13 - beverage?

No matter how serious life is there is always time for a beer.. What is a day 13 - beverage? How do you make a day 13 - beverage? This script and codes were developed by Christian on 15 October 2022, Saturday.

Day 13 - Beverage Previews
IQ Test

Day 13 - Beverage - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Day 13 - Beverage</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <nav class="mastnav"> <a href="#" class="mastnav__brand"> <img src="https://s5.postimg.org/gg9v0h7ef/beer.png" alt="Brand logo"> </a> <a class="show" id="open-links">↓</a> <a class="hide" id="close-links">↑</a> <section class="mastnav-links hide"> <a href="#" class="mastnav-links__item">Home</a> <a href="#products" class="mastnav-links__item">Products</a> <a href="#footer" class="mastnav-links__item">Contact</a> </section>
</nav>
<header class="masthead"> <h1>Beerd</h1> <p>Rootin, Shaking. Ready for Chilling!</p>
</header>
<main> <section id="products"> <h2>Products</h2> <section class="product"> <section class="product__header"> <h3>Root beer</h3> </section> <section class="product__content"> <img class="product__content__image" src="https://s5.postimg.org/70tzn9pdj/beer-4.png" alt="First product: Root beer"> </section> </section> <section class="product"> <section class="product__header"> <h3>Stout</h3> </section> <section class="product__content"> <img class="product__content__image" src="https://s5.postimg.org/hc6cfxh2v/beer-5.png" alt="Second product: Stout"> </section> </section> <section class="product"> <section class="product__header"> <h3>Ale</h3> </section> <section class="product__content"> <img class="product__content__image" src="https://s5.postimg.org/tfg9h8hiv/beer-6.png" alt="Third product: Ale"> </section> </section> <section class="product"> <section class="product__header"> <h3>Tenesse</h3> </section> <section class="product__content"> <img class="product__content__image" src="https://s5.postimg.org/rc5u9khpz/beer-7.png" alt="Fourth product: Tenesse"> </section> </section> <section class="product"> <section class="product__header"> <h3>Pale ale</h3> </section> <section class="product__content"> <img class="product__content__image" src="https://s5.postimg.org/cu8n1kqev/beer-8.png" alt="Fifth product: Pale ale"> </section> </section> <section class="product"> <section class="product__header"> <h3>Dankel</h3> </section> <section class="product__content"> <img class="product__content__image" src="https://s5.postimg.org/90aleojp1/beer.png" alt="Sixth product: Dankel"> </section> </section> </section>
</main>
<footer id="footer"> <section> <h3>Credits</h3> <p> Icons are designed by Nas Ztudio from Flaticon </p> </section> <section> <h3>Contact</h3> <p>+639074498754</p> <a href="#" class="facebook">facebook</a> <a href="#" class="twitter">twitter</a> </section> <section class="clearfix"></section>
</footer> <script src="js/index.js"></script>
</body>
</html>

Day 13 - Beverage - Script Codes CSS Codes

/* * Qucik CSS resets */
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0;
}
body { font-family: "Segoe UI", sans-serif; font-weight: 400;
}
h1 { font-size: 3.5rem;
}
h2 { font-size: 3rem;
}
h3 { font-size: 2.5rem;
}
h4 { font-size: 2rem;
}
h5 { font-size: 1.5rem;
}
h5 { font-size: 1rem;
}
/* * Colors */
:root { --primary-color: #D4B701; --secondary-color: #F4E300; --tertiary-color: #030323; --light-secondary-color: #DBC551; --light-tertiary-color: #F2EDCF;
}
/* * Navigation styles */
.mastnav { padding: 1rem; background-color: var(--light-tertiary-color); box-shadow: 0 5px 10px 1px rgba(0, 0, 0, 0.2); position: fixed; width: 100%; margin-bottom: 100px;
}
.mastnav a { color: var(--tertiary-color); font-size: 1.5rem; text-decoration: none;
}
.mastnav__brand { display: block; margin: 0 auto; text-align: center; width: 100%;
}
.mastnav__brand > img { display: inline-block; height: 64px; text-align: center; vertical-align: middle; width: 64px;
}
.mastnav__brand > img:hover { animation: 200ms shake alternate 5;
}
@keyframes shake { from { transform: rotate(0); } 25% { transform: rotate(5deg); } 50% { transform: rotate(20deg); } 75% { transform: rotate(5deg); } to { transform: scale(1) rotate(0deg); }
}
.mastnav-links { display: block;
}
.mastnav-links__item { background-color: var(--light-secondary-color); display: block; margin: .2rem; padding: 1rem 2rem; transition: background-color 200ms linear; text-align: center;
}
.mastnav-links__item:hover { background-color: var(--primary-color);
}
a[id$=links] { font-size: 2rem; text-align: center; width: 100%;
}
.hide { display: none;
}
.show { display: block;
}
/* Wide screens: Laptops, Desktops */
@media only screen and (min-width: 1200px) { a[id$=links] { display: none; } .mastnav__brand { display: inline-block; width: auto; } .mastnav-links { display: inline-block; } .mastnav-links__item { display: inline-block; }
}
/* Medium screens: tablets */
@media only screen and (min-width: 768px) {}
/* Small screens: phones */
@media only screen and (min-width: 468px) {}
/* * Header styles */
.masthead { background: linear-gradient(45deg, rgba(220, 200, 90, 0.97) 10%, rgba(219, 197, 81, 0.97) 90%), url("https://s5.postimg.org/dbz73oqlz/beer-2.png") no-repeat center fixed; background-size: contain; box-shadow: 0 5px 10px 1px rgba(0, 0, 0, 0.2); font-size: 130%; margin-bottom: 1rem; padding: 35vh 0; text-align: center;
}
@media only screen and (min-width: 1200px) { .masthead { background: linear-gradient(45deg, rgba(250, 240, 210, 0.9) 30%, rgba(219, 197, 81, 0.97) 70%), url("https://s5.postimg.org/biwafd5fb/beer-1.png") no-repeat left center fixed, url("https://s5.postimg.org/dbz73oqlz/beer-2.png") no-repeat center, url("https://s5.postimg.org/fukw4dcc7/beer-3.png") no-repeat right center fixed; }
}
main { margin: 0 auto; width: 80%;
}
.product { border: 1px solid var(--primary-color); box-shadow: 2px 2px 4px 1px rgba(0, 0, 0, 0.2); display: inline-block; margin: 1rem 2rem; text-align: center; width: 40%;
}
.product:hover { box-shadow: 2px 2px 10px 2px rgba(0, 0, 0, 0.3);
}
.product__header { background-color: var(--light-secondary-color); padding: 1rem 0;
}
.product__content { padding: 1rem;
}
.product__content .product__content__image { width: 100%;
}
@media only screen and (min-width: 1200px) { .product { display: inline-block; width: 25%; }
}
footer { background-color: var(--light-secondary-color); padding: 2vh 0 2vh 10vw;
}
footer > section { font-size: 120%;
}
footer > section:first-child { margin-right: 10%;
}
footer > section:not(.clearfix) { float: none;
}
footer section:nth-child(2n) { font-size: 2rem; color: var(--ligh-tertiary-color); margin-right: 2rem; text-decoration: none;
}
footer a { color: inherit; text-decoration: inherit;
}
.clearfix { clear: both;
}
@media only screen and (min-width: 1200px) { footer > section:not(.clearfix) { float: left; }
}

Day 13 - Beverage - Script Codes JS Codes

(function() { var openLink = document.querySelector('#open-links'); var closeLink = document.querySelector('#close-links'); var mastheadLink = document.querySelector('.mastnav-links'); openLink.addEventListener('click', function() { openLink.classList.remove('show'); openLink.classList.add('hide'); closeLink.classList.remove('hide'); closeLink.classList.add('show'); mastheadLink.classList.remove('hide'); }, false); closeLink.addEventListener('click', function() { openLink.classList.remove('hide'); openLink.classList.add('show'); closeLink.classList.remove('show'); closeLink.classList.add('hide'); mastheadLink.classList.add('hide'); }, false);
})();
Day 13 - Beverage - Script Codes
Day 13 - Beverage - Script Codes
Home Page Home
Developer Christian
Username chpecson
Uploaded October 15, 2022
Rating 3
Size 3,587 Kb
Views 18,216
Do you need developer help for Day 13 - Beverage?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Christian (chpecson) Script Codes
Name
Tribute Page V2
Layout and transition experiment
Tribute Page v1
Day 10 -Photography
Day 11 - Events
Day 6 - Author
Day 12 - Club
Day 16 - Charitable Organization
Wikipedia viewer
Day 5 - Restaurant menu
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!