Friday, August 4, 2023

TRAVEL SITE WEB PAGE USING HTML/CSS

TRAVEL SITE WEB PAGE USING HTML/CSS

1th. PAGE

<!DOCTYPE html>

<html>

<head>

<title>Travel Website</title>

</head>

<body>

<h1>Travel</h1>

</div>

<ul>

<li><a href="#">Services</a></li>

<li><a href="#">Places</a></li>

<li><a href="#">Discounts</a></li>

<li><a href="#">Contact</a></li>

<li><a href="#">Booking</a></li>

</ul>

</div>

</div>

<h1>Travel With Us</h1>

<br>

<p>Pack your bags. We Are going on vacation!

That is exactly what an effective travel website should make you feel. It should activate the travel bug with vibrant imagery and vivid copy.</p>

<br>

<a href="#">Learn More</a>

</div>

<h2>AUSTRALIA</h2>

<br>

</div>

<br>

</div>

<h2>THAILAND</h2>

<br>

</div>

<a href="#">Copyright</a>

<a href="#">Terms and Conditions</a>

<a href="#">Privacy Policy</a>

<a href="#">Cookies</a>

<a href="#">Complaints</a>

</div>

</body>

</html>

COPY 1TH PAGE AND SAVE AS NAME.HTML

2ND. PAGE

padding: 0px;

margin: 0px;

box-sizing: border-box;

list-style: none;

font-family: 'Poppins', sans-serif;

}

.navbar{

width: 100%;

height: 80px;

background-color: cyan;

display: flex;

justify-content: space-around;

align-items: center;

color: #000;

}

.menu ul{

display: flex;

align-items: center;

}

.menu ul li a{

text-decoration: none;

color: #000;

padding: 5px 12px;

letter-spacing: 2px;

font-size: 18px;

}

.menu ul li a:hover{

border-bottom: 4px solid #000;

transition: 0.4s;

}

.signup a{

text-decoration: none;

color: #000;

font-size: 18px;

font-weight: bold;

border-radius: 12px;

padding: 12px 30px;

border: 2px solid #ff0000;

}

.signup a:hover{

background-color: red;

transition: 0.6s;

}

.body{

width: 100%;

height: 90vh;

display: flex;

justify-content: space-around;

align-items: center;

background-image: linear-gradient(rgba(0,0,0,0.50),rgba(0,0,0,0.50)),url(BG.jpg);

background-position: center;

background-size: cover;

}

.heading{

width: 30%;

text-align: center;

color: #fff;

}

.heading h1{

font-size: 40px;

}

.heading a{

text-decoration: none;

color: #000;

font-size: 25px;

font-weight: bold;

border-radius: 45px;

padding: 14px 50px;

background-color: #fff;

}

.heading a:hover{

letter-spacing: 3px;

transition: 0.6s;

}

.tours{

width: 70%;

display: flex;

justify-content: space-around;

}

.places{

display: inline;

text-align: center;

border-radius: 12px;

}

.places h2{

color: red;

font-size: 35px;

letter-spacing: 3px;

border-radius: 1px;

padding: 30px 30px;

background-color: yellow;

}

.places a{

text-decoration: none;

color: red;

font-weight: bold;

font-size: 18px;

border-radius: 12px;

padding: 12px 30px;

background-color: #fff;

}

.places a:hover{

background-color: #000;

letter-spacing: 3px;

transition: 0.6s;

}

.footer{

width: 100%;

height: 50px;

display: flex;

justify-content: space-around;

align-items: center;

}

.footer a{

text-decoration: none;

color: green;

font-size: 18px;

font-weight: bold;

}

.footer a:hover{

text-decoration: underline;

transition: 0.4s;

}

Copy 2nd page and save as name.css

1TH IMAGE

2ND IMAGE

3RD IMAGE

4TH IMAGE

IMAGES USED IN WEBPAGE

Responsive Webpage using HTML/CSS | Quick Responsive webpage designed using HTML/CSS

1th.PAGE

<!DOCTYPE html>

<head>

<title>ROHIT TECH STUDY Dropdown Menu with Search BoX</title>

<style>

body

{

background-repeat:no-repeat;

background-attachment: fixed;

background-size:cover;

background-image:url(lf.jpg)

}

</style>

</head>

<body>

<nav>

<div class="logo"><a href="#">ROHIT TECH STUDY</a></div>

<li><a href="#">About</a></li>

<li>

<a href="#" class="desktop-link">Features</a>

<label for="show-features">Features</label>

<ul>

