School Project for Activities for School
This is the code which i have written for my school project.
It is not a full website it is just a prototype of the website.
Also let me know about the website in the comments.
Thank you. Have a good day.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Coding.com-Learn how to code</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css">
</head>
<body>
<header class="text-gray-600 body-font">
<div class="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center">
<a class="flex title-font font-medium items-center text-gray-900 mb-4 md:mb-0">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-10 h-10 text-white p-2 bg-indigo-500 rounded-full" viewBox="0 0 24 24">
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path>
</svg>
<span class="ml-3 text-xl">Coding.com</span>
</a>
<nav class="md:ml-auto md:mr-auto flex flex-wrap items-center text-base justify-center">
<a class="mr-5 hover:text-gray-900">About Us</a>
<a class="mr-5 hover:text-gray-900">Contact</a>
<a class="mr-5 hover:text-gray-900">Subject</a>
<a class="mr-5 hover:text-gray-900">Menu</a>
</nav>
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-4 h-4 ml-1" viewBox="0 0 24 24">
<path d="M5 12h14M12 5l7 7-7 7"></path>
</svg>
</button>
</div>
</header>
<section class="text-gray-600 body-font">
<div class="container mx-auto flex px-5 py-24 md:flex-row flex-col items-center">
<div class="lg:flex-grow md:w-1/2 lg:pr-24 md:pr-16 flex flex-col md:items-start md:text-left mb-16 md:mb-0 items-center text-center">
<h1 class="title-font sm:text-4xl text-3xl mb-4 font-medium text-gray-900">READY TO LEARN
<br class="hidden lg:inline-block">CODING
</h1>
<p class="mb-8 leading-relaxed">Coding refers to creating computer programming code. In a more general sense, the word coding is used to refer to assigning a code or classification to something.</p>
<div class="flex justify-center">
<button class="inline-flex text-white bg-indigo-500 border-0 py-2 px-6 focus:outline-none hover:bg-indigo-600 rounded text-lg">LEARN MORE</button>
<button class="ml-4 inline-flex text-gray-700 bg-gray-100 border-0 py-2 px-6 focus:outline-none hover:bg-gray-200 rounded text-lg">REGISTER</button>
</div>
</div>
<div class="lg:max-w-lg lg:w-full md:w-1/2 w-5/6">
<img class="object-cover object-center rounded" alt="hero" src="https://images.unsplash.com/photo-1515879218367-8466d910aaa4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80">
</div>
</div>
</section>
<hr>
<section class="text-gray-600 body-font">
<div class="container px-5 py-24 mx-auto">
<div class="flex flex-wrap w-full mb-20 flex-col items-center text-center">
<h1 class="sm:text-3xl text-2xl font-medium title-font mb-2 text-gray-900">Programming languages</h1>
<p class="lg:w-1/2 w-full leading-relaxed text-gray-500">A programming language is a formal language comprising a set of strings that produce various kinds of machine code output. Programming languages are one kind of computer language, and are used in computer programming to implement algorithms.</p>
</div>
<div class="flex flex-wrap -m-4">
<div class="xl:w-1/3 md:w-1/2 p-4">
<div class="border border-gray-200 p-6 rounded-lg">
<div class="w-10 h-10 inline-flex items-center justify-center rounded-full bg-indigo-100 text-indigo-500 mb-4">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-6 h-6" viewBox="0 0 24 24">
<path d="M22 12h-4l-3 9L9 3l-3 9H2"></path>
</svg>
</div>
<h2 class="text-lg text-gray-900 font-medium title-font mb-2">Java</h2>
<p class="leading-relaxed text-base">Java is a high-level, class-based, object-oriented programming language that is designed to have as few implementation dependencies as possible.</p>
<button class="flex mx-auto mt-16 text-white bg-indigo-500 border-0 py-2 px-8 focus:outline-none hover:bg-indigo-600 rounded text-lg">Learn Java</button>
</div>
</div>
<div class="xl:w-1/3 md:w-1/2 p-4">
<div class="border border-gray-200 p-6 rounded-lg">
<div class="w-10 h-10 inline-flex items-center justify-center rounded-full bg-indigo-100 text-indigo-500 mb-4">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-6 h-6" viewBox="0 0 24 24">
<circle cx="6" cy="6" r="3"></circle>
<circle cx="6" cy="18" r="3"></circle>
<path d="M20 4L8.12 15.88M14.47 14.48L20 20M8.12 8.12L12 12"></path>
</svg>
</div>
<h2 class="text-lg text-gray-900 font-medium title-font mb-2">JavaScript</h2>
<p class="leading-relaxed text-base">JavaScript is high-level, often just-in-time compiled, and multi-paradigm. It has curly-bracket syntax, dynamic typing, prototype-based object-orientation, and first-class functions.</p>
<button class="flex mx-auto mt-16 text-white bg-indigo-500 border-0 py-2 px-8 focus:outline-none hover:bg-indigo-600 rounded text-lg">Learn JavaScript</button>
</div>
</div>
<div class="xl:w-1/3 md:w-1/2 p-4">
<div class="border border-gray-200 p-6 rounded-lg">
<div class="w-10 h-10 inline-flex items-center justify-center rounded-full bg-indigo-100 text-indigo-500 mb-4">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-6 h-6" viewBox="0 0 24 24">
<path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"></path>
<circle cx="12" cy="7" r="4"></circle>
</svg>
</div>
<h2 class="text-lg text-gray-900 font-medium title-font mb-2">HTML</h2>
<p class="leading-relaxed text-base">The HyperText Markup Language, or HTML is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript. Web browsers receive HTML documents from a web server or from local storage and render the documents into multimedia web pages. </p>
<button class="flex mx-auto mt-16 text-white bg-indigo-500 border-0 py-2 px-8 focus:outline-none hover:bg-indigo-600 rounded text-lg">Learn HTML</button>
</div>
</div>
<div class="xl:w-1/3 md:w-1/2 p-4">
<div class="border border-gray-200 p-6 rounded-lg">
<div class="w-10 h-10 inline-flex items-center justify-center rounded-full bg-indigo-100 text-indigo-500 mb-4">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-6 h-6" viewBox="0 0 24 24">
<path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1zM4 22v-7"></path>
</svg>
</div>
<h2 class="text-lg text-gray-900 font-medium title-font mb-2">C++</h2>
<p class="leading-relaxed text-base">C++ is a general-purpose programming language created by Bjarne Stroustrup as an extension of the C programming language, or "C with Classes". The language has expanded significantly over time, and modern C++ now has object-oriented, generic, and functional features in addition to facilities for low-level memory manipulation. It is almost always implemented as a compiled language.</p>
<button class="flex mx-auto mt-16 text-white bg-indigo-500 border-0 py-2 px-8 focus:outline-none hover:bg-indigo-600 rounded text-lg">Learn C++</button>
</div>
</div>
<div class="xl:w-1/3 md:w-1/2 p-4">
<div class="border border-gray-200 p-6 rounded-lg">
<div class="w-10 h-10 inline-flex items-center justify-center rounded-full bg-indigo-100 text-indigo-500 mb-4">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-6 h-6" viewBox="0 0 24 24">
<path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"></path>
</svg>
</div>
<h2 class="text-lg text-gray-900 font-medium title-font mb-2">C Language</h2>
<p class="leading-relaxed text-base">C is a general-purpose, procedural computer programming language supporting structured programming, lexical variable scope, and recursion, with a static type system. By design, C provides constructs that map efficiently to typical machine instruction.</p>
<button class="flex mx-auto mt-16 text-white bg-indigo-500 border-0 py-2 px-8 focus:outline-none hover:bg-indigo-600 rounded text-lg">Learn C Language</button>
</div>
</div>
<div class="xl:w-1/3 md:w-1/2 p-4">
<div class="border border-gray-200 p-6 rounded-lg">
<div class="w-10 h-10 inline-flex items-center justify-center rounded-full bg-indigo-100 text-indigo-500 mb-4">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-6 h-6" viewBox="0 0 24 24">
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>
</svg>
</div>
<h2 class="text-lg text-gray-900 font-medium title-font mb-2">Kotlin</h2>
<p class="leading-relaxed text-base">Kotlin is a cross-platform, statically typed, general-purpose programming language with type inference. Kotlin is designed to interoperate fully with Java, and the JVM version of Kotlin's standard library depends on the Java Class Library, but type inference allows its syntax to be more concise. Kotlin mainly targets the JVM, but also compiles to JavaScript</p>
<button class="flex mx-auto mt-16 text-white bg-indigo-500 border-0 py-2 px-8 focus:outline-none hover:bg-indigo-600 rounded text-lg">Learn Kotlin</button>
</div>
</div>
</div>
</div>
</section>
<hr>
<section class="text-gray-600 body-font">
<div class="container px-5 py-24 mx-auto">
<div class="flex flex-col text-center w-full mb-12">
<h1 class="sm:text-3xl text-2xl font-medium title-font mb-4 text-gray-900">Register</h1>
<p class="lg:w-2/3 mx-auto leading-relaxed text-base">Register for regular regular newspaper and other important information.</p>
</div>
<div class="flex lg:w-2/3 w-full sm:flex-row flex-col mx-auto px-8 sm:space-x-4 sm:space-y-0 space-y-4 sm:px-0 items-end">
<div class="relative flex-grow w-full">
<label for="full-name" class="leading-7 text-sm text-gray-600">Full Name</label>
<input type="text" id="full-name" name="full-name" class="w-full bg-gray-100 bg-opacity-50 rounded border border-gray-300 focus:border-indigo-500 focus:bg-transparent focus:ring-2 focus:ring-indigo-200 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out">
</div>
<div class="relative flex-grow w-full">
<label for="email" class="leading-7 text-sm text-gray-600">Email</label>
<input type="email" id="email" name="email" class="w-full bg-gray-100 bg-opacity-50 rounded border border-gray-300 focus:border-indigo-500 focus:bg-transparent focus:ring-2 focus:ring-indigo-200 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out">
</div>
<button class="text-white bg-indigo-500 border-0 py-2 px-8 focus:outline-none hover:bg-indigo-600 rounded text-lg">Register</button>
</div>
</div>
</section>
<hr>
<footer class="text-gray-600 body-font">
<div class="container px-5 py-24 mx-auto">
<div class="flex flex-wrap md:text-left text-center -mb-10 -mx-4">
<div class="lg:w-1/6 md:w-1/2 w-full px-4">
<h2 class="title-font font-medium text-gray-900 tracking-widest text-sm mb-3">Links for Java</h2>
<nav class="list-none mb-10">
<li>
<a class="text-gray-600 hover:text-gray-800">First Link</a>
</li>
<li>
<a class="text-gray-600 hover:text-gray-800">Second Link</a>
</li>
<li>
<a class="text-gray-600 hover:text-gray-800">Third Link</a>
</li>
<li>
<a class="text-gray-600 hover:text-gray-800">Fourth Link</a>
</li>
</nav>
</div>
<div class="lg:w-1/6 md:w-1/2 w-full px-4">
<h2 class="title-font font-medium text-gray-900 tracking-widest text-sm mb-3">Links for JavaScript</h2>
<nav class="list-none mb-10">
<li>
<a class="text-gray-600 hover:text-gray-800">First Link</a>
</li>
<li>
<a class="text-gray-600 hover:text-gray-800">Second Link</a>
</li>
<li>
<a class="text-gray-600 hover:text-gray-800">Third Link</a>
</li>
<li>
<a class="text-gray-600 hover:text-gray-800">Fourth Link</a>
</li>
</nav>
</div>
<div class="lg:w-1/6 md:w-1/2 w-full px-4">
<h2 class="title-font font-medium text-gray-900 tracking-widest text-sm mb-3">Links for HTML</h2>
<nav class="list-none mb-10">
<li>
<a class="text-gray-600 hover:text-gray-800">First Link</a>
</li>
<li>
<a class="text-gray-600 hover:text-gray-800">Second Link</a>
</li>
<li>
<a class="text-gray-600 hover:text-gray-800">Third Link</a>
</li>
<li>
<a class="text-gray-600 hover:text-gray-800">Fourth Link</a>
</li>
</nav>
</div>
<div class="lg:w-1/6 md:w-1/2 w-full px-4">
<h2 class="title-font font-medium text-gray-900 tracking-widest text-sm mb-3">Links for C++</h2>
<nav class="list-none mb-10">
<li>
<a class="text-gray-600 hover:text-gray-800">First Link</a>
</li>
<li>
<a class="text-gray-600 hover:text-gray-800">Second Link</a>
</li>
<li>
<a class="text-gray-600 hover:text-gray-800">Third Link</a>
</li>
<li>
<a class="text-gray-600 hover:text-gray-800">Fourth Link</a>
</li>
</nav>
</div>
<div class="lg:w-1/6 md:w-1/2 w-full px-4">
<h2 class="title-font font-medium text-gray-900 tracking-widest text-sm mb-3">Links for C Language</h2>
<nav class="list-none mb-10">
<li>
<a class="text-gray-600 hover:text-gray-800">First Link</a>
</li>
<li>
<a class="text-gray-600 hover:text-gray-800">Second Link</a>
</li>
<li>
<a class="text-gray-600 hover:text-gray-800">Third Link</a>
</li>
<li>
<a class="text-gray-600 hover:text-gray-800">Fourth Link</a>
</li>
</nav>
</div>
<div class="lg:w-1/6 md:w-1/2 w-full px-4">
<h2 class="title-font font-medium text-gray-900 tracking-widest text-sm mb-3">Kotlin</h2>
<nav class="list-none mb-10">
<li>
<a class="text-gray-600 hover:text-gray-800">First Link</a>
</li>
<li>
<a class="text-gray-600 hover:text-gray-800">Second Link</a>
</li>
<li>
<a class="text-gray-600 hover:text-gray-800">Third Link</a>
</li>
<li>
<a class="text-gray-600 hover:text-gray-800">Fourth Link</a>
</li>
</nav>
</div>
</div>
</div>
<div class="border-t border-gray-200">
<div class="container px-5 py-8 flex flex-wrap mx-auto items-center">
<div class="flex md:flex-nowrap flex-wrap justify-center items-end md:justify-start">
<div class="relative sm:w-64 w-40 sm:mr-4 mr-2">
<label for="footer-field" class="leading-7 text-sm text-gray-600">Sign In</label>
<input type="text" id="footer-field" name="footer-field" class="w-full bg-gray-100 bg-opacity-50 rounded border border-gray-300 focus:ring-2 focus:bg-transparent focus:ring-indigo-200 focus:border-indigo-500 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out">
</div>
<button class="inline-flex text-white bg-indigo-500 border-0 py-2 px-6 focus:outline-none hover:bg-indigo-600 rounded">Sign In</button>
<p class="text-gray-500 text-sm md:ml-6 md:mt-0 mt-2 sm:text-left text-center">To get the regular
<br class="lg:block hidden">Update
</p>
</div>
<span class="inline-flex lg:ml-auto lg:mt-0 mt-6 w-full justify-center md:justify-start md:w-auto">
<a class="text-gray-500">
<svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
<path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z"></path>
</svg>
</a>
<a class="ml-3 text-gray-500">
<svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
<path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z"></path>
</svg>
</a>
<a class="ml-3 text-gray-500">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
<rect width="20" height="20" x="2" y="2" rx="5" ry="5"></rect>
<path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37zm1.5-4.87h.01"></path>
</svg>
</a>
<a class="ml-3 text-gray-500">
<svg fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="0" class="w-5 h-5" viewBox="0 0 24 24">
<path stroke="none" d="M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-2-2 2 2 0 00-2 2v7h-4v-7a6 6 0 016-6zM2 9h4v12H2z"></path>
<circle cx="4" cy="4" r="2" stroke="none"></circle>
</svg>
</a>
</span>
</div>
</div>
<div class="bg-gray-100">
<div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row">
<p class="text-gray-500 text-sm text-center sm:text-left">© 2021 Coding.com —
<a href="https://twitter.com/knyttneve" class="text-gray-600 ml-1" target="_blank" rel="noopener noreferrer">@coding.com</a>
</p>
<span class="sm:ml-auto sm:mt-0 mt-2 sm:w-auto w-full sm:text-left text-center text-gray-500 text-sm">Coding.com-Learn to Code</span>
</div>
</div>
</footer>
</body>
</html>
Comments
Post a Comment