Letter of certificate

This is to verify that……….., ……… …… and ……… student of ....... Higher Secondary School, Grade: XI, Section: .., has duly completed her Project on the topic Big Bull Foundation using HTML and CSS under the guidance of…….., as for the requirement for Class. XI NEB Exam.

Date of Submission:

Internal Examiner External Examiner

DECLARATION

I hereby, declare that the work reported in this report entitled “Big Bull Foundation” submitted to the Computer Science Department of ... Higher Secondary School is my original work done in the form of partial fulfillment of the requirements of NEB for the +2, under the supervision of……….

Signature

Students Name:

Date: 4/28/2023

ACKNOWLEDGEMENTS

We would like to express my deepest gratitude to my teacher, [……], for guiding me throughout this project and providing me with invaluable feedback and support. Their expertise and dedication have been instrumental in the successful completion of this report.

We would also like to extend my sincere thanks to all the individuals who participated in this project and provided me with their insights and feedback. Your contributions have been crucial in shaping the direction and content of this report.

We also grateful to [BIGBULL FOUNDATION] for providing me with the opportunity to work on this project and for their support and cooperation throughout the process.

Finally, we would like to thank my family and friends for their unwavering support and encouragement throughout this journey. Their love and support have been a constant source of motivation and inspiration.

Students Name:

Kathmandu, Nepal

Date: 4/28/2023

Contents

Chapter 1: Introduce to computer 7

1.1: introduction to the project 7

Importance of report 7

Objective of the report 8

Chapter 2: Introduction to HTML. 9

2.1 About HTML. 9

2.2 Types of tags. 9

2.3 Basic Structure of HTML: 10

2.4 character formatting. 11

Different types of link: 18

2.8 frame and form.. 20

Internal style sheet: 22

External style sheet: 23

Chapter 3 introduce to project 25

Introduction. 25

SCOPE. 26

Limitations. 26

Chapter 4: HTML CSS Coding and Output 28

Chapter 1: Introduce to computer

1.1: introduction to the project

The BigBull Foundation is a company that specializes in digital security services. They recently launched a website to showcase their services and provide information about their organization. The website was created using HTML, CSS, and JavaScript with the help of the Visual Studio Code editor. the website has a simple and user-friendly design. It is easy to navigate, and the content is well organized. The homepage provides an overview of the company's services and a brief introduction to their mission. The website also includes pages dedicated to each of their services, including cybersecurity, digital forensics, and risk assessment. These pages provide more detailed information about the services offered by the Big Bull Foundation. the website also includes a blog section that features articles about digital security trends and news. The blog is regularly updated, and the articles are well-researched and informative. Visitors can also subscribe to the blog to receive regular updates on the latest digital security news and trends.

In today's world, digital security is more important than ever. With the increasing reliance on digital technology, cyber threats have become a significant concern for individuals and businesses alike. The BigBull Foundation is contributing to the fight against cyber threats by providing top-notch digital security services. the BigBull Foundation's cybersecurity services include network security, web application security, and email security. They also offer digital forensics services to help companies investigate cyberattacks and data breaches. Additionally, they provide risk assessment services to help companies identify vulnerabilities in their digital systems and develop strategies to mitigate those risks.

While the website is well-designed and informative, there is room for improvement. The website could benefit from more visual elements to make it more engaging. Additionally, the blog section could be improved by adding more multimedia elements, such as images and videos, to accompany the articles.

Importance of report

The project allows us to develop our skills in web development using HTML and CSS.
We gain experience in using tools like Visual Studio Code editor to create and design a website.
We learn about the importance of digital security in today's world and how it impacts individuals and organizations.
The project provides an opportunity to showcase our skills and creativity in designing a website that is both visually appealing and functional.

· The project allows us to gain experience in testing and debugging a website to ensure that it functions properly and meets the desired specifications.

Objective of the report

Provide a comprehensive overview of the HTML and CSS project, including its purpose, design, and functionality.
Highlight the importance of the project in the context of web development and digital literacy.
Outline the steps involved in creating the project, including the use of HTML and CSS coding languages.
Discuss any challenges or obstacles encountered during the project and how they were overcome.
Offer recommendations for improving the project's design, functionality, and user experience.
provide a valuable learning experience for students interested in web development and coding.