<li><a href="#">HTML/CSS NOTES</a></li>

<li><a href="#">C LANGUAGE</a></li>

<li><a href="#">C GRAPHICS PROGRAM</a></li>

<li><a href="#">BASIC COMPUTER NOTES</a></li>

</ul>

</li>

<li>

<a href="#" class="desktop-link">Services</a>

<label for="show-services">Services</label>

<ul>

<li><a href="#">ONLINE VIDEO NOTES</a></li>

<li><a href="#">LIVE STUDY TIME</a></li>

<li><a href="#">NOTES</a></li>

<li>

<a href="#" class="desktop-link">More Items</a>

<label for="show-items">More Items</label>

<ul>

<li><a href="#">BUY BOOKS</a></li>

<li><a href="#">BUY NOTES</a></li>

<li><a href="#">BUY SOFTWARE</a></li>

</ul>

</li>

</ul>

</li>

<li><a href="#">Feedback</a></li>

</ul>

</div>

</form>

</nav>

</div>

<h2 style="color:red;">ROHIT TECH STUDY</h2>

<br>

<h4 style="color:white;"> Responsive Dropdown Menu Bar with Searchbox</h4>

<h4 style="color:white;">using only HTML & CSS - Flexbox</h4>

</div>

</body>

</html>

1 PAGE COPY AND SAVE AS NAME.HTML

2nd. PAGE

margin: 0;

padding: 0;

box-sizing: border-box;

text-decoration: none;

font-family: 'Poppins', sans-serif;

}

.wrapper{

background: #171c24;

position: fixed;

width: 100%;

}

.wrapper nav{

position: relative;

display: flex;

max-width: calc(100% - 200px);

margin: 0 auto;

height: 70px;

align-items: center;

justify-content: space-between;

}

nav .content{

display: flex;

align-items: center;

}

nav .content .links{

margin-left: 80px;

display: flex;

}

.content .logo a{

color: #fff;

font-size: 30px;

font-weight: 600;

}

.content .links li{

list-style: none;

line-height: 70px;

}

.content .links li a,

.content .links li label{

color: #fff;

font-size: 18px;

font-weight: 500;

padding: 9px 17px;

border-radius: 5px;

transition: all 0.3s ease;

}

.content .links li label{

display: none;

}

.content .links li a:hover,

.content .links li label:hover{

background: #323c4e;

}

.wrapper .search-icon,

.wrapper .menu-icon{

color: #fff;

font-size: 18px;

cursor: pointer;

line-height: 70px;

width: 70px;

text-align: center;

}

.wrapper .menu-icon{

display: none;

}

.wrapper #show-search:checked ~ .search-icon i::before{

content: "\f00d";

}

.wrapper .search-box{

position: absolute;

height: 100%;

max-width: calc(100% - 50px);

width: 100%;

opacity: 0;

pointer-events: none;

transition: all 0.3s ease;

}

.wrapper #show-search:checked ~ .search-box{

opacity: 1;

pointer-events: auto;

}

.search-box input{

width: 100%;

height: 100%;

border: none;

outline: none;

font-size: 17px;

color: #fff;

background: #171c24;

padding: 0 100px 0 15px;

}

.search-box input::placeholder{

color: #f2f2f2;

}

.search-box .go-icon{

position: absolute;

right: 10px;

top: 50%;

transform: translateY(-50%);

line-height: 60px;

width: 70px;

background: #171c24;

border: none;

outline: none;

color: #fff;

font-size: 20px;

cursor: pointer;

}

.wrapper input[type="checkbox"]{

display: none;

}

/* Dropdown Menu code start */

.content .links ul{

position: absolute;

background: #171c24;

top: 80px;

z-index: -1;

opacity: 0;

visibility: hidden;

}

.content .links li:hover > ul{

top: 70px;

opacity: 1;

visibility: visible;

transition: all 0.3s ease;

}

.content .links ul li a{

display: block;

width: 100%;

line-height: 30px;

border-radius: 0px!important;

}

.content .links ul ul{

position: absolute;

top: 0;

right: calc(-100% + 8px);

}

.content .links ul li{

position: relative;

}

.content .links ul li:hover ul{

top: 0;

}

/* Responsive code start */

