FCC Campers News

Developer
Omran Abazid
Size
2,535 Kb
Views
12,144
  1. FCC Campers News Previews
  2. FCC Campers News HTML Codes
  3. FCC Campers News CSS Codes
  4. FCC Campers News JS Codes

How do I make an fcc campers news?

What is a fcc campers news? How do you make a fcc campers news? This script and codes were developed by Omran Abazid on 15 September 2022, Thursday.

FCC Campers News Previews
IQ Test

FCC Campers News - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>FCC Campers News</title> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container text-center"> <header> <h1 class='text-center'> FreeCodeCamp </h1> <h2 class='text-center'> Campers News </h2> </header> <div id="main" class="row"> </div> </div> <script id="simple-template" type="text/x-handlebars-template"> <div class="col-md-4 col-xs-6"> <a href="{{link}}"> <img src="{{author.picture}}" alt=""/> <div class="headline"> <h3> {{headline}} </h3> </div> <div class="likes"> <i class='glyphicon glyphicon-heart-empty'> </i> <span> {{rank}} </span> <div class="info"> <h4> by - {{author.username}} </h4> <p> {{prettifyDate timePosted}} </p> </div> </div> </a> </div> </script> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.js'></script> <script src="js/index.js"></script>
</body>
</html>

FCC Campers News - Script Codes CSS Codes

body { background: #EDF3F6;
}
* { font-family: 'raleway';
}
h1 { font-family: 'raleway';
}
header { padding: 30px; -webkit-box-shadow: 0px 0px 43px -5px rgba(84, 101, 107, 1); -moz-box-shadow: 0px 0px 43px -5px rgba(84, 101, 107, 1); box-shadow: 0px 0px 43px -5px rgba(84, 101, 107, 1);
}
.col-md-4 { padding-top: 50px;
}
.col-md-4 a { width: 300px; position: relative; display: inline-block; -webkit-box-shadow: 0px 0px 43px -5px rgba(84, 101, 107, 1); -moz-box-shadow: 0px 0px 43px -5px rgba(84, 101, 107, 1); box-shadow: 0px 0px 43px -5px rgba(84, 101, 107, 1);
}
.col-md-4 img { min-width: 100%; height: 300px;
}
.col-md-4 a .headline { min-width: 100%; padding: 20px; position: absolute; bottom: 170px; background: rgba(0, 150, 255, 0.5); color: white;
}
.headline h3 { font-size: 20px; display: inline; margin: 10px;
}
.col-md-4 a .likes { color: #3d737a; height: 170px; text-align: center; padding: 20px; background: #F4F5FA;
}
.col-md-4 a { text-decoration: none;
}
.likes span { text-align: center; font-size: 40px;
}
.likes i { color: #3d737a; padding: 5px; font-size: 35px;
}
.likes .info { text-align: center;
}

FCC Campers News - Script Codes JS Codes

 var raw_template = $('#simple-template').html(); var template = Handlebars.compile(raw_template); var placeHolder = $("#main"); $.getJSON('https://www.freecodecamp.com/news/hot',function(data){ $.each(data, function(i, item){ var html = template(item); placeHolder.append(html); }); }); Handlebars.registerHelper("prettifyDate", function(timestamp) { return new Date(timestamp).toLocaleDateString("en-US"); });
FCC Campers News - Script Codes
FCC Campers News - Script Codes
Home Page Home
Developer Omran Abazid
Username OmranAbazid
Uploaded September 15, 2022
Rating 3
Size 2,535 Kb
Views 12,144
Do you need developer help for FCC Campers News?

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!

Omran Abazid (OmranAbazid) Script Codes
Name
Simon Game without jquery
Wikipedia Search using the API
Simple Jquery Calculator
Convert data into d3 format
Bootstrap page Header Template
Quote Machine
A Pen by Omran Abazid
Bootstrap Portfolio Website
Moving Circle on scroll
Bootstrap-jquery Address Book
Create amazing video scripts 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!