Chapter 2: Introduction to HTML

2.1 About HTML

The inventor of World Wide Web (Tim Berners) also was the person who developed HTML in the 1990’s. The web is based on that language. HTML stands for Hyper Text Markup Language. It is a language for describing web pages. It is a language used for creating web pages containing text, graphics, animation, sound, video and interactive elements.

It is a standard set of codes, called tags, used to format all web pages. The HTML provides a set of rules defining the way tags can be used and combined. It is a document containing HTML tags and plain text. Learning the HTML means learning the tags and rules.

HTML elements forms the buildings blocks of all websites. HTML allows images and objects to be embedded and can be used to create interactive forms. It provides a means to create structured documents by denoting structural semantics for texts such as headings, paragraphs, lists, links, quotes and other items.

2.2 Types of tags

The HTML tags are the keywords surrounded by angle brackets; used to describe the content of web page. It has three sections:

i) Tag name

ii) Attributes

iii) 2.2 Types of tags Value of attributes

Example:

(In this example the BODY is the tag name, bgcolor and text are the attributes and the green are the values.)There are two types of tags:

i) Paired tags :

It has two parts the opening and the closing.

· An opening tag is a tag that indicates the start of the HTML commands. It always begins with <….>.

· A closing tag is a tag that indicates the end of the HTML commands. It always begin with </…..>.

ii) Singular tags:

It is a single type of tag that does not have any ending tag. It issues an HTML command without enclosing any text in the page.

Example: <br>, <hr> etc.

2.3 Basic Structure of HTML:

<HTML>

<HEAD>

</HEAD>

<BODY>

………………………………

……………………………..

</BODY>

</HTML>

Attributes used in body tag:

Attributes	Values	Description
Bgcolor	Color name/ color code	To specify the background color of webpage
Background	url of image	To specify image file background image of page
Text	Color name/ color code	To specify the color of text in a webpage
Link	Color name/ color code	To specify the color of hyper link before clicking
Alink	Color name/ color code	To specify the color of active link
Vlink	Color name/ color code	To specify the color of visited link
Topmargin	Number in pixel	To specify top margin of page
Bottommargin	Number in pixel	To specify bottom margin of page

2.4-character formatting

Paragraph

The <p> tag is used to specify the paragraph. When the user uses this tag the computer automatically adds a blank line before and after writing a paragraph.

Attribute	Value	Description
Align	Left/right/center	To specify the alignment of the paragraph

{Note: If no alignment is defined for the paragraph then by default the paragraph comes on the left side.}

Example:

<Html>

<Head>

</Head>

<Body>

……………………………………………………

…………………………………………………

.</p>

</body>

</html>

Heading

It is a simple form of text formatting according to heading’s level. It contains of six elements (H1 to H6). To get the biggest heading <H1> tag is used in front of the text the user desires to make as a heading and ends it with </H1> tag; likewise if a smaller heading is needed then <H2>…</H2> tag is used and for even smaller and smaller headings <H3>/<H4>/<H5>.

To create the smallest heading <H6> tag is used.

Example:

<html>

<head>

</head>

</body>

</html>

Text formatting

There are various types of formatting tags to display html tags in different forms and they are as follows:

Tag	Description
<b>	Defines bold text
<i>	Defines italicized text
<em>	Defines emphasized text
<small>	Defines smaller text
<strong>	Defines important text
<sub>	Defines subscript
<sup>	Defines superscript
<u>	Defines underlined text
<strike>	Defines a strike through text
<tt>	Defines teletype text
<small>	Defines font size one point smaller
<big>	Defines font size one point bigger
<abbr>	Defines an abbreviation
<q>	Defines inline quotation
<blockquote>	Defines a section that is quoted from another source
<bdo>	Defines the text direction.
<dfn>	Defines the definition term
<cite>	Defines citation
<acronym>	Defines acronym
<address>	Defines an address element
<pre>	Defines preformatted text

Font

<Font> this tag is used to specify the font color, size and name.