@media screen and (max-width: 1250px){

.wrapper nav{

max-width: 100%;

padding: 0 20px;

}

nav .content .links{

margin-left: 30px;

}

.content .links li a{

padding: 8px 13px;

}

.wrapper .search-box{

max-width: calc(100% - 100px);

}

.wrapper .search-box input{

padding: 0 100px 0 15px;

}

@media screen and (max-width: 900px){

.wrapper .menu-icon{

display: block;

}

.wrapper #show-menu:checked ~ .menu-icon i::before{

content: "\f00d";

}

nav .content .links{

display: block;

position: fixed;

background: #14181f;

height: 100%;

width: 100%;

top: 70px;

left: -100%;

margin-left: 0;

max-width: 350px;

overflow-y: auto;

padding-bottom: 100px;

transition: all 0.3s ease;

}

nav #show-menu:checked ~ .content .links{

left: 0%;

}

.content .links li{

margin: 15px 20px;

}

.content .links li a,

.content .links li label{

line-height: 40px;

font-size: 20px;

display: block;

padding: 8px 18px;

cursor: pointer;

}

.content .links li a.desktop-link{

display: none;

}

/* dropdown responsive code start */

.content .links ul,

.content .links ul ul{

position: static;

opacity: 1;

visibility: visible;

background: none;

max-height: 0px;

overflow: hidden;

}

.content .links #show-features:checked ~ ul,

.content .links #show-services:checked ~ ul,

.content .links #show-items:checked ~ ul{

max-height: 100vh;

}

.content .links ul li{

margin: 7px 20px;

}

.content .links ul li a{

font-size: 18px;

line-height: 30px;

border-radius: 5px!important;

}

@media screen and (max-width: 400px){

.wrapper nav{

padding: 0 10px;

}

.content .logo a{

font-size: 27px;

}

.wrapper .search-box{

max-width: calc(100% - 70px);

}

.wrapper .search-box .go-icon{

width: 30px;

right: 0;

}

.wrapper .search-box input{

padding-right: 30px;

}

.dummy-text{

position: absolute;

top: 50%;

left: 50%;

width: 100%;

z-index: -1;

padding: 0 20px;

text-align: center;

transform: translate(-50%, -50%);

}

.dummy-text h2{

font-size: 45px;

margin: 5px 0;

}

COPY 2ND PAGE AND SAVE AS NAME.CSS

3RD. JS FILE DOWNLOAD AND LINK IN HTML PAGE

DOWNLOAD JS SECURITY FILE

IMAGE USED IN WEB PAGE

ANIMATION MOVIE AND ANIMATION PAGE CREATE USING HTML

ANIMATION MOVIE AND ANIMATION PAGE CREATE USING HTML

<html>

<head>

<title>animation Page</title>

<style>

body

{

background-repeat: no-repeat;

background-size: 100% 100%;

background-attachment: fixed;

}

</style>

</head>

<img src= "s.gif" width="8%" />&emsp;&emsp;&emsp;

</marquee>

</body>

</html>

COPY AND SAVE AS NAME.HTML

BACKGROUND IMAGE

1TH IMAGE

2ND IMAGE

3RD IMAGE

4TH IMAGE

Accordion menu using HTMl/CSS

1th page

<!DOCTYPE html>

<head>

<title>PURCHASE BIKES</title>

<style>

body

{

background-repeat:no-repeat;

background-attached: fixed;

background-size:cover;

background-image:url(er.jpg)

}

</style>

</head>

<body>

<a href="#profile" class="btn"><i class="far fa-user"></i>Company Profile</a>

<a href="#">Posts</a>

<a href="#">Picture</a>

</div>

</li>

<a href="#">SHOW BIKE IMAGES</a>

<a href="#">SELECT BIKE</a>

<a href="#">BIKE DOCUMENTATION</a>

</div>

</li>

<a href="#settings" class="btn"><i class="fas fa-cog"></i>Settings</a>

<a href="#">Password</a>

<a href="#">Language</a>

</div>

</li>

<a class="btn" href="#"><i class="fas fa-sign-out-alt"></i>Logout</a>

</li>

</div>

</body>

</html>

copy and save as name.html

2nd PAGE

margin: 0;

padding: 0;

font-family: sans-serif;

list-style: none;

text-decoration: none;

}

.middle{

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%,-50%);

}

.menu{

width: 300px;

border-radius: 8px;

overflow: hidden;

}

.item{

border-top: 1px solid #2980b9;

overflow: hidden;

}

.btn{

display: block;

padding: 16px 20px;

background: #3498db;

color: white;

position: relative;

}

.btn:before{

content: "";

position: absolute;

width: 14px;

height: 14px;

background:#3498db;

left: 20px;

bottom: -7px;

transform: rotate(45deg);

}

.btn i{

margin-right: 10px;

}

