Skip to content
This repository was archived by the owner on Jun 29, 2024. It is now read-only.

All Tasks are Completed #47

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

All Tasks are Completed #47

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
85d14ca
Completed Task 1
VaniSandiboina Jun 7, 2024
7c2e000
Completed Task 2
VaniSandiboina Jun 7, 2024
cb588b8
Completed Task 3
VaniSandiboina Jun 7, 2024
0768761
Completed All Tasks
VaniSandiboina Jun 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
108 changes: 108 additions & 0 deletions VaniSandiboina/Task1/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,108 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> CSEdge Landing Page </title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
</head>

<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-light">
<a class="navbar-brand" href="https://csedge.courses/" target="_blank">
<img src="https://res.cloudinary.com/drz3gc5mw/image/upload/v1716376832/download_ms3xjs.jpg" class="CSEdge-logo" />
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav ml-auto">
<a class="nav-link active" href="#home"> Home <span class="sr-only">(current)</span></a>
<a class="nav-link" href="#features"> Features </a>
<a class="nav-link" href="#testimonials"> Testimonials </a>
<a class="nav-link" href="#contact"> Contact Us </a>
</div>
</div>
</nav>

<section id="hero">
<div class="hero-content">
<h1> Welcome to CSEdge </h1>
</div>
</section>

<section id="features">
<h2>Features</h2>
<div class="=container">
<div class="row">
<div class="col-6">
<div class="feature">
<h3> Hands-on Projects </h3>
<p> Projects that simulate real-world challenges and scenarios. </p>
</div>
</div>
<div class="col-6">
<div class="feature">
<h3> Community and Collaboration </h3>
<p> Active forums for discussion, Q n A, and peer support. </p>
</div>
</div>
<div class="col-6">
<div class="feature">
<h3> Personalized Learning Paths </h3>
<p> Initial assessments to gauge current skill level and recommend appropriate learning paths. </p>
</div>
</div>
<div class="col-6">
<div class="feature">
<h3> Interactive Learning Modules </h3>
<p> Offers a wide range of coding challenges across various difficulty levels to help users practice and improve their coding skills. </p>
</div>
</div>
</div>
</div>
</section>

<section id="testimonials">
<h2>Testimonials</h2>
<div class="testimonial">
<p> "CSEdge is truly remarkable in every way imaginable! The platform offers an extensive array of features and functionalities, all designed to enhance the learning experience and provide unparalleled support to users. Whether you are a student, educator, or professional." - <span style="font-weight:bold"> Harry </span></p>
</div>
<div class="testimonial">
<p> "I highly recommend CSEdge. The user-friendly interface, combined with a wealth of educational materials and interactive tools, makes it an invaluable asset for anyone looking to deepen their understanding and skills in computer science." - <span style="font-weight:bold"> Komala </span> </p>
</div>
</section>

<section id="contact">
<h2>Contact Us</h2>
<form>
<label for="name">Name</label>
<input type="text" id="name" name="name">

<label for="email">Email</label>
<input type="email" id="email" name="email">

<label for="message">Message</label>
<textarea id="message" name="message"></textarea>

<button type="submit">Submit</button>
</form>
<div class="social-media">
<a href="https://www.instagram.com/csedgeofficial?igsh=Y2ppZ3p2ajZhbHlj" target="_blank"> Instagram </a>
<a href="https://github.com/CSEdgeOfficial/Web-Development-Internship" target="_blank"> Github </a>
<a href="https://www.linkedin.com/company/csedge/" target="_blank"> LinkedIn </a>
</div>
</section>

<div class="col-12 footer-section mt-5 pt-3 pb-3 text-center">
<h1 class="footer-section-mail-id">CSEdge</h1>
<p class="footer-section-address">
Bangalore , Karnataka
</p>
</div>
<script src="script.js"></script>
</body>

</html>
168 changes: 168 additions & 0 deletions VaniSandiboina/Task1/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,168 @@
@import url('https://fonts.googleapis.com/css2?family=Bree+Serif&family=Caveat:wght@400;700&family=Lobster&family=Monoton&family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Playfair+Display+SC:ital,wght@0,400;0,700;1,700&family=Playfair+Display:ital,wght@0,400;0,700;1,700&family=Roboto:ital,wght@0,400;0,700;1,400;1,700&family=Source+Sans+Pro:ital,wght@0,400;0,700;1,700&family=Work+Sans:ital,wght@0,400;0,700;1,700&display=swap');

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