Attributes	Values	Description
Face	Font name	To specify the font of text
Color	Color name/color code	To specify the color of text
Size	1 to 7	To specify the font size, default is 3.

Horizontal Ruler:

<Hr> tag defines a horizontal ruler. It is an empty tag. It’s attributes are:

Attributes	Values	Description
Size	Number in pixels	To specify the thickness of line
Width	% or number in pixel	To specify the width of line
Align	Left/right/center	To specify alignment
Color	Color code/ color name	To specify the color of line

Marquee:

<marquee> tag is used to animate(scroll) text or image in different direction with different behaviors.

Attributes	Values	Description
Direction	Left/right/up/down	To specify the direction of scroll
Behavior	Scroll/slide/alternate	To specify the marquee behavior
Scrollamount	Number in pixel	To specify scroll amount in pixel
Bgcolor	Color name/color code	To specify background color for marquee
Loop	Number or infinite	To specify number of repetition

Example:

2.5 list

Lists are used to group related pieces of information together, so they are clearly associated with each other and are easy to read. The html has three types of list:

1. Ordered list

2. Unordered list

3. Description list

Ordered list:

It is a type of list that is used to group a set of related items in a specific order. This is defined in html by <ol>…….</ol> tag. Every item in this list begins with a sequence number. Each item is inserted with <li>…</li> tag that creates a line break and inserts a number at the beginning.

Attributes	Values	Description
Type	1/i/I/a/A	Type of numbered list.
Start	Number	Starting value of the numbering.

Unordered list:

It can be also known as bulleted list. This list groups a set of related items together but does not list it in a particular order. It is defined by <ul>…..</ul> tag. In this list every item begins with a bulletin mark in the beginning.

Attributes	Values	Descriptions
Type	Disc/circle/square	Used to specify the type of bulleted list.

Description list:

It is a type of list that is used to display name/values pairs such as their terms and definitions etc. This list is different from other kinds of list, as they use name and values instead of list items. Description list is defined by <dl>….</dl> elements. The <dl> tag is used with conjunction <dt></dt> to define names/terms and <dd></dd> to define <terms/values>.

Nested list

A nested list is a list occurring in the bound of another list nesting the new list inside the original.

Example:

<html>

<head>

</head>

<body>

<b>classificationsoftware</b> <ol>

</ol>

</ul>

</ol>

</body>

</html>

2.6 Hyper link

Hyperlink is a component of web that is used to jump from one piece of information to another. The piece of information can either be of the same page or on a different web page. When the cursor is moved over to a link then the cursor turns into a small hand.

An anchor<a> element is used to define a link and its important attribute is the href that indicates the link’s destination.

Attributes	Values	Descriptions
Href	url of webpage or name of bookmark.	To indicate the linked destination
Target	_blank _parent _self _top	To specify where to open the linked document.
Name(or id)	Section name(user defined)	For specifying specific point on a page.

Different types of link:

External link:

It is a link used to jump to different webpages or websites.

Example:

<html>

<head>

<title> external link</title>

</head>

<ul>

<li><a href=”http://www.google.com”>www.google.com</li>

</ul>

</body>

</html>

Internal link:

It is a link used to jump from one part of page to another part of the same page. For this a location on a page is marked by using name attribute in a <a> tag.

Example:

<html>

<head>

<title> internal link</title>

</head>

<body>

<a href=”#book”>click here to go to books </a>

<pre>

Kung Fu panda

</pre>

<a href=”#movie”> click here to go to movie </a>

<pre>

Fault in our stars

</pre>

</body>

</html>

Mail link:

It is used to link e-mail address. The value of href attribute for mail link is mailto:emailsddress

Example:

<a href=”sudipbhatta2222@gmail.com”>sudipbhatta2222@gmail.com </a>

2.7 table

Table is a two dimensional structure with rows and columns. <table>…….</table> tag defines the table. In a table <tr> tag divides the table into rows ,<td> tag divides the row in data cells and the <th> tag defines the header information of the table. To merge two or many rows together in a table rowspan is used likewise for the column colspan is used.

Example:<html>

<head>

<title> table <title>

</head>

<body>

<tr>

<throwspan=2>…. </th>