.smenu{

background: #333;

overflow: hidden;

transition: max-height 0.3s;

max-height: 0;

}

.smenu a{

display: block;

padding: 16px 26px;

color: white;

font-size: 14px;

margin: 4px 0;

position: relative;

}

.smenu a:before{

content: "";

position: absolute;

width: 6px;

height: 100%;

background: #3498db;

left: 0;

top: 0;

transition: 0.3s;

opacity: 0;

}

.smenu a:hover:before{

opacity: 1;

}

.item:target .smenu{

max-height: 10em;

}

COPY AND SAVE AS NAME.CSS

IMAGE USED IN WEB PAGE

Sign Up Page and Sign In Page using HTML/CSS | Sign in Form AND Sign Up Form in Html/css

1. MAIN SCREEN SIGN PAGE

<!DOCTYPE html>

<head>

<style>

body

{

background-repeat:no-repeat;

background-attached: fixed;

background-size:cover;

background-image:url(image/bk.jpg)

}

</style>

</head>

<body>

<h3>CREATE AN ACCOUNT</h3>

<button>START   <span class="fa fa-arrow-right"></span></button>

</form>

<p>Already have an account? <a class="navigate-btn" href="html signup.html">Login here</a></p>

</div>

</body>

</html>

1 COPY CODE and save as main.html

2. SIGN UP PAGE

<!DOCTYPE html>

<head>

<title>Login Page</title>

<style>

body

{

background-repeat:no-repeat;

background-attached: fixed;

background-size:cover;

background-image:url(image/bk.jpg)

}

</style>

</head>

<body>

<h3>LOGIN HERE</h3>

<a class="navigate-btn" href="#">forgot password</a>

<button>LOGIN   <span class="fa fa-paper-plane"></span></button>

</form>

<p>Don't have an account yet? <a class="navigate-btn" href="mainsign.html">Create an account here</a></p>

</div>

</body>

</html>

2nd COPY CODE AND SAVE AS SIGNUP.HTML

3. STYLE PAGE in css

* {

box-sizing: border-box;

margin: 0;

padding: 0;

}

.container {

height: 100vh;

display: flex;

justify-content: center;

align-items: center;

flex-direction: column;

}

.logo {

height: 100px;

width: auto;

}

.wrapper {

width: 95%;

max-width: 400px;

background: #121212d8;

padding: 40px 40px;

display: flex;

justify-content: center;

align-items: center;

flex-direction: column;

}

.form-container {

display: flex;

justify-content: center;

align-items: center;

flex-direction: column;

width: 80%;

}

.form {

display: flex;

justify-content: center;

align-items: center;

flex-direction: column;

width: 100%;

}

.form-container h3 {

font-size: 33px;

font-weight: bold;

color: #21b6cf;

font-family: 'Roboto', sans-serif;

margin: 5px 0 10px 0;

}

.form-container .form input {

height: 40px;

background: none;

color: #f8f9fa;

border: 2px solid #21b6cf;

border-radius: 15px;

width: 100%;

margin: 8px 0;

padding: 0 10px;

}

.form-container a {

color: white;

text-decoration: none;

}

.form-container form button {

background: none;

padding: 8px 16px;

border-color: #21b6cf;

font-weight: 600;

border-radius: 15px;

color: white;

margin: 15px 0;

}

.form-container p {

color: white;

text-align: center;

}

.form-container .navigate-btn:hover{

color: #21b6cf;

}

.signup h3 {

font-size: 25px;

}

3RD COPY CODE AND SAVE AS STYLE.CSS

1th IMAGE

2ND IMAGE

3RD IMAGE

IMAGES USED IN WEB PAGE.

Wednesday, August 2, 2023

What is HTML ? | What is CSS ? | What is HTML and CSS ?

What is HTML ? | What is CSS ? | What is HTML and CSS ?

HTML Introduction

HTML is the standard markup language for creating Web pages.

What is HTML?

HTML stands for Hyper Text Markup Language
HTML is the standard markup language for creating Web pages
HTML describes the structure of a Web page
HTML consists of a series of elements
HTML elements tell the browser how to display the content
HTML elements label pieces of content such as "this is a heading", "this is a paragraph", "this is a link", etc.
The HTML page are normally saved in external .html files.

HTML Example :-

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

Try It Yourself.

Example Explained

The <!DOCTYPE html> declaration defines that this document is an HTML5 document
The <html> element is the root element of an HTML page
The <head> element contains meta information about the HTML page
The <title> element specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab)
The <body> element defines the document's body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
The <h1> element defines a large heading
The <p> element defines a paragraph

