Sunday, September 29, 2024

Css coding

margin: 0;

padding: 0;

font-family: 'Noto Sans', sans-serif;

}

/*header*/

header {

background-color:black;

padding: 20px;

display: flex;

align-items: center;

justify-content: space-between;

}

.logo img {

height: 60px;

margin-left:50px;

}

nav ul {

list-style: none;

margin: 0;

padding: 0;

}

nav ul li {

display: inline-block;

margin-right: 15px;

}

nav ul li a {

text-decoration: none;

color: white;

font-weight: bold;

transition: color 0.3s;

}

nav ul li a:hover {

color: #ff0000;

}

/*hero*/

.hero {

background-image:"C:\Users\hp\OneDrive\Pictures\Camera Roll\download (4).jpeg";

background-size:;

background-position: center;

height: 100vh;

display: flex;

text-align: left;

color:rgb(233, 233, 14);

}

.hero-content {

max-width: 600px;

padding: 20px;

margin-top :50px;

margin-left: 4%;

}

.hero-content h1 {

font-size: 48px;

margin-bottom: 20px;

}

.hero-content p {

font-size: 24px;

margin-bottom: 30px;

}

.btn {

display: inline-block;

background-color: #ff0000;

color: #fff;

padding: 10px 20px;

border-radius: 5px;

text-decoration: none;

font-weight: bold;

transition: background-color 0.3s ease;

}

.btn:hover {

background-color: #e60000;

}

/*about*/

.about {

display: flex;

align-items: center;

padding: 80px 0;

}

.about-content {

flex: 1;

max-width: 600px;

padding-right: 50px;

color: #fffb14;

margin-left: 5%;

}

.about h2 {

font-size: 36px;

margin-bottom: 20px;

}

.about p {

font-size: 18px;

margin-bottom: 20px;

}

.about-image {

max-width: 50%;

margin-right: 5%;

}

.about-image img {

max-width: 100%;

height: auto;

border-radius: 5px;

}

.dark-theme {

background-color: #070e16;

}

/* menu*/

.menu {

padding: 80px 0;

text-align: center;

background-color: #070e16;

}

.menu h2 {

font-size: 36px;

margin-bottom: 40px;

color: #ffffff;

}

.menu-items {

display: flex;

justify-content: center;

}

.menu-item {

max-width: 300px;

margin: 0 20px;

text-align: left;

}

.menu-item img {

max-width: 100%;

height: auto;

border-radius: 5px;

margin-bottom: 10px;

}

.menu-item h3 {

font-size: 24px;

margin-bottom: 10px;

color: #ffffff;

}

.menu-item p {

font-size: 16px;

margin-bottom: 20px;

color: #ffffff;

}

/* reservations*/

.reservations {

background-color: #1f1f1f;

padding: 80px 0;

text-align: center;

}

.reservation-form {

max-width: 500px;

margin: 0 auto;

background-color: #333;

padding: 40px;

border-radius: 5px;

box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);

}

.reservation-form h2 {

color: #fff;

font-size: 28px;

margin-bottom: 20px;

}

.reservation-form form input,

.reservation-form form textarea {

display: block;

width: 100%;

padding: 10px;

margin-bottom: 20px;

border-radius: 5px;

border: none;

}

.reservation-form form button {

display: inline-block;

background-color: #ff0000;

color: #fff;

padding: 10px 20px;

border-radius: 5px;

text-decoration: none;

font-weight: bold;

transition: background-color 0.3s ease;

}

.reservation-form form button:hover {

background-color: #e60000;

}

/* Testimonials Section*/

.testimonials {

padding: 80px 0;

text-align: center;

background-color: #070e16;

}

.testimonials h2 {

font-size: 36px;

margin-bottom: 40px;

color: #fff;

}

.testimonial {

max-width: 600px;

margin: 0 auto 40px;

text-align: left;

}

.testimonial img {

display: block;

width: 80px;

height: 80px;

border-radius: 50%;

margin: 0 auto 20px;

}

.testimonial p {

font-size: 18px;

margin-bottom: 20px;

color: #fff;

}

.testimonial h4 {

font-size: 20px;

font-weight: bold;

color: #fff;

}

/* Gallery Section*/

.gallery {

padding: 80px 0;

text-align: center;

background-color: #070e16;

}

.gallery h2 {

font-size: 36px;

margin-bottom: 40px;

color: #fff;

}