<throwspan=2>…..</th>

<thcolspan=2>……</th>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

2.8 frame and form

Frame:It is used to divide the browser window into number of rectangular pane so that different pages can be added to same window. Pages containing frame does not use <body> tag.

The <frameset> element specifies how many columns or rows there will be in the frameset and how much %of space will each of them occupy.

Example:

<html>

<head>

</head>

</frameset>

</html>

Form:

An html form is a part of webpage that includes areas where user can enter information to be sent back to the webpage designer or any other email address that is specified on the page. Simply it is an interface for passing data to server. It contains elements like :

1. <input>

2. <text area>

3. <select>

4. <fieldset>

2.9 CSS

CSS stands for cascading style sheets that allows us to specify the style of our page elements differently from the structure of the original document. This separation of structure makes easy to manage and easy to change the style of the document.

The css has its different types such as:

Inline style:

It is the one in which an individual elements style is declared using the style attributes.

Example:

<html>

<head>

<title> inline style</title>

</head>

<body>

</body>

</html>

Internal style sheet:

It is used when an entire document has an unique style. It is defined by the <style> tag in the head section.

Example:

<html>

<head>

<title> internal style sheet </title>

H1 {font-family: Arial, sans-serif}

Em {background-color:#800ff; color:white}

P {font-size:36pt; color:green}

.blue {color: blue}

</style>

<body>

<hr>

<p>…………………….

……………. </p>

<p class=”blue”>…………….

</body>

</html>

External style sheet:

It gives the whole website a uniform look. Separate pages of sites can utilize the same style sheet. To change the style of the whole work changing only a single file is enough nut for that all the websites must be linked with the help of <link> tag.

Example:

A {text-decoration: none}

A: hover {text-decoration: underline; margin-left: 5cm}

Li EM {color: red; font-weight: bold}

UL {margin-left: 2cm}

UL UL {text-decoration: underline; margin-left: 5cm}

[save the file with .css extension as stylesheet.css]

[now creating a new web page]

<html>

<head>

<title> external style sheet </title>

</head>

<body>

<ul>

<ul>

</ul>

</ul>

</body>

</html>

Chapter 3 introduce to project

Introduction

The Big Bull Foundation is a hypothetical company that provides various services related to digital security. The company is imagined to exist in response to the growing demand for cybersecurity solutions and the increasing prevalence of cyber threats in today's digital age.

The Big Bull Foundation offers a range of digital security services, including network security, web application security, cloud security, and mobile device security. The company also provides consulting services to help clients develop and implement effective security strategies. one of the key priorities of the Big Bull Foundation is to ensure the privacy and security of its clients' sensitive data. With the growing frequency and sophistication of cyber-attacks, the company recognizes the need for robust security measures to protect against data breaches, hacking attempts, and other malicious activities.

To achieve this goal, the Big Bull Foundation employs a team of highly skilled cybersecurity professionals who are well-versed in the latest security technologies and best practices. The company also invests heavily in research and development to stay ahead of emerging threats and develop innovative solutions that meet the evolving needs of its clients. In addition to its security services, the Big Bull Foundation is also committed to raising awareness about the importance of digital security. The company believes that education is key to preventing cyber-attacks and encourages its clients to take a proactive approach to security by implementing best practices and staying informed about the latest threats.

The Big Bull Foundation is a hypothetical company that embodies the importance of digital security in today's world. Its commitment to providing top-notch security services and raising awareness about cybersecurity issues make it a valuable resource for organizations and individuals looking to safeguard their digital assets.

SCOPE

It’s scope are

The BigBull Foundation aims to provide a range of services related to digital security and privacy.
This includes, but is not limited to, consulting on security strategies, conducting security audits, offering software solutions, and providing training and education on best practices.
The company's target audience includes individuals, small businesses, and large corporations who are looking to improve their digital security measures.
The services offered by the BigBull Foundation are designed to be customizable to fit the specific needs of each client.
The company aims to stay up-to-date with the latest trends and developments in digital security to ensure that they can provide the most effective and relevant services.
The BigBull Foundation may collaborate with other companies or experts in the field to offer specialized or niche services.

Limitations

1. Resource constraints: The company can face limitations in terms of manpower, budget, or technology.

2. Regulatory limitations: The company have to operate within certain legal and regulatory frameworks, which could limit the scope of their services.

3. Competition: The company can face competition from other players in the market, which could limit their market share.

4. Geographic limitations: The company can be limited in terms of the geographic regions where they can operate due to factors such as language, culture, or infrastructure.

5. Customer preferences: The company's services is not align with the preferences or needs of all customers, which could limit their customer base.

6. Technology limitations: The company may face limitations in terms of the technology they use, which could impact the quality or scope of their services.

Chapter 4: HTML CSS Coding and Output

HEAD

<!DOCTYPE html>

<html lang="en">

<head>

<link rel="stylesheet" href="style.css">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />

<link rel="stylesheet" href="path/to/your/css/file.css" />

<script src="https://kit.fontawesome.com/14a3779ba5.js" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.2.1/css/fontawesome.min.css">

<link rel="preconnect" href="https://fonts.googleapis.com">

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Kaushan+Script&family=Poppins:wght@100&display=swap" rel="stylesheet">

<link rel="preconnect" href="https://fonts.googleapis.com">

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Kaushan+Script&family=Poppins:wght@100&display=swap" rel="stylesheet">

<meta name="viewport" content="width=device-width, initial-scale=1">

<script src="https://cdn.jsdelivr.net/gh/cferdinandi/smooth-scroll/dist/smooth-scroll.polyfills.min.js"></script>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<title>Big_Bull</title>

</head>

BODY

<body>

</body>

</html>

<body>

<section id="banner">

<img src="logo.png" class=" logo">

<div class="banner-text ">

<H1> Big Bull Foundation </H1>

<p> Protecting Your Digital World with Unbreakable Defense </p>

<div class="banner-btn">

<a href="#"> <span> </span>About Us </a>

<a href="#"> <span> </span>Read more </a>

</div>

HOME

</section>

<div id="sideNav">

<nav>

<ul>

<li> <a href="#banner">HOME </a> </li>

<li> <a href="#feature"> FEATURES </a> </li>

<li> <a href="#service"> SERVICES </a> </li>

<li> <a href="#testimonial"> TESTIMONIAL </a> </li>

<li> <a href="#footer"> MEET US</a> </li>

</ul>

</nav>

</div>

<div id="manuBtn">

<img src="menu-removebg-preview.png" id="menu">

</div>

FEARURES

<section id="feature">

<div class="title-text">

<p>Features</p>

<h1>Why Choose Us</h1>

</div>

<div class="feature-box">

<div class="feature">

<h1>Experienced Staff </h1>

<div class="feature-desc">

<div class="feature-icon"> <i class="fa fa-shield-halved"></i> </div>

<div class="feature-text">

<p>Finally, for music service inductees, there must be constructive programmes of collaborative work with more experienced staff</p>

</div>

<h1>Fast Service </h1>

<div class="feature-desc">

<div class="feature-icon"> <i class="fa fa-truck-fast"></i> </div>

<div class="feature-text">

<p>Free ad-supported streaming television, commonly abbreviated FAST, is a category of streaming television services which are available to consumers without a paid subscription

</p>

</div>

<h1> Customer Privacy </h1>

<div class="feature-desc">

<div class="feature-icon"> <i class="fa fa-shield"></i> </div>

<div class="feature-text">

<p>Consumer privacy, also known as customer privacy, involves the handling and protection of the sensitive personal information provided by customers in the course of everyday transactions</p>

</div>

<div class="feature-img">

<img src="staff.jpg">

</div>

</section>

SERVICES

<section id="service">

<div class="title-text">

<p>Services</p>

<h1>We Provide Better</h1>

</div>

<div class="service-box">

<div class="single-service">

<img src="pic1.jpg" alt="Service 1">

<div class="overlay"></div>

<div class="service-desc">

<h3> Server Security </h3>

<hr>

<p> Server security deals with tools and processes around the protection of valuable corporate data </p>

</div>

<div class="single-service">

<img src="pic2.jpg" alt="Service 2">

<div class="overlay"></div>

<div class="service-desc">

<h3> Fire Wall protection </h3>

<hr>

<p> A firewall is a security system designed to prevent unauthorized access into or out of a computer network. </p>

</div>

<div class="single-service">

<img src="pic3.jpg" alt="Service 3">

<div class="overlay"></div>

<div class="service-desc">

<h3> Cyber Security </h3>

<hr>

<p> Cyber security is the practice of defending computers, networks, and data from malicious attacks </p>

</div>

<div class="single-service">

<img src="pic4.jpg" alt="Service 4">

<div class="overlay"></div>

<div class="service-desc">

<h3> Hacking </h3>

<hr>

<p> we will hack your wife heart and then your bank account </p>

</div>

</section>

TESTOMINAL

<section id="testimonial">

<div class="title-text">

<p>TESTIMONIAL</p>

<h1>What Clint Says</h1>

</div>

<div class="testimonial-row">

<div class="testimonial-col">

<div class="user">

<img src="user1.jpeg">

<div class="user-info">

<h4>Sonika situla <i class="fa-brands fa-twitter"></i>

</h4>

<small> @soneeka </small>

</div>

<p> Cyber security is the practice of defending computers, servers, mobile devices, electronic systems, networks, and data from malicious attacks</p>

</div>

<div class="testimonial-col">

<div class="user">

<img src="user2.jpg">

<div class="user-info">

<h4>Sitesma Tamang <i class="fa-brands fa-twitter"></i>

</h4>

<small> @sanumaya </small>

</div>

<p> Cyber security is the practice of defending computers, servers, mobile devices, electronic systems, networks, and data from malicious attacks</p>

</div>

<div class="testimonial-col">

<div class="user">

<img src="user3.jpg">

<div class="user-info">

<h4> Kreetika Cheetri <i class="fa-brands fa-twitter"></i>

</h4>

<small> @waglenani </small>

</div>

<p> Cyber security is the practice of defending computers, servers, mobile devices, electronic systems, networks, and data from malicious attacks</p>

</div>

</section>

FOOTER

<section id="footer" >

<img src="footer.jpg" class="footer-img" >

<div class="title-text">

<p>CONTACT</p>

<h1> Visit us</h1>

</div>

<div class="footer-row">

<div class="footer-left">

<h1> Opening Hours</h1>

<p> <i class="fa-solid fa-clock"></i> Sunday to Friday - 10am to 4pm</p>

</div>

<div class="footer-right">

<h1> Get in touch </h1>

<p> #30 abc colony, xyz NP <i class="fa-solid fa-map-pin"></i></p>

<p>Bigbull.co@gmail.com <i class="fa-solid fa-envelope"></i></p>

<p> +977 6969696969 <i class="fa-solid fa-phone"></i></p>

</div>

<div class="social-links">

<i class="fa-brands fa-facebook"></i>

<i class="fa-brands fa-instagram"></i>

<i class="fa-brands fa-twitter"></i>

<i class="fa-brands fa-youtube"></i>

<p> <i class="fa-regular fa-copyright"></i> Copyright Big Bull company</p>

</div>

</section>

<script>

var menuBtn = document.getElementById("manuBtn");

var sideNav = document.getElementById("sideNav");

var menu = document.getElementById("menu");

sideNav.style.right = "-250px";

menu.onclick = function() {

if (sideNav.style.right == "-250px") {

sideNav.style.right = "0";

menu.src="close.png"

} else {

sideNav.style.right = "-250px";

menu.src="menu-removebg-preview.png"

}

};

var scroll = new SmoothScroll('a[href*="#"]', {

speed: 1000,

speedAsDuration: true

});

</script>

</body>

</html>

CSS

margin: 0%;

padding: 0%;

font-family: 'Kaushan Script', cursive;

}

