If you want to build a professional and responsive website using simple HTML, CSS, and JavaScript programming code. But I will help you completely with this article.
I am Santanu Jana a web designer. I will teach you how to build a website using the only type of programming code. Earlier I have made many landing pages and websites on this website. But so far I have not made a complete website. However, in this article, I will show you how to build a complete website.
This website is basically a programming code knowledge sharing website. There are many sites on the Internet that share a variety of programming knowledge. I made exactly the same design. Hope you like this web design. I have given the necessary code to make it in the download button below. You can download the required code by clicking on that download button. You can also watch the live demo of this site by clicking on the demo button below.
Some information about this responsive web site
📌 I used a simple programming code like HTML, CSS, and javascript to make it.
📌 This is a complete website, that is, everything that is on a normal website, I have put in this web design.
📌 There is a menu bar at the top and a logo next to it. Here you can put the logo of your choice.
📌 Here I have basically added 4 to 5 menus from Chandpur. You can add as many menus as you like.
📌 Meanwhile, it is fully responsive, which means it looks completely professional in the case of mobiles, tabs, laptops, etc., and the website can decorate itself beautifully. In the case of mobile, the top menu bar will come down.
📌 Below is the footer menu. Here you can add links to your social media platforms like Instagram, Google, YouTube, Facebook, etc. There are also many more features.
Hope you like this website and you are fully interested in making this website.
Below I show you how to make it or add it to any of your websites. You can easily add it to any of your own websites if you want because it is fully responsive and professional.
Below is the type of programming code that was used to create this website. I also told you how to add to your project or create a new project.
First, you create an HTML file and copy and paste the structure below into that file. Then you follow the three steps below.
<html>
<head>
<style>
Add CSS Code
</style>
</head>
<body>
Add Html Code
</body>
<script>
Add JavaScript Code
</script>
</html>
Add HTML code to create the structure of the site
HTML code is basically used to create a structure on a website. HTML programming code has been used extensively here. You copy these programming codes from the bottom and then paste them in the place where the ad HTML code is written at the top. While writing the HTML code, I gave what each code has to do and why it was written. So you can easily find out which ones have been used.
<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><!--/*<li><a href="" class="icon ion-speakerphone">Blog</a></li<li><a href="" class="icon ion-social-github">Github</a> <li><a href="" class="icon ion-social-twitch">Twitch</a></li<li><a href="" class="icon ion-social-linkedin">LinkedIn</a></l<li><a href="" class="icon ion-social-facebook">Facebook</a></l<li><a href="" class="icon ion-social-twitter">Twitter</a></li><li><a href="" class="icon ion-locked">Privacy</a></li>*/-->
<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"/><!--/*<li><a href="" class="icon ion-speakerphone">Blog</a></li<li><a href="" class="icon ion-social-github">Github</a> <li><a href="" class="icon ion-social-twitch">Twitch</a></li<li><a href="" class="icon ion-social-linkedin">LinkedIn</a></l<li><a href="" class="icon ion-social-facebook">Facebook</a></l<li><a href="" class="icon ion-social-twitter">Twitter</a></li><li><a href="" class="icon ion-locked">Privacy</a></li>*/-->
<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"/><!--/*<li><a href="" class="icon ion-speakerphone">Blog</a></li<li><a href="" class="icon ion-social-github">Github</a> <li><a href="" class="icon ion-social-twitch">Twitch</a></li<li><a href="" class="icon ion-social-linkedin">LinkedIn</a></l<li><a href="" class="icon ion-social-facebook">Facebook</a></l<li><a href="" class="icon ion-social-twitter">Twitter</a></li><li><a href="" class="icon ion-locked">Privacy</a></li>*/-->
<circle r="152.094" cy="475.972" cx="2416.891" fill="url(#b)" class="svg-fire"/>
</svg>
<!-- Logo end -->
</a></h1>
<!--/*<li><a href="" class="icon ion-speakerphone">Blog</a></li<li><a href="" class="icon ion-social-github">Github</a> <li><a href="" class="icon ion-social-twitch">Twitch</a></li<li><a href="" class="icon ion-social-linkedin">LinkedIn</a></l<li><a href="" class="icon ion-social-facebook">Facebook</a></l<li><a href="" class="icon ion-social-twitter">Twitter</a></li><li><a href="" class="icon ion-locked">Privacy</a></li>*/-->
<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><!--/*<li><a href="" class="icon ion-speakerphone">Blog</a></li<li><a href="" class="icon ion-social-github">Github</a> <li><a href="" class="icon ion-social-twitch">Twitch</a></li<li><a href="" class="icon ion-social-linkedin">LinkedIn</a></l<li><a href="" class="icon ion-social-facebook">Facebook</a></l<li><a href="" class="icon ion-social-twitter">Twitter</a></li><li><a href="" class="icon ion-locked">Privacy</a></li>*/-->
</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"><!--/*<li><a href="" class="icon ion-speakerphone">Blog</a></li<li><a href="" class="icon ion-social-github">Github</a> <li><a href="" class="icon ion-social-twitch">Twitch</a></li<li><a href="" class="icon ion-social-linkedin">LinkedIn</a></l<li><a href="" class="icon ion-social-facebook">Facebook</a></l<li><a href="" class="icon ion-social-twitter">Twitter</a></li><li><a href="" class="icon ion-locked">Privacy</a></li>*/-->
<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"><!--/*<li><a href="" class="icon ion-speakerphone">Blog</a></li<li><a href="" class="icon ion-social-github">Github</a> <li><a href="" class="icon ion-social-twitch">Twitch</a></li<li><a href="" class="icon ion-social-linkedin">LinkedIn</a></l<li><a href="" class="icon ion-social-facebook">Facebook</a></l<li><a href="" class="icon ion-social-twitter">Twitter</a></li><li><a href="" class="icon ion-locked">Privacy</a></li>*/-->
<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> <!--/*<li><a href="" class="icon ion-speakerphone">Blog</a></li<li><a href="" class="icon ion-social-github">Github</a> <li><a href="" class="icon ion-social-twitch">Twitch</a></li<li><a href="" class="icon ion-social-linkedin">LinkedIn</a></l<li><a href="" class="icon ion-social-facebook">Facebook</a></l<li><a href="" class="icon ion-social-twitter">Twitter</a></li><li><a href="" class="icon ion-locked">Privacy</a></li>*/-->
</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> <!--/*<li><a href="" class="icon ion-speakerphone">Blog</a></li<li><a href="" class="icon ion-social-github">Github</a> <li><a href="" class="icon ion-social-twitch">Twitch</a></li<li><a href="" class="icon ion-social-linkedin">LinkedIn</a></l<li><a href="" class="icon ion-social-facebook">Facebook</a></l<li><a href="" class="icon ion-social-twitter">Twitter</a></li><li><a href="" class="icon ion-locked">Privacy</a></li>*/-->
</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> <!--/*<li><a href="" class="icon ion-speakerphone">Blog</a></li<li><a href="" class="icon ion-social-github">Github</a> <li><a href="" class="icon ion-social-twitch">Twitch</a></li<li><a href="" class="icon ion-social-linkedin">LinkedIn</a></l<li><a href="" class="icon ion-social-facebook">Facebook</a></l<li><a href="" class="icon ion-social-twitter">Twitter</a></li><li><a href="" class="icon ion-locked">Privacy</a></li>*/-->
</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"> <!--/*<li><a href="" class="icon ion-speakerphone">Blog</a></li<li><a href="" class="icon ion-social-github">Github</a> <li><a href="" class="icon ion-social-twitch">Twitch</a></li<li><a href="" class="icon ion-social-linkedin">LinkedIn</a></l<li><a href="" class="icon ion-social-facebook">Facebook</a></l<li><a href="" class="icon ion-social-twitter">Twitter</a></li><li><a href="" class="icon ion-locked">Privacy</a></li>*/-->
<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><a href="" class="icon ion-speakerphone">Blog</a></li<li><a href="" class="icon ion-social-github">Github</a> <li><a href="" class="icon ion-social-twitch">Twitch</a></li<li><a href="" class="icon ion-social-linkedin">LinkedIn</a></l<li><a href="" class="icon ion-social-facebook">Facebook</a></l<li><a href="" class="icon ion-social-twitter">Twitter</a></li><li><a href="" class="icon ion-locked">Privacy</a></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><a href="" class="icon ion-speakerphone">Blog</a></li<li><a href="" class="icon ion-social-github">Github</a> <li><a href="" class="icon ion-social-twitch">Twitch</a></li<li><a href="" class="icon ion-social-linkedin">LinkedIn</a></l<li><a href="" class="icon ion-social-facebook">Facebook</a></l<li><a href="" class="icon ion-social-twitter">Twitter</a></li><li><a href="" class="icon ion-locked">Privacy</a></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>
<!--/*<li><a href="" class="icon ion-speakerphone">Blog</a></li<li><a href="" class="icon ion-social-github">Github</a> <li><a href="" class="icon ion-social-twitch">Twitch</a></li<li><a href="" class="icon ion-social-linkedin">LinkedIn</a></l<li><a href="" class="icon ion-social-facebook">Facebook</a></l<li><a href="" class="icon ion-social-twitter">Twitter</a></li><li><a href="" class="icon ion-locked">Privacy</a></li>*/-->
<!-- 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> <!--/*<li><a href="" class="icon ion-speakerphone">Blog</a></li<li><a href="" class="icon ion-social-github">Github</a> <li><a href="" class="icon ion-social-twitch">Twitch</a></li<li><a href="" class="icon ion-social-linkedin">LinkedIn</a></l<li><a href="" class="icon ion-social-facebook">Facebook</a></l<li><a href="" class="icon ion-social-twitter">Twitter</a></li><li><a href="" class="icon ion-locked">Privacy</a></li>*/-->
</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> <!--/*<li><a href="" class="icon ion-speakerphone">Blog</a></li<li><a href="" class="icon ion-social-github">Github</a> <li><a href="" class="icon ion-social-twitch">Twitch</a></li<li><a href="" class="icon ion-social-linkedin">LinkedIn</a></l<li><a href="" class="icon ion-social-facebook">Facebook</a></l<li><a href="" class="icon ion-social-twitter">Twitter</a></li><li><a href="" class="icon ion-locked">Privacy</a></li>*/-->
</div>
<button class="button button-red close-button toggle-hide"><i class="icon ion-close-circled"></i> Close</button>
</div>
Add CSS code to make it stylish
The following programming codes are CSS programming codes that have been used to create the style of this website. This CSS programming code has been used to make this website responsive. You copy all your CSS programming codes and paste them where the ad CSS code is written. If you want you can create a separate file and then crush the code. But in that case, you must attach your CSS file to your HTML file.
*,
*::before,
*::after {
box-sizing: inherit;
}
html {
box-sizing: border-box;
line-height: 1.4;
}
body {
color: #678EB2;
font-family: Lato, "Helvetica Neue", sans-serif;
}
/*<li><a href="" class="icon ion-speakerphone">Blog</a></li<li><a href="" class="icon ion-social-github">Github</a> <li><a href="" class="icon ion-social-twitch">Twitch</a></li<li><a href="" class="icon ion-social-linkedin">LinkedIn</a></l<li><a href="" class="icon ion-social-facebook">Facebook</a></l<li><a href="" class="icon ion-social-twitter">Twitter</a></li><li><a href="" class="icon ion-locked">Privacy</a></li>*/
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;
}
/*<li><a href="" class="icon ion-speakerphone">Blog</a></li<li><a href="" class="icon ion-social-github">Github</a> <li><a href="" class="icon ion-social-twitch">Twitch</a></li<li><a href="" class="icon ion-social-linkedin">LinkedIn</a></l<li><a href="" class="icon ion-social-facebook">Facebook</a></l<li><a href="" class="icon ion-social-twitter">Twitter</a></li><li><a href="" class="icon ion-locked">Privacy</a></li>*/
h1 {
font-size: 3.6em;
line-height: 1.4;
margin-top: 0.4666666667em;
margin-bottom: 0.4666666667em;
}
h2 {
font-family: "Roboto Slab", serif;
font-size: 1.8em;
line-height: 1.4;
margin-top: 0.8555555556em;
margin-bottom: 0.8555555556em;
}
/*<li><a href="" class="icon ion-speakerphone">Blog</a></li<li><a href="" class="icon ion-social-github">Github</a> <li><a href="" class="icon ion-social-twitch">Twitch</a></li<li><a href="" class="icon ion-social-linkedin">LinkedIn</a></l<li><a href="" class="icon ion-social-facebook">Facebook</a></l<li><a href="" class="icon ion-social-twitter">Twitter</a></li><li><a href="" class="icon ion-locked">Privacy</a></li>*/
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;
}
/*<li><a href="" class="icon ion-speakerphone">Blog</a></li<li><a href="" class="icon ion-social-github">Github</a> <li><a href="" class="icon ion-social-twitch">Twitch</a></li<li><a href="" class="icon ion-social-linkedin">LinkedIn</a></l<li><a href="" class="icon ion-social-facebook">Facebook</a></l<li><a href="" class="icon ion-social-twitter">Twitter</a></li><li><a href="" class="icon ion-locked">Privacy</a></li>*/
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;
}
/*<li><a href="" class="icon ion-speakerphone">Blog</a></li<li><a href="" class="icon ion-social-github">Github</a> <li><a href="" class="icon ion-social-twitch">Twitch</a></li<li><a href="" class="icon ion-social-linkedin">LinkedIn</a></l<li><a href="" class="icon ion-social-facebook">Facebook</a></l<li><a href="" class="icon ion-social-twitter">Twitter</a></li><li><a href="" class="icon ion-locked">Privacy</a></li>*/
::-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;
} /*<li><a href="" class="icon ion-speakerphone">Blog</a></li<li><a href="" class="icon ion-social-github">Github</a> <li><a href="" class="icon ion-social-twitch">Twitch</a></li<li><a href="" class="icon ion-social-linkedin">LinkedIn</a></l<li><a href="" class="icon ion-social-facebook">Facebook</a></l<li><a href="" class="icon ion-social-twitter">Twitter</a></li><li><a href="" class="icon ion-locked">Privacy</a></li>*/
.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;
} /*<li><a href="" class="icon ion-speakerphone">Blog</a></li<li><a href="" class="icon ion-social-github">Github</a> <li><a href="" class="icon ion-social-twitch">Twitch</a></li<li><a href="" class="icon ion-social-linkedin">LinkedIn</a></l<li><a href="" class="icon ion-social-facebook">Facebook</a></l<li><a href="" class="icon ion-social-twitter">Twitter</a></li><li><a href="" class="icon ion-locked">Privacy</a></li>*/
.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;
}
/*<li><a href="" class="icon ion-speakerphone">Blog</a></li<li><a href="" class="icon ion-social-github">Github</a> <li><a href="" class="icon ion-social-twitch">Twitch</a></li<li><a href="" class="icon ion-social-linkedin">LinkedIn</a></l<li><a href="" class="icon ion-social-facebook">Facebook</a></l<li><a href="" class="icon ion-social-twitter">Twitter</a></li><li><a href="" class="icon ion-locked">Privacy</a></li>*/
.full-width {
width: 100%;
}
.inline-list {
display: -webkit-box;
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;
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;
} /*<li><a href="" class="icon ion-speakerphone">Blog</a></li<li><a href="" class="icon ion-social-github">Github</a> <li><a href="" class="icon ion-social-twitch">Twitch</a></li<li><a href="" class="icon ion-social-linkedin">LinkedIn</a></l<li><a href="" class="icon ion-social-facebook">Facebook</a></l<li><a href="" class="icon ion-social-twitter">Twitter</a></li><li><a href="" class="icon ion-locked">Privacy</a></li>*/
.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;
}
}
/*<li><a href="" class="icon ion-speakerphone">Blog</a></li<li><a href="" class="icon ion-social-github">Github</a> <li><a href="" class="icon ion-social-twitch">Twitch</a></li<li><a href="" class="icon ion-social-linkedin">LinkedIn</a></l<li><a href="" class="icon ion-social-facebook">Facebook</a></l<li><a href="" class="icon ion-social-twitter">Twitter</a></li><li><a href="" class="icon ion-locked">Privacy</a></li>*/
@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;
}
/*<li><a href="" class="icon ion-speakerphone">Blog</a></li<li><a href="" class="icon ion-social-github">Github</a> <li><a href="" class="icon ion-social-twitch">Twitch</a></li<li><a href="" class="icon ion-social-linkedin">LinkedIn</a></l<li><a href="" class="icon ion-social-facebook">Facebook</a></l<li><a href="" class="icon ion-social-twitter">Twitter</a></li><li><a href="" class="icon ion-locked">Privacy</a></li>*/
.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);
}
/*<li><a href="" class="icon ion-speakerphone">Blog</a></li<li><a href="" class="icon ion-social-github">Github</a> <li><a href="" class="icon ion-social-twitch">Twitch</a></li<li><a href="" class="icon ion-social-linkedin">LinkedIn</a></l<li><a href="" class="icon ion-social-facebook">Facebook</a></l<li><a href="" class="icon ion-social-twitter">Twitter</a></li><li><a href="" class="icon ion-locked">Privacy</a></li>*/
.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;
} /*<li><a href="" class="icon ion-speakerphone">Blog</a></li<li><a href="" class="icon ion-social-github">Github</a> <li><a href="" class="icon ion-social-twitch">Twitch</a></li<li><a href="" class="icon ion-social-linkedin">LinkedIn</a></l<li><a href="" class="icon ion-social-facebook">Facebook</a></l<li><a href="" class="icon ion-social-twitter">Twitter</a></li><li><a href="" class="icon ion-locked">Privacy</a></li>*/
.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;
} /*<li><a href="" class="icon ion-speakerphone">Blog</a></li<li><a href="" class="icon ion-social-github">Github</a> <li><a href="" class="icon ion-social-twitch">Twitch</a></li<li><a href="" class="icon ion-social-linkedin">LinkedIn</a></l<li><a href="" class="icon ion-social-facebook">Facebook</a></l<li><a href="" class="icon ion-social-twitter">Twitter</a></li><li><a href="" class="icon ion-locked">Privacy</a></li>*/
.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;
}
} /*<li><a href="" class="icon ion-speakerphone">Blog</a></li<li><a href="" class="icon ion-social-github">Github</a> <li><a href="" class="icon ion-social-twitch">Twitch</a></li<li><a href="" class="icon ion-social-linkedin">LinkedIn</a></l<li><a href="" class="icon ion-social-facebook">Facebook</a></l<li><a href="" class="icon ion-social-twitter">Twitter</a></li><li><a href="" class="icon ion-locked">Privacy</a></li>*/
.top-navigation .icon::before {
display: block;
font-size: 5vw;
padding: 0;
}
.top-navigation ul li:first-child {
display: none;
}
.site-header {
background: #1d2326;
}
/*<li><a href="" class="icon ion-speakerphone">Blog</a></li<li><a href="" class="icon ion-social-github">Github</a> <li><a href="" class="icon ion-social-twitch">Twitch</a></li<li><a href="" class="icon ion-social-linkedin">LinkedIn</a></l<li><a href="" class="icon ion-social-facebook">Facebook</a></l<li><a href="" class="icon ion-social-twitter">Twitter</a></li><li><a href="" class="icon ion-locked">Privacy</a></li>*/
.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-gradient(linear, left top, left bottom, from(rgba(29, 35, 38, 0.8)), to(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;
}
/*<li><a href="" class="icon ion-speakerphone">Blog</a></li<li><a href="" class="icon ion-social-github">Github</a> <li><a href="" class="icon ion-social-twitch">Twitch</a></li<li><a href="" class="icon ion-social-linkedin">LinkedIn</a></l<li><a href="" class="icon ion-social-facebook">Facebook</a></l<li><a href="" class="icon ion-social-twitter">Twitter</a></li><li><a href="" class="icon ion-locked">Privacy</a></li>*/
.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);
} /*<li><a href="" class="icon ion-speakerphone">Blog</a></li<li><a href="" class="icon ion-social-github">Github</a> <li><a href="" class="icon ion-social-twitch">Twitch</a></li<li><a href="" class="icon ion-social-linkedin">LinkedIn</a></l<li><a href="" class="icon ion-social-facebook">Facebook</a></l<li><a href="" class="icon ion-social-twitter">Twitter</a></li><li><a href="" class="icon ion-locked">Privacy</a></li>*/
.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;
}
/*<li><a href="" class="icon ion-speakerphone">Blog</a></li<li><a href="" class="icon ion-social-github">Github</a> <li><a href="" class="icon ion-social-twitch">Twitch</a></li<li><a href="" class="icon ion-social-linkedin">LinkedIn</a></l<li><a href="" class="icon ion-social-facebook">Facebook</a></l<li><a href="" class="icon ion-social-twitter">Twitter</a></li><li><a href="" class="icon ion-locked">Privacy</a></li>*/
.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;
}
/*<li><a href="" class="icon ion-speakerphone">Blog</a></li<li><a href="" class="icon ion-social-github">Github</a> <li><a href="" class="icon ion-social-twitch">Twitch</a></li<li><a href="" class="icon ion-social-linkedin">LinkedIn</a></l<li><a href="" class="icon ion-social-facebook">Facebook</a></l<li><a href="" class="icon ion-social-twitter">Twitter</a></li><li><a href="" class="icon ion-locked">Privacy</a></li>*/
.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.4666666667em;
margin-bottom: 0.4666666667em;
}
/*<li><a href="" class="icon ion-speakerphone">Blog</a></li<li><a href="" class="icon ion-social-github">Github</a> <li><a href="" class="icon ion-social-twitch">Twitch</a></li<li><a href="" class="icon ion-social-linkedin">LinkedIn</a></l<li><a href="" class="icon ion-social-facebook">Facebook</a></l<li><a href="" class="icon ion-social-twitter">Twitter</a></li><li><a href="" class="icon ion-locked">Privacy</a></li>*/
.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;
} /*<li><a href="" class="icon ion-speakerphone">Blog</a></li<li><a href="" class="icon ion-social-github">Github</a> <li><a href="" class="icon ion-social-twitch">Twitch</a></li<li><a href="" class="icon ion-social-linkedin">LinkedIn</a></l<li><a href="" class="icon ion-social-facebook">Facebook</a></l<li><a href="" class="icon ion-social-twitter">Twitter</a></li><li><a href="" class="icon ion-locked">Privacy</a></li>*/
.site-footer ul {
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;
} /*<li><a href="" class="icon ion-speakerphone">Blog</a></li<li><a href="" class="icon ion-social-github">Github</a> <li><a href="" class="icon ion-social-twitch">Twitch</a></li<li><a href="" class="icon ion-social-linkedin">LinkedIn</a></l<li><a href="" class="icon ion-social-facebook">Facebook</a></l<li><a href="" class="icon ion-social-twitter">Twitter</a></li><li><a href="" class="icon ion-locked">Privacy</a></li>*/
@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%; /*<li><a href="" class="icon ion-speakerphone">Blog</a></li<li><a href="" class="icon ion-social-github">Github</a> <li><a href="" class="icon ion-social-twitch">Twitch</a></li<li><a href="" class="icon ion-social-linkedin">LinkedIn</a></l<li><a href="" class="icon ion-social-facebook">Facebook</a></l<li><a href="" class="icon ion-social-twitter">Twitter</a></li><li><a href="" class="icon ion-locked">Privacy</a></li>*/
-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;
} /*<li><a href="" class="icon ion-speakerphone">Blog</a></li<li><a href="" class="icon ion-social-github">Github</a> <li><a href="" class="icon ion-social-twitch">Twitch</a></li<li><a href="" class="icon ion-social-linkedin">LinkedIn</a></l<li><a href="" class="icon ion-social-facebook">Facebook</a></l<li><a href="" class="icon ion-social-twitter">Twitter</a></li><li><a href="" class="icon ion-locked">Privacy</a></li>*/
.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;
} /*<li><a href="" class="icon ion-speakerphone">Blog</a></li<li><a href="" class="icon ion-social-github">Github</a> <li><a href="" class="icon ion-social-twitch">Twitch</a></li<li><a href="" class="icon ion-social-linkedin">LinkedIn</a></l<li><a href="" class="icon ion-social-facebook">Facebook</a></l<li><a href="" class="icon ion-social-twitter">Twitter</a></li><li><a href="" class="icon ion-locked">Privacy</a></li>*/
.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);
}
} /*<li><a href="" class="icon ion-speakerphone">Blog</a></li<li><a href="" class="icon ion-social-github">Github</a> <li><a href="" class="icon ion-social-twitch">Twitch</a></li<li><a href="" class="icon ion-social-linkedin">LinkedIn</a></l<li><a href="" class="icon ion-social-facebook">Facebook</a></l<li><a href="" class="icon ion-social-twitter">Twitter</a></li><li><a href="" class="icon ion-locked">Privacy</a></li>*/
.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;
}
/*<li><a href="" class="icon ion-speakerphone">Blog</a></li<li><a href="" class="icon ion-social-github">Github</a> <li><a href="" class="icon ion-social-twitch">Twitch</a></li<li><a href="" class="icon ion-social-linkedin">LinkedIn</a></l<li><a href="" class="icon ion-social-facebook">Facebook</a></l<li><a href="" class="icon ion-social-twitter">Twitter</a></li><li><a href="" class="icon ion-locked">Privacy</a></li>*/
.icon-label {
position: absolute;
top: 0;
left: 0;
bottom: 0;
}
.icon-label .icon::before {
padding: 0.7rem;
text-align: center;
width: 2.8rem;
} /*<li><a href="" class="icon ion-speakerphone">Blog</a></li<li><a href="" class="icon ion-social-github">Github</a> <li><a href="" class="icon ion-social-twitch">Twitch</a></li<li><a href="" class="icon ion-social-linkedin">LinkedIn</a></l<li><a href="" class="icon ion-social-facebook">Facebook</a></l<li><a href="" class="icon ion-social-twitter">Twitter</a></li><li><a href="" class="icon ion-locked">Privacy</a></li>*/
.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;
}
/*<li><a href="" class="icon ion-speakerphone">Blog</a></li<li><a href="" class="icon ion-social-github">Github</a> <li><a href="" class="icon ion-social-twitch">Twitch</a></li<li><a href="" class="icon ion-social-linkedin">LinkedIn</a></l<li><a href="" class="icon ion-social-facebook">Facebook</a></l<li><a href="" class="icon ion-social-twitter">Twitter</a></li><li><a href="" class="icon ion-locked">Privacy</a></li>*/
.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;
}
/*<li><a href="" class="icon ion-speakerphone">Blog</a></li<li><a href="" class="icon ion-social-github">Github</a> <li><a href="" class="icon ion-social-twitch">Twitch</a></li<li><a href="" class="icon ion-social-linkedin">LinkedIn</a></l<li><a href="" class="icon ion-social-facebook">Facebook</a></l<li><a href="" class="icon ion-social-twitter">Twitter</a></li><li><a href="" class="icon ion-locked">Privacy</a></li>*/
.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;
} /*<li><a href="" class="icon ion-speakerphone">Blog</a></li<li><a href="" class="icon ion-social-github">Github</a> <li><a href="" class="icon ion-social-twitch">Twitch</a></li<li><a href="" class="icon ion-social-linkedin">LinkedIn</a></l<li><a href="" class="icon ion-social-facebook">Facebook</a></l<li><a href="" class="icon ion-social-twitter">Twitter</a></li><li><a href="" class="icon ion-locked">Privacy</a></li>*/
.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%;
}
/*<li><a href="" class="icon ion-speakerphone">Blog</a></li<li><a href="" class="icon ion-social-github">Github</a> <li><a href="" class="icon ion-social-twitch">Twitch</a></li<li><a href="" class="icon ion-social-linkedin">LinkedIn</a></l<li><a href="" class="icon ion-social-facebook">Facebook</a></l<li><a href="" class="icon ion-social-twitter">Twitter</a></li><li><a href="" class="icon ion-locked">Privacy</a></li>*/
.half,
.fourth {
width: 50%;
}
.small-box {
width: 45%;
}
}
@media (min-width: 45em) {
.top-navigation {
float: right;
}
.top-navigation .icon::before {
display: none;
}
/*<li><a href="" class="icon ion-speakerphone">Blog</a></li<li><a href="" class="icon ion-social-github">Github</a> <li><a href="" class="icon ion-social-twitch">Twitch</a></li<li><a href="" class="icon ion-social-linkedin">LinkedIn</a></l<li><a href="" class="icon ion-social-facebook">Facebook</a></l<li><a href="" class="icon ion-social-twitter">Twitter</a></li><li><a href="" class="icon ion-locked">Privacy</a></li>*/
.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;
}
/*<li><a href="" class="icon ion-speakerphone">Blog</a></li<li><a href="" class="icon ion-social-github">Github</a> <li><a href="" class="icon ion-social-twitch">Twitch</a></li<li><a href="" class="icon ion-social-linkedin">LinkedIn</a></l<li><a href="" class="icon ion-social-facebook">Facebook</a></l<li><a href="" class="icon ion-social-twitter">Twitter</a></li><li><a href="" class="icon ion-locked">Privacy</a></li>*/
.header-title {
font-size: 3.6em;
line-height: 1.4;
margin-top: 0.4666666667em;
margin-bottom: 0.4666666667em;
}
.header-description {
font-size: 1.4em;
line-height: 1.4;
margin-top: 1.3em;
margin-bottom: 1.3em;
margin-top: 1.5em;
}
/*<li><a href="" class="icon ion-speakerphone">Blog</a></li<li><a href="" class="icon ion-social-github">Github</a> <li><a href="" class="icon ion-social-twitch">Twitch</a></li<li><a href="" class="icon ion-social-linkedin">LinkedIn</a></l<li><a href="" class="icon ion-social-facebook">Facebook</a></l<li><a href="" class="icon ion-social-twitter">Twitter</a></li><li><a href="" class="icon ion-locked">Privacy</a></li>*/
.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%;
}
/*<li><a href="" class="icon ion-speakerphone">Blog</a></li<li><a href="" class="icon ion-social-github">Github</a> <li><a href="" class="icon ion-social-twitch">Twitch</a></li<li><a href="" class="icon ion-social-linkedin">LinkedIn</a></l<li><a href="" class="icon ion-social-facebook">Facebook</a></l<li><a href="" class="icon ion-social-twitter">Twitter</a></li><li><a href="" class="icon ion-locked">Privacy</a></li>*/
.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);
}
} /*<li><a href="" class="icon ion-speakerphone">Blog</a></li<li><a href="" class="icon ion-social-github">Github</a> <li><a href="" class="icon ion-social-twitch">Twitch</a></li<li><a href="" class="icon ion-social-linkedin">LinkedIn</a></l<li><a href="" class="icon ion-social-facebook">Facebook</a></l<li><a href="" class="icon ion-social-twitter">Twitter</a></li><li><a href="" class="icon ion-locked">Privacy</a></li>*/
.unhide {
-webkit-animation: fadein 0.3s forwards ease-out;
animation: fadein 0.3s forwards ease-out;
display: block;
}
Add JavaScript code to build the website
The following programming codes are JavaScript programming codes. This programming code has a lot of roles to play in building a website. Basically, any website has a lot of roles in JavaScript programming code. You copy those JavaScript programming codes and then paste them in the upper structure where add javascript is written. Then you save your HTML file.
var buttonsHide = document.querySelectorAll('.toggle-hide'),
buttonsArray = [].slice.call(buttonsHide),
modal = document.getElementById('login'),
modalBg = document.getElementById('modal-bg');
/*<li><a href="" class="icon ion-speakerphone">Blog</a></li<li><a href="" class="icon ion-social-github">Github</a> <li><a href="" class="icon ion-social-twitch">Twitch</a></li<li><a href="" class="icon ion-social-linkedin">LinkedIn</a></l<li><a href="" class="icon ion-social-facebook">Facebook</a></l<li><a href="" class="icon ion-social-twitter">Twitter</a></li><li><a href="" class="icon ion-locked">Privacy</a></li>*/
function toggleModal(){
modal.classList.toggle('unhide');
modalBg.classList.toggle('unhide');
}
buttonsArray.forEach(function (el){
el.addEventListener('click', function(ev){
ev.preventDefault();
toggleModal();
});
});
I have tried to make this website as good and professional as possible. This web design is the best web design I have ever made. Hope you learned from this article how to build a website.
❤Sharing is caring❤
