Scribd
Upload
18 views4 pages

Chatgpt - Copy

The document is an HTML template for the Veerababu Narni IT Academy, showcasing a training program for Multi-Cloud DevOps. It includes course details, fees, images of cloud platforms and DevOps tools, and a registration form with validation for email and phone number. The design features a light blue background, styled components for course information, and a button to register for the course.

Uploaded by

competitiveexamsdsk
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
18 views4 pages

Chatgpt - Copy

The document is an HTML template for the Veerababu Narni IT Academy, showcasing a training program for Multi-Cloud DevOps. It includes course details, fees, images of cloud platforms and DevOps tools, and a registration form with validation for email and phone number. The design features a light blue background, styled components for course information, and a button to register for the course.

Uploaded by

competitiveexamsdsk
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/ 4

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>VEERABABU NARNI IT ACADEMY</title>

<style>
body {
background-color: #ADD8E6; /* Light Blue - Pleasant & Cool */
font-family: Arial, sans-serif;
text-align: center;
padding: 20px;
position: relative;
}
h1 {
color: #333;
}
.course-details, .devops-tools {
margin: 20px auto;
padding: 20px;
background: #fff;
border-radius: 10px;
width: 80%;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.images {
display: flex;
justify-content: center;
gap: 20px;
flex-wrap: wrap;
}
.images img {
width: 100px;
height: auto;
}
.trainer {
position: absolute;
top: 20px;
left: 20px;
}
.trainer img {
width: 150px;
border-radius: 10px;
}
.fees {
position: absolute;
top: 20px;
right: 20px;
background: white;
padding: 10px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.quote {
font-style: italic;
margin-top: 20px;
font-size: 1.2em;
color: #004080;
}
.register-button {
margin-top: 20px;
}
.register-button button {
padding: 10px 20px;
font-size: 1.2em;
background-color: #004080;
color: white;
border: none;
cursor: pointer;
border-radius: 5px;
}
.form-container {
display: none;
margin-top: 20px;
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
width: 50%;
margin-left: auto;
margin-right: auto;
}
.form-container input, select {
width: 100%;
padding: 10px;
margin: 10px 0;
border-radius: 5px;
border: 1px solid #ccc;
}
</style>
<script>
function showForm() {
document.getElementById('register-form').style.display = 'block';
}
function validateForm(event) {
event.preventDefault();
let email = document.getElementById("email").value;
let phone = document.getElementById("phone").value;
let emailPattern = /^[a-zA-Z0-9._%+-]+@(gmail\.com|yahoo\.com|
hotmail\.com)$/;
let phonePattern = /^\+\d{1,3} \d{10}$/;

if (!emailPattern.test(email)) {
alert("Invalid email. Please use Gmail, Yahoo, or Hotmail.");
return;
}
if (!phonePattern.test(phone)) {
alert("Invalid phone number. It should have a valid country code
followed by 10 digits.");
return;
}
document.getElementById("pay-fees").style.display = 'block';
}
function toggleFields() {
let position = document.getElementById("position").value;
document.getElementById("qualification-field").style.display =
(position === "Student") ? "block" : "none";
document.getElementById("experience-field").style.display = (position
=== "Working") ? "block" : "none";
}
</script>
</head>
<body>
<div class="trainer">
<img src="https://images.unsplash.com/photo-1740675628791-9f7b4fd61ec5?
w=600&auto=format&fit=crop&q=60&ixlib=rb-
4.0.3&ixid=M3wxMjA3fDB8MHxwcm9maWxlLXBhZ2V8MXx8fGVufDB8fHx8fA%3D%3D" alt="Trainer">
</div>

<div class="fees">
<h3>Fees</h3>
<p>Without Recordings: RS. 20,000</p>
<p>With Recordings: RS. 25,000</p>
</div>

<h1>VEERABABU NARNI IT ACADEMY</h1>


<h1>"there is no rocket science to understand we can easily learn"</h1>
<h2>Training for Multi-Cloud DevOps</h2>

<div class="course-details">
<h3>Multi-Cloud</h3>
<div class="images">
<img
src="https://www.cascadeo.com/wp-content/uploads/2022/11/KRgw2UkV_400x400.jpg"
alt="AWS">
<img src="https://swimburger.net/media/0zcpmk1b/azure.jpg" alt="Azure">
<img src="https://converteo.com/app/uploads/2024/02/Google-Cloud-
Platform-1-1330x1064-c-center.jpg" alt="GCP">
</div>
</div>

<div class="devops-tools">
<h3>DevOps Tools</h3>
<div class="images">
<img src="https://banner2.cleanpng.com/20180407/bte/avgt65ipf.webp"
alt="Terraform">
<img src="https://1000logos.net/wp-content/uploads/2021/11/Docker-Logo-
2013.png" alt="Docker">
<img src="https://encrypted-tbn0.gstatic.com/images?
q=tbn:ANd9GcRQZbeq0nye_Zw137rTiGLNCrbx1Ou_ZlUvpA&s" alt="Kubernetes">
<img src="https://logos-world.net/wp-content/uploads/2023/12/Jenkins-
Symbol.png" alt="Jenkins">
<img
src="https://cdn.prod.website-files.com/66b2390d7d5386cb599d0345/66c4a49909e20044fa
628a33_64942bfa35852fa073c7d40d_argocd-logo.png" alt="ArgoCD">
<img
src="https://spaceliftio.wpcomstaging.com/wp-content/uploads/2024/06/397.flux-
cd.png" alt="FluxCD">
<img src="https://cdn.iconscout.com/icon/free/png-256/free-grafana-
logo-icon-download-in-svg-png-gif-file-formats--technology-social-media-company-
brand-vol-3-pack-logos-icons-2944910.png?f=webp" alt="Grafana">
<img src="https://static-00.iconduck.com/assets.00/prometheus-icon-
511x512-1vmxbcxr.png" alt="Prometheus">
<img src="https://encrypted-tbn0.gstatic.com/images?
q=tbn:ANd9GcS6ljKKeh8TfKfOVLu_QotWxwMba_OKvyLENg&s" alt="Splunk">
<img src="https://static-00.iconduck.com/assets.00/ansible-icon-
512x512-fydu4n0b.png" alt="Ansible">
<img src="https://encrypted-tbn0.gstatic.com/images?
q=tbn:ANd9GcRPF8a_ebQI6qMnfVoiZ5aVLRzNz-E3xPtwNQ&s" alt="Data Migration">
</div>
</div>

<div class="register-button">
<button onclick="showForm()">Register Now</button>
</div>

<div id="register-form" class="form-container">


<h3>Register for the Course</h3>
<form onsubmit="validateForm(event)">
<input type="text" placeholder="Full Name" required>
<input type="email" id="email" placeholder="Email" required>
<input type="tel" id="phone" placeholder="Phone Number" required>
<select id="position" onchange="toggleFields()" required>
<option value="">Select Current Position</option>
<option value="Student">Student</option>
<option value="Working">Working</option>
</select>
<div id="qualification-field" style="display: none;">
<input type="text" placeholder="Qualification">
</div>
<div id="experience-field" style="display: none;">
<input type="number" placeholder="Years of Experience">
</div>
<select>
<option value="Without Recordings">Without Recordings - RS.
20,000</option>
<option value="With Recordings">With Recordings - RS.
25,000</option>
</select>

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

<div id="pay-fees" class="form-container" style="display: none;">


<h3>Pay Fees</h3>
<select>
<option value="Without Recordings">Without Recordings - RS.
20,000</option>
<option value="With Recordings">With Recordings - RS. 25,000</option>
</select>
<button>Proceed to Payment</button>
</div>
</body>
</html>

You might also like