Profile/experience.html at main · Code-Samar/Profile · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Experience | Samar Ahmad</title>
  <link rel="stylesheet" href="style.css">
  <!-- Font Awesome for Icons -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
  <style>
    body {
        font-family: 'Roboto', sans-serif;
        color: white;
        margin: 0;
        padding: 0;
        background-image: url('back.png'); /* Add background image */
        background-size: cover;
        background-position: center;
        background-attachment: fixed;
    }

    header {
        background: rgba(0, 0, 0, 0.8); /* Semi-transparent background */
        color: white;
        padding: 60px 20px;
        text-align: center;
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.3);
        margin-bottom: 30px;
    }

    header h1 {
        font-size: 3rem;
        margin-bottom: 20px;
    }

    header p {
        font-size: 1.2rem;
        color: #f1f1f1;
    }

    .experience-container {
        padding: 40px 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .experience-box {
        background: rgba(51, 51, 51, 0.7); /* Transparent background */
        color: white;
        border-radius: 10px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
        width: 80%;
        padding: 20px;
        text-align: center;
        transition: transform 0.3s ease, background-color 0.3s ease;
    }

    .experience-box:hover {
        transform: scale(1.05);
        background-color: rgba(0, 0, 0, 0.8); /* Darker transparent background on hover */
    }

    .experience-box h3 {
        margin-bottom: 10px;
        color: #b18a54;
        font-size: 1.5rem;
    }

    .experience-box p {
        font-size: 1.1rem;
        color: #ccc;
        margin-bottom: 10px;
    }

    .experience-box .role {
        font-weight: bold;
    }

    .back-button {
        display: inline-block;
        margin: 20px;
        padding: 10px 20px;
        background-color: #060716;
        color: white;
        text-decoration: none;
        border-radius: 5px;
        transition: background-color 0.3s;
    }

    .back-button:hover {
        background-color: #444;
    }

    /* Mobile responsiveness */
    @media (max-width: 768px) {
        .experience-box {
            width: 90%;
            margin: 10px 0;
        }
    }
  </style>
</head>
<body>

<header>
  <h1>My Experience</h1>
  <p>Here are some of the experiences and roles I've had throughout my journey.</p>
</header>

<section class="experience-container">
    <!-- Microsoft -->
    <div class="experience-box">
        <h3>Microsoft</h3>
        <p class="role">Student Technical Training</p>
        <p>Underwent technical training at Microsoft, where I gained knowledge in various technologies and developed key skills to build innovative solutions.</p>
    </div>

    <!-- NSS IIT Delhi -->
    <div class="experience-box">
        <h3>NSS IIT Delhi</h3>
        <p class="role">Campus Ambassador</p>
        <p>Represented the National Service Scheme (NSS) at IIT Delhi, promoting social initiatives, community service, and engaging students in impactful projects.</p>
    </div>

    <!-- eDC IIT Delhi -->
    <div class="experience-box">
        <h3>eDC IIT Delhi</h3>
        <p class="role">Campus Ambassador</p>
        <p>Promoted the Entrepreneurship Development Cell (eDC) at IIT Delhi, helping students engage with startup ecosystems and fostering entrepreneurial thinking.</p>
    </div>

</section>

<a href="index.html" class="back-button">Back to Home</a>

</body>
</html>