What is an HTML Element?

An HTML element is defined by a start tag, some content, and an end tag:

<tagname> Content goes here... </tagname>

The HTML element is everything from the start tag to the end tag:

<h1>My First Heading</h1>

<p>My first paragraph.</p>

Start tag	Element content	End tag
<h1>	My First Heading	</h1>
<p>	My first paragraph.	</p>
<br>	none	none

CSS Introduction

CSS is the language we use to style a Web page.

What is CSS?

CSS stands for Cascading Style Sheets
CSS describes how HTML elements are to be displayed on screen, paper, or in other media
CSS saves a lot of work. It can control the layout of multiple web pages all at once
External stylesheets are stored in CSS files.

Why Use CSS?

CSS is used to define styles for your web pages, including the design, layout and variations in display for different devices and screen sizes.

CSS Example:

body {
  background-color: lightblue;
}

h1 {
  color: white;
  text-align: center;
}

p {
  font-family: verdana;
  font-size: 20px;
}

Try It Yourself.

CSS Solved a Big Problem

HTML was NEVER intended to contain tags for formatting a web page!

HTML was created to describe the content of a web page, like:

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

When tags like <font>, and color attributes were added to the HTML 3.2 specification, it started a nightmare for web developers. Development of large websites, where fonts and color information were added to every single page, became a long and expensive process.

To solve this problem, the World Wide Web Consortium (W3C) created CSS.

CSS removed the style formatting from the HTML page!

CSS Saves a Lot of Work!

The style definitions are normally saved in external .css files.

With an external stylesheet file, you can change the look of an entire website by changing just one file!

What is Python ? | Python versions

In this tutorial, you’ll understand what Python programming language is and why you should start learning Python today.

What is Python programming language ?

Python is a high-level, general-purpose, interpreted programming language.

1) High-level

Python is a high-level programming language that makes it easy to learn. Python doesn’t require you to understand the details of the computer in order to develop programs efficiently.

2) General-purpose

Python is a general-purpose language. It means that you can use Python in various domains including:

Web applications
Big data applications
Testing
Automation
Data science, machine learning, and AI
Desktop software
Mobile apps

The targeted language like SQL which can be used for querying data from relational databases.

3) Interpreted

Python is an interpreted language. To develop a Python program, you write Python code into a file called source code.

To execute the source code, you need to convert it to the machine language that the computer can understand. And the Python interpreter turns the source code, line by line, once at a time, into the machine code when the Python program executes.

Compiled languages like Java and C# use a compiler that compiles the whole source code before the program executes.

Why Learn Python ?

Python increases your productivity. Python allows you to solve complex problems in less time and fewer lines of code. It’s quick to make a prototype in Python.

Python becomes a solution in many areas across industries, from web applications to data science and machine learning.

Python is quite easy to learn in comparison with other programming languages. Python syntax is clear and beautiful.

Python has a large ecosystem that includes lots of libraries and frameworks.

Python is cross-platform. Python programs can run on Windows, Linux, and macOS.

Python has a huge community. Whenever you get stuck, you can get help from an active community.

Python developers are in high demand.

Python versions

Python has two major versions: 2x and 3x.

Python 2.x was released in 2000. The latest version is 2.7 released in 2010. It isn’t recommended for use in new projects.

Python 3.x was released in 2008. Basically, Python 3 isn’t compatible with Python 2. And you should use the latest versions of Python 3 for your new projects.

Subscribe Our Channel

Search This Blog

Subjects Lists

Friday, August 4, 2023

TRAVEL SITE WEB PAGE USING HTML/CSS

Responsive Webpage using HTML/CSS | Quick Responsive webpage designed using HTML/CSS

ANIMATION MOVIE AND ANIMATION PAGE CREATE USING HTML

Accordion menu using HTMl/CSS

Sign Up Page and Sign In Page using HTML/CSS | Sign in Form AND Sign Up Form in Html/css

Wednesday, August 2, 2023

What is HTML ? | What is CSS ? | What is HTML and CSS ?

What is HTML?

Example Explained

What is an HTML Element?

CSS Introduction

What is CSS?

Why Use CSS?

CSS Example:

CSS Solved a Big Problem

CSS Saves a Lot of Work!

What is Python ? | Python versions

What is Python programming language ?

1) High-level

2) General-purpose

3) Interpreted

Why Learn Python ?

Python versions

Featured Post

Happy Republic Day Wish Using HTML and CSS | 26 January wish using HTML/CSS

Popular Posts

Most Popular

Categories

Tags