FreeCodeCamp homepage redesign

Developer
Giana
Size
13,958 Kb
Views
46,552
  1. FreeCodeCamp homepage redesign Previews
  2. FreeCodeCamp homepage redesign HTML Codes
  3. FreeCodeCamp homepage redesign CSS Codes
  4. FreeCodeCamp homepage redesign JS Codes

How do I make an freecodecamp homepage redesign?

Practicing full-page coding with a FreeCodeCamp redesign.. What is a freecodecamp homepage redesign? How do you make a freecodecamp homepage redesign? This script and codes were developed by Giana on 12 June 2022, Sunday.

FreeCodeCamp homepage redesign Previews
IQ Test

FreeCodeCamp homepage redesign - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>FreeCodeCamp homepage redesign</title> <meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Lato:400,400italic,700,700italic|Roboto+Slab:700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <header class="site-header" role="banner"> <div class="topbar"> <h1 class="site-title"><a href="#"> <!-- Logo begin --> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="304.2" width="2626.7" viewBox="0 323.8 2626.7 304.20002" class="logo-medium"> <defs> <radialGradient gradientUnits="userSpaceOnUse" r="152.094" fy="475.972" fx="2412.87" cy="475.972" cx="2412.87" id="b" xlink:href="#a" gradientTransform="translate(4.02)"/> <linearGradient id="a"> <stop offset="0" stop-color="#fff"/> <stop offset="0.2" stop-color="#f7c553" stop-opacity="0.8"/> <stop offset="0.7" stop-color="#f7c553" stop-opacity="0.7"/> <stop offset="1" stop-color="#f7c553" stop-opacity="0"/> </linearGradient> </defs> <path d="M35.1 418.5h-23c-8 0-12.1-3.4-12.1-10.3s4-10.3 12.1-10.3h23v-20.1c0-35 17.8-52.2 53.4-52.2 14.3 0 26.4 2.9 36.2 8 12.1 7.5 18.4 18.4 18.4 32.1 0 9.2-3.4 13.2-10.3 13.2-4.6 0-8.6-2.9-10.9-8-2.9-9.2-5.7-14.3-7.5-16.6-4-5.2-12.6-8-25.3-8-21.8 0-32.1 10.9-32.1 32.1v19.5h41.9c9.2 0 13.8 3.4 13.8 10.3s-4.6 10.3-13.8 10.3h-42v131.4c0 8-3.4 12.1-10.3 12.1s-10.3-4-10.3-12.1V418.5h-1.2zM221.6 538.4V418.5h-31c-8.6 0-12.6-3.4-12.6-10.3s4-10.3 12.6-10.3h41.3c6.9 0 10.9 6.3 10.9 17.8 12.6-13.8 26.4-21.2 40.7-21.2 12.1 0 21.2 3.4 28.1 10.9 6.9 7.5 10.3 17.2 10.3 28.7 0 8-3.4 12.1-10.3 12.1-4 0-6.9-2.9-8.6-8-2.9-9.8-4.6-14.9-5.2-15.5-2.9-5.2-8.6-8-16.1-8-8 0-15.5 2.9-22.4 8.6-4 2.9-9.8 9.2-17.2 18.4v95.8h39c8.6 0 12.6 3.4 12.6 9.8 0 6.9-4 10.9-12.6 10.9h-91.2c-8.6 0-12.6-3.4-12.6-10.3s4-10.3 12.6-10.3h31.6v.8zM378.2 482.2v23c0 24.7 17.2 36.7 52.2 36.7 12.6 0 23-1.1 31-4 4-1.1 11.5-5.2 21.2-12.1 6.3-5.7 10.9-8.6 12.6-8.6 5.7 0 8.6 2.9 8.6 9.2 0 6.3-4 12.6-12.6 19.5-13.8 10.9-34.4 16.6-62 16.6-48.2 0-72.3-18.9-72.3-56.8v-57.4c0-13.2 5.2-24.7 14.9-33.9 13.2-12.6 32.7-18.4 59.1-18.4 47.1 0 70.6 23.5 70.6 70 0 11.5-4.6 17.2-13.2 17.2H378.2v-1zm0-20.7h102.7c0-31-17.2-46.5-52.2-46.5-12.6 0-24.1 2.9-34.4 8.6-10.3 7.5-16.1 16.1-16.1 25.8v12.1zM558.4 482.2v23c0 24.7 17.2 36.7 52.2 36.7 12.6 0 23-1.1 31-4 4-1.1 11.5-5.2 21.2-12.1 6.3-5.7 10.9-8.6 12.6-8.6 5.7 0 8.6 2.9 8.6 9.2 0 6.3-4 12.6-12.6 19.5-13.8 10.9-34.4 16.6-62 16.6-48.2 0-72.3-18.9-72.3-56.8v-57.4c0-13.2 5.2-24.7 14.9-33.9 13.2-12.6 32.7-18.4 59.1-18.4 47.1 0 70.6 23.5 70.6 70 0 11.5-4.6 17.2-13.2 17.2H558.4v-1zm0-20.7h102.7c0-31-17.2-46.5-52.2-46.5-12.6 0-24.1 2.9-34.4 8.6-10.9 7.5-16.1 16.1-16.1 25.8v12.1zM719.7 495.4v-89.5c0-47.1 24.7-70 74.6-70 20.1 0 36.2 4.6 48.8 13.2 14.3 10.9 21.2 25.8 21.2 44.2 0 8.6-3.4 13.2-10.9 13.2-5.2 0-8.6-4-10.9-12.6-1.1-6.9-4-13.8-8-20.1-6.3-11.5-20.1-16.6-41.9-16.6-18.4 0-31.6 4.6-39.6 13.8-7.5 8.6-11.5 21.8-11.5 40.7v74.5c0 19.5 4 33.3 12.1 41.9 8.6 9.2 21.8 14.3 40.2 14.3 28.1 0 44.2-9.8 48.2-29.3 1.7-7.5 2.3-10.9 2.3-11.5 1.7-4 4.6-6.3 8.6-6.3 6.9 0 10.9 4.6 10.9 13.2 0 17.8-7.5 31.6-22.4 42.5-12.1 8-27.5 12.1-47.1 12.1-23 0-40.7-5.2-53.9-16.1-13.8-12-20.7-29.2-20.7-51.6zM897.6 508v-59.1c0-36.2 24.1-53.9 72.3-53.9 48.2 0 72.3 17.8 72.3 53.9V508c0 36.2-23.5 53.9-71.2 53.9-49.3 0-73.4-17.7-73.4-53.9zm123.4 0v-59.1c0-22.4-17.2-33.9-52.2-33.9-33.3 0-50.5 11.5-50.5 33.9V508c0 22.4 17.2 33.9 51.6 33.3 34.4 0 51.1-10.9 51.1-33.3zM1200 542.4c-9.8 7.5-18.4 12.1-25.8 14.9-8 2.9-17.8 4.6-29.3 4.6-19.5 0-35-4-47.1-12.1-13.8-9.2-20.7-23-20.7-41.9v-60.3c0-17.8 6.9-31.6 20.1-40.7 11.5-8 27-12.1 45.3-12.1 12.1 0 22.4 1.1 30.4 4s16.6 8 25.8 15.5v-74c0-9.8 3.4-14.9 9.8-14.9 6.9 0 10.9 5.2 10.9 14.9v210.6c0 7.5-3.4 10.9-9.8 10.9-4 0-6.9-2.3-8-6.9-1-3.3-1.6-7.3-1.6-12.5zm-1.1-24.1v-82.6c-10.3-7.5-18.4-12.6-24.7-14.9-8.6-3.4-17.8-5.2-28.1-5.2-13.2 0-24.1 2.3-32.1 7.5-10.3 6.3-15.5 15.5-15.5 27v56.8c0 12.1 5.2 21.2 16.1 27.5 8.6 4.6 19.5 7.5 32.7 7.5 10.9 0 20.7-1.7 28.7-5.2 6.8-4.6 14.3-10.3 22.9-18.4zM1278.1 482.2v23c0 24.7 17.2 36.7 52.2 36.7 12.6 0 23-1.1 31-4 4-1.1 11.5-5.2 21.2-12.1 6.3-5.7 10.9-8.6 12.6-8.6 5.7 0 8.6 2.9 8.6 9.2 0 6.3-4 12.6-12.6 19.5-13.8 10.9-34.4 16.6-62 16.6-48.2 0-72.3-18.9-72.3-56.8v-57.4c0-13.2 5.2-24.7 14.9-33.9 13.2-12.6 32.7-18.4 59.1-18.4 47.1 0 70.6 23.5 70.6 70 0 11.5-4.6 17.2-13.2 17.2H1278l.1-1zm0-20.7h102.7c0-31-17.2-46.5-52.2-46.5-12.6 0-24.1 2.9-34.4 8.6-10.9 7.5-16.1 16.1-16.1 25.8v12.1zM1439.4 495.4v-89.5c0-47.1 24.7-70 74.6-70 20.1 0 36.2 4.6 48.8 13.2 14.3 10.9 21.2 25.8 21.2 44.2 0 8.6-3.4 13.2-10.9 13.2-5.2 0-8.6-4-10.9-12.6-1.1-6.9-4-13.8-8-20.1-6.3-11.5-20.1-16.6-41.9-16.6-18.4 0-31.6 4.6-39.6 13.8-7.5 8.6-11.5 21.8-11.5 40.7v74.5c0 19.5 4 33.3 12.1 41.9 8.6 9.2 21.8 14.3 40.2 14.3 28.1 0 44.2-9.8 48.2-29.3 1.7-7.5 2.3-10.9 2.3-11.5 1.7-4 4.6-6.3 8.6-6.3 6.9 0 10.9 4.6 10.9 13.2 0 17.8-7.5 31.6-22.4 42.5-12.1 8-27.5 12.1-47.1 12.1-23 0-40.7-5.2-53.9-16.1-13.3-12-20.7-29.2-20.7-51.6zM1733.2 542.4c-10.3 7.5-18.4 12.6-24.1 14.9-7.5 2.9-16.6 4.6-28.1 4.6-17.2 0-31.6-3.4-42.5-10.9-12.6-8.6-19.5-21.2-19.5-37.9s6.9-29.8 20.1-39c11.5-8.6 26.4-12.6 43.6-12.6 14.3 0 30.4 3.4 48.8 9.8V446c0-12.1-5.7-20.7-17.2-25.8-8-3.4-17.8-5.2-29.3-5.2-27 0-41.3 7.5-44.2 22.4-1.1 6.9-2.3 10.3-2.3 10.9-1.7 3.4-4.6 5.2-8.6 5.2-7.5 0-11.5-4-11.5-12.1 0-10.9 4-20.7 12.6-29.8 10.3-11.5 29.3-17.2 55.7-17.2 21.2 0 36.7 3.4 47.1 10.3 12.1 8.6 18.4 23 18.4 43v73.5c0 8.6 1.7 14.3 5.2 17.2.6.6 4 2.3 9.8 4.6 3.4 1.7 5.2 4.6 5.2 9.8 0 5.7-2.9 8.6-9.2 8.6-1.7 0-4.6-.6-9.2-2.3-8-2.9-13.2-4.6-14.3-5.2-3.1-1.7-5.4-5.7-6.5-11.5zm-1.2-21.8v-30.4c-16.1-5.2-31.6-8-45.3-8-31 0-46.5 9.8-46.5 29.8 0 10.3 4.6 18.4 13.8 23 7.5 4 16.6 6.3 28.1 6.3 9.8 0 18.9-1.7 27-5.7 6.3-2.3 13.8-7.5 22.9-15zM1813.5 412.2c5.2-6.3 9.8-10.9 13.2-12.6 4.6-2.9 10.3-4.6 17.8-4.6 11.5 0 21.2 5.7 29.8 17.8 5.7-6.9 10.9-11.5 15.5-13.8 5.2-2.9 12.1-4 20.1-4 24.7 0 37.3 12.1 37.3 36.2v116.5c0 9.8-3.4 14.3-10.9 14.3-6.9 0-10.3-4.6-10.3-14.3V438c0-14.9-6.3-23-18.4-23-9.2 0-18.4 5.7-26.4 16.6v115.9c0 9.8-3.4 14.3-10.3 14.3s-10.3-4.6-10.3-14.3V440.3c0-16.6-6.9-24.7-20.1-24.7-8.6 0-16.6 5.7-25.3 16.6v115.4c0 9.8-3.4 14.3-10.9 14.3-6.9 0-10.3-4.6-10.3-14.3V405.3c0-6.9 2.9-10.3 8.6-10.3 2.9 0 5.7 2.3 7.5 6.3 2.3 2.8 3.4 6.8 3.4 10.9zM2000 412.2c16.1-11.5 35-17.2 55.7-17.2 43.6 0 65.4 18.4 65.4 54.5v59.7c0 17.2-6.3 30.4-18.4 40.2-10.9 8.6-25.8 13.2-44.8 13.2-22.4 0-41.3-5.7-58-17.8v67.7c0 10.3-3.4 15.5-10.3 15.5s-10.3-5.2-10.3-15.5v-202c0-10.3 2.9-15.5 8.6-15.5 2.9 0 5.7 2.3 8 6.3 1.3 3.4 3 7.4 4.1 10.9zm0 109c14.9 13.2 33.3 20.1 54.5 20.1 13.2 0 23.5-2.3 31.6-7.5 9.8-5.7 14.3-14.3 14.3-25.3v-59.7c0-12.6-5.2-21.2-15.5-27-8-4-18.9-6.3-32.1-6.3-12.1 0-21.8 1.7-29.3 5.2-6.9 2.9-14.3 9.2-23.5 18.4v82.1zM2192.3 464.4c0-45.3 15.5-85.5 47.1-121.1 11.5-13.2 20.7-19.5 27-19.5 2.3 0 4.6.6 6.3 2.3 1.7 1.7 2.9 3.4 2.9 5.7 0 3.4-4 8.6-12.1 16.6-32.7 31.6-49.4 70.6-49.4 117.1 0 51.6 17.2 93.5 51.1 125.7 6.9 6.3 10.3 11.5 10.3 15.5 0 2.3-1.1 4.6-2.9 6.3-1.7 1.7-4 2.9-6.3 2.9-8 0-18.9-9.2-33.3-27.5-27.5-33.9-40.7-75.2-40.7-124zM2626.7 475.9c0 45.3-15.5 85.5-47.1 121.1-11.5 13.2-20.7 19.5-27 19.5-2.3 0-4.6-.6-6.3-2.3-1.7-1.7-2.9-4-2.9-6.3 0-3.4 4-8.6 12.1-16.1 32.7-31.6 49.4-70.6 49.4-117.1 0-51.6-17.2-93.5-51.1-125.7-6.9-6.3-10.3-11.5-10.3-15.5 0-2.3 1.1-4.6 2.9-6.3 1.7-1.7 4-2.9 6.3-2.9 7.5 0 18.9 9.2 33.3 27.5 26.9 34.5 40.7 75.9 40.7 124.1z" fill="#6da768"/> <g fill="#f2b139"> <path d="M2314.5 576.9h199.2M2513.1 588.9H2314c-6.3 0-12.1-5.2-12.1-12.1 0-6.9 5.2-12.1 12.1-12.1h199.1c6.3 0 12.1 5.2 12.1 12.1-.1 7-5.2 12.1-12.1 12.1z"/> </g> <path d="M2474.9 416.1c-3.2-10.8-8.3-21-16.1-29-2.1-2.1-4.3-4.1-6.5-6.1-1.7-1.6-6-4.1-6.9-6.2 4.6 10.7 9.1 21.8 5.7 33.6-1.6 5.3-7.4 18.1-15.1 14.8-7.2-3.1-6.4-18.3-7-24.4-1.5-15.1-4.9-30.1-12.9-43.1-4.4-7.1-10.1-13.4-17.3-17.7-9.5-5.6-19.3-9.4-30.1-5.3 2.4-.9 8.6 6.3 9.8 7.7 3.8 4.5 6.9 9.8 8.6 15.4 3.4 11.4.4 24.5-3.6 35.4-8.3 22.6-22.1 42.9-28.7 66.1-2.3 8.1-3.9 16.4-4.3 24.8-1.4 26.5 12.4 50.8 34.2 65.6 4.9 3.4 13.7 7.6 20 5.4-18.3-9.8-24.4-17.8-27.2-29.3-6.6-26.7 18.4-43.7 29.2-64.8 2.9-5.6 5-11.8 4.2-18.2-.3-2.4-3-14.1-6.6-13.5 10.9-1.7 18 5.5 21.7 14.9 3.9 10 6.3 20.2 4.5 30.8-.6 3.5-3.2 14.6 1.9 15.3 7.1 1 13.1-8.4 11.7-17.4-.7-4.2-1.5-10.6-1.5-10.6 7.5 9.2 10.9 18.5 12 28.6 2 18.1-5.8 42-20.3 56.8 6.1-6.2 13.9-10.5 19.8-17.2 6-6.8 10.6-14.6 14.2-23 8.1-18.6 12.8-39.6 11.4-59.9-.5-9.7-1.9-19.9-4.8-29.5z" fill="#f2b139"/> <circle r="152.094" cy="475.972" cx="2416.891" fill="url(#b)" class="svg-fire"/> </svg> <!-- Logo end --> </a></h1> <nav class="top-navigation" role="navigation"> <ul class="inline-list padded-list"> <li><a href="#" class="icon ion-university">Learn</a></li> <li><a href="#" class="icon ion-map">Map</a></li> <li><a href="#" class="icon ion-chatbubbles">Chat</a></li> <li><a href="#" class="icon ion-paper-airplane">News</a></li> <li><a href="#" class="icon ion-edit">Wiki</a></li> <li><a href="#login" class="icon ion-android-exit button button-red button-login toggle-hide">Sign In</a></li> </ul> </nav> </div> <div class="header-image"> <div class="header-image-text"> <h2 class="header-title">Code with Us</h2> <p class="header-description">Let's learn to code by building projects for nonprofits</p> <a class="button button-yellow" href="#">Start learning to code (it's free!)</a><a class="button button-blue" href="#">My nonprofit needs coding help</a> </div> </div>
</header>
<main role="main" class="site-main"> <section class="fixed-width highlighted-bg"> <h2>How it Works</h2> <div class="col fourth"> <h3>Get Connected</h3> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/197359/landingIcons_connect.svg" alt="" class="landing-icon"> <p>Join a community of busy, motivated people.</p> </div> <div class="col fourth"> <h3>Learn JavaScript</h3> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/197359/landingIcons_learn.svg" alt="" class="landing-icon"> <p>Work together on Full Stack JavaScript coding challenges.</p> </div> <div class="col fourth"> <h3>Build your Portfolio</h3> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/197359/landingIcons_portfolio.svg" alt="" class="landing-icon"> <p>Build apps that solve real problems for real people.</p> </div> <div class="col fourth"> <h3>Help Nonprofits</h3> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/197359/landingIcons_nonprofits.svg" alt="" class="landing-icon"> <p>Give nonprofits a boost by empowering them with code.</p> </div> </section> <section class="fixed-width"> <h2>Skills You'll Learn</h2> <div class="col fourth highlighted-bg small-box"> <h3>HTML5</h3> <div class="icon icon-large ion-social-html5"></div> </div> <div class="col fourth highlighted-bg small-box"> <h3>CSS3</h3> <div class="icon icon-large ion-social-css3"></div> </div> <div class="col fourth highlighted-bg small-box"> <h3>JavaScript</h3> <div class="icon icon-large ion-social-javascript"></div> </div> <div class="col fourth highlighted-bg small-box"> <h3>Databases</h3> <div class="icon icon-large ion-stats-bars"></div> </div> <div class="col fourth highlighted-bg small-box"> <h3>Git</h3> <div class="icon icon-large ion-social-github"></div> </div> <div class="col fourth highlighted-bg small-box"> <h3>Node.js</h3> <div class="icon icon-large ion-social-nodejs"></div> </div> <div class="col fourth highlighted-bg small-box"> <h3>Angular.js</h3> <div class="icon icon-large ion-social-angular"></div> </div> <div class="col fourth highlighted-bg small-box"> <h3>Agile</h3> <div class="icon icon-large ion-ios-loop-strong"></div> </div> </section> <section class="fixed-width highlighted-bg"> <h2>Campers You'll Hang Out With</h2> <div class="col third"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/197359/testimonial-jen.jpg" alt="" class="landing-icon testimonial-avatar"> <p>Getting back on track with Free Code Camp and committing to a new career in 2015! - <a href="https://twitter.com/jenbestyoga">@jenbestyoga</a></p> </div> <div class="col third"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/197359/testimonial-tate.jpg" alt="" class="landing-icon testimonial-avatar"> <p>Just built my company's website with skills I've learned from Free Code Camp! - <a href="https://twitter.com/TateThurston">@TateThurston</a></p> </div> <div class="col third"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/197359/testimonial-cynthia.jpg" alt="" class="landing-icon testimonial-avatar"> <p>I'm currently working through Free Code Camp to improve my JavaScript. The community is very welcoming! - <a href="https://twitter.com/cynthialanel">@cynthialanel</a> </p> </div> </section> <section class="fixed-width"> <h2>Why you should join our open source community right now:</h2> <ul class="large-list"> <li class="icon ion-code">You'll get help in real time from our community chat rooms.</li> <li class="icon ion-code">You'll meet up with other coders in your city.</li> <li class="icon ion-code">You'll learn to code at your own pace, in your browser or on your phone.</li> <li class="icon ion-code">You'll work through our focused, interactive courses and tutorials.</li> <li class="icon ion-code">You'll learn state-of-the-art <strong>full stack JavaScript</strong> technologies.</li> <li class="icon ion-code">You'll build projects that help nonprofits carry out their missions more effectively.</li> <li class="icon ion-code">You'll assemble a portfolio of real apps used by real people.</li> <li class="icon ion-code">Learn to code today (it's free)</li> </ul> <a href="" class="button button-yellow">Learn to code today (it's free!)</a> </section> <section class="fixed-width"> <h2>As featured in</h2> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/197359/as-seen-on.png" alt="" class="featured-in-image"> </section>
</main>
<footer class="site-footer" role="contentinfo"> <ul class="inline-list"> <li><a href="" class="icon ion-speakerphone">Blog</a></li> <li><a href="" class="icon ion-social-github">Github</a></li> <li><a href="" class="icon ion-social-twitch">Twitch</a></li> <li><a href="" class="icon ion-social-linkedin">LinkedIn</a></li> <li><a href="" class="icon ion-social-facebook">Facebook</a></li> <li><a href="" class="icon ion-social-twitter">Twitter</a></li> <li><a href="" class="icon ion-locked">Privacy</a></li> </ul>
</footer>
<!-- Login -->
<div id="modal-bg" class="login-modal-bg toggle-hide"></div>
<div id="login" class="login-container"> <div class="col half"> <h3>Sign in with email</h3> <form> <div class="input-group"> <input id="email" type="email" placeholder="Email"> <label class="icon-label" for="email"><i class="icon ion-email"></i></label> </div> <div class="input-group"> <input id="password" type="password" placeholder="Password"> <label class="icon-label" for="password"><i class="icon ion-key"></i></label> </div> <input type="submit" value="Sign In" class="button button-red full-width"> <p class="small"><a href="#">Forgot your password?</a> <br><a href="#">Sign up using your email address</a></p> </form> </div> <div class="col half highlighted-bg"> <button class="button full-width button-twitter"><i class="icon ion-social-twitter"></i>Sign in with Twitter</button> <button class="button full-width button-github"><i class="icon ion-social-github"></i>Sign in with Github</button> <button class="button full-width button-facebook"><i class="icon ion-social-facebook"></i>Sign in with Facebook</button> <button class="button full-width button-google"><i class="icon ion-social-google"></i>Sign in with Google</button> <button class="button full-width button-linkedin"><i class="icon ion-social-linkedin"></i>Sign in with LinkedIn</button> </div> <button class="button button-red close-button toggle-hide"><i class="icon ion-close-circled"></i> Close</button>
</div> <script src="js/index.js"></script>
</body>
</html>