#banner {

background-image : linear-gradient( rgba(0,0,0,0.5) , #451663 ), url(/background\ img.jpg);

background-size: cover;

background-position: center;

height: 100vh;

}

.logo {

width: 140px ;

position: absolute;

top: 4%;

left: 10%;

}

.banner-text {

text-align: center;

color: #fff;

padding-top: 180px ;

}

.banner-text h1 {

font-size: 130px;

font-family: 'Kaushan Script', cursive;

}

.banner-text p {

font-size: 20px;

font-style: italic;

font-family: 'Kaushan Script', cursive;

}

.banner-btn{

margin: 70px auto 0 ;

}

.banner-btn a {

width: 150px;

text-decoration: none;

display: inline-block;

margin: 0 10px;

padding: 12px 0;

color: #fff;

border: .5px solid #fff;

position: relative;

z-index: 1;

transition:color 0.5s;

}

.banner-btn a span {

width: 0%;

height: 100%;

position: absolute;

top: 0;

left: 0;

background: #fff;

z-index: -1;

transition: 0.5s;

}

.banner-btn a:hover span {

width: 100%;

}

.banner-btn a:hover {

color: rgb(0, 0, 0);

}

#sideNav {

width: 200px;

height: 100vh;

position: fixed;

right: -250px;

top: 0;

