Scribd
Upload
33 views8 pages

HTML Test

The document discusses various web development concepts and implementations including: 1) Creating a registration page using CSS, designing event cards and tables using CSS properties like flexbox, designing pages using Bootstrap components like modals, carousels and implementing React features like components, props and routing. 2) Styling HTML elements like headings and forms, and adding responsive designs. 3) Displaying event details in cards and using CSS grid layout for responsive design.

Uploaded by

Achal Kumar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
33 views8 pages

HTML Test

The document discusses various web development concepts and implementations including: 1) Creating a registration page using CSS, designing event cards and tables using CSS properties like flexbox, designing pages using Bootstrap components like modals, carousels and implementing React features like components, props and routing. 2) Styling HTML elements like headings and forms, and adding responsive designs. 3) Displaying event details in cards and using CSS grid layout for responsive design.

Uploaded by

Achal Kumar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 8

Create a web page by use of all type of CSS for registration

Design a webpage by use of card to display an event information


Design table for student infromatión with use of row span and coll span
Implementation of ess flexbox
Design a web page to show the use of bootstrap modal
Design a web page to show the use of carousal
Design a web page by use of react JS function component
Design a web page by use of react J class component
Implement props in react
Implement pure react component
Design a web page for react router implementation
***********************************************************************************
******************

<!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>Document</title>
</head>
<style>
h1{
border-style: solid;
border-color: brown;
}
h2{
border-style: dashed;
border-color: chartreuse;
}
h3{
border-style: groove;
border-color: darkorange;
font-family: monospace;
}
h4{
border-style: inset;
border-color: blueviolet;
font-family: Arial, Helvetica, sans-serif;
}
h5{
border-style: double;
border-color: chocolate;
font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif ;
}
h6{
border-style: initial;
border-color: gold;
font-family: 'Times New Roman',Times,serif;
}

</style>
<body>
<center> <h1>HELLO ITS ME AMOL</h1>
<h2> MY NAME MR AMOL</h2>
<H3>VILLEGE LONALVALA HILL STATION</H3>
<H4>OSKARWADI PAVBHAJI CENTER IN FAMOUS MAHARASHTRA STATE</H4>
<H5>I NEED LEARN ENGLISH OKK</H5>
<H6>I WANT TO BOOTSTRAP FRAMWORK DOWNLODE</H6>
</body>
</html>

***********************************************************************************
****************************
/* Default styles */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}

body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
color: #333;
}

h1 {
text-align: center;
margin: 1rem 0;
}

form {
max-width: 500px;
margin: 0 auto;
background-color: #fff;
padding: 2rem;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

label {
display: block;
font-weight: bold;
margin: 1rem 0;
}

input {
display: block;
width: 100%;
padding: 0.5rem;
border: none;
border-radius: 5px;
margin-bottom: 1rem;
font-size: 1rem;
}

button {
display: block;
margin: 1rem auto 0;
padding: 0.5rem 1rem;
border: none;
border-radius: 5px;
background-color: #333;
color: #fff;
font-size: 1rem;
cursor: pointer;
}

/* Responsive styles */
@media (max-width: 600px) {
form {
padding: 1rem;
}
}

/* Hover effect */
button:hover {
background-color: #444;
}

/* Form validation */
input:invalid {
border: 2px solid #ff6666;
}

input:valid {
border: 2px solid #66ff66;
}

/* Animation */
button {
transition: all 0.2s ease-in-out;
}

button:hover {
transform: scale(1.1);
}

***********************************************************************************
*****************

<!DOCTYPE html>
<html>
<head>
<title>Events</title>
<link rel="stylesheet" href="style2.css" />
</head>
<body>
<header>
<h1>Upcoming Events</h1>
</header>

<main>
<div class="event-card">
<img src="https://www.unigreet.com/wp-content/uploads/2021/05/mahatma-
basweshwar-jayanti-pic.jpg" alt="Event 1" />
<div class="event-details">
<h2>Event 1</h2>
<p>also known as Basavanna] flourished in the 12th century in Karnataka.
He was a Prime Minister to king Bijjala who ruled from 1157 to 1167 over Kalyana, a
city of historic importance. Basava was indeed a great prophet for in him we find
the combination of rare qualities. He was a mystic by temperament, an idealist by
choice, a statesman by profession, a man of letters by taste, a humanist by
sympathy and a social reformer by conviction. .</p>
<button>Learn More</button>
</div>
</div>