FreeCodeCamp homepage redesign - Script Codes CSS Codes

*,
*::before,
*::after { box-sizing: inherit;
}
html { box-sizing: border-box; line-height: 1.4;
}
body { color: #678EB2; font-family: Lato, "Helvetica Neue", sans-serif;
}
a { color: inherit; font-weight: 700; text-decoration: none; -webkit-transition: 0.3s; transition: 0.3s;
}
main a { box-shadow: inset 0 -2px #F2B139; color: #229FBF;
}
main a:hover { box-shadow: inset 0 -30em #F2B139; color: #fff;
}
h1,
h2,
h3 { text-align: center; text-rendering: optimizeLegibility;
}
h1 { font-size: 3.6em; line-height: 1.4; margin-top: 0.46667em; margin-bottom: 0.46667em;
}
h2 { font-family: "Roboto Slab", serif; font-size: 1.8em; line-height: 1.4; margin-top: 0.85556em; margin-bottom: 0.85556em;
}
h3 { font-weight: 400; font-size: 1.4em; line-height: 1.4; margin-top: 1.3em; margin-bottom: 1.3em;
}
img { max-width: 100%;
}
p { margin: 1.4rem 0;
}
small,
.small { font-size: 0.7em; line-height: 1.4; margin-top: 2.3em; margin-bottom: 2.3em;
}
input { background: none; border: 1px solid #229FBF; font: inherit; padding: 0.7rem; width: 100%; max-width: 100%;
}
input:focus { box-shadow: inset 0 0 6px #229FBF; outline: 0;
}
::-moz-selection { background: #229FBF; color: #fff;
}
::selection { background: #229FBF; color: #fff;
}
::-moz-selection { background: #229FBF; color: #fff;
}
::-webkit-input-placeholder { color: #229FBF;
}
::-moz-placeholder { color: #229FBF;
}
.button { background: #6da768; border-radius: 3px; border: 0; box-shadow: 0 4px #528552; color: #fff; display: inline-block; padding: calc(0.7rem - 1px) 1.4rem;
}
.button:focus { outline: 0;
}
.button-red { background: #E03E4F; border: 1px solid #E03E4F; box-shadow: 0 4px #BF2F45;
}
.button-red:hover, .button-red:focus { background: #f34459; box-shadow: 0 4px #dd324d; outline: 0;
}
.button-yellow { background: #F2B139; border: 1px solid #F2B139; box-shadow: 0 4px #d68d33;
}
.button-yellow:hover, .button-yellow:focus { background: #F8CB4F; box-shadow: 0 4px #F2B139, 0 0 10px #d68d33; outline: 0;
}
.button-blue { background: #229FBF; border: 1px solid #229FBF; box-shadow: 0 4px #1d7ba3;
}
.button-blue:hover, .button-blue:focus { background: #60BAD1; box-shadow: 0 4px #4CA0BD, 0 0 10px #1d7ba3; outline: 0;
}
.full-width { width: 100%;
}
.inline-list { display: -webkit-box; display: -ms-flexbox; display: flex; margin: 0; padding: 0; text-align: center;
}
.inline-list::after { clear: both; content: ""; display: table;
}
.inline-list a { display: inline-block; padding: 0.7rem;
}
.inline-list li { -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; list-style: none; white-space: nowrap;
}
.large-list { list-style: none; text-align: left; max-width: 50em; margin: 0 auto 2.1rem; padding: 0;
}
.large-list li { margin: 0.7rem; -webkit-transition: 0.3s; transition: 0.3s;
}
.large-list li:hover { -webkit-transform: translateX(1.4rem); transform: translateX(1.4rem);
}
.large-list li:before { color: #6da768;
}
@-webkit-keyframes fadein { 100% { opacity: 1; }
}
@keyframes fadein { 100% { opacity: 1; }
}
.fixed-width { padding: 1.4rem; text-align: center;
}
.fixed-width::after { clear: both; content: ""; display: table;
}
@media (min-width: 75em) { .fixed-width { padding: 1.4rem calc(50% - 30em); }
}
.fixed-width h3 { white-space: nowrap;
}
.col { padding: 1.4rem;
}
.small-box { border-radius: 3px; display: block; margin: 1.4rem 2.5%; padding-top: 0; padding-bottom: 1.4rem; -webkit-transition: 0.3s; transition: 0.3s;
}
.small-box:hover { -webkit-transform: translateY(-1.4rem); transform: translateY(-1.4rem);
}
.topbar { background: #1d2326; box-shadow: 0 6px #6da768; color: #678EB2; position: fixed; bottom: 0; left: 0; right: 0;
}
.topbar::after { clear: both; content: ""; display: table;
}
.topbar li:nth-child(1) a:hover { box-shadow: inset 0 -4px 0 #F2B139;
}
.topbar li:nth-child(2) a:hover { box-shadow: inset 0 -4px 0 #6da768;
}
.topbar li:nth-child(3) a:hover { box-shadow: inset 0 -4px 0 #229FBF;
}
.topbar li:nth-child(4) a:hover { box-shadow: inset 0 -4px 0 #E03E4F;
}
.topbar li:nth-child(5) a:hover { box-shadow: inset 0 -4px 0 #678EB2;
}
.site-title { display: none; font-size: 1.8rem; margin: 0;
}
.logo-medium { width: auto; height: 1.8rem; position: relative; bottom: -0.27777em;
}
.logo-medium .svg-fire { mix-blend-mode: overlay; opacity: 0;
}
.logo-medium:hover .svg-fire { -webkit-animation: fire 1s linear infinite; animation: fire 1s linear infinite;
}
@-webkit-keyframes fire { 50% { opacity: 0; } 25%, 100% { opacity: 1; }
}
@keyframes fire { 50% { opacity: 0; } 25%, 100% { opacity: 1; }
}
.top-navigation .icon::before { display: block; font-size: 5vw; padding: 0;
}
.top-navigation ul li:first-child { display: none;
}
.site-header { background: #1d2326;
}
.header-image { background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/197359/wide-social-banner.png) no-repeat top left/cover; background: -webkit-linear-gradient(rgba(29, 35, 38, 0.8), rgba(29, 35, 38, 0.8)), url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/197359/wide-social-banner.png) no-repeat top left/cover; background: linear-gradient(rgba(29, 35, 38, 0.8), rgba(29, 35, 38, 0.8)), url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/197359/wide-social-banner.png) no-repeat top left/cover; text-align: center; padding: 1.4rem 1.4rem 2.8rem;
}
.header-image .button { margin: 0.7rem;
}
.header-title { color: #fff; font-family: Lato, "Helvetica Neue", sans-serif; font-size: 2.8em; line-height: 1.4; margin-top: 0.55em; margin-bottom: 0.55em; margin-top: 0;
}
.header-description { color: #6da768; font-weight: 700; text-shadow: 0px 0px 6px #1d2326; font-size: 1.4em; line-height: 1.4; margin-top: 1.3em; margin-bottom: 1.3em; margin-top: 1.5em;
}
.highlighted-bg { background: #ecf0f3; box-shadow: 0 4px 0 #B8D0DC;
}
.landing-icon { display: block; margin: 0 auto; max-height: 8.4rem; -webkit-transition: 0.3s cubic-bezier(0.48, 0.77, 0.33, 1.8); transition: 0.3s cubic-bezier(0.48, 0.77, 0.33, 1.8);
}
.landing-icon:hover { -webkit-transform: rotate(15deg); transform: rotate(15deg);
}
.testimonial-avatar { background: #B8D0DC; border-radius: 100%; border: 6px solid #B8D0DC; -webkit-transition: 0.3s; transition: 0.3s;
}
.testimonial-avatar:hover { background: #6da768; border-color: #6da768; -webkit-transform: none; transform: none;
}
.icon:before { padding-right: 0.7rem;
}
.icon-large { color: #6da768; line-height: 0; font-size: 8.4em; margin-top: -1.3rem;
}
.icon-large:before { padding: 0;
}
.ion-social-html5 { color: #e34f26;
}
.ion-social-css3 { color: #229FBF;
}
.ion-social-javascript { color: #F0DB4F;
}
.ion-stats-bars { color: #1d7ba3;
}
.ion-social-github { color: #4183c4;
}
.ion-social-angular { color: #DD1B16;
}
.ion-social-nodejs { color: #80BD01;
}
.featured-in-image { display: block; margin: 0 auto; font-size: 3em; line-height: 1.4; margin-top: 0.46667em; margin-bottom: 0.46667em;
}
.site-footer { background: #1d2326; box-shadow: 0 -6px #6da768; position: relative; padding: 1.4rem; text-align: center;
}
@media (min-width: 75em) { .site-footer { padding: 0.7rem calc(50% - 30em); }
}
.site-footer a { color: #678EB2;
}
.site-footer a:hover { box-shadow: inset 0 -4px #678EB2;
}
.site-footer ul { -ms-flex-wrap: wrap; flex-wrap: wrap;
}
/* Login */
.login-modal-bg { background: rgba(29, 35, 38, 0.9); position: fixed; top: 0; right: 0; bottom: 0; left: 0; display: none; opacity: 0;
}
@supports (mix-blend-mode: multiply) { .login-modal-bg { background: #2a7fbf; mix-blend-mode: multiply; }
}
.login-container { background: #fff; border-radius: 3px; box-shadow: 0 4px #6da768; position: absolute; top: 4.2rem; left: 50%; -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); z-index: 100000; max-width: 90%; width: 50em; display: none; opacity: 0;
}
.login-container .half { width: 100%;
}
.login-container h3 { margin-top: 0.375rem; margin-bottom: 1.8rem; font-weight: 700; text-align: left;
}
.login-container .highlighted-bg { box-shadow: none;
}
.login-container .highlighted-bg .button:first-child { margin-top: 0;
}
.login-container .button { margin-top: 1.4rem; padding: 0.7rem;
}
.login-container .button:hover, .login-container .button:focus { opacity: 0.9;
}
.login-container .icon:before { color: #fff;
}
.login-container .small { line-height: 1.4rem; text-align: center; margin-bottom: 0;
}
.login-container .small a:last-child { color: #6da768;
}
@-webkit-keyframes slidedown { 100% { opacity: 1; -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); }
}
@keyframes slidedown { 100% { opacity: 1; -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); }
}
.input-group { position: relative;
}
.input-group input { padding-left: 3.5rem;
}
.input-group input:focus + label .icon-label-text { opacity: 0;
}
.input-group input:valid + label .icon-label-text, .input-group input:invalid + label .icon-label-text { opacity: 0;
}
.input-group + .input-group { top: -1px;
}
.input-group + .button { margin-top: 1.25rem;
}
.icon-label { position: absolute; top: 0; left: 0; bottom: 0;
}
.icon-label .icon::before { padding: 0.7rem; text-align: center; width: 2.8rem;
}
.icon-label .icon,
.icon-label .icon::before { background: #229FBF; display: block; font-size: 1.4rem; height: 100%;
}
.button-twitter { background: #55acee; box-shadow: 0 4px #4480bd;
}
.button-github { background: #666; box-shadow: 0 4px #363636;
}
.button-facebook { background: #3b5998; box-shadow: 0 4px #273463;
}
.button-google { background: #dc4e41; box-shadow: 0 4px #b53636;
}
.button-linkedin { background: #0077b5; box-shadow: 0 4px #005194;
}
.close-button { border-radius: 3px 3px 0 0; box-shadow: none; position: absolute; top: calc(-4.2rem - 2px); right: 0; z-index: -1;
}
/* Media queries */
@media (min-width: 30em) { .button.button-login { margin-left: 0.7rem; padding: 0.5em 1.4rem; position: relative; bottom: -4px; } .button.button-login:hover { box-shadow: 0 2px #BF2F45, 0 0 10px #BF2F45, 0 0 0 6px rgba(0, 0, 0, 0.5); bottom: -6px; } .top-navigation ul li:first-child { display: block; } .col { float: left; } .third { width: 33.33333%; } .half, .fourth { width: 50%; } .small-box { width: 45%; }
}
@media (min-width: 45em) { .top-navigation { float: right; } .top-navigation .icon::before { display: none; } .site-title { display: block; float: left; } .topbar { position: relative; padding: 0.7rem; } .header-image { padding: 4.2rem; } .header-image .button { margin: 2.8rem 2.8rem 0; } .header-title { font-size: 3.6em; line-height: 1.4; margin-top: 0.46667em; margin-bottom: 0.46667em; } .header-description { font-size: 1.4em; line-height: 1.4; margin-top: 1.3em; margin-bottom: 1.3em; margin-top: 1.5em; } .login-container { top: 50%; } .login-container .half { width: 50%; } .login-container.unhide { -webkit-transform: translate3d(-50%, 50%, 0); transform: translate3d(-50%, 50%, 0); -webkit-animation: slidedown 0.3s forwards ease-out; animation: slidedown 0.3s forwards ease-out; }
}
@media (min-width: 57.5em) { .fourth { width: 25%; } .small-box { margin: 2.8rem 2.5%; width: 20%; } .small-box:nth-child(n+6) { margin-top: 0; }
}
@media (min-width: 75em) { html { font-size: 20px; } .topbar { padding-left: calc(50% - 30em); padding-right: calc(50% - 30em); }
}
.unhide { -webkit-animation: fadein 0.3s forwards ease-out; animation: fadein 0.3s forwards ease-out; display: block;
}

FreeCodeCamp homepage redesign - Script Codes JS Codes

var buttonsHide = document.querySelectorAll('.toggle-hide'), buttonsArray = [].slice.call(buttonsHide), modal = document.getElementById('login'), modalBg = document.getElementById('modal-bg');
function toggleModal(){ modal.classList.toggle('unhide'); modalBg.classList.toggle('unhide');
}
buttonsArray.forEach(function (el){ el.addEventListener('click', function(ev){ ev.preventDefault(); toggleModal(); });
});
FreeCodeCamp homepage redesign - Script Codes
FreeCodeCamp homepage redesign - Script Codes
Home Page Home
Developer Giana
Username giana
Uploaded June 12, 2022
Rating 4
Size 13,958 Kb
Views 46,552
Do you need developer help for FreeCodeCamp homepage redesign?

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!

Giana (giana) Script Codes
Name
Cyber Cells
CSS arrow buttons
Sass button border hover effect mixin
CSS Border transitions
Something moving
HTML 5 Video Player
CSS box shadow particles v6
Spinning
Neon bubbles
Sass border drawing mixin
Create amazing web content 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!