Creating Instagram Login page

Using HTML and CSS.

A Project Report Submitted Of

Class: VIII
Section: Berry
By

Mast. Sameer Saaeb

Under the esteemed guidance of:
Mr. Sharad M. Padir.
(Subject Teacher)

Shree Swaminarayan

GURUKUL INTERNATIONAL SCHOOL

NAVI-MUMBAI
Academic Year – 2023-2024

1|Page
 Shree Swaminarayan

GURUKUL INTERNATIONAL SCHOOL

NAVI-MUMBAI

CERTIFICATE

This is certify that the project entitled, “Creating E-commerce website using
HTML & CSS” is bonafied work of Mast. Sameer Saaeb bearing
member id : AF1781 has submitted project report.

Subject Teacher Co-Ordinator I/C Principal

Date: 30/11/23

2|Page
 Acknowledgement
I would like to express my special thanks of gratitude to my teacher Mr. Sharad M.
Padir as well as our principal Mr. P.Haribabu reddy who gave me the golden opportunity to
do this wonderful project on the topic Creating Instagram Login page using HTML and CSS
which also helped me in doing a lot of Research and I came to know about so many new
things I am thankful to them.

Last but not least, I would like to thank all our friends and family for their support,
motivations and encouragement.

3|Page
 INDEX

Sr.no Content Page No. Sign

1. Introduction 5

2. What is HTML5 ? 6

3. What is CSS ? 8

4. Project code 10

5. Output Screenshot 13

6. Conclusion 14

7. Reference 15

4|Page
 INTRODUCTION

|| JAY SWAMINARAYAN ||

I am presenting a project on making an Instagram login page using html and css. In this

project I have explained the languages that I have used to create this program, i.e. html

5 and css. This project also contains the codes which I have used to execute this

program. I have collected information to create this project through books and through

the guidance of my teacher. Beside this I had created many prototypes, and through that

I was able to improve my mistakes and add something new to this webpage. This project

also contains the final result which I had got.

5|Page
 WHAT IS HTML5?

HTML5 was first released in a public-facing form on 22 January 2008,with a major

update and “W3C Recommendation” status in October 2014. Its goals were to improve

the language with support for the latest multimedia and other new features; to keep the

language both easily readable by humans and consistently understood by computers

and devices such as web browsers, parsers, etc., without XHTML’s rigidity; and to

remain backward-compatible with older software. HTML5 is intended to subsume not

only HTML 4 but also XHTML 1 and DOM Level 2 HTML.

HTML5 includes detailed processing models to encourage more interoperable

implementations; it extends, improves, and rationalizes the markup available for

documents and introduces markup and application programming interfaces (APIs) for

complex web applications.For the same reasons, HTML5 is also a candidate for cross-

platform mobile applications because it includes features designed with low-powered

devices in mind.

Many new syntactic features are included. To natively include and handle multimedia

and graphical content, the new <video>, <audio> and <canvas> elements were added,

6|Page
expandable sections are natively implemented through <summary>…</summary> and

<details>…</details> rather than depending on CSS or JavaScript, and support for

scalable vector graphics (SVG) content and MathML for mathematical formulas was

also added. To enrich the semantic content of documents, new page structure elements

such as <main>, <section>, <article>, <header>, <footer>, <aside>, <nav>, and <figure>

are added. New attributes were introduced, some elements and attributes were

removed, and others such as <a>, <cite>, and <menu> were changed, redefined, or

standardized. The APIs and Document Object Model (DOM) are now fundamental

parts of the HTML5 specification, and HTML5 also better defines the processing for

any invalid documents.

7|Page
 WHAT IS CSS ?

Cascading Style Sheets (CSS) is a style sheet language used for describing the

presentation of a document written in a markup language such as HTML or XML

(including XML dialects such as SVG, MathML or XHTML). CSS is a cornerstone

technology of the World Wide Web, alongside HTML and JavaScript.[

CSS is designed to enable the separation of content and presentation, including layout,

colors, and fonts. This separation can improve content accessibility; provide more

flexibility and control in the specification of presentation characteristics; enable

multiple web pages to share formatting by specifying the relevant CSS in a separate .css

file, which reduces complexity and repetition in the structural content; and enable

the .css file to be cached to improve the page load speed between the pages that share

the file and its formatting.

Separation of formatting and content also makes it feasible to present the same markup

page in different styles for different rendering methods, such as on-screen, in print, by

voice (via speech-based browser or screen reader), and on Braille-based tactile devices.

CSS also has rules for alternate formatting if the content is accessed on a mobile device.

8|Page
The name cascading comes from the specified priority scheme to determine which style

rule applies if more than one rule matches a particular element. This cascading priority

scheme is predictable.

The CSS specifications are maintained by the World Wide Web Consortium (W3C).

Internet media type (MIME type) text/css is registered for use with CSS by RFC 2318

(March 1998). The W3C operates a free CSS validation service for CSS documents.

In addition to HTML, other markup languages support the use of CSS including

XHTML, plain XML, SVG, and XUL. CSS is also used in the GTK widget toolkit.

9|Page
 PROJECT CODE

HTML

<!DOCTYPE html>

<html>

<meta name=”viewport” content=”width=device-width,initial-scale=1.0”>

<body>

<h1>INSTAGRAM</h1>

<hr>

<br><div class=”container”>

<br> <h2>LOG IN</h2>

<hr>

<br>

<form style=”background:gray”>

<input type=”text” placeholder=”enter email”>

</form>

10 | P a g e
<br>

<form style=”background:gray”>

<input type=”password” placeholder=”enter password”>

</form>

<br>

<form>

<input type=”checkbox”>Remember me next time</form><br><br>

<button><a href=”instagrampage.html”>LOG IN</a></button>

</div>

<br><br><br><br><br><br>

<h6 style=”color:blue” align=”center”>©Created by Sameer Saaaeb

CSS

.body{

Background:linear-gradient(120deg,black,blue)

H1 {

Text-align:center;

Font-size: 40px;

Font-family:Brush Script MT, cursive;

Background: linear-gradient(

To right,#f32170, #ff6b08,

#cf23cf, #eedd44);

11 | P a g e
 -webkit-text-fill-color: transparent;

-webkit-background-clip: text;

.container{

Height:400px;

Width:400px;

Text-align:center;

Background:#E1D9D1;

Border-radius:25px;

Button{

Background:linear-gradient(

120deg,#f32170, #ff6b08,

#cf23cf, #eedd44) ;

Border:0px;

Width:150px;

Height:35px;

Border-radius:25px;

12 | P a g e
 OUTPUT SCREENSHOT

13 | P a g e
 CONCLUSION

It was a wonderful and learning experience for me while working on this project.

It also gave me real insight into this project topic. This project was a great learning

opportunity for me. Thank you for giving me this project and at last I would like to

tell you that I will never forget the experience which I had got while making this

project. I really gave my 100% effort on this project and I hope that my efforts would

have gone well.

14 | P a g e
 REFERENCE

The following resources were used by me to create this project-

1.Websites

i. Google

ii. Wikipedia

2.Textbook

------- Orange Touchpad class 8 Plus ver. 4.0

15 | P a g e