Assignment 4
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Riddhi Mehta | LinkedIn Style</title>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
/>
</head><body>
<div class="container">
<!-- Profile Header -->
<div class="profile-header">
<div class="profile-image">
<img src="c:\Users\ASUS\OneDrive\Pictures\Screenshots\Screenshot 2025-09-02 170120.png"
alt="Riddhi Mehta" />
</div>
<div class="profile-info">
<h1>Ridhhi Mehta</h1>
<p class="headline">Data Scientist | Cloud & AI Engineer | Open Source Contributor</p>
<div class="contact">
<span><i class="fas fa-envelope"></i> [email protected]</span>
<span><i class="fas fa-phone"></i> +91 9356325957</span>
<span><i class="fas fa-location-dot"></i> Chh.sambhajinagar, India</span>
</div>
<div class="social">
<a href="https://github.com/sarah-dev"><i class="fab fa-github"></i></a>
<a href="https://linkedin.com/in/sarahahmed"><i class="fab fa-linkedin"></i></a>
<a href="https://twitter.com/sarah_codes"><i class="fab fa-twitter"></i></a>
</div>
</div>
</div>
<!-- About -->
<div class="section">
<h2>About</h2>
<p>
Enthusiastic Data Scientist with expertise in AI/ML, cloud computing, and analytics.
Skilled at building predictive models, deploying scalable ML solutions, and leading
collaborative open-source projects. Passionate about solving real-world problems
with data-driven insights.
</p>
</div>
<!-- Skills -->
<div class="section">
<h2>Skills</h2>
<ul class="skills">
<li>Python</li>
<li>Machine Learning</li>
<li>Deep Learning</li>
<li>AWS Cloud</li>
<li>Docker</li>
<li>Kubernetes</li>
<li>Power BI</li>
<li>JavaScript</li>
<li>React</li>
</ul>
</div>
<!-- Education -->
<div class="section">
<h2>Education</h2>
<p><strong>B.tech in AIML</strong><br> MGM University, Chh.sambhajinagar<br>2025 – 2028</p>
</div>
<!-- Experience -->
<div class="section">
<h2>Experience</h2>
<p><strong>Data Scientist Intern</strong> – Infosys<br><em>Jan 2024 – Present</em><br>
Developed ML models for customer churn prediction and automated cloud deployment pipelines.</p>
</div>
<!-- Projects -->
<div class="section">
<h2>Projects</h2>
<ul>
<li><strong>Smart Health Monitor</strong> – AI system predicting early symptoms of diseases.</li>
<li><strong>Stock Price Predictor</strong> – LSTM model trained on financial datasets.</li>
<li><strong>Cloud Deployed Chatbot</strong> – Serverless chatbot using AWS Lambda.</li>
</ul>
</div>
<!-- Certifications -->
<div class="section">
<h2>Certifications</h2>
<ul>
<li>AWS Certified Cloud Practitioner – Amazon</li>
<li>Machine Learning Specialization – Stanford (Coursera)</li>
<li>Deep Learning with TensorFlow – Udacity</li>
</ul>
</div>
</div>
</body>
</html>
Style.css
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Segoe UI', sans-serif;
background: linear-gradient(to right, #f3f2ef, #e6f0f8);
color: #1f1f1f;
padding: 20px;
}
.container {
max-width: 900px;
margin: auto;
background: #fff;
border-radius: 15px;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
padding: 30px;
}
.profile-header {
display: flex;
flex-wrap: wrap;
align-items: center;
border-bottom: 2px solid #0073b1;
padding-bottom: 20px;
}
.profile-image img {
border-radius: 50%;
width: 150px;
height: 150px;
object-fit: cover;
border: 5px solid #0073b1;
margin-right: 30px;
transition: transform 0.3s;
}
.profile-image img:hover {
transform: scale(1.05);
}
.profile-info h1 {
font-size: 30px;
margin-bottom: 5px;
color: #004080;
}
.headline {
font-size: 16px;
color: #555;
margin-bottom: 10px;
font-style: italic;
}
.contact span {
display: block;
font-size: 14px;
margin: 3px 0;
color: #333;
}
.social a {
color: #0073b1;
margin-right: 12px;
font-size: 20px;
transition: all 0.3s;
}
.social a:hover {
color: #005582;
transform: scale(1.2);
}
.section {
margin-top: 30px;
}
.section h2 {
font-size: 22px;
border-left: 5px solid #0073b1;
padding-left: 12px;
margin-bottom: 15px;
color: #0073b1;
}
.section p,
.section li {
font-size: 15px;
line-height: 1.6;
color: #333;
}
.skills {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.skills li {
background: #0073b1;
color: white;
padding: 8px 14px;
border-radius: 20px;
font-size: 14px;
transition: background 0.3s;
}
.skills li:hover {
background: #005582;
Output: -