background: #451663;

z-index: 2;

transition: 0.5s;

}

nav ul li {

list-style: none;

margin: 50px 20px;

}

nav ul li a {

text-decoration: none;

color:#fff ;

}

#manuBtn{

width: 50px;

height: 50px;

background: #451663;

text-align: center;

position: fixed;

right: 30px;

top: 20px;

border-radius: 3px;

z-index: 3;

cursor: pointer;

}

#manuBtn img{

width: 20px;

margin-top: 15px;

}

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

.banner-text h1 {

font-size: 44px;

}

.banner-btn af{

display: block;

margin: 20px auto;

}

/*-- Features--*/

#feature {

width: 100%;

padding: 70px 0;

}

.title-text {

text-align: center;

padding-bottom: 70px;

}

.title-text p {

margin: auto;

font-size: 20px;

color: #451663;

font-weight: bold;

position: relative;

z-index: 1;

display: inline-block;

}

.title-text p::after {

content: '';

width: 50px;

height: 35px;

background: linear-gradient(#451663, #fff);

position: absolute;

top: -20px;

left: 0;

z-index: -1;

transform: rotate(10deg);

border-top-left-radius: 35px;

border-bottom-right-radius: 35px;

}

.title-text h1 {

font-size: 50px;

}

.feature-box{

width: 80%;

margin: auto;

display: flex;

flex-wrap: wrap;

align-items: center;

text-align: center;

}

.feature{

flex-basis: 50%;

}

.feature-img{

flex-basis: 50%;

margin: auto;

}

.feature-img img{

width: 70%;

border-radius: 10px;

}

.feature h1{

text-align: left;

margin-bottom: 10px;

font-weight: 100;

color: #451663;

}

.feature-desc{

display: flex;

align-items: center;

margin-bottom: 40px;

}

.feature-icon .fa {

width:50px ;

height: 50px;

font-size: 30px;

line-height: 50px;

border-radius: 8px;

color: #451663;

border: 1px solid #451663;

}

.feature-text p{

padding: 0 20px;

text-align: initials;

}

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

.title-text h1 {

font-size: 35px;

}

.feature{

flex-basis: 100%;

}

.feature-img{

flex-basis: 100%;

margin: auto;

}

.feature-img img{

width: 100%;

}

/*-------- services------------*/

#service {

width: 100%;

padding: 70px 0;

background: #efefef;

}

