Day 16 - Charitable Organization
How do I make an day 16 - charitable organization?
FreeCodeCamp is a nonprofit organization that consists of an interactive learning web platform, an online community forum, chat rooms, Medium publications, and local organizations that intend to make learning web development accessible to anyone.. What is a day 16 - charitable organization? How do you make a day 16 - charitable organization? This script and codes were developed by Christian on 15 October 2022, Saturday.
Day 16 - Charitable Organization - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Day 16 - Charitable Organization</title> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <nav class="mastnav"> <a target="_blank" href="https://freecodecamp.com" class="mastnav__brand"> <img src="https://avatars2.githubusercontent.com/u/9892522?v=3&s=400" alt="Freecodecamp's logo"> </a> <a href="javascript:void(0)" class="mastnav__item">Home</a> <a href="#about" class="mastnav__item">About</a> <a href="#join" class="mastnav__item">Join</a>
</nav>
<header class="masthead"> <h1>freeCodeCamp</h1> <h2><i class="fa fa-book"></i> Learn.</h2> <h2><i class="fa fa-code"></i> Build.</h2> <h2><i class="fa fa-handshake-o"></i> Contribute.</h2> <a href="javascript:void(0)" class="masthead__action"> <i class="fa fa-coffee"></i> Give a cup of coffee. </a>
</header>
<main> <section id="about"> <h3>About</h3> <p> freeCodeCamp (also referred to as “Free Code Camp”) is a nonprofit organization that consists of an interactive learning web platform, an online community forum, chat rooms, Medium publications, and local organizations that intend to make learning web development accessible to anyone. </p> </section> <section id="join"> <h3>Reasons to join</h3> <ul> <li> <span class="fa fa-code"> </span> You'll get help in real time from the community chat rooms.</li> <li><span class="fa fa-code"> </span> You'll meet up with other coders in your city.</li> <li><span class="fa fa-code"> </span> You'll learn to code at your own pace, in your browser or on your phone.</li> <li><span class="fa fa-code"> </span> You'll work through the focused, interactive courses and tutorials.</li> <li><span class="fa fa-code"> </span> You'll learn state-of-the-art full stack JavaScript technologies.</li> <li> <span class="fa fa-code"> </span> You'll build projects that help nonprofits carry out their missions more effectively.</li> <li><span class="fa fa-code"> </span> You'll assemble a portfolio of real apps used by real people.</li> </ul> </section>
</main>
<footer> <a href="https://freecodecamp.com" target="_blank"> <i class="fa fa-hand-o-right"></i> Join now to improve your skillset. </a>
</footer>
</body>
</html>
Day 16 - Charitable Organization - Script Codes CSS Codes
:root { --primary-color: #006400; --secondary-color: #96bf96; --info-color: #fcfcfc; --warning-color: #eaeaea; --danger-color: #4a4a4a;
}
* { padding: 0; margin: 0; box-sizing: border-box;
}
body { background-color: var(--warning-color); color: var(--danger-color); font-family: "Segoe UI", sans-serif; font-weight: light; overflow-x: hidden;
}
/* * Navigation styles */
.mastnav { background: linear-gradient(var(--primary-color) 25%, var(--secondary-color) 5%); box-shadow: 1px 2px 10px 0 var(--primary-color); padding: 2em 1rem;
}
@media only screen and (min-width: 768px) { .mastnav { background: linear-gradient(45deg, var(--primary-color) 8%, var(--secondary-color) 5%); }
}
/* Resize the image size of the logo */
.mastnav__brand > img { border-radius: 50%; height: 64px; width: 64px;
}
.mastnav__brand,
.mastnav__item { display: block; margin-top: 1rem; text-align: center; text-decoration: none; vertical-align: middle;
}
@media only screen and (min-width: 768px) { .mastnav__brand, .mastnav__item { display: inline-block; }
}
.mastnav__item:first-child { margin-left: 2rem;
}
.mastnav__item { border: 2px solid var(--primary-color); box-shadow: 1px 2px 10px 0 var(--primary-color); color: var(--info-color); margin-left: 2vw; padding: 1rem 3rem; transition: all 200ms cubic-bezier(0.2, 0.3, 0.4, 0.1); transform: skewX(-20deg);
}
.mastnav__item:hover { background-color: var(--primary-color); box-shadow: 1px 1px 5px 0 var(--primary-color); transform: skewX(0);
}
/* * Header styles */
.masthead { background: linear-gradient(45deg, rgba(0, 100, 0, 0.7), rgba(150, 191, 150, 0.5)), url(https://static.pexels.com/photos/89724/pexels-photo-89724.jpeg) top center; background-size: cover; color: var(--info-color); font-size: 150%; font-weight: light; padding: 15vh; text-align: center;
}
.masthead h1 { font-size: 250%;
}
.masthead a.masthead__action { display: block; background-color: var(--primary-color); box-shadow: 1px 1px 5px 0 var(--primary-color); color: var(--info-color); font-size: inherit; margin: 2vh auto; padding: 1rem 2vw; text-decoration: none; transform: skewX(-20deg); width: 50vw;
}
/* Main section styles */
main { margin: 2rem;
}
main > section { margin-top: 2rem;
}
main > section > h3 { background-color: var(--primary-color); color: var(--info-color); font-size: 250%; margin: 0 auto; padding: 1rem; transform: skewX(-20deg); text-align: center; width: 50%;
}
main > section > p,
main > section > ul { border-radius: 1rem; box-shadow: 1px 1px 10px 0 var(--primary-color); font-size: 200%; list-style-type: none; padding: 2rem; margin: 0 auto; width: 80%;
}
footer { background-color: var(--primary-color); padding: 2rem; font-size: 200%; text-align: center;
}
footer > a { background: var(--secondary-color); box-shadow: 0 1px 10px 0 var(--secondary-color); color: var(--primary-color); padding: 1rem 2rem; text-decoration: none;
}
Developer | Christian |
Username | chpecson |
Uploaded | October 15, 2022 |
Rating | 3 |
Size | 3,314 Kb |
Views | 28,336 |
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!
Name | Size |
Day 15 - Motivational speaker | 2,415 Kb |
Day 4 - Product site | 2,883 Kb |
Day 18 - Cruise ship | 3,491 Kb |
Day 10 -Photography | 3,550 Kb |
Day 12 - Club | 3,497 Kb |
Tribute Page V2 | 6,248 Kb |
Day 13 - Beverage | 3,587 Kb |
Day 11 - Events | 4,638 Kb |
Day 6 - Author | 2,696 Kb |
Day 7 -Movie Trailer | 3,155 Kb |
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!
Name | Username | Size |
AngularJS Animated Todo List | Ehaase | 2,975 Kb |
Toolbar | Onsen | 5,414 Kb |
Social buttons | Flacu | 2,022 Kb |
Pure CSS Dial | Lukewatts | 3,018 Kb |
Starfield old school style | Bolloxim | 5,214 Kb |
CSS 3D Radio buttons | Andreasnylin | 1,650 Kb |
Fun animations with CSS3 | Minimalmonkey | 2,360 Kb |
Video mute | Leon9208 | 2,131 Kb |
Comment Jquery | SquishyAndroid | 2,421 Kb |
Countdown with Rings | Ewganoel | 2,490 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!