Free YouTube Subscribers | Free YouTube Likes: Get Free YouTube Subscribers Likes and Views every day fast and easily. Real YouTube channel owners like you will watch, like, and subscribe!
How To make a custom website using HTML and CSS
How To make a custom website using HTML and CSS
Here is the code of this video you can copy and paste it on your code editor or notepad.
Here Is The Code
HTML CODE
html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Website1</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="wrapper">
<nav class="navbar">
<img class="logo" src="images/logo.png" alt="logo">
<ul>
<li><a class="active" href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Feedback</a></li>
</ul>
</nav>
<div class="center">
<h1>Welcome To Casecade</h1>
<h2>Create Somthing New</h2>
<div class="buttons">
<button>Explore More</button>
<button class="btn2">Subscribe Us</button>
</div>
</div>
</div>
</body>
</html>
CSS
* {
padding: 0;
margin: 0;
}
.wrapper {
background: url(images/bg1.jpg);
background-size: cover;
height: 100vh;
}
.navbar {
position: fixed;
height: 80px;
width: 100%;
top: 0;
left: 0;
background: rgba(0,0,0,0.4);
}
.navbar .logo {
width: 140px;
height: auto;
padding: 20px 100px;
}
.navbar ul {
float: right;
margin-right: 20px;
}
.navbar ul li {
list-style: none;
margin: 0 8px;
display: inline-block;
line-height: 80px;
}
.navbar ul li a {
font-size: 20px;
font-family: sans-serif;
color: white;
padding: 6px 13px;
text-decoration: none;
transition: .4s;
}
.navbar ul li a.active, .navbar ul li a:hover {
background: red;
border-radius: 2px;
}
.wrapper .center {
position: absolute;
left: 50%;
top: 55%;
transform: translate(-50%, -50%);
font-family: sans-serif;
user-select: none;
}
.center h1 {
color: white;
font-size: 70px;
font-weight: bold;
margin-top: 10px;
width: 900px;
text-align: center;
}
.center h2 {
color: white;
font-size: 70px;
font-weight: bold;
margin-top: 10px;
width: 885px;
text-align: center;
}
.center .buttons {
margin: 35px 280px;
}
.buttons button {
height: 50px;
width: 150px;
font-size: 18px;
font-weight: 600;
color: #ffb3b3;
background: red;
outline: none;
cursor: pointer;
border: 1px solid #cc0000;
border-radius: 25px;
transition: .4s;
}
.buttons .btn2 {
margin-left: 25px;
}
.buttons button:hover {
background: blue;
color: white;
border: 4px solid white;
}
How make a about us page using HTML AND CSS
How make a about us page using HTML AND CSS
Here is the code of this video you can copy and paste it on your code editor or notepad.
Here Is The Code
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About Us</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="about-section">
<div class="inner-container">
<h1>About Us</h1>
<p class="text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia perferendis recusandae commodi! Repellat doloribus sunt itaque repudiandae repellendus officia hic tempore ex, amet culpa aliquid totam nostrum dolorum incidunt esse!
</p>
<div class="skills">
<span>Web Design</span>
<span>Photoshop</span>
<span>Coding</span>
</div>
</div>
</div>
</body>
</html>
CSS
* {
margin: 0;
padding: 0;
font-family: "Open Sans", sans-serif;
box-sizing: border-box;
}
body {
min-height: 10vh;
display: flex;
align-items: center;
justify-content: center;
background-color: #f1f1f1;
}
.about-section {
background: url(images/pic.jpg) no-repeat left;
background-size: 55%;
background-color: #fdfdfd;
overflow: hidden;
padding: 100px 0;
}
.inner-container {
width: 55%;
float: right;
background-color: #fdfdfd;
padding: 150px;
}
.inner-container h1 {
margin-bottom: 30px;
font-size: 30px;
font-weight: 900;
}
.text {
font-size: 13px;
color: #545454;
line-height: 30px;
text-align: justify;
margin-bottom: 40px;
}
.skills {
display: flex;
justify-content: space-between;
font-weight: 700;
font-size: 13px;
}
@media screen and (max-width: 1200px) {
.inner-container {
padding: 80px;
}
}
@media screen and (max-width: 1000px){
.about-section {
background-size: 100%;
padding: 100px 40px;
}
.inner-container {
width: 100%;
}
}
@media screen and (max-width: 600px) {
.about-section {
padding: 0;
}
.inner-container {
padding: 60px;
}
}
How To make a Loader Using HTML
How To make a Loader Using HTML
Here is the code of this video you can copy and paste it on your code editor or notepad.
Here Is The Code
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite; /* Safari */
animation: spin 2s linear infinite;
}
/* Safari */
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
</head>
<body>
<h2>How To Create A Loader</h2>
<div class="loader"></div>
</body>
</html>
Grade 11 Ict HTML Lesson Under 45 minutes
Grade 11 Ict HTML Lesson Under 45 minutes
Here is the code of this video you can copy and paste it on your code editor or notepad.
Here Is The Code
<html>
<head><title> Sri Lanka </title></head>
<body><h2><center><font face="arial" color="blue"> SRI LANKA </font></center></h2>
<center><img src=" C:\Users\Pictures\srilanka.jpg" ></center>
<center><font face="arial" size="2">Sri Lankan Enviroment</font></center>
<p><center> Sri Lanka is an island located off the southern coast of India. Sri Lanka is<br>
surrounded by the Indian Ocean. The geography of Sri Lanka includes<br>
coastal plains in the north and hills and mountains in the interior. The<br>
government system is a republic. The chief of state and head of government<br>
is the President. </center></p>
<ul type = ''disc''
<li> Sinhala</li>
<li> Tamil</li>
<li> Muslim</li>
<li> Burgher</li>
</ul>
<ol type = ''I'' >
<li>Sinhala</li>
<li>Tamil</li>
<li>Muslim</li>
<li>Burgher</li>
</ol>
<dl>
<dt> Main subjects for the science stream </dt>
<dd> Biology </dd>
<dd> Physics</dd>
<dd> Chemistry </dd>
<dd> Combined Maths </dd>
<dt> Main subjects for the commerce stream </dt>
<dd> Economics </dd>
<dd> Business Studies </dd>
<dd> Accountancy </dd>
<dl>
<ul type = ''disc''>
<li>Sinhala</li>
<li>Tamil
<ol type = ''1''>
<li> Sri Lankan Tamil </li>
<li> Indian Tamil </li>
</ol> </li>
<li> Muslim </li>
<li> Burgher </li>
</ul>
<table border="1">
<caption>PrincipleForms of land use</caption>
<tr>
<th>USE</th>
<th>EXENT</th>
</tr>
<tr>
<td>Paddy</td>
<td>500,000</td>
</tr>
<tr>
<td>Tea</td>
<td>190,000</td>
</tr>
<tr>
<td>Rubber</td>
<td>163,000</td>
</tr>
</table>
</body>
</html>
How to make a Registration Form Using HTML
How to make a registration form using HTML
Here is the code of this video you can copy and paste it on your code editor or notepad.
Here Is The Code
<!DOCTYPE html>
<html>
<head>
<title>Registration Form</title>
</head>
<body>
<form>
<table>
<tr>
<td>
Name :
</td>
<td>
<input type="text" placeholder="Name" >
</td>
</tr>
<tr>
<td>
Password :
</td>
<td>
<input type="Password" placeholder="Password">
</td>
</tr>
<tr>
<td>
Email :
</td>
<td>
<input type="mail" placeholder="Email">
</td>
</tr>
<tr>
<td>
Gender :
</td>
<td>
<input type="radio" name="Gender">Male
<input type="radio" name="Gender">FeMale
</td>
</tr>
<tr>
<td>
Phone No :
</td>
<td>
<select>
<option>977</option>
<option>978</option>
<option>979</option>
<option>980</option>
<option>981</option>
<option>982</option>
<option>983</option>
</select>
<input type="phone" placeholder="98480***">
</td>
</tr>
<tr>
<td>
<input type="Submit" value="Submit">
</td>
</tr>
</table>
</form>
</body>
</html>
You have to paste this code in your code editor or notepad.
About Technology Tutorials
About Code With HK
Hello Guys Welcome To My website
I am only upload the codes to this website.But You Can watch my videos on youtube. I gaving the
link.But not now.You can watch my videos and learn coding.
I gave ebooks to you. You can read them and learn
code.Follow me and subcribe my youtube channel🙏🙏
I'm going to teach these things to you
- How to make a website with coding
- How to make computer viruses
- html tutorials
- css tutorial
- html and css crash coure
- javascript tutorials