<div class="event-card">
<img src="https://th.bing.com/th/id/OIP.eWjxa22t8EX0Ua-Rk6wBzQHaEK?
w=324&h=182&c=7&r=0&o=5&dpr=1.3&pid=1.7" alt="Event 2" />
<div class="event-details">
<h2>Event 2</h2>
<p>Nullam id nunc vel odio porttitor posuere sed euismod neque. Donec vel
turpis et nibh pharetra gravida.</p>
<button>Learn More</button>
</div>
</div>

<div class="event-card">
<img src="https://th.bing.com/th/id/OIP.1-57Y2-sbHtiexdmtk9lPwHaJd?
pid=ImgDet&w=199&h=253&c=7&dpr=1.3" alt="Event 3" />
<div class="event-details">
<h2>Event 3</h2>
<p>Phasellus nec gravida mauris. Nullam bibendum, justo nec varius
lobortis, nisl ex imperdiet lacus, id scelerisque turpis arcu non justo.</p>
<button>Learn More</button>
</div>
</div>
</main>
</body>
</html>

***********************************************************************************
**********

/* Default styles */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}

body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
color: #333;
}

header {
text-align: center;
padding: 2rem;
background-color: #333;
color: #fff;
}

h1 {
margin: 0;
font-size: 2rem;
}

main {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
max-width: 1000px;
margin: 2rem auto;
}

.event-card {
display: flex;
flex-direction: column;
width: 300px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
margin-bottom: 2rem;
}

.event-card img {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
height: 200px;
object-fit: cover;
}

.event-details {
padding: 1rem;
}

h2 {
margin: 0;
font-size: 1.5rem;
margin-bottom: 0.5rem;
}

p {
margin-bottom: 1rem;
}

button {
background-color: #333;
color: #fff;
border: none;
border-radius: 5px;
padding: 0.5rem 1rem;
cursor: pointer;
}

button:hover {
background-color: #444;
}

/* Responsive styles */
@media (max-width

*******************************************************************************

<!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>Document</title>
</head>
<body>
<table>
<tr>
<th rowspan="2">Student ID</th>
<th rowspan="2">Name</th>
<th colspan="3">Subjects</th>
<th rowspan="2">Total Marks</th>
</tr>
<tr>
<th>Maths</th>
<th>Science</th>
<th>English</th>
</tr>
<tr>
<td>001</td>
<td>John Doe</td>
<td>90</td>
<td>85</td>
<td>95</td>
<td>270</td>
</tr>
<tr>
<td>002</td>
<td>Jane Smith</td>
<td>80</td>
<td>90</td>
<td>85</td>
<td>255</td>
</tr>
</table>

</body>
</html>

********************************************
<html>
<head>
<title>Bootstrap Carousel Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></
script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Bootstrap Carousel Example</h1>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ul class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0"
class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ul>

<!-- The slideshow -->


<div class="carousel-inner">
<div class="carousel-item active">
<img
src="https://via.placeholder.com/800x400/333333/FFFFFF?text=Slide+1" alt="Slide 1">
<div class="carousel-caption">
<h3>First slide label</h3>
<p>Nulla vitae elit libero, a pharetra augue
mollis interdum.</p>
</div>
</div>
<div class="carousel-item">
<img
src="https://via.placeholder.com/800x400/333333/FFFFFF?text=Slide+2" alt="Slide 2">
<div class="carousel-caption">
<h3>Second slide label</h3>
<p>Lorem ipsum dolor sit amet, consectetur
adipiscing elit.</p>
</div>
</div>
<div class="carousel-item">
<img
src="https://via.placeholder.com/800x400/333333/FFFFFF?text=Slide+3" alt="Slide 3">
<div class="carousel-caption">
<h3>Third slide label</h3>
<p>Praesent commodo cursus magna, vel
scelerisque nisl consectetur.</p>
</div>
</div>
</div>

<!-- Left and right controls -->


<a class="carousel-control-prev" href="#myCarousel" data-
slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#myCarousel" data-
slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>
</body>
</html>

***********************************************************************

import logo from './logo.svg';


import './App.css';
function HomePage() {
return (
<div>
<h1>Welcome to my webpage!</h1>
<p>Thanks for visiting. Please explore the site and let me know what you
think.</p>
</div>
);
}

function AboutPage() {
return (
<div>
<h1>About Me</h1>
<p>I'm a web developer based in the United States. I enjoy creating
websites and web applications using the latest web technologies.</p>
</div>
);
}

function App() {
return (
<div>
<HomePage />
<AboutPage />
</div>
);
}

export default App;

You might also like