Scribd
Upload
15 views

Dinesh Intern

Uploaded by

manisarashwathi111222
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
15 views

Dinesh Intern

Uploaded by

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

SUMMER INTERNSHIP

2024-25(ODD)

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

DINESHKUMAR M
111921CS01035
COMPANY PROFILE

COMPANY NAME: The Black Pearls

ADDRESS : 13, opp. Shshri, Atharv Colony, Savarkar Nagar, Nashik,


Maharashtra – 422013
COMPANY LINK : https://theblackpearls.site/
Area of Internship

WEB DEVELOPMENT

Web development refers to the process of creating and


maintaining websites. It involves various tasks, such as web
design, web content creation, client-side/server-side scripting,
and network security configuration.
CERTIFICATE
OUTCOME OF INTERNSHIP
– Gained hands-on experience in Website
development.
– Completed two assigned tasks to fulfill the
internship requirements.
– Developed and deployed functional and user-
friendly Website applications.
– Enhanced coding skills in HTML and CSS.
DEVELOPED PROJECTS

1. Basic Html and Css Website


2. Responsive Design with Bootstrap
PROJECT 1 : Basic Html and Css Website
• Objective: Create a simple static website using
HTML and CSS.
• Description:Design a basic webpage layout with
HTML elements such as headers, paragraphs,
lists, and images.Use CSS to style the webpage,
including colors, fonts, margins, and
padding.Ensure the website is responsive and
displays correctly on different devices and screen
sizes.
• Bonus: Add interactive elements like buttons,
navigation menus, and hover effects.
SOURCE CODE:
HTML:
• <!DOCTYPE html>
• <html lang="en">
• <head>
• <meta charset="UTF-8">
• <meta name="viewport" content="width=device-width, initial-scale=1.0">
• <title>Simple Website</title>
• <link rel="stylesheet" href="home.css">
• </head>
• <body>
• <header>
• <h1>Simple Website</h1>
• </header>
• <nav>
• <ul>
• <li><a href="#home">Home</a></li>
• <li><a href="#about">About</a></li>
• <li><a href="#services">Services</a></li>
• <li><a href="#contact">Contact</a></li>
• </ul>
• </nav>
• <main>
• <section id="home">
• <h2>Home</h2>
• <p>Welcome to our simple website!</p>
• </section>
• <section id="about">
• <h2>About Us</h2>
• <p>We are a team of developers creating awesome websites.</p>
• </section>
• <section id="services">
• <h2>Our Services</h2>
• <ul>
• <li>Web Design</li>
• <li>Web Development</li>
• <li>Responsive Design</li>
• </ul>
• </section>
• <section id="contact">
• <h2>Contact Us</h2>
• <p>Email: [email protected]</p>
• <p>Phone: 123-456-7890</p>
• </section>
• </main>
• <footer>
• <p>&copy; 2024 Simple Website. All rights reserved.</p>
• </footer>
• </body>
• </html>
•
CSS:
•
*{
• z margin: 0;
• padding: 0;
• box-sizing: border-box;
• }
•
body {
• font-family: Arial, sans-serif;
• line-height: 1.6;
• background-color: #f0f0f0;
• margin: 0;
• padding: 0;
• }
•
header {
• background-color: #333;
• color: #fff;
• text-align: center;
• padding: 1em 0;
• }
•
nav {
• background-color: #444;
• padding: 0.5em 0;
• text-align: center;
• }
•
nav ul {
• list-style-type: none;
• }
•
• nav ul li {
• display: inline;
• margin: 0 10px;
• }
•
nav ul li a
• { color: #fff;
• text-decoration:
• none;
padding: 5px 10px;
• }
•
nav ul li a:hover
• { background-color:
• } #555;
•
main {
• padding: 20px;
• }
•
section {
• margin-bottom:
• 20px;
background-color:
• #fff;
padding: 20px;
• border-radius:
• 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0,
• } 0.1);
•
footer {
• background-color:
• #333;
color: #fff;
• text-align:
• center;
padding: 1em
• 0;
position: fixed;
• bottom: 0;
• width: 100%;
• }
•
OUTPUT:
PROJECT 2 : Responsive Design with
Bootstrap
• Objective: Build a responsive website layout
using the Bootstrap framework.
• Description:Create a webpage layout using
Bootstrap grid system for responsive
design.Utilize Bootstrap components such as
navigation bars, buttons, cards, and
forms.Customize the appearance of Bootstrap
components using CSS.Test the website on
various devices and screen sizes to ensure
responsiveness.
SOURCE CODE:
HTML:
• <!DOCTYPE html>
• <html lang="en">
• <head>
• <meta charset="UTF-
• 8">
<meta name="viewport" content="width=device-width, initial-
• scale=1.0">
<title>Responsive Website with
• Bootstrap</title>
<!-- Bootstrap CSS --
• >
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
• <!-- Optional: Font Awesome for icons --
• >
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/
• all.min.css">
<!-- Custom CSS --
• >
<link rel="stylesheet"
• href="home.css">
</head>
• <body>
•
<!-- Navbar --
• >
<nav class="navbar navbar-expand-lg navbar-light bg-
• light">
<a class="navbar-brand" href="#">Bootstrap
• Website</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
controls="navbarSupportedContent"
aria- aria-expanded="false" aria-label="Toggle
• navigation">
<span
• class="navbar-toggler-icon"></span>
</button>
•
<div class="collapse navbar-collapse"
• id="navbarSupportedContent">
<ul class="navbar-nav ml-
• auto">
<li class="nav-item
• active">
<a class="nav-link" href="#">Home <span
• class="sr-only">(current)</span></a>
</li>
• <li class="nav-
• item">
<a class="nav-link"
• href="#">About</a>
</li>
• <li class="nav-
• item">
<a class="nav-link"
• href="#">Services</a>
</li>
• <li class="nav-
• item">
<a class="nav-link"
• href="#">Contact</a>
</li>
• </ul>
• </div>
• </nav>
•
•
<!-- Main Content --
• >
<div class="container mt-
• 4"><div class="row">
• <!-- Main Content Area --
• >
<div class="col-lg-8">
• <h2>Main Content</h2>
• <p>Welcome to our responsive Bootstrap website. This main content area will resize based on the screen
• size.</p>
<div class="card">
• <img src="https://via.placeholder.com/400x200" class="card-img-top"
• alt="...">
<div class="card-body">
• <h5 class="card-title">Card Title</h5>
• <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
• content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
• </div>
• </div>
• </div>
•
• <!-- Sidebar --
• >
<div class="col-lg-4">
• <h2>Sidebar</h2>
• <p>This is the sidebar content area. It will take 4 columns on large screens and resize accordingly.</p>
• <div class="list-group">
• <a href="#" class="list-group-item list-group-item-action">Link
• 1</a>
• <a href="#" class="list-group-item list-group-item-action">Link
• 2</a>
• <a href="#" class="list-group-item
</div> list-group-item-action">Link
• 3</a>
</div>
• </div> <a href="#" class="list-group-item list-group-item-action">Link
• </div> 4</a>
•
<!-- Footer --
• >
<footer class="bg-dark text-white mt-4 py-
• 3"><div class="container text-center">
• <p>&copy; 2024 Bootstrap Website. All rights reserved.</p>
• <p>Designed with <i class="fas fa-heart"></i> by Your Name</p>
• </div>
• </footer>
•
<!-- Bootstrap JS and dependencies --
• >
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
• <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
• <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
• </body>
• </html>
• CSS:
• footer {
• position:
• fixed;
• bottom: 0;
• width: 100%;
• }
• /* Style the navbar links */
• .navbar-nav .nav-link {
• color: #333;
• }
•
• .navbar-nav .nav-link:hover {
• color: #007bff;
• }
•
• /* Style the main content card
• */
• .card {
• margin-top: 20px;
• }
• /* Center align text in the footer */
• footer {
• text-align: center;
• color: #fff;
• }
•
• Output:
PROJECT STATUS

• Basic Html and Css Website – Completed

• Responsive Design with Bootstrap– Completed


Conclusion
• The web development internship offers a
comprehensive learning experience in
frontend and backend technologies, focusing
on practical skills development and project-
based learning. Keep exploring and building to
enhance your proficiency in web
development!

You might also like