$ welcome to our website. WANT TO VISIT best hotels? join us.$
10 | HI!!click on the hotels where you want to go.THANKS.....
20 |
21 |
22 |
--------------------------------------------------------------------------------
/Sudoku-Solver/scripts/draw_board.js:
--------------------------------------------------------------------------------
1 | export function drawBoard() {
2 | const sudokuBoard = document.querySelector("#puzzle")
3 | const squares = 81
4 |
5 | for (let i=0; i 27 && i < 53)) ||
15 | ((i % 9 == 0 || i % 9 == 1 || i % 9 == 2) && i > 53) ||
16 | ((i % 9 == 6 || i % 9 == 7 || i % 9 == 8) && i > 53)
17 | ) {
18 | inputElement.classList.add('odd-section')
19 | }
20 | sudokuBoard.appendChild(inputElement)
21 | }
22 | }
--------------------------------------------------------------------------------
/Priyadarshan/src/features/user/userSlice.js:
--------------------------------------------------------------------------------
1 | import { createSlice } from "@reduxjs/toolkit";
2 |
3 | const initialState = {
4 | name: "",
5 | email: "",
6 | photo: "",
7 | };
8 |
9 | const userSlice = createSlice({
10 | name: "user",
11 | initialState,
12 | reducers: {
13 | setUserLoginDetails: (state, action) => {
14 | state.name = action.payload.name;
15 | state.email = action.payload.email;
16 | state.photo = action.payload.photo;
17 | },
18 |
19 | setSignOutState: (state) => {
20 | state.name = null;
21 | state.email = null;
22 | state.photo = null;
23 | },
24 | },
25 | });
26 |
27 | export const { setUserLoginDetails, setSignOutState } = userSlice.actions;
28 |
29 | export const selectUserName = (state) => state.user.name;
30 | export const selectUserEmail = (state) => state.user.email;
31 | export const selectUserPhoto = (state) => state.user.photo;
32 |
33 | export default userSlice.reducer;
34 |
--------------------------------------------------------------------------------
/Priyadarshan/README.md:
--------------------------------------------------------------------------------
1 | # DisneyPlus Clone
2 |
3 | ### Home Page
4 | 
5 |
6 | ### Logging Page
7 | 
8 |
9 | ### Main Page
10 | 
11 |
12 | ### Dyanamic Catagories
13 | 
14 |
15 |
16 | ### Recommended Videos
17 | 
18 |
19 | ### video Playing Page
20 | 
21 |
22 | ***Developed By.. Priyadarshan Ghosh***
23 | ***Thank you***
24 |
--------------------------------------------------------------------------------
/Priyadarshan/src/features/movie/movieSlice.js:
--------------------------------------------------------------------------------
1 | import { createSlice } from "@reduxjs/toolkit";
2 |
3 | const initialState = {
4 | recommend: null,
5 | newDisney: null,
6 | original: null,
7 | trending: null,
8 | };
9 |
10 | const movieSlice = createSlice({
11 | name: "movie",
12 | initialState,
13 | reducers: {
14 | setMovies: (state, action) => {
15 | state.recommend = action.payload.recommend;
16 | state.newDisney = action.payload.newDisney;
17 | state.original = action.payload.original;
18 | state.trending = action.payload.trending;
19 | },
20 | },
21 | });
22 |
23 | export const { setMovies } = movieSlice.actions;
24 |
25 | export const selectRecommend = (state) => state.movie.recommend;
26 | export const selectNewDisney = (state) => state.movie.newDisney;
27 | export const selectOriginal = (state) => state.movie.original;
28 | export const selectTrending = (state) => state.movie.trending;
29 |
30 | export default movieSlice.reducer;
31 |
--------------------------------------------------------------------------------
/abhijan/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | 7 Soor
8 | Saptak🎶
12 | Feel the seven soors
13 |
14 | sa
15 | re
16 | ga
17 | ma
18 | pa
19 | dha
20 | ni
21 | saa
22 |
23 |
24 |
25 | Saptak © Copyright Reserved
26 |
27 |
28 |
29 |
--------------------------------------------------------------------------------
/code-soham/assets/icons/python.svg:
--------------------------------------------------------------------------------
1 | Sticky Notes
10 |
11 |
12 |
13 |
19 |
20 |
21 |
22 |
30 |
31 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
--------------------------------------------------------------------------------
/abhijan/styles.css:
--------------------------------------------------------------------------------
1 | body{
2 | margin: 0;
3 | padding: 0;
4 | background: url("background.jpg") no-repeat;
5 | }
6 |
7 | h1{
8 | font-size: 150px;
9 | color: azure;
10 | margin-top: 0px;
11 | margin-left: 30%;
12 | font-family: Old English Text MT;
13 |
14 | }
15 |
16 | p{
17 | font-size: 20px;
18 | color: azure;
19 | font-family: Lucida Handwriting;
20 | margin-left: 48%;
21 | margin-top: -120px;
22 | }
23 |
24 | .container{
25 | margin-top: 50px;;
26 | height: 200px;
27 | width: 90%;
28 | margin-left: 5%;
29 | display: flex;
30 | justify-content: space-around;
31 | }
32 | footer{
33 | margin-top: 95px;
34 | height: 70px;
35 | width: 100%;
36 | background-color: rgb(19, 18, 18);
37 | font-size: 15px;
38 | color: azure;
39 | font-family: Times New Roman;
40 | text-align: center;
41 | padding-top: 15px;
42 | }
43 |
44 | .o{
45 | width: 12%;
46 | background-color: black;
47 | color: white;
48 | font-size: 60px;
49 | }
50 | .e{
51 | width: 12%;
52 | background-color: white;
53 | color: black;
54 | font-size: 60px;
55 | }
56 |
57 | .pressed {
58 | box-shadow: 0 3px 4px 0 #DBEDF3;
59 | opacity: 0.5;
60 | }
61 |
--------------------------------------------------------------------------------
/Priyadarshan/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "youtube-disney-clone",
3 | "version": "0.1.0",
4 | "private": true,
5 | "dependencies": {
6 | "@reduxjs/toolkit": "^1.5.1",
7 | "@testing-library/jest-dom": "^5.11.4",
8 | "@testing-library/react": "^11.1.0",
9 | "@testing-library/user-event": "^12.1.10",
10 | "firebase": "^8.4.1",
11 | "firebase-tools": "^9.9.0",
12 | "react": "^17.0.2",
13 | "react-dom": "^17.0.2",
14 | "react-redux": "^7.2.3",
15 | "react-router-dom": "^5.2.0",
16 | "react-scripts": "4.0.3",
17 | "react-slick": "^0.28.1",
18 | "slick-carousel": "^1.8.1",
19 | "styled-components": "^5.2.3",
20 | "web-vitals": "^1.0.1"
21 | },
22 | "scripts": {
23 | "start": "react-scripts start",
24 | "build": "react-scripts build",
25 | "test": "react-scripts test",
26 | "eject": "react-scripts eject"
27 | },
28 | "eslintConfig": {
29 | "extends": [
30 | "react-app",
31 | "react-app/jest"
32 | ]
33 | },
34 | "browserslist": {
35 | "production": [
36 | ">0.2%",
37 | "not dead",
38 | "not op_mini all"
39 | ],
40 | "development": [
41 | "last 1 chrome version",
42 | "last 1 firefox version",
43 | "last 1 safari version"
44 | ]
45 | }
46 | }
47 |
--------------------------------------------------------------------------------
/code-soham/assets/icons/github.svg:
--------------------------------------------------------------------------------
1 | portfolio website
8 |
9 |
15 |
16 |
23 |
24 |
25 |
26 |
I'm NANDINI
27 |
This is my official portfolio website to show all
28 |
30 |
31 |
GO TO PROJECTS
32 |
33 |
34 |
35 |
36 |
37 |
Login
3 |
4 |
5 |
34 |
--------------------------------------------------------------------------------
/signup_page/signup.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Sign Up Form
8 |
13 |
14 |
15 |
16 |
29 |
30 |
31 |
39 |
40 |
41 |
42 |
43 |
--------------------------------------------------------------------------------
/code-soham/code-soham.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Portfolio
25 |
26 | You need to enable JavaScript to run this app.
30 |
31 |
32 |
33 |
--------------------------------------------------------------------------------
/portfolio_webpage/style.css:
--------------------------------------------------------------------------------
1 | *{
2 | margin: 0;
3 | padding: 0;
4 | font-family: sans-serif;
5 | }
6 |
7 | .hero{
8 | position: relative;
9 | width: 100%;
10 | height: 100vh;
11 | background: honeydew;
12 |
13 | }
14 |
15 | nav{
16 | display: flex;
17 | width: 80%;
18 | margin: auto;
19 | padding: 20px 0;
20 | align-items: center;
21 | justify-content: space-between;
22 |
23 | }
24 |
25 | nav ul li{
26 | display: inline-block;
27 | list-style: none;
28 | margin: 10px 20px;
29 |
30 | }
31 |
32 | nav ul li a{
33 | text-decoration: none;
34 | color:black;
35 | font-weight: bold;
36 |
37 | }
38 | nav ul li a:hover{
39 | color: red;
40 |
41 | }
42 |
43 | .detel{
44 | margin-left: 0%;
45 | margin: 15%;
46 |
47 | }
48 | .detel h1{
49 | font-size: 50px;
50 | color: black;
51 | margin-bottom: 20px;
52 |
53 | }
54 |
55 | span{
56 | color:orange;
57 |
58 | }
59 |
60 | .detel p{
61 | color: grey;
62 | padding: 10px 10px;
63 | text-decoration: none;
64 | font-weight: bold;
65 | color: rgb(85, 74, 74);
66 | display: inline-block;
67 | margin: 30px 0px;
68 | border-radius: 5px;
69 | }
70 |
71 | .images{
72 | width: 1000px;
73 | height: 1000px;
74 | position: absolute;
75 | justify-content: center;
76 | height: 100px;
77 |
78 | }
79 |
80 | .images img{
81 | height: 700px;
82 | position: absolute;
83 | left: 80%;
84 | bottom: 0;
85 | }
--------------------------------------------------------------------------------
/code-soham/assets/icons/gcp.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
5 |
11 |
22 |
--------------------------------------------------------------------------------
/RegistrationForm/regform.css:
--------------------------------------------------------------------------------
1 | body {
2 | width: 100%;
3 | height: 100vh;
4 | margin: 0;
5 | background-color: #1b1b32;
6 | color: #f5f6f7;
7 | font-family: Tahoma;
8 | font-size: 19px;
9 | }
10 |
11 | h1, p {
12 | margin: 1em auto;
13 | text-align: center;
14 | }
15 |
16 | form {
17 | width: 60vw;
18 | max-width: 500px;
19 | min-width: 300px;
20 | margin: 0 auto;
21 | padding-bottom: 2em;
22 | }
23 |
24 | fieldset {
25 | border: none;
26 | padding: 2rem 0;
27 | border-bottom: 3px solid #3b3b4f;
28 | }
29 |
30 | fieldset:last-of-type {
31 | border-bottom: none;
32 | }
33 |
34 | label {
35 | display: block;
36 | margin: 0.5rem 0;
37 | }
38 |
39 | input,
40 | textarea,
41 | select {
42 | margin: 10px 0 0 0;
43 | width: 100%;
44 | min-height: 2em;
45 | }
46 |
47 | input, textarea {
48 | background-color: #0a0a23;
49 | border: 1px solid #0a0a23;
50 | color: #ffffff;
51 | }
52 |
53 | .inline {
54 | width: unset;
55 | margin: 0 0.5em 0 0;
56 | vertical-align: middle;
57 | }
58 |
59 | input[type="submit"] {
60 | display: block;
61 | width: 60%;
62 | margin: 1em auto;
63 | height: 2em;
64 | font-size: 1.1rem;
65 | background-color: #3b3b4f;
66 | border-color: white;
67 | min-width: 300px;
68 | }
69 |
70 | input[type="file"] {
71 | padding: 1px 2px;
72 | }
73 |
74 | a{
75 | color:#dfdfe2;
76 | }
77 |
--------------------------------------------------------------------------------
/Suvarnesh/scripts/main.js:
--------------------------------------------------------------------------------
1 | // Add your javascript here
2 | // Don't forget to add it into respective layouts where this js file is needed
3 |
4 | $(document).ready(function() {
5 | AOS.init( {
6 | // uncomment below for on-scroll animations to played only once
7 | // once: true
8 | }); // initialize animate on scroll library
9 | });
10 |
11 | // Smooth scroll for links with hashes
12 | $('a.smooth-scroll')
13 | .click(function(event) {
14 | // On-page links
15 | if (
16 | location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '')
17 | &&
18 | location.hostname == this.hostname
19 | ) {
20 | // Figure out element to scroll to
21 | var target = $(this.hash);
22 | target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
23 | // Does a scroll target exist?
24 | if (target.length) {
25 | // Only prevent default if animation is actually gonna happen
26 | event.preventDefault();
27 | $('html, body').animate({
28 | scrollTop: target.offset().top
29 | }, 1000, function() {
30 | // Callback after animation
31 | // Must change focus!
32 | var $target = $(target);
33 | $target.focus();
34 | if ($target.is(":focus")) { // Checking if the target was focused
35 | return false;
36 | } else {
37 | $target.attr('tabindex','-1'); // Adding tabindex for elements not focusable
38 | $target.focus(); // Set focus again
39 | };
40 | });
41 | }
42 | }
43 | });
44 |
--------------------------------------------------------------------------------
/code-soham/assets/icons/c++.svg:
--------------------------------------------------------------------------------
1 | Login Form with Shake Effect | CodingNepal
8 | GfG
8 |
9 |
10 |
88 |
89 |
90 |
--------------------------------------------------------------------------------
/Shanit/Musick/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Musick
8 |
13 |
14 |
15 |
25 |
26 |
27 | Welcome to Musick
28 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente, odit numquam! Sunt dolorem eligendi aut harum, at dolores aperiam fuga delectus suscipit repellat enim non quam. Commodi vitae itaque ratione repudiandae tenetur. Molestias placeat nihil tempore asperiores dolorum inventore, fugiat neque sint rem, explicabo ducimus sed deserunt reiciendis, minus delectus?
29 | Find Lyrics
30 |
31 |
32 |
33 |
--------------------------------------------------------------------------------
/Sudoku-Solver/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Sudoku Solver
11 |
15 |
Sudoku Solver
16 |
Solves sudoku puzzle using backtracking technique.
17 |
→ Enter a valid sudoku puzzle. Then click the Solve button to see the solution.
18 |
→ Click the Clear button to clear the board.
19 |
→ Hit Load a puzzle to load a pre-existing puzzle.
20 |
21 |
Solve
22 |
Clear
23 |
Load a puzzle
24 |
Document
9 |
10 |
11 |
12 |
13 |
14 |
16 |
17 | clr
18 | del
19 | %
20 | /
21 | 7
22 | 8
23 | 9
24 | *
25 | 4
26 | 5
27 | 6
28 | -
29 | 1
30 | 2
31 | 3
32 | +
33 | .
34 | 0
35 | =
36 |
37 |
38 |
React App
28 |
29 |
30 | You need to enable JavaScript to run this app.
31 |
32 |
42 |
43 |
44 |
--------------------------------------------------------------------------------
/Suvarnesh/404.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Page Not Found
7 |
8 |
23 |
24 |
25 |
26 |
404
27 |
Page Not Found
28 |
The specified file was not found on this website. Please check the URL for mistakes and try again.
29 |
Why am I seeing this?
30 |
This page was generated by the Firebase Command-Line Interface. To modify it, edit the 404.html file in your project's configured public directory.
31 |
Login Page
6 |
46 |
47 |
48 | Student Login Form
49 |
61 |
62 |
63 |
--------------------------------------------------------------------------------
/Sudoku-Solver/styles/style.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;500;600;700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
2 |
3 | * {
4 | margin: 0;
5 | padding: 0;
6 | box-sizing: border-box;
7 | border-spacing: 0;
8 | }
9 |
10 | html {
11 | font-family: 'Roboto', sans-serif;
12 | background-color: #FDF2E9;
13 | }
14 |
15 | .intro {
16 | color: #1B4F72;
17 | font-size: 25px;
18 | letter-spacing: 1px;
19 | margin: 30px 0px 10px 0px;
20 | }
21 |
22 | .instruction-1, .instruction-2, .instruction-3, .description {
23 | font-size: 19px;
24 | color: #1B4F72;
25 | letter-spacing: 0.5px;
26 | }
27 |
28 | .instruction-3 {
29 | margin: 0px 0px 15px 0px;
30 | }
31 |
32 | .description {
33 | margin: 0px 0px 15px 0px;
34 | }
35 |
36 | .decorator-elem {
37 | font-weight: bold;
38 | }
39 |
40 | .sudoku-solver {
41 | margin: auto;
42 | width: 50%;
43 | }
44 |
45 | .puzzle {
46 | width: 540px;
47 | height: 540px;
48 | }
49 |
50 |
51 | .odd-section {
52 | background: #d3d3d3;
53 | }
54 |
55 | .puzzle input {
56 | text-align: center;
57 | font-size: 30px;
58 | width: 60px;
59 | height: 60px;
60 | border: 1px #808080 solid;
61 | }
62 |
63 | .empty-el {
64 | color: #4848d4;
65 | }
66 |
67 | .solve-button, .clear-button, .load-button {
68 | margin-top: 20px;
69 | background-color: #1B4F72;
70 | border: none;
71 | border-radius: 3px;
72 | color: white;
73 | padding: 15px 30px;
74 | text-align: center;
75 | text-decoration: none;
76 | display: inline-block;
77 | font-size: 18px;
78 | letter-spacing: 1px;
79 | /* text-transform: uppercase; */
80 | cursor: pointer;
81 | }
82 |
83 | .clear-button, .load-button {
84 | margin-left: 15px;
85 | }
86 |
87 | .solve-button:hover, .clear-button:hover, .load-button:hover {
88 | background-color: #568caf;
89 | }
90 |
--------------------------------------------------------------------------------
/code-soham/assets/bg-st-stp.svg:
--------------------------------------------------------------------------------
1 |
11 | Trending
12 |
13 | {movies &&
14 | movies.map((movie, key) => (
15 |
16 | {movie.id}
17 |
21 | ))}
22 |
23 |
24 | );
25 | };
26 |
27 | const Container = styled.div`
28 | padding: 0 0 26px;
29 | `;
30 |
31 | const Content = styled.div`
32 | display: grid;
33 | grid-gap: 25px;
34 | gap: 25px;
35 | grid-template-columns: repeat(4, minmax(0, 1fr));
36 |
37 | @media (max-width: 768px) {
38 | grid-template-columns: repeat(2, minmax(0, 1fr));
39 | }
40 | `;
41 |
42 | const Wrap = styled.div`
43 | padding-top: 56.25%;
44 | border-radius: 10px;
45 | box-shadow: rgb(0 0 0 / 69%) 0px 26px 30px -10px,
46 | rgb(0 0 0 / 73%) 0px 16px 10px -10px;
47 | cursor: pointer;
48 | overflow: hidden;
49 | position: relative;
50 | transition: all 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
51 | border: 3px solid rgba(249, 249, 249, 0.1);
52 | img {
53 | inset: 0px;
54 | display: block;
55 | height: 100%;
56 | object-fit: cover;
57 | opacity: 1;
58 | position: absolute;
59 | transition: opacity 500ms ease-in-out 0s;
60 | width: 100%;
61 | z-index: 1;
62 | top: 0;
63 | }
64 | &:hover {
65 | box-shadow: rgb(0 0 0 / 80%) 0px 40px 58px -16px,
66 | rgb(0 0 0 / 72%) 0px 30px 22px -10px;
67 | transform: scale(1.05);
68 | border-color: rgba(249, 249, 249, 0.8);
69 | }
70 | `;
71 |
72 | export default Trending;
73 |
--------------------------------------------------------------------------------
/Priyadarshan/src/components/Originals.js:
--------------------------------------------------------------------------------
1 | import styled from "styled-components";
2 | import { Link } from "react-router-dom";
3 | import { useSelector } from "react-redux";
4 | import { selectOriginal } from "../features/movie/movieSlice";
5 |
6 | const Originals = (props) => {
7 | const movies = useSelector(selectOriginal);
8 |
9 | return (
10 |
11 | Originals
12 |
13 | {movies &&
14 | movies.map((movie, key) => (
15 |
16 | {movie.id}
17 |
21 | ))}
22 |
23 |
24 | );
25 | };
26 |
27 | const Container = styled.div`
28 | padding: 0 0 26px;
29 | `;
30 |
31 | const Content = styled.div`
32 | display: grid;
33 | grid-gap: 25px;
34 | gap: 25px;
35 | grid-template-columns: repeat(4, minmax(0, 1fr));
36 |
37 | @media (max-width: 768px) {
38 | grid-template-columns: repeat(2, minmax(0, 1fr));
39 | }
40 | `;
41 |
42 | const Wrap = styled.div`
43 | padding-top: 56.25%;
44 | border-radius: 10px;
45 | box-shadow: rgb(0 0 0 / 69%) 0px 26px 30px -10px,
46 | rgb(0 0 0 / 73%) 0px 16px 10px -10px;
47 | cursor: pointer;
48 | overflow: hidden;
49 | position: relative;
50 | transition: all 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
51 | border: 3px solid rgba(249, 249, 249, 0.1);
52 | img {
53 | inset: 0px;
54 | display: block;
55 | height: 100%;
56 | object-fit: cover;
57 | opacity: 1;
58 | position: absolute;
59 | transition: opacity 500ms ease-in-out 0s;
60 | width: 100%;
61 | z-index: 1;
62 | top: 0;
63 | }
64 | &:hover {
65 | box-shadow: rgb(0 0 0 / 80%) 0px 40px 58px -16px,
66 | rgb(0 0 0 / 72%) 0px 30px 22px -10px;
67 | transform: scale(1.05);
68 | border-color: rgba(249, 249, 249, 0.8);
69 | }
70 | `;
71 |
72 | export default Originals;
73 |
--------------------------------------------------------------------------------
/Priyadarshan/src/components/NewDisney.js:
--------------------------------------------------------------------------------
1 | import styled from "styled-components";
2 | import { Link } from "react-router-dom";
3 | import { useSelector } from "react-redux";
4 | import { selectNewDisney } from "../features/movie/movieSlice";
5 |
6 | const NewDisney = (props) => {
7 | const movies = useSelector(selectNewDisney);
8 |
9 | return (
10 |
11 | New to Disney+
12 |
13 | {movies &&
14 | movies.map((movie, key) => (
15 |
16 | {movie.id}
17 |
21 | ))}
22 |
23 |
24 | );
25 | };
26 |
27 | const Container = styled.div`
28 | padding: 0 0 26px;
29 | `;
30 |
31 | const Content = styled.div`
32 | display: grid;
33 | grid-gap: 25px;
34 | gap: 25px;
35 | grid-template-columns: repeat(4, minmax(0, 1fr));
36 |
37 | @media (max-width: 768px) {
38 | grid-template-columns: repeat(2, minmax(0, 1fr));
39 | }
40 | `;
41 |
42 | const Wrap = styled.div`
43 | padding-top: 56.25%;
44 | border-radius: 10px;
45 | box-shadow: rgb(0 0 0 / 69%) 0px 26px 30px -10px,
46 | rgb(0 0 0 / 73%) 0px 16px 10px -10px;
47 | cursor: pointer;
48 | overflow: hidden;
49 | position: relative;
50 | transition: all 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
51 | border: 3px solid rgba(249, 249, 249, 0.1);
52 | img {
53 | inset: 0px;
54 | display: block;
55 | height: 100%;
56 | object-fit: cover;
57 | opacity: 1;
58 | position: absolute;
59 | transition: opacity 500ms ease-in-out 0s;
60 | width: 100%;
61 | z-index: 1;
62 | top: 0;
63 | }
64 | &:hover {
65 | box-shadow: rgb(0 0 0 / 80%) 0px 40px 58px -16px,
66 | rgb(0 0 0 / 72%) 0px 30px 22px -10px;
67 | transform: scale(1.05);
68 | border-color: rgba(249, 249, 249, 0.8);
69 | }
70 | `;
71 |
72 | export default NewDisney;
73 |
--------------------------------------------------------------------------------
/Priyadarshan/src/components/Recommends.js:
--------------------------------------------------------------------------------
1 | import styled from "styled-components";
2 | import { Link } from "react-router-dom";
3 | import { useSelector } from "react-redux";
4 | import { selectRecommend } from "../features/movie/movieSlice";
5 |
6 | const Recommends = (props) => {
7 | const movies = useSelector(selectRecommend);
8 | console.log(movies, ":🛢️");
9 |
10 | return (
11 |
12 | Recommended for You
13 |
14 | {movies &&
15 | movies.map((movie, key) => (
16 |
17 | {movie.id}
18 |
22 | ))}
23 |
24 |
25 | );
26 | };
27 |
28 | const Container = styled.div`
29 | padding: 0 0 26px;
30 | `;
31 |
32 | const Content = styled.div`
33 | display: grid;
34 | grid-gap: 25px;
35 | gap: 25px;
36 | grid-template-columns: repeat(4, minmax(0, 1fr));
37 |
38 | @media (max-width: 768px) {
39 | grid-template-columns: repeat(2, minmax(0, 1fr));
40 | }
41 | `;
42 |
43 | const Wrap = styled.div`
44 | padding-top: 56.25%;
45 | border-radius: 10px;
46 | box-shadow: rgb(0 0 0 / 69%) 0px 26px 30px -10px,
47 | rgb(0 0 0 / 73%) 0px 16px 10px -10px;
48 | cursor: pointer;
49 | overflow: hidden;
50 | position: relative;
51 | transition: all 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
52 | border: 3px solid rgba(249, 249, 249, 0.1);
53 |
54 | img {
55 | inset: 0px;
56 | display: block;
57 | height: 100%;
58 | object-fit: cover;
59 | opacity: 1;
60 | position: absolute;
61 | transition: opacity 500ms ease-in-out 0s;
62 | width: 100%;
63 | z-index: 1;
64 | top: 0;
65 | }
66 |
67 | &:hover {
68 | box-shadow: rgb(0 0 0 / 80%) 0px 40px 58px -16px,
69 | rgb(0 0 0 / 72%) 0px 30px 22px -10px;
70 | transform: scale(1.05);
71 | border-color: rgba(249, 249, 249, 0.8);
72 | }
73 | `;
74 |
75 | export default Recommends;
76 |
--------------------------------------------------------------------------------
/code-soham/assets/icons/sublime.svg:
--------------------------------------------------------------------------------
1 | BISHAL.com
8 |
9 |
10 | ALL ABOUT AN APPLE
11 | HELLO I AM BISHAL
12 | GO TO THE CHANEL
13 | LET'S GO
14 | HEADING
15 | An apple is an edible fruit produced by an apple tree (Malus domestica).
20 | "MORE ABOUT APPLE"
21 | Login Page
6 |
46 |
47 |
48 | User Login Form
49 |
61 |
62 |
63 |
--------------------------------------------------------------------------------
/gitnandini/landing_page.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Freshos Landing Page
8 |
51 |
52 |
53 |
54 |
55 |
56 | Home
57 | About
58 | Services
59 | Contact us
60 |
61 |
62 |
63 |
64 |
65 | Welcome to FRESHOS
66 | Fresh groceries at reasonable price are just a click away !
67 | Order Now
68 |
69 |
70 |
71 |
72 |
73 |
--------------------------------------------------------------------------------
/Shanit/index.css:
--------------------------------------------------------------------------------
1 | /* Css reset */
2 | *{
3 | margin: 0;
4 | padding: 0;
5 | }
6 | /* Navigation Bar */
7 |
8 | #navbar{
9 | display: flex;
10 | align-items: center;
11 | /* justify-content: center; */
12 | position: relative;
13 | height: 70px;
14 | font-family: 'Baloo 2', cursive;
15 | }
16 |
17 | /* Navigation Bar: Logo */
18 | #logo{
19 | margin: 0px 10px;
20 | padding: 0px 15px;
21 | }
22 | #logo img{
23 | height: 55px;
24 | width: 55px;
25 | }
26 |
27 | /* Navigation Bar: listing */
28 | #navbar ul{
29 | display: flex;
30 | margin: 20px;
31 | }
32 | #navbar::before{
33 | content: "";
34 | background-color: black;
35 | position: absolute;
36 | height: 100%;
37 | width: 100%;
38 | z-index: -1;
39 | opacity: 0.4;
40 | }
41 | #navbar ul li{
42 | /* color: azure; */
43 | list-style: none;
44 | font-size: 1.1rem;
45 | }
46 | #navbar ul li a{
47 | color: white;
48 | display: block;
49 | padding: 10px 20px;
50 | border-radius: 30px;
51 | text-decoration: none;
52 | }
53 | #navbar ul li a:hover{
54 | color: rgb(107, 224, 245);
55 | background-color: rgb(101, 38, 121);
56 | }
57 | .item{
58 | padding: 10px 2px;
59 | }
60 | #home{
61 | display: flex;
62 | flex-direction: column;
63 | padding: 5px 30px;
64 | height: 150px;
65 | justify-content: center;
66 | align-items: center;
67 | color: white;
68 | }
69 | #home::before{
70 | content: "";
71 | background: url("DJhands.jpg") no-repeat center center/cover;
72 | position: absolute;
73 | height: 100%;
74 | width: 100%;
75 | z-index: -1;
76 | opacity: 0.9;
77 | }
78 | #home h2{
79 | font-size: 2.5rem;
80 | font-family: 'Baloo 2', cursive;
81 | padding: 20px;
82 | margin: 80px;
83 | }
84 |
85 | #home p{
86 | font-family: 'Indie Flower', cursive;
87 | }
88 |
89 | .btn{
90 | border: 2px solid rgb(201, 76, 240);
91 | width: 120px;
92 | margin: 10px;
93 | padding: 5px;
94 | border-radius: 15px;
95 | font-family: 'Baloo 2', cursive;
96 | background-color: rgb(107, 224, 245);
97 | cursor: pointer;
98 | }
99 | .btn:hover{
100 | background-color: rgb(101, 38, 121);
101 | color: rgb(107, 224, 245);
102 | }
103 |
104 | .center{
105 | text-align: center;
106 | }
107 |
--------------------------------------------------------------------------------
/Sudoku-Solver/scripts/solver.js:
--------------------------------------------------------------------------------
1 | let board = []
2 |
3 | export function insertValues() {
4 | const inputs = document.querySelectorAll('input')
5 |
6 | inputs.forEach((input) => {
7 | if(input.value) {
8 | board.push(parseInt(input.value))
9 | input.classList.add('input-el')
10 | } else {
11 | board.push(0)
12 | input.classList.add('empty-el')
13 | }
14 | })
15 | }
16 |
17 | const indexToRowCol = (index) => {
18 | return {row: Math.floor(index/9), col: index%9}
19 | }
20 | const rowColToIndex = (row, col) => (row * 9 + col)
21 |
22 | const acceptable = (board, index, value) => {
23 | let { row, col } = indexToRowCol(index)
24 | for (let r = 0; r < 9; ++r) {
25 | if (board[rowColToIndex(r, col)] == value) return false
26 | }
27 | for (let c = 0; c < 9; ++c) {
28 | if (board[rowColToIndex(row, c)] == value) return false
29 | }
30 |
31 | let r1 = Math.floor(row / 3) * 3
32 | let c1 = Math.floor(col / 3) * 3
33 | for (let r = r1; r < r1 + 3; ++r) {
34 | for (let c = c1; c < c1 + 3; ++c) {
35 | if (board[rowColToIndex(r, c)] == value) return false
36 | }
37 | }
38 | return true
39 | }
40 |
41 | const getChoices = (board, index) => {
42 | let choices = []
43 | for (let value = 1; value <= 9; ++value) {
44 | if (acceptable(board, index, value)) {
45 | choices.push(value)
46 | }
47 | }
48 | return choices
49 | }
50 |
51 | const bestBet = (board) => {
52 | let index, moves, bestLen = 100
53 | for (let i = 0; i < 81; ++i) {
54 | if (!board[i]) {
55 | let m = getChoices(board, i)
56 | if (m.length < bestLen) {
57 | bestLen = m.length
58 | moves = m
59 | index = i
60 | if (bestLen == 0) break
61 | }
62 | }
63 | }
64 | return { index, moves }
65 | }
66 |
67 | export const solve = () => {
68 | let { index, moves } = bestBet(board)
69 | if (index == null) return true
70 | for (let m of moves) {
71 | board[index] = m
72 | if (solve()) return true
73 | }
74 | board[index] = 0
75 | return false
76 | }
77 |
78 | export function populateValues() {
79 | const inputs = document.querySelectorAll('input')
80 | inputs.forEach((input, i) => input.value = board[i])
81 | }
--------------------------------------------------------------------------------
/Priyadarshan/src/components/ImgSlider.js:
--------------------------------------------------------------------------------
1 | import styled from "styled-components";
2 | import "slick-carousel/slick/slick.css";
3 | import "slick-carousel/slick/slick-theme.css";
4 | import Slider from "react-slick";
5 |
6 | const ImgSlider = (props) => {
7 | let settings = {
8 | dots: true,
9 | infinite: true,
10 | speed: 500,
11 | slidesToShow: 1,
12 | slidesToScroll: 1,
13 | autoplay: true,
14 | };
15 | return (
16 |
17 |
18 |
19 |
21 |
22 |
23 |
24 |
25 |
27 |
28 |
29 |
30 |
31 |
33 |
34 |
35 |
36 |
37 |
39 |
40 |
41 | );
42 | };
43 |
44 | const Carousel = styled(Slider)`
45 | margin-top: 20px;
46 |
47 | & > button {
48 | opacity: 0;
49 | height: 100%;
50 | width: 5vw;
51 | z-index: 1;
52 |
53 | &:hover {
54 | opacity: 1;
55 | transition: opacity 0.2s ease 0s;
56 | }
57 | }
58 |
59 | ul li button {
60 | &:before {
61 | font-size: 10px;
62 | color: rgb(150, 158, 171);
63 | }
64 | }
65 |
66 | li.slick-active button:before {
67 | color: white;
68 | }
69 |
70 | .slick-list {
71 | overflow: initial;
72 | }
73 |
74 | .slick-prev {
75 | left: -75px;
76 | }
77 |
78 | .slick-next {
79 | right: -75px;
80 | }
81 | `;
82 |
83 | const Wrap = styled.div`
84 | border-radius: 4px;
85 | cursor: pointer;
86 | position: relative;
87 |
88 | a {
89 | border-radius: 4px;
90 | box-shadow: rgb(0 0 0 / 69%) 0px 26px 30px -10px,
91 | rgb(0 0 0 / 73%) 0px 16px 10px -10px;
92 | cursor: pointer;
93 | display: block;
94 | position: relative;
95 | padding: 4px;
96 |
97 | img {
98 | width: 100%;
99 | height: 100%;
100 | }
101 |
102 | &:hover {
103 | padding: 0;
104 | border: 4px solid rgba(249, 249, 249, 0.8);
105 | transition-duration: 300ms;
106 | }
107 | }
108 | `;
109 |
110 | export default ImgSlider;
111 |
--------------------------------------------------------------------------------
/RegistrationForm/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Registration Form
6 | Registration Form
10 | Please fill out this form with the required information
11 |
43 |
44 |
--------------------------------------------------------------------------------
/Snigdha's Login Webpage/script.js:
--------------------------------------------------------------------------------
1 | const form = document.querySelector("form");
2 | eField = form.querySelector(".email"),
3 | eInput = eField.querySelector("input"),
4 | pField = form.querySelector(".password"),
5 | pInput = pField.querySelector("input");
6 |
7 | form.onsubmit = (e)=>{
8 | e.preventDefault(); //preventing from form submitting
9 | //if email and password is blank then add shake class in it else call specified function
10 | (eInput.value == "") ? eField.classList.add("shake", "error") : checkEmail();
11 | (pInput.value == "") ? pField.classList.add("shake", "error") : checkPass();
12 |
13 | setTimeout(()=>{ //remove shake class after 500ms
14 | eField.classList.remove("shake");
15 | pField.classList.remove("shake");
16 | }, 500);
17 |
18 | eInput.onkeyup = ()=>{checkEmail();} //calling checkEmail function on email input keyup
19 | pInput.onkeyup = ()=>{checkPass();} //calling checkPassword function on pass input keyup
20 |
21 | function checkEmail(){ //checkEmail function
22 | let pattern = /^[^ ]+@[^ ]+\.[a-z]{2,3}$/; //pattern for validate email
23 | if(!eInput.value.match(pattern)){ //if pattern not matched then add error and remove valid class
24 | eField.classList.add("error");
25 | eField.classList.remove("valid");
26 | let errorTxt = eField.querySelector(".error-txt");
27 | //if email value is not empty then show please enter valid email else show Email can't be blank
28 | (eInput.value != "") ? errorTxt.innerText = "Enter a valid email address" : errorTxt.innerText = "Email can't be blank";
29 | }else{ //if pattern matched then remove error and add valid class
30 | eField.classList.remove("error");
31 | eField.classList.add("valid");
32 | }
33 | }
34 |
35 | function checkPass(){ //checkPass function
36 | if(pInput.value == ""){ //if pass is empty then add error and remove valid class
37 | pField.classList.add("error");
38 | pField.classList.remove("valid");
39 | }else{ //if pass is empty then remove error and add valid class
40 | pField.classList.remove("error");
41 | pField.classList.add("valid");
42 | }
43 | }
44 |
45 | //if eField and pField doesn't contains error class that mean user filled details properly
46 | if(!eField.classList.contains("error") && !pField.classList.contains("error")){
47 | window.location.href = form.getAttribute("action"); //redirecting user to the specified url which is inside action attribute of form tag
48 | }
49 | }
50 |
--------------------------------------------------------------------------------
/White Board/Online-WhiteBoard/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Online WhiteBoard
9 |
15 |
16 |
17 |
19 |
Online WhiteBoard
20 |
21 |
22 | Clear Board
23 |
24 |
25 |
31 |
32 | Your Screen cleared.
33 |
34 |
35 |
37 |
39 | Abhi Web Design | Welcome
11 |
15 |
16 |
Abhi Web Design
17 |
19 |
24 |
25 |
26 |
27 |
28 |
Professional Web Design
29 |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris lobortis quam sed condimentum ornare.
30 |
32 |
33 |
34 |
Subscribe To Our Newsletter
35 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
HTML5 Markup
46 |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris lobortis quam sed condimentum ornare.
47 |
48 |
49 |
50 |
CSS3 Styling
51 |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris lobortis quam sed condimentum ornare.
52 |
53 |
54 |
55 |
Graphic Design
56 |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris lobortis quam sed condimentum ornare.
57 |
58 |
60 |
63 |
64 |
65 |
--------------------------------------------------------------------------------
/Priyadarshan/src/components/Home.js:
--------------------------------------------------------------------------------
1 | import styled from "styled-components";
2 | import ImgSlider from "./ImgSlider";
3 | import NewDisney from "./NewDisney";
4 | import Originals from "./Originals";
5 | import Recommends from "./Recommends";
6 | import Trending from "./Trending";
7 | import Viewers from "./Viewers";
8 | import { useEffect } from "react";
9 | import { useDispatch, useSelector } from "react-redux";
10 | import db from "../firebase";
11 | import { setMovies } from "../features/movie/movieSlice";
12 | import { selectUserName } from "../features/user/userSlice";
13 |
14 | const Home = (props) => {
15 | const dispatch = useDispatch();
16 | const userName = useSelector(selectUserName);
17 | let recommends = [];
18 | let newDisneys = [];
19 | let originals = [];
20 | let trending = [];
21 |
22 | useEffect(() => {
23 | console.log("hello");
24 | db.collection("movies").onSnapshot((snapshot) => {
25 | snapshot.docs.map((doc) => {
26 | console.log(recommends);
27 | switch (doc.data().type) {
28 | case "recommend":
29 | recommends = [...recommends, { id: doc.id, ...doc.data() }];
30 | break;
31 |
32 | case "new":
33 | newDisneys = [...newDisneys, { id: doc.id, ...doc.data() }];
34 | break;
35 |
36 | case "original":
37 | originals = [...originals, { id: doc.id, ...doc.data() }];
38 | break;
39 |
40 | case "trending":
41 | trending = [...trending, { id: doc.id, ...doc.data() }];
42 | break;
43 | }
44 | });
45 |
46 | dispatch(
47 | setMovies({
48 | recommend: recommends,
49 | newDisney: newDisneys,
50 | original: originals,
51 | trending: trending,
52 | })
53 | );
54 | });
55 | }, [userName]);
56 |
57 | return (
58 |
59 |
66 | );
67 | };
68 |
69 | const Container = styled.main`
70 | position: relative;
71 | min-height: calc(100vh - 250px);
72 | overflow-x: hidden;
73 | display: block;
74 | top: 72px;
75 | padding: 0 calc(3.5vw + 5px);
76 |
77 | &:after {
78 | background: url("/images/home-background.png") center center / cover
79 | no-repeat fixed;
80 | content: "";
81 | position: absolute;
82 | inset: 0px;
83 | opacity: 1;
84 | z-index: -1;
85 | }
86 | `;
87 |
88 | export default Home;
89 |
--------------------------------------------------------------------------------
/Avik/flipkartCloning.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css2?family=Cormorant+SC:wght@300&family=Lato:ital,wght@0,300;0,400;1,100;1,300&display=swap');
2 | @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@1,300&display=swap');
3 |
4 | :root {
5 | --main-bg-color: #2874f0;
6 | }
7 |
8 | * {
9 | margin: 0;
10 | padding: 0;
11 | }
12 |
13 | header {
14 | height: 58px;
15 | background: var(--main-bg-color);
16 | font-family: 'Cormorant SC', serif;
17 | font-family: 'Lato', sans-serif;
18 | }
19 | nav{
20 | display: flex;
21 |
22 | }
23 | .logo{
24 | display: flex;
25 | align-items: center;
26 | }
27 | .logo img{
28 | width: 88px;
29 | padding: 0 25px;
30 | }
31 | .search{
32 | display: flex;
33 | align-items: center;
34 |
35 | }
36 | .search input{
37 | width: 30vw;
38 | height: 27px;
39 | border-radius: 2px;
40 | margin: 0 16px 0 56px;
41 | padding: 0 12px;
42 | }
43 | .search button{
44 | font-family: 'Cormorant SC', serif;
45 | font-family: 'Lato', sans-serif;
46 | font-weight: 900;
47 | }
48 | .slider{
49 | margin:12px auto;
50 | width: 60vw;
51 | overflow: hidden;
52 | }
53 | .card .card-items img{
54 | height: 166px;
55 | /* width: 166px; */
56 | }
57 | .card{
58 | max-width: 91vw;
59 | margin: 37px auto;
60 | }
61 |
62 | .my-2{
63 | margin: 26px 0;
64 | }
65 | /* .card .card-items{
66 | display: flex;
67 | padding: 0 16px;
68 | } */
69 | .card h2{
70 | font-family: 'Roboto', sans-serif;
71 | margin: 26px 0;
72 | }
73 | .cards{
74 | display: flex;
75 | flex-direction: row;
76 | overflow: hidden;
77 | }
78 |
79 | .card-items{
80 | display: inline-flex;
81 | justify-content:center;
82 | flex-direction: column;
83 | margin: 0 15px;
84 | }
85 | .card .lines p{
86 | padding: 2px 40px;
87 | }
88 |
89 | .container{
90 | min-height: calc(100vh - 58px - 12vh);
91 | }
92 | nav ul {
93 | height: 58px;
94 | display: flex;
95 | justify-content: flex-start;
96 | align-items: center;
97 | }
98 |
99 | nav ul li {
100 | padding: 0 23px;
101 | list-style: none;
102 |
103 | }
104 |
105 | nav ul li a {
106 | color: white;
107 | text-decoration: none;
108 | }
109 | nav ul li a:hover {
110 | font-weight: bolder;
111 | }
112 |
113 | footer {
114 | height: 12vh;
115 | background-color: var(--main-bg-color);
116 | color: white;
117 | font-family: 'Cormorant SC', serif;
118 | font-family: 'Lato', sans-serif;
119 | }
120 |
--------------------------------------------------------------------------------
/code-soham/assets/icons/aws.svg:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 | GET ALL THERE
10 |
11 | Get Premier Access to Raya and the Last Dragon for an additional fee
12 | with a Disney+ subscription. As of 03/26/21, the price of Disney+
13 | and The Disney Bundle will increase by $1.
14 |
15 |
17 |
19 |
20 | );
21 | };
22 |
23 | const Container = styled.section`
24 | overflow: hidden;
25 | display: flex;
26 | flex-direction: column;
27 | text-align: center;
28 | height: 100vh;
29 | `;
30 |
31 | const Content = styled.div`
32 | margin-bottom: 10vw;
33 | width: 100%;
34 | position: relative;
35 | min-height: 100vh;
36 | box-sizing: border-box;
37 | display: flex;
38 | justify-content: center;
39 | align-items: center;
40 | flex-direction: column;
41 | padding: 80px 40px;
42 | height: 100%;
43 | `;
44 |
45 | const BgImage = styled.div`
46 | height: 100%;
47 | background-position: top;
48 | background-size: cover;
49 | background-repeat: no-repeat;
50 | background-image: url("/images/login-background.jpg");
51 | position: absolute;
52 | top: 0;
53 | right: 0;
54 | left: 0;
55 | z-index: -1;
56 | `;
57 |
58 | const CTA = styled.div`
59 | max-width: 650px;
60 | width: 100%;
61 | display: flex;
62 | flex-direction: column;
63 | `;
64 |
65 | const CTALogoOne = styled.img`
66 | margin-bottom: 12px;
67 | max-width: 600px;
68 | min-height: 1px;
69 | display: block;
70 | width: 100%;
71 | `;
72 |
73 | const SignUp = styled.a`
74 | font-weight: bold;
75 | color: #f9f9f9;
76 | background-color: #0063e5;
77 | margin-bottom: 12px;
78 | width: 100%;
79 | letter-spacing: 1.5px;
80 | font-size: 18px;
81 | padding: 16.5px 0;
82 | border: 1px solid transparent;
83 | border-radius: 4px;
84 |
85 | &:hover {
86 | background-color: #0483ee;
87 | }
88 | `;
89 |
90 | const Description = styled.p`
91 | color: hsla(0, 0%, 95.3%, 1);
92 | font-size: 11px;
93 | margin: 0 0 24px;
94 | line-height: 1.5;
95 | letter-spacing: 1.5px;
96 | `;
97 |
98 | const CTALogoTwo = styled.img`
99 | max-width: 600px;
100 | margin-bottom: 20px;
101 | display: inline-block;
102 | vertical-align: bottom;
103 | width: 100%;
104 | `;
105 |
106 | export default Login;
107 |
--------------------------------------------------------------------------------
/ARITRA/index.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css2?family=Architects+Daughter&display=swap');
2 |
3 | *{
4 | padding: 0;
5 | margin: 0;
6 | }
7 |
8 | body{
9 | position: relative;
10 | background-color: #c68c53a8;
11 | font-family: 'Architects Daughter', cursive;
12 | }
13 |
14 | button{
15 | padding: 10px;
16 | outline: none;
17 | cursor: pointer;
18 | font-family: inherit;
19 | border-radius: 5px;
20 | background: whitesmoke;
21 | border: 1px solid lightgray;
22 | }
23 |
24 | button:hover{
25 | color: white;
26 | background-color: rgba(0, 0, 0, 0.1);
27 | }
28 |
29 | #modal{
30 | position: fixed;
31 | z-index: 1;
32 | width: 100%;
33 | min-height: 100vh;
34 | background-color: rgba(0, 0, 0, 0.5);
35 | }
36 |
37 | #inner_modal{
38 | display: flex;
39 | justify-content: center;
40 | align-items: center;
41 | min-height: 100vh;
42 | }
43 |
44 | #inner_modal textarea{
45 | width: 276px;
46 | height: 276px;
47 | padding: 25px;
48 | outline: none;
49 | resize: none;
50 | font-size: 1.5rem;
51 | font-family: inherit;
52 | box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.9);
53 | }
54 |
55 | #inner_modal i{
56 | font-size: 1.4rem;
57 | color: gray;
58 | cursor: pointer;
59 | margin-top: -285px;
60 | margin-left: -35px;
61 | transition: 1s ease-in-out;
62 | }
63 |
64 | #inner_modal i:hover{
65 | color: lightgray;
66 | }
67 |
68 | .container{
69 | width: 1280px;
70 | margin: auto;
71 | }
72 |
73 | #header{
74 | color: white;
75 | padding: 0 20px;
76 | min-height: 70px;
77 | text-shadow: 1px 1px black;
78 | display: flex;
79 | flex-wrap: wrap;
80 | justify-content: space-between;
81 | align-items: center;
82 | }
83 |
84 | .fas{
85 | color: #c2ff3d;
86 | }
87 |
88 | #all_notes{
89 | display: flex;
90 | justify-content: center;
91 | flex-wrap: wrap;
92 | padding-top: 10px;
93 | }
94 |
95 | .note{
96 | width:300px;
97 | height: 300px;
98 | transition: 2s;
99 | cursor: pointer;
100 | overflow-wrap: break-word;
101 | box-shadow: 0px 10px 24px 0px rgba(0,0,0,0.75);
102 | }
103 |
104 | .note h1{
105 | font-size: 1.5rem;
106 | }
107 |
108 | .details {
109 | margin-top: 25px;
110 | padding: 0 15px;
111 | font-size: 1.5rem;
112 | }
113 |
114 | .details i{
115 | color: whitesmoke;
116 | cursor: pointer;
117 | text-shadow: 1px 1px #BBB;
118 | }
119 |
120 | @media(max-width:1280px){
121 | .container{
122 | width: 100%;
123 | }
124 | }
125 |
126 | @media(max-width:768px){
127 | #header{
128 | padding: 20px;
129 | gap: 10px;
130 | flex-direction: column;
131 | align-items: center;
132 | text-align: center;
133 | }
134 | }
135 |
--------------------------------------------------------------------------------
/Jyotirmoy_SimpleCalculator/script.js:
--------------------------------------------------------------------------------
1 | let k='sdf';
2 | let r = k.slice(0,-1);
3 | console.log(r);
4 |
5 | //intialise
6 | let num='';
7 | let n;
8 | let ans=0;
9 | let optn;
10 | let num1,num2;
11 | const buttons = document.querySelectorAll('.num');
12 | const input = document.querySelector('.input');
13 | const subInput = document.querySelector('.sub-input')
14 | const equal = document.querySelector('.equal');
15 | const opn = document.querySelectorAll(".operation");
16 | const delBtn = document.querySelector(".del");
17 | const clrBtn = document.querySelector('.clr');
18 |
19 | //operations
20 | const add = function(a,b){
21 | input.value=a+b;
22 | }
23 |
24 | const sub = function(a,b){
25 | input.value= a-b;
26 | }
27 |
28 | const mul = function(a,b){
29 | input.value=a*b;
30 | }
31 |
32 | const div = function(a,b){
33 | input.value=a/b;
34 | }
35 |
36 | const per = function(a,b){
37 | input.value=(a/100)*b;
38 | }
39 |
40 | const del = function(){
41 | console.log(input.value);
42 | n=input.value
43 | console.log(n);
44 | console.log(n.slice(0,-1))
45 | input.value=n.slice(0,-1);
46 | }
47 |
48 | const clr = function(){
49 | input.value='';
50 | subInput.value='';
51 | }
52 |
53 |
54 | //Data entry
55 | buttons.forEach(ele => ele.addEventListener('click',function(){
56 | num = input.value + ele.value;
57 | input.value=num;
58 | }));
59 |
60 |
61 | //operations execution
62 | opn.forEach(el => el.addEventListener('click',function(){
63 | opn.forEach(ela => ela.classList.remove('btn-active'));
64 | optn=el.value;
65 | el.classList.add('btn-active');
66 | console.log(input.value);
67 | num1=Number(input.value);
68 | subInput.value=input.value;
69 | input.value='';
70 | console.log(optn);
71 | }));
72 |
73 |
74 | //del clr
75 | delBtn.addEventListener('click',function(){
76 | del();
77 | })
78 |
79 | clrBtn.addEventListener('click',function(){
80 | clr();
81 | })
82 |
83 |
84 | //result
85 | equal.addEventListener("click",function(){
86 | num2=Number(input.value);
87 | console.log(input.value);
88 | console.log(optn);
89 | opn.forEach(ela => ela.classList.remove('btn-active'));
90 | if(optn=='+'){
91 | console.log("asdf");
92 | add(num1,num2);
93 | }
94 | else if(optn=='-'){
95 | sub(num1,num2);
96 | }
97 | else if(optn=='*'){
98 | mul(num1,num2);
99 | }
100 | else if(optn=='/'){
101 | div(num1,num2);
102 | }
103 | else if(optn=='%'){
104 |
105 | console.log("asdf");
106 | per(num1,num2);
107 | }
108 | subInput.value =subInput.value + optn + num2;
109 | });
110 |
111 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # showcase-your-webpage
2 | a repo where you can showcase your webpage
3 |
4 | # HACKTOBERFEST
5 | Create a pull if it satify the problems then it will be merged
6 | # What is Hacktoberfest?
7 | ### Hacktoberfest is a month-long celebration of open-source software by DigitalOcean that encourages participation in giving back to the open-source community.
8 |
9 | # Why to attend?
10 | ### Participating in Hacktoberfest is a great way to get involved with the open source community wherever you are on your tech journey.
11 |
12 |
13 | # How to contribute?
14 |
15 | **1.** Fork [this](https://github.com/SCCSEAOT/showcase-your-webpage) repository.
16 |
17 | **2.** Clone your forked copy of the project.
18 |
19 | ```bash
20 | git clone https://github.com//showcase-your-webpage
21 | ```
22 |
23 | **3.** Navigate to the project directory :file_folder: .
24 |
25 | ```
26 | cd showcase-your-webpage
27 | ```
28 |
29 | **4.** Add a reference(remote) to the original repository.
30 |
31 | ```
32 | git remote add upstream https://github.com/SCCSEAOT/showcase-your-webpage
33 | ```
34 |
35 | **5.** Check the remotes for this repository.
36 | ```
37 | git remote -v
38 | ```
39 |
40 | **6.** Always take a pull from the upstream repository to your master branch to keep it at par with the main project(updated repository).
41 |
42 | ```
43 | git pull upstream main
44 | ```
45 |
46 | **7.** Create a new branch.
47 |
48 | ```
49 | git checkout -b
50 | ```
51 |
52 | **8.** Perform your desired changes to the code base.
53 |
54 |
55 | **9.** Track your changes:heavy_check_mark: .
56 |
57 | ```
58 | git add .
59 | ```
60 |
61 | **10.** Commit your changes .
62 |
63 | ```
64 | git commit -m "Relevant message"
65 | ```
66 |
67 | **11.** Push the committed changes in your feature branch to your remote repo.
68 | ```
69 | git push -u origin
70 | ```
71 |
72 | **12.** To create a pull request, click on `compare and pull requests`. Please ensure you compare your feature branch to the desired branch of the repository you are supposed to make a PR to.
73 |
74 |
75 | **13.** Add appropriate title and description to your pull request explaining your changes and efforts done.
76 |
77 |
78 | **14.** Click on `Create Pull Request`.
79 |
80 |
81 | **15** Hurray! You have made a PR to the SHOWCASE-YOUR-WEBPAGE . Sit back patiently and relax while your PR is reviewed.it
82 |
83 |
84 |
85 | Thanks goes to these **Wonderful People** 👨🏻💻: 🚀 **Contributions** of any kind is welcome!
86 |
87 |
96 |
--------------------------------------------------------------------------------
/SRIJAN/srijan.css:
--------------------------------------------------------------------------------
1 | body {
2 | padding-top: 50px;
3 | }
4 |
5 | hr {
6 | border: 0;
7 | height: 1px;
8 | background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
9 | }
10 |
11 | .em-text{
12 | color: #0ea7b5 !important;
13 | }
14 |
15 | .intro-header {
16 | -webkit-font-smoothing: antialiased;
17 | text-rendering: optimizelegibility;
18 | padding-top: 50px;
19 | padding-bottom: 50px;
20 | text-align: center;
21 | background:url(https://unsplash.com/photos/FIKD9t5_5zQ/download) center center fixed;
22 | background-size: cover;
23 | }
24 | .intro-message > h1 {
25 | -webkit-font-smoothing: antialiased;
26 | text-rendering: optimizelegibility;
27 | margin-top: 10%;
28 | font-size: 70px;
29 | text-shadow: 2px 1px #808080;
30 | }
31 |
32 |
33 | .btn:hover {
34 | background: #C0C0C0;
35 | transform:scale(1);
36 | transition: 0.1s;
37 | letter-spacing: 2px;
38 | }
39 |
40 | .navbar-header {
41 | margin-left: 2%;
42 | }
43 | .navbar-right {
44 | margin-right: 2%;
45 | }
46 |
47 | .btn-freeCodeCamp {
48 | background-color: #492C14;
49 | color: #ffffff !important;
50 | }
51 |
52 | .about-page {
53 | -webkit-font-smoothing: antialiased;
54 | text-rendering: optimizelegibility;
55 | padding-top: 50px;
56 | padding-bottom: 50px;
57 | text-align: center;
58 | background:url(https://images.unsplash.com/photo-1433959352364-9314c5b6eb0b?fit=crop&fm=jpg&h=700&q=80&w=1050) center center fixed;
59 | background-size: cover;
60 | }
61 |
62 | .about-message > h1{
63 | -webkit-font-smoothing: antialiased;
64 | text-rendering: optimizelegibility;
65 | margin-top: 5%;
66 | font-size: 60px;
67 | text-shadow: 2px 1px #808080;
68 | }
69 |
70 | .about-message > p{
71 | margin-top: 50px;
72 | color: #dddddd;
73 | text-shadow: 2px 1px #000;
74 | font-size: 20px;
75 | }
76 |
77 | .portfolio-page {
78 | padding-top: 20px;
79 | padding-bottom: 50px;
80 | text-align: center;
81 | background:url(https://images.unsplash.com/photo-1437422061949-f6efbde0a471?q=80&fm=jpg&s=e23055c9ba7686b8fe583fb8318a1f88) center center fixed;
82 | background-size: cover;
83 | }
84 |
85 | .portfolio-message {
86 | margin-top: 5%;
87 | font-size: 60px;
88 | text-shadow: 2px 1px #808080;
89 | }
90 |
91 | .contact-page {
92 | padding-top: 70px;
93 | padding-bottom: 50px;
94 | text-align: center;
95 | background:url(https://images.unsplash.com/photo-1415045384817-2f9cf7f2ed79?q=80&fm=jpg&s=c186a1fbe2e559bdb841372f97715c91) center center fixed;
96 | background-size: cover;
97 | }
98 |
99 | .contact-message > h1{
100 | margin-top: 15%;
101 | font-size: 60px;
102 | text-shadow: 2px 1px #808080;
103 | float: left;
104 | padding-bottom: 50px;
105 | }
106 |
107 | ul.social-buttons > li {
108 | display: block;
109 | margin: 0 auto;
110 | padding: 2em;
111 | }
112 |
--------------------------------------------------------------------------------
/code-soham/assets/icons/nodejs.svg:
--------------------------------------------------------------------------------
1 |
6 |
7 |
9 |
11 |
12 |
13 |
15 |
17 |
18 |
19 |
21 |
23 |
24 |
25 |
27 |
29 |
30 |
31 |
33 |
38 |
39 |
40 | );
41 | };
42 |
43 | const Container = styled.div`
44 | margin-top: 30px;
45 | padding: 30px 0px 26px;
46 | display: grid;
47 | grid-gap: 25px;
48 | gap: 25px;
49 | grid-template-columns: repeat(5, minmax(0, 1fr));
50 |
51 | @media (max-width: 768px) {
52 | grid-template-columns: repeat(1, minmax(0, 1fr));
53 | }
54 | `;
55 |
56 | const Wrap = styled.div`
57 | padding-top: 56.25%;
58 | border-radius: 10px;
59 | box-shadow: rgb(0 0 0 / 69%) 0px 26px 30px -10px,
60 | rgb(0 0 0 / 73%) 0px 16px 10px -10px;
61 | cursor: pointer;
62 | overflow: hidden;
63 | position: relative;
64 | transition: all 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
65 | border: 3px solid rgba(249, 249, 249, 0.1);
66 |
67 | img {
68 | inset: 0px;
69 | display: block;
70 | height: 100%;
71 | object-fit: cover;
72 | opacity: 1;
73 | position: absolute;
74 | transition: opacity 500ms ease-in-out 0s;
75 | width: 100%;
76 | z-index: 1;
77 | top: 0;
78 | }
79 |
80 | video {
81 | width: 100%;
82 | height: 100%;
83 | position: absolute;
84 | top: 0px;
85 | opacity: 0;
86 | z-index: 0;
87 | }
88 |
89 | &:hover {
90 | box-shadow: rgb(0 0 0 / 80%) 0px 40px 58px -16px,
91 | rgb(0 0 0 / 72%) 0px 30px 22px -10px;
92 |
93 | transform: scale(1.05);
94 | border-color: rgba(249, 249, 249, 0.8);
95 |
96 | video {
97 | opacity: 1;
98 | }
99 | }
100 | `;
101 |
102 | export default Viewers;
103 |
--------------------------------------------------------------------------------
/Snigdha's Login Webpage/style.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
2 | *{
3 | margin: 0;
4 | padding: 0;
5 | box-sizing: border-box;
6 | font-family: "Poppins", sans-serif;
7 | }
8 | body{
9 | width: 100%;
10 | height: 100vh;
11 | display: flex;
12 | align-items: center;
13 | justify-content: center;
14 | background: #5372F0;
15 | }
16 | ::selection{
17 | color: #fff;
18 | background: #5372F0;
19 | }
20 | .wrapper{
21 | width: 380px;
22 | padding: 40px 30px 50px 30px;
23 | background: #fff;
24 | border-radius: 5px;
25 | text-align: center;
26 | box-shadow: 10px 10px 15px rgba(0,0,0,0.1);
27 | }
28 | .wrapper header{
29 | font-size: 35px;
30 | font-weight: 600;
31 | }
32 | .wrapper form{
33 | margin: 40px 0;
34 | }
35 | form .field{
36 | width: 100%;
37 | margin-bottom: 20px;
38 | }
39 | form .field.shake{
40 | animation: shake 0.3s ease-in-out;
41 | }
42 | @keyframes shake {
43 | 0%, 100%{
44 | margin-left: 0px;
45 | }
46 | 20%, 80%{
47 | margin-left: -12px;
48 | }
49 | 40%, 60%{
50 | margin-left: 12px;
51 | }
52 | }
53 | form .field .input-area{
54 | height: 50px;
55 | width: 100%;
56 | position: relative;
57 | }
58 | form input{
59 | width: 100%;
60 | height: 100%;
61 | outline: none;
62 | padding: 0 45px;
63 | font-size: 18px;
64 | background: none;
65 | caret-color: #5372F0;
66 | border-radius: 5px;
67 | border: 1px solid #bfbfbf;
68 | border-bottom-width: 2px;
69 | transition: all 0.2s ease;
70 | }
71 | form .field input:focus,
72 | form .field.valid input{
73 | border-color: #5372F0;
74 | }
75 | form .field.shake input,
76 | form .field.error input{
77 | border-color: #dc3545;
78 | }
79 | .field .input-area i{
80 | position: absolute;
81 | top: 50%;
82 | font-size: 18px;
83 | pointer-events: none;
84 | transform: translateY(-50%);
85 | }
86 | .input-area .icon{
87 | left: 15px;
88 | color: #bfbfbf;
89 | transition: color 0.2s ease;
90 | }
91 | .input-area .error-icon{
92 | right: 15px;
93 | color: #dc3545;
94 | }
95 | form input:focus ~ .icon,
96 | form .field.valid .icon{
97 | color: #5372F0;
98 | }
99 | form .field.shake input:focus ~ .icon,
100 | form .field.error input:focus ~ .icon{
101 | color: #bfbfbf;
102 | }
103 | form input::placeholder{
104 | color: #bfbfbf;
105 | font-size: 17px;
106 | }
107 | form .field .error-txt{
108 | color: #dc3545;
109 | text-align: left;
110 | margin-top: 5px;
111 | }
112 | form .field .error{
113 | display: none;
114 | }
115 | form .field.shake .error,
116 | form .field.error .error{
117 | display: block;
118 | }
119 | form .pass-txt{
120 | text-align: left;
121 | margin-top: -10px;
122 | }
123 | .wrapper a{
124 | color: #5372F0;
125 | text-decoration: none;
126 | }
127 | .wrapper a:hover{
128 | text-decoration: underline;
129 | }
130 | form input[type="submit"]{
131 | height: 50px;
132 | margin-top: 30px;
133 | color: #fff;
134 | padding: 0;
135 | border: none;
136 | background: #5372F0;
137 | cursor: pointer;
138 | border-bottom: 2px solid rgba(0,0,0,0.1);
139 | transition: all 0.3s ease;
140 | }
141 | form input[type="submit"]:hover{
142 | background: #2c52ed;
143 | }
144 |
--------------------------------------------------------------------------------
/code-soham/assets/icons/reactjs.svg:
--------------------------------------------------------------------------------
1 | Job Application Form
8 |
12 |
13 |
14 | Job Application
15 | (Web)
16 |
17 |
90 |
91 |
-1&&e(t)},r=u("CLS",0),a=0,o=[],v=function(e){if(!e.hadRecentInput){var t=o[0],i=o[o.length-1];a&&e.startTime-i.startTime<1e3&&e.startTime-t.startTime<5e3?(a+=e.value,o.push(e)):(a=e.value,o=[e]),a>r.value&&(r.value=a,r.entries=o,n())}},d=c("layout-shift",v);d&&(n=m(i,r,t),f((function(){d.takeRecords().map(v),n(!0)})),s((function(){a=0,T=-1,r=u("CLS",0),n=m(i,r,t)})))},E={passive:!0,capture:!0},w=new Date,L=function(e,t){i||(i=t,r=e,a=new Date,F(removeEventListener),S())},S=function(){if(r>=0&&r1e12?new Date:performance.now())-e.timeStamp;"pointerdown"==e.type?function(e,t){var n=function(){L(e,t),r()},i=function(){r()},r=function(){removeEventListener("pointerup",n,E),removeEventListener("pointercancel",i,E)};addEventListener("pointerup",n,E),addEventListener("pointercancel",i,E)}(t,e):L(t,e)}},F=function(e){["mousedown","keydown","touchstart","pointerdown"].forEach((function(t){return e(t,b,E)}))},C=function(e,t){var n,a=l(),v=u("FID"),d=function(e){e.startTimeperformance.now())return;n.entries=[t],e(n)}catch(e){}},"complete"===document.readyState?setTimeout(t,0):addEventListener("load",(function(){return setTimeout(t,0)}))}}}]);
2 | //# sourceMappingURL=787.0a7689f1.chunk.js.map
--------------------------------------------------------------------------------
/DisneyHotstarClone/index.js:
--------------------------------------------------------------------------------
1 | let movies = [
2 | {
3 | name: "falcon and the winter soldier",
4 | genre:"Marvel · Superhero · Action · Science Fiction",
5 | des:
6 | "Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit porro et veniam excepturi, eaque voluptatem impedit nulla laboriosam facilis ut laboriosam libero!",
7 | image: "images/slider2.png"
8 | },
9 | {
10 | name: "loki",
11 | genre:"Marvel · Superhero · Action ",
12 | des:
13 | "Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit porro et veniam excepturi, eaque voluptatem impedit nulla laboriosam facilis ut laboriosam libero!",
14 | image: "images/slider1.png"
15 | },
16 | {
17 | name: "wanda vision",
18 | genre:"Marvel · English · Superhero · Action · Science Fiction",
19 | des:
20 | "Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit porro et veniam excepturi, eaque voluptatem impedit nulla laboriosam facilis ut laboriosam libero!",
21 | image: "images/slider3.png"
22 | },
23 | {
24 | name: "raya and the last dragon",
25 | genre:"Animation · Fantasy · Adventure · Kids",
26 | des:
27 | "Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit porro et veniam excepturi, eaque voluptatem impedit nulla laboriosam facilis ut laboriosam libero!",
28 | image: "images/slider4.png"
29 | },
30 | {
31 | name: "luca",
32 | genre:"Animation · Fantasy · Adventure · Kids",
33 | des:
34 | "Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit porro et veniam excepturi, eaque voluptatem impedit nulla laboriosam facilis ut laboriosam libero!",
35 | image: "images/slider5.png"
36 | }
37 | ];
38 |
39 | const carousel = document.querySelector(".carousel");
40 | let sliders = [];
41 |
42 | let slideIndex = 0; // to track current slide index.
43 |
44 | const createSlide = () => {
45 | if (slideIndex >= movies.length) {
46 | slideIndex = 0;
47 | }
48 |
49 | // creating DOM element
50 | let slide = document.createElement("div");
51 | var imgElement = document.createElement("img");
52 | let content = document.createElement("div");
53 | let h1 = document.createElement("h1");
54 | let genre = document.createElement("p");
55 | let p = document.createElement("p");
56 |
57 | // attaching all elements
58 | imgElement.appendChild(document.createTextNode(""));
59 | h1.appendChild(document.createTextNode(movies[slideIndex].name));
60 | p.appendChild(document.createTextNode(movies[slideIndex].des));
61 | genre.appendChild(document.createTextNode(movies[slideIndex].genre));
62 | content.appendChild(h1);
63 | content.appendChild(genre);
64 | content.appendChild(p);
65 | slide.appendChild(content);
66 | slide.appendChild(imgElement);
67 | carousel.appendChild(slide);
68 |
69 | // setting up image
70 | imgElement.src = movies[slideIndex].image;
71 | slideIndex++;
72 |
73 | // setting elements classname
74 | slide.className = "slider";
75 | content.className = "slide-content";
76 | h1.className = "movie-title";
77 | genre.className = "movie-gen"
78 | p.className = "movie-des";
79 |
80 | sliders.push(slide);
81 |
82 | if (sliders.length) {
83 | sliders[0].style.marginLeft = `calc(-${100 * (sliders.length - 2)}% - ${
84 | 30 * (sliders.length - 2)
85 | }px)`;
86 | }
87 | };
88 |
89 | for (let i = 0; i < 3; i++) {
90 | createSlide();
91 | }
92 |
93 | setInterval(() => {
94 | createSlide();
95 | }, 3000);
96 |
97 | //Video Cards
98 |
99 | const videoCards = [...document.querySelectorAll(".video-card")];
100 |
101 | videoCards.forEach((item) => {
102 | item.addEventListener("mouseover", () => {
103 | let video = item.children[1];
104 | video.play();
105 | });
106 | item.addEventListener("mouseleave", () => {
107 | let video = item.children[1];
108 | video.pause();
109 | });
110 | });
111 |
112 | //card sliders
113 |
114 | let cardContainers = [...document.querySelectorAll(".card-container")];
115 | let preBtns = [...document.querySelectorAll(".pre-btn")];
116 | let nxtBtns = [...document.querySelectorAll(".nxt-btn")];
117 |
118 | cardContainers.forEach((item, i) => {
119 | let containerDimensions = item.getBoundingClientRect();
120 | let containerWidth = containerDimensions.width;
121 |
122 | nxtBtns[i].addEventListener("click", () => {
123 | item.scrollLeft += containerWidth - 200;
124 | });
125 |
126 | preBtns[i].addEventListener("click", () => {
127 | item.scrollLeft -= containerWidth + 200;
128 | });
129 | });
130 |
--------------------------------------------------------------------------------
/Priyadarshan/public/images/logo.svg:
--------------------------------------------------------------------------------
1 | Disney+ Brand Logo 
36 | 
22 |
23 |
24 |
--------------------------------------------------------------------------------
/Sayan Das/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | 
20 |
21 | 
26 |
27 | 
32 |
33 | 
38 |
39 | 
Abhi Web Design
45 | 
50 | 
55 | 
8 |
11 | 
14 |
17 | 
20 |
23 | 
26 |
29 | 
32 |
38 |