.service-box{

width:80% ;

display: flex;

flex-wrap: wrap;

justify-content: space-around;

margin: auto;

}

.single-service{

flex-direction: 48%;

text-align: center;

border-radius: 7px;

margin-bottom: 20px;

color: #fff;

position: relative;

}

.single-service img{

width: 100%;

border-radius: 7px;

}

.overlay{

width: 100%;

height: 100%;

position: absolute;

top: 0;

border-radius: 7px;

cursor: pointer;

background: linear-gradient(rgb(0,0,0,0.5),#451663);

opacity: 0;

transition: 1s;

}

/*- that effect on picture--*/

.single-service:hover .overlay {

opacity: 1;

}

.service-desc{

width: 80%;

position: absolute;

bottom: 0%;

left: 50%;

opacity: 0;

transform: translateX(-50%);

transition: 1s;

}

hr{

background: #fff;

height: 2px;

border: 0;

margin: 15px auto;

width: 60;

}

.service-desc p{

font-size: 17px;

}

.single-service:hover .service-desc{

bottom: 40%;

opacity: 1;

}

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

.single-service{

flex-basis: 100%;

margin-bottom: 30px;

}

.service-desc p{

font-size: 12px;

}

.hr{

margin: 5px auto;

}

/*--- testimonial ----*/

#testimonial{

width: 100%;

padding: 70px 0;

}