.image-grid {

display: grid;

grid-template-columns: repeat(4, 1fr);

grid-gap: 20px;

margin-left: 5%;

margin-right: 5%;

}

.image-item img {

width: 100%;

height: auto;

border-radius: 5px;

}

/* Contact Section*/

.contact {

background-color: #333;

padding: 80px 0;

text-align: center;

color: #fff;

}

.contact-container {

max-width: 600px;

margin: 0 auto;

}

.contact h2 {

font-size: 36px;

margin-bottom: 40px;

}

.contact-info {

display: flex;

justify-content: center;

margin-bottom: 40px;

}

.info-item {

margin: 0 20px;

text-align: center;

}

.info-item i {

font-size: 24px;

margin-bottom: 10px;

}

.contact-form input,

.contact-form textarea {

display: block;

width: 100%;

padding: 10px;

margin-bottom: 20px;

border-radius: 5px;

border: none;

}

.contact-form textarea {

resize: vertical;

}

.contact-form button {

display: inline-block;

background-color: #ff0000;

color: #fff;

padding: 10px 20px;

border-radius: 5px;

text-decoration: none;

font-weight: bold;

transition: background-color 0.3s ease;

}

.contact-form button:hover {

background-color: #e60000;

}

/* Footer*/

.footer {

background-color: #070e16;

padding: 40px 0;

color: #fff;

text-align: center;

}

.footer-content {

display: flex;

flex-direction: column;

align-items: center;

margin-bottom: 40px;

}

.footer-logo img {

max-width: 150px;

}

.footer-links a {

color: #fff;

margin: 0 10px;

text-decoration: none;

}

.footer-social a {

color: #fff;

margin: 0 5px;

text-decoration: none;

}

.footer-text {

font-size: 14px;

}

Html coding

<!DOCTYPE html>

<html>

<head>

<title>AI WORLD 2026</title>

</head>

</div>

<nav>

<ul>

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

<li><a href="#reservations">Reservations</a></li>

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

</ul>

</nav>

</header>

<h1>Welcome To Digital World</h1>

<p>Artifical Intelligence is not a substitute for human intelligence;it is a tool to amplify human creativity and ingenuity.</p>

<a href="#menu" class="btn">Explore More</a>

</div>

</section>

<h2>About Artifical intelligence</h2>

<p>Robotics is the engineering branch that deals with the conception, design, construction, operation, application, and usage of robots. Digging a little deeper, we see that robots are defined as an automatically operated machine that carries out a series of actions independently and does the work usually accomplished by a human.</p>

<p>Incidentally, robots don’t have to resemble humans, although some do. Look at images of automobile assembly lines for proof. Robots that appear human are typically referred to as “androids.” </p>

<a href="#menu" class="btn">Explore Our Menu</a>

</div>

</div>

</section>

<h2>TOP ARTICLES</h2>

<h3>Ai Takeover Human </h3>

<p>The idea of AI taking over humanity is a popular theme in science fiction, but some experts believe that AI will actually work alongside humans to augment their capabilities</p>

</div>

<h3>Ai Replace Human Work</h3>

<p>AI can't completely replace humans and is more likely to augment many existing roles. It can change the nature of certain jobs by automating repetitive and mundane tasks, freeing up human workers to focus on more challenging problems.</p>

</div>

<h3>Ai Bond Witth Humans </h3>

<p>AI can be developed to understand human emotions, which can help build trust between humans and AI. For example, AI can understand if a driver is fit to drive a car, or if a co-bot's human colleagues are up to the job.

</p>

</div>

</section>

<h2>Make a Reservation</h2>

<form>

<button type="submit">Submit</button>

</form>

</div>

</section>

<h2>Top Scientists Say About Robots</h2>

<p>AI could pose a threat to human existence, and could take off on its own and redesign itself at an ever increasing rate.

</p>

<h4>Stephen Hawking</h4>

</div>

<p> Max tegmark warns that AI could have dangerous consequences, such as AI models being used to create potentially lethal molecules. He also believes that tech companies are being reckless by releasing the source code of their AI models.

</p>

<h4>Max Tegmark</h4>

</div>

</section>

<h2>Gallery</h2>

</div>

</div>

</div>

</div>

</section>

<h2>Contact Us</h2>

<p>govt arts collage, thathondrimali, karur.</p>