body {
font-family: Arial, sans-serif;
background-image: linear-gradient(120deg, #f093fb 0%, #f5576c 100%);
}

nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
background-image: linear-gradient(120deg, #f093fb 0%, #f5576c 100%);
color: #fff;
}

.CSEdge-logo {
height: 34px;
}

header nav ul {
list-style: none;
display: flex;
}

header nav ul li {
margin-left: 20px;
}

header nav ul li a {
color: #fff;
text-decoration: none;
transition: color 0.3s;
}

header nav ul li a:hover {
color: rgb(255, 217, 0);
}

#hero {
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('hero-bg.jpg') no-repeat center center/cover;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
position: relative;
}

.hero-content h1 {
font-size: 48px;
background: rgba(0, 0, 0, 0.5);
padding: 20px;
border-radius: 10px;
}

#features {
padding: 50px;
text-align: center;
background-image: linear-gradient(to top, #a8edea 0%, #fed6e3 100%);
color: #cc8ff2;
}

.feature {
margin: 20px 0;
padding: 20px;
background-color: #fff;
border-radius: 10px;
color: #333;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

#testimonials {
padding: 50px;
background-image: linear-gradient(120deg, #f093fb 0%, #f5576c 100%);
text-align: center;
color: #fff;
}

.testimonial {
margin: 20px 0;
padding: 20px;
background: linear-gradient(100deg, rgb(48, 35, 174) 0%, rgb(242, 103, 152) 100%);
border-radius: 10px;
color: #fff;
}

#contact {
padding: 50px;
text-align: center;
background-image: linear-gradient(to bottom, #a8edea 0%, #fed6e3 100%);
color: #cc8ff2;
}

#contact form {
display: flex;
flex-direction: column;
align-items: center;
}

#contact form label {
margin: 10px 0 5px;
}

#contact form input,
#contact form textarea {
margin-bottom: 10px;
padding: 10px;
width: 300px;
border: 2px solid rgb(242, 103, 152);
border-radius: 5px;
}

#contact form button {
padding: 10px 20px;
background-image: linear-gradient(to right, #fa709a 0%, #fee140 100%);
color: #fff;
border: none;
cursor: pointer;
border-radius: 5px;
transition: background-color 0.3s;
}

#contact form button:hover {
background: linear-gradient(100deg, rgb(48, 35, 174) 0%, rgb(242, 103, 152) 100%);
}

#contact .social-media {
margin-top: 20px;
}

#contact .social-media a {
margin: 0 10px;
text-decoration: none;
color: rgb(242, 103, 152);
transition: color 0.3s;
}

#contact .social-media a:hover {
color: rgb(48, 35, 174);
}

@media (max-width: 768px) {
header {
flex-direction: column;
}

header nav ul {
flex-direction: column;
align-items: center;
}

header nav ul li {
margin: 10px 0;
}

#contact form input,
#contact form textarea {
width: 100%;
max-width: 300px;
}
}
78 changes: 78 additions & 0 deletions VaniSandiboina/Task2/gallery.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
@import url('https://fonts.googleapis.com/css2?family=Bree+Serif&family=Caveat:wght@400;700&family=Lobster&family=Monoton&family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Playfair+Display+SC:ital,wght@0,400;0,700;1,700&family=Playfair+Display:ital,wght@0,400;0,700;1,700&family=Roboto:ital,wght@0,400;0,700;1,400;1,700&family=Source+Sans+Pro:ital,wght@0,400;0,700;1,700&family=Work+Sans:ital,wght@0,400;0,700;1,700&display=swap');

.bg-container {
font-family: Arial, sans-serif;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: rgba(0, 0, 255, 0.077);
background-size: cover;
}

h1 {
font-size: 32px;
color: #3664ad;
text-shadow: 1px 1px grey;
}

.gallery {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
}

.thumbnail {
width: 100px;
height: 100px;
object-fit: cover;
cursor: pointer;
border: 2px solid #ddd;
transition: transform 0.2s;
border-radius: 10px;
}

.thumbnail:hover {
transform: scale(1.1);
}

.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.9);
justify-content: center;
align-items: center;
}

.modal-content {
max-width: 80%;
max-height: 80%;
margin: auto;
display: block;
}

.close {
position: absolute;
top: 20px;
right: 35px;
color: white;
font-size: 40px;
font-weight: bold;
cursor: pointer;
}

@media (max-width: 600px) {
.thumbnail {
width: 120px;
height: 120px;
margin-bottom: 25px;
}
}
Loading