.testimonial-row{

width: 80%;

margin: auto;

display: flex;

justify-content: space-between;

align-items: flex-start;

flex-wrap:wrap ;

}

.testimonial-col{

flex-basis: 28%;

padding: 10px;

margin-bottom: 30px;

border-radius: 5px;

box-shadow: 10px 20px 3px #00968814;

cursor: pointer;

transition: transform .5s;

}

.testimonial-col p{

font-size: 15px;

}

.user{

display: flex;

align-items: center;

margin: 20px 0;

}

.user img{

width: 20px;

margin-right: 20px;

border-radius: 3px;

}

.user-info. fa-brands {

margin-left: 10px;

color: #27c0ff;

font-size: 20px;

}

.user-info small{

color: #451663 ;

}

.testimonial-col :hover{

transform: translateY(-7px) ;

}

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

.testimonial-col {

flex-basis: 100%;

}

/*-- Footer section --*/

#footer{

padding: 100px 0 20px;

background: #efefef;

position: relative;

}

.footer-row{

width: 80%;

margin: 0 auto;

display: flex;

justify-content: space-between;

flex-wrap: wrap;

}

.footer-left, .footer-right{

flex-basis: 45%;

padding: 10px ;

margin-bottom: 20px;

}

.footer-right{

text-align: right;

}

.footer-row h1{

margin: 10px 0;

}

.footer-row p{

line-height: 35px ;

}

.footer-left .fa-solid, .footer-right .fa-solid{

font-size: 20px;

color: #451663 ;

margin: 10px;

}

.footer-img{

max-width: 10000px;

opacity: 0.1;

position: absolute;

left: 50%;

top: 60%;

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

}

.social-links{

text-align: center;

}

.social-links .fa-brands{

height: 40px;

width: 40px;

font-size: 20px;

line-height: 40px;

border: 1px solid #451663;

margin: 40px, 5px 0;

color: #451663;

cursor: pointer;

transition: .5s;

}

.social-links .fa-brands:hover{

background: #451663;

color: #fff;

transform: translateY(-7px);

}

.social-links{

font-size: 20px;

margin-top: 20px;

}

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

.footer-left, .footer-right{

flex-basis: 100%;

font-size: 14px;

}

OUTPUT

CONCLUSION

In conclusion, the Big Bull Foundation website has been successfully created to showcase the company's services and provide information about the organization. The website was designed using HTML, CSS, and JavaScript with the help of the Visual Studio Code editor. The report provided an overview of the website's structure, features, and functionality. Additionally, it discussed the importance of digital security in today's world and how the Big Bull Foundation is contributing to it.

The website has a clean and user-friendly interface that allows visitors to easily navigate through the pages and access the information they need. It provides detailed descriptions of the company's services and includes an FAQ section to address common queries. The website is also optimized for different devices, making it easily accessible to a wider audience. there are certain limitations that should be addressed to improve the website's functionality and user experience. These include the need for more interactive elements, such as videos and animations, and the inclusion of social media links to increase engagement and connect with customers.

Overall, the creation of the BigBull Foundation website has provided an opportunity to showcase the company's services and contribute to the field of digital security. By implementing the recommendations mentioned in this report, the website can be further improved to enhance the user experience and attract more customers.

REFERENCES

· Course book

· Internet

· Subject Teacher

· Seniors

Header Ads

"Project Report of Computer Science: Web Development using HTML and CSS || Class 11 || NEB

Chapter 2: Introduction to HTML

Related Posts

Post a Comment

No comments

Popular Posts

Sponsor

Categories

Comments

Random Posts

Recent Posts

Popular Posts