How To make a custom website using HTML and CSS

Hirusha August 08, 2021 No comments

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

Hirusha August 04, 2021 No comments

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>

<head>

<title>About Us</title>

</head>

<body>

<h1>About Us</h1>

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>

<span>Web Design</span>

<span>Photoshop</span>

<span>Coding</span>

</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

Hirusha August 03, 2021 No comments

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>

<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>

</body>

</html>

Grade 11 Ict HTML Lesson Under 45 minutes

Hirusha August 02, 2021 No comments

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><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>

<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>

<li>Sinhala</li>

<li>Tamil

<li> Sri Lankan Tamil </li>

<li> Indian Tamil </li>

</ol> </li>

<li> Muslim </li>

<li> Burgher </li>

</ul>

<caption>PrincipleForms of land use</caption>

<tr>

<th>EXENT</th>

</tr>

<tr>

<td>Paddy</td>

</tr>

<tr>

</tr>

<tr>

<td>Rubber</td>

</tr>

</table>

</body>

</html>

How to make a Registration Form Using HTML

Hirusha August 02, 2021 No comments

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>

</td>

</tr>

<tr>

<td>

Password :

</td>

<td>

</td>

</tr>

<tr>

<td>

Email :

</td>

<td>

</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>

</td>

</tr>

<tr>

<td>

</td>

</tr>

</table>

</form>

</body>

</html>

You have to paste this code in your code editor or notepad.

This is default featured slide 1 title

This is default featured slide 2 title

This is default featured slide 3 title

This is default featured slide 4 title

This is default featured slide 5 title