├── ArunBalajiR ├── images │ ├── dribbble.png │ ├── facebook.png │ ├── happy@2x.png │ ├── headerBg.png │ ├── headerBg2.png │ ├── headerImg.png │ ├── icon.png │ ├── linkedin.png │ ├── logo.png │ ├── marketing@2x.png │ ├── menu.png │ ├── navBg.png │ ├── pricingBg.png │ ├── project.png │ ├── service1.png │ ├── service2.png │ ├── service3.png │ ├── service4.png │ ├── servicesBg.png │ ├── surface1@2x.png │ ├── transportation@2x.png │ └── twitter.png ├── index.html └── style.css ├── Business Agency ├── images │ ├── dark-bg.jpeg │ └── talk_discussion_meeting_team_group_1104.mp4 ├── index.html ├── script.js └── style.css ├── Deepthi-v-s └── First.html ├── Divya Chopra └── first │ ├── index.html │ └── style.css ├── GayanKod ├── README.md ├── css │ └── style.css ├── img │ └── bg.jpg ├── index.html └── screenshots │ ├── SS1.png │ └── SS2.png ├── Honey-9 ├── css │ └── style.css ├── img │ └── favicon.ico ├── index.html └── js │ └── main.js ├── I2IT-ACM-Student-Chapter └── index.html ├── Jayesh_Tesla_clone ├── index.html ├── script.js └── style.css ├── Jayesh_gymwebsite ├── dumbell.png ├── gym.jpg ├── gym.png ├── index.html ├── style.css ├── timer.js └── utils.css ├── Kashish Ahuja ├── assets │ ├── css │ │ └── style.css │ └── images │ │ ├── TAMS.mp4 │ │ ├── hello world turbo C.PNG │ │ ├── hello world vs code.PNG │ │ ├── inheritance.png │ │ ├── meet the programmer.jpeg │ │ ├── pointers.png │ │ ├── slider-1.jpg │ │ ├── slider-2.jpg │ │ ├── slider-3.jpg │ │ ├── star pattern questions.png │ │ ├── to-do.mp4 │ │ ├── turbo c.jpeg │ │ └── vs code.jpeg └── index.html ├── MedEasy Website ├── images │ ├── about.png │ ├── anatomy.png │ ├── contactus.png │ ├── logo.png │ ├── main.png │ ├── ophthalmalogy.png │ ├── pharmacology.png │ └── physiology.png ├── index.html ├── js │ └── script.js ├── preview images │ ├── about.png │ ├── contactus.png │ ├── contribute.png │ ├── home.png │ └── services.png ├── readme.md └── styles │ └── styles.css ├── Mercedes Benz Landing Page ├── index.html ├── script.js └── style.css ├── Messi and Ronaldo ├── css │ └── style.css ├── img │ ├── Messi.png │ ├── Ronaldo.png │ ├── bg.jpg │ ├── close.png │ ├── menu.png │ ├── mulher.png │ ├── nathan.png │ └── sam.png ├── index.html └── js │ └── script.js ├── ReadMe.md ├── RealMadrid ├── Hala Madrid...y nada más (feat. RedOne).mp3 ├── Images │ ├── Cabinet.jpg │ ├── RealMadrid.png │ ├── SCDE.png │ ├── UCL.png │ ├── UCLTrophy.jpg │ ├── UCLTrophy.png │ ├── USC.png │ ├── cdr.png │ ├── click-to-download-real-madrid-logo-sv-11563363482ppb2nhviwx-removebg-preview.png │ ├── cwc.png │ ├── laliga.png │ ├── output-onlinepngtools (1).png │ └── output-onlinepngtools.png ├── README.md ├── index.html └── styles.css ├── SpaceX Website Template ├── dragon.html ├── falcon-heavy.html ├── falcon9.html ├── img │ ├── dragon.webp │ ├── falcon-9.webp │ ├── falcon-heavy.webp │ ├── logo.png │ ├── screen.jpg │ ├── section-a.webp │ ├── section-b.webp │ ├── section-c.webp │ ├── section-d.webp │ ├── section-e.webp │ └── section-f.webp ├── index.html ├── script.js └── style.css ├── TTLC ├── images │ └── ik-logo-dark-grey-bg.jpg ├── index.html ├── script.js └── style.css ├── Tanishka2102 └── Halloween │ └── index.html ├── divyanshraj0408 ├── index.html └── style.css ├── ishita1427 └── index.html ├── jaysomani_Guess_the_Number ├── index.html ├── script.js └── style.css ├── kritika-sharma130 ├── css │ └── style.css ├── images │ ├── about-bg.png │ ├── about-img.png │ ├── contact-img.png │ ├── f-icon1.png │ ├── f-icon2.png │ ├── f-icon3.png │ ├── footer-bg.png │ ├── home-bg-img.png │ ├── home-img.png │ ├── onboarding1.jpeg │ ├── onboarding2.jpeg │ ├── pic1.png │ ├── pic2.png │ ├── pic3.png │ ├── subscribe-bg.png │ ├── undraw_city_driver_re_0x5e (3).png │ └── undraw_off_road_9oae (2).png └── index.html ├── lead_tracker ├── icon.png ├── index.css ├── index.html ├── index.js └── manifest.json ├── mifrasgaffoor └── index.html ├── niralverma ├── first │ └── index.html ├── minimal.html ├── navigation.html └── second │ └── landingpage.html ├── onlineclothshopping website ├── images │ ├── about-img.png │ ├── accessories │ │ ├── a.png │ │ ├── b.png │ │ ├── c.png │ │ ├── d.png │ │ ├── e.png │ │ └── f.png │ ├── banner1.png │ ├── banner2.png │ ├── banner3.png │ ├── footer-img.png │ ├── home-img.png │ ├── men's collect │ │ ├── a.png │ │ ├── b.png │ │ ├── c.png │ │ ├── d.png │ │ ├── e.png │ │ ├── f.png │ │ ├── g.png │ │ ├── h.png │ │ └── i.png │ ├── offer1.png │ ├── offer2.png │ ├── offer3.png │ ├── testimonial-star.svg │ └── women's collect │ │ ├── a.png │ │ ├── b.png │ │ ├── c.png │ │ ├── d.png │ │ ├── e.png │ │ ├── f.png │ │ ├── g.png │ │ └── h.png ├── index.html └── style.css ├── pccoder-2000 ├── Logo.png ├── index.html ├── index.js ├── starter.png ├── stay.png └── style.css ├── praveenscience └── index.html ├── rwiteshbera ├── images │ ├── background.jpg │ ├── member.png │ └── team.jpg ├── index.html ├── script.js └── style.css └── surveyform.html /ArunBalajiR/images/dribbble.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/ArunBalajiR/images/dribbble.png -------------------------------------------------------------------------------- /ArunBalajiR/images/facebook.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/ArunBalajiR/images/facebook.png -------------------------------------------------------------------------------- /ArunBalajiR/images/happy@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/ArunBalajiR/images/happy@2x.png -------------------------------------------------------------------------------- /ArunBalajiR/images/headerBg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/ArunBalajiR/images/headerBg.png -------------------------------------------------------------------------------- /ArunBalajiR/images/headerBg2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/ArunBalajiR/images/headerBg2.png -------------------------------------------------------------------------------- /ArunBalajiR/images/headerImg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/ArunBalajiR/images/headerImg.png -------------------------------------------------------------------------------- /ArunBalajiR/images/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/ArunBalajiR/images/icon.png -------------------------------------------------------------------------------- /ArunBalajiR/images/linkedin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/ArunBalajiR/images/linkedin.png -------------------------------------------------------------------------------- /ArunBalajiR/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/ArunBalajiR/images/logo.png -------------------------------------------------------------------------------- /ArunBalajiR/images/marketing@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/ArunBalajiR/images/marketing@2x.png -------------------------------------------------------------------------------- /ArunBalajiR/images/menu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/ArunBalajiR/images/menu.png -------------------------------------------------------------------------------- /ArunBalajiR/images/navBg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/ArunBalajiR/images/navBg.png -------------------------------------------------------------------------------- /ArunBalajiR/images/pricingBg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/ArunBalajiR/images/pricingBg.png -------------------------------------------------------------------------------- /ArunBalajiR/images/project.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/ArunBalajiR/images/project.png -------------------------------------------------------------------------------- /ArunBalajiR/images/service1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/ArunBalajiR/images/service1.png -------------------------------------------------------------------------------- /ArunBalajiR/images/service2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/ArunBalajiR/images/service2.png -------------------------------------------------------------------------------- /ArunBalajiR/images/service3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/ArunBalajiR/images/service3.png -------------------------------------------------------------------------------- /ArunBalajiR/images/service4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/ArunBalajiR/images/service4.png -------------------------------------------------------------------------------- /ArunBalajiR/images/servicesBg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/ArunBalajiR/images/servicesBg.png -------------------------------------------------------------------------------- /ArunBalajiR/images/surface1@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/ArunBalajiR/images/surface1@2x.png -------------------------------------------------------------------------------- /ArunBalajiR/images/transportation@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/ArunBalajiR/images/transportation@2x.png -------------------------------------------------------------------------------- /ArunBalajiR/images/twitter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/ArunBalajiR/images/twitter.png -------------------------------------------------------------------------------- /ArunBalajiR/style.css: -------------------------------------------------------------------------------- 1 | /* all section */ 2 | html { 3 | scroll-behavior: smooth; 4 | } 5 | h2.name { 6 | font-family: "Yeseva One", cursive; 7 | } 8 | 9 | /* navbar section */ 10 | nav.navbar { 11 | background-image: url("https://github.com/ArunBalajiR/Django-Blog-Application/blob/master/media/profile_pics/navBg.png?raw=true"); 12 | background-size: 400px; 13 | background-color: transparent; 14 | background-repeat: no-repeat; 15 | background-position: -200px -220px; 16 | } 17 | nav.navbar a { 18 | margin: 0 10px; 19 | font-weight: 600; 20 | } 21 | nav .navbar-toggler:focus { 22 | outline: none; 23 | } 24 | .curv { 25 | background: linear-gradient(to right, #1cd9b8, #06aced); 26 | color: white; 27 | border-radius: 23px 0 23px 0; 28 | transition: 0.3s ease; 29 | } 30 | .curv:hover { 31 | color: white; 32 | transform: scale(1.08); 33 | } 34 | 35 | /* header section */ 36 | header { 37 | background-image: url("https://github.com/ArunBalajiR/Django-Blog-Application/blob/master/media/profile_pics/headerBg.png?raw=true"); 38 | background-size: 1000px; 39 | background-repeat: no-repeat; 40 | background-position: 190% 100%; 41 | } 42 | header .cover { 43 | background-image: url("https://github.com/ArunBalajiR/Django-Blog-Application/blob/master/media/profile_pics/headerBg2.png?raw=true"); 44 | background-size: 900px; 45 | background-repeat: no-repeat; 46 | background-position: -80px 30px; 47 | } 48 | header .text { 49 | padding-left: 100px; 50 | } 51 | header .title { 52 | font-family: "Yeseva One", cursive; 53 | font-size: 5vw; 54 | line-height: 0.9; 55 | } 56 | 57 | /* service section */ 58 | #services { 59 | background-image: url("https://github.com/ArunBalajiR/Django-Blog-Application/blob/master/media/profile_pics/servicesBg.png?raw=true"); 60 | background-size: cover; 61 | background-position: center; 62 | background-color: #fafffd; 63 | } 64 | #services .card { 65 | background-color: transparent; 66 | border-radius: 50px 0 50px 0; 67 | transition: 0.3s ease; 68 | } 69 | #services .card:hover { 70 | background-color: white; 71 | box-shadow: 0 0 30px 1px #ceffff; 72 | } 73 | 74 | /* project section */ 75 | #project { 76 | background-image: url("https://github.com/ArunBalajiR/Django-Blog-Application/blob/master/media/profile_pics/headerBg.png?raw=true"); 77 | background-size: 40% 100%; 78 | background-position: 130% 50%; 79 | background-repeat: no-repeat; 80 | } 81 | 82 | /* achievement section */ 83 | #achievement { 84 | background-color: #fafffd; 85 | } 86 | .achievement { 87 | color: gray; 88 | background: #fff; 89 | box-shadow: 10px 10px 6px #eafdf4; 90 | transition: 0.3s ease; 91 | } 92 | .achievement img { 93 | filter: brightness(1); 94 | transition: 0.3s ease; 95 | } 96 | .ach-1, 97 | .ach-4 { 98 | border-radius: 0 65px 0 65px; 99 | } 100 | .ach-2, 101 | .ach-3 { 102 | border-radius: 65px 0 65px 0; 103 | } 104 | .achievement:hover { 105 | background: linear-gradient(to left, #1cd9b8, #06aced); 106 | color: white; 107 | } 108 | .achievement:hover img { 109 | filter: brightness(3); 110 | } 111 | 112 | /* pricing section */ 113 | #pricing { 114 | background-color: #fafffd; 115 | background-image: url("https://github.com/ArunBalajiR/Django-Blog-Application/blob/master/media/profile_pics/pricingBg.png?raw=true"); 116 | background-size: 1100px; 117 | background-repeat: no-repeat; 118 | background-position: -480px -150px; 119 | } 120 | #pricing hr { 121 | background-color: #1cd9b8; 122 | height: 1px; 123 | width: 200px; 124 | margin: 0 auto; 125 | } 126 | #pricing h6 { 127 | font-size: 18px; 128 | margin-top: 20px; 129 | } 130 | #pricing button.btn { 131 | background: linear-gradient(to right, #1cd9b8, #06aced); 132 | width: 180px; 133 | height: 50px; 134 | margin: 20px auto 0 auto; 135 | color: white; 136 | border-radius: 23px 0 23px 0; 137 | visibility: hidden; 138 | transition: 0.3s ease; 139 | } 140 | #pricing .card { 141 | border: 3px solid transparent; 142 | transition: 0.3s ease; 143 | } 144 | #pricing .card:hover { 145 | border: 3px solid #1cd9b8; 146 | } 147 | #pricing .card:hover button.btn { 148 | visibility: visible; 149 | } 150 | #pricing button.btn:hover { 151 | transform: scale(1.08); 152 | transition: 0.3s ease; 153 | } 154 | 155 | /* subscribe section */ 156 | #subscribe { 157 | background-color: #fafffd; 158 | } 159 | #subscribe .d-flex { 160 | margin: auto; 161 | max-width: 600px; 162 | } 163 | #subscribe input.btn { 164 | background: linear-gradient(to right, #1cd9b8, #06aced); 165 | height: 40px; 166 | min-width: 110px; 167 | color: white; 168 | border-radius: 5px; 169 | } 170 | #subscribe input { 171 | font-size: 16px; 172 | min-width: 50px; 173 | } 174 | 175 | /* footer section */ 176 | footer { 177 | background-color: #fafffd; 178 | } 179 | footer .brandList { 180 | max-width: 200px; 181 | } 182 | footer img.brand { 183 | filter: grayscale(100%); 184 | } 185 | footer img, 186 | footer li { 187 | cursor: pointer; 188 | color: gray; 189 | } 190 | footer li:hover { 191 | color: #06aced; 192 | } 193 | 194 | /* media queries */ 195 | @media (max-width: 1200px) { 196 | header { 197 | background-image: none; 198 | } 199 | header .text { 200 | padding-left: 30px; 201 | } 202 | } 203 | @media (max-width: 768px) { 204 | nav a.navbar-brand img { 205 | width: 100px; 206 | } 207 | header .title { 208 | font-size: 9vw; 209 | } 210 | #services .card { 211 | min-width: 250px; 212 | margin: 0%; 213 | } 214 | #project { 215 | background-image: none; 216 | } 217 | } 218 | -------------------------------------------------------------------------------- /Business Agency/images/dark-bg.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/Business Agency/images/dark-bg.jpeg -------------------------------------------------------------------------------- /Business Agency/images/talk_discussion_meeting_team_group_1104.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/Business Agency/images/talk_discussion_meeting_team_group_1104.mp4 -------------------------------------------------------------------------------- /Business Agency/index.html: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 15 | 16 | 17 | 18 | 19 | 32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 | 49 |
50 |
51 |

About Us

52 |
53 |
54 | 55 |
56 |
57 |
58 |
59 |
60 | 63 |
64 |
65 |
66 |

67 | Work With Us Once! 68 |

69 |
70 |
71 |

Contact

72 |
73 |
74 |
75 |
76 | 77 |

Phone

78 |

+123 456 789

79 |

+987 654 321

80 |
81 |
82 | 83 |

Address

84 |

Main Street #123

85 |

Wall Street #123

86 |
87 | 93 |
94 |

Don't Get in Touch

95 |
96 | 97 | 98 | 99 | 100 |
101 |
102 |
103 | 111 |
112 | 113 | 114 | 115 | 116 | -------------------------------------------------------------------------------- /Business Agency/script.js: -------------------------------------------------------------------------------- 1 | 2 | const menu = document.querySelector('.menu') 3 | const navbar = document.querySelector('.navbar') 4 | 5 | menu.addEventListener('click', () => { 6 | navbar.classList.toggle('change') 7 | menu.classList.toggle('change') 8 | }) 9 | 10 | const video = document.querySelector('.video') 11 | const btn = document.querySelector('.buttons i') 12 | const bar = document.querySelector('.video-bar') 13 | 14 | const playPause = () => { 15 | if (video.paused) { 16 | video.play() 17 | btn.className = 'far fa-pause-circle' 18 | video.style.opacity = '.7' 19 | } else { 20 | video.pause() 21 | btn.className = 'far fa-play-circle' 22 | video.style.opacity = '.3' 23 | } 24 | } 25 | 26 | btn.addEventListener('click', () => { 27 | playPause() 28 | }) 29 | 30 | video.addEventListener('timeupdate', () => { 31 | const barWidth = video.currentTime / video.duration 32 | bar.style.width = `${barWidth * 100}%` 33 | if (video.ended) { 34 | btn.className = 'far fa-play-circle' 35 | video.style.opacity = '.3' 36 | } 37 | }) 38 | 39 | 40 | var swiper = new Swiper('.swiper-container', { 41 | effect: 'coverflow', 42 | grabCursor: true, 43 | centeredSlides: true, 44 | slidesPerView: 'auto', 45 | coverflowEffect: { 46 | rotate: 50, 47 | stretch: 0, 48 | depth: 100, 49 | modifier: 2, 50 | slideShadows: true, 51 | }, 52 | }); 53 | -------------------------------------------------------------------------------- /Deepthi-v-s/First.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | JS Bin 7 | 8 | 9 | 10 | 11 | 14 |
15 |
16 |
17 |
18 | ... 19 |
20 |
21 |
22 |

Your Name

23 |

Your Designation

24 |

Write Something About Yourself

25 |
26 |
27 |
28 | 29 | 30 | -------------------------------------------------------------------------------- /Divya Chopra/first/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 |
10 | 11 | 12 |
13 |
14 | illustration-mockups 19 |
20 | 21 |
22 |

Build The Community Your Fans Will Love

23 | 24 |

25 | Huddle re-imagines the way we build communities. You have a voice, 26 | but so does your audience. Create connections with your users as 27 | you engage in genuine discussion. 28 |

29 | 30 | 31 |
32 |
33 | 34 |
35 | 36 | 37 | 38 | 39 |
40 |
41 |
42 | 43 | 44 | -------------------------------------------------------------------------------- /Divya Chopra/first/style.css: -------------------------------------------------------------------------------- 1 | /* Font Style/Family */ 2 | @import url("https://fonts.googleapis.com/css2?family=Open+Sans&family=Poppins:wght@400;600&display=swap"); 3 | 4 | /* <---------Reset CSS---------> */ 5 | 6 | *, 7 | *::before, 8 | *::after { 9 | box-sizing: border-box; 10 | } 11 | 12 | *, 13 | *::before, 14 | *::after { 15 | animation-duration: 0.01ms !important; 16 | animation-iteration-count: 1 !important; 17 | transition-duration: 0.01ms !important; 18 | scroll-behavior: auto !important; 19 | } 20 | 21 | * { 22 | margin: 0; 23 | } 24 | 25 | html, 26 | body { 27 | height: 100%; 28 | } 29 | 30 | html:focus-within { 31 | scroll-behavior: auto; 32 | } 33 | 34 | body { 35 | line-height: 1.5; 36 | -webkit-font-smoothing: antialiased; 37 | text-rendering: optimizeSpeed; 38 | } 39 | 40 | img { 41 | display: block; 42 | max-width: 100%; 43 | pointer-events: none; 44 | } 45 | 46 | p, 47 | h1, 48 | h2, 49 | h3, 50 | h4, 51 | h5, 52 | h6 { 53 | overflow-wrap: break-word; 54 | } 55 | 56 | #root, 57 | #__next { 58 | isolation: isolate; 59 | } 60 | 61 | /* */ 62 | 63 | /* <---------Variables---------> */ 64 | 65 | :root { 66 | /* Primary Colors */ 67 | --Violet: hsl(257, 40%, 49%); 68 | --Soft-Magenta: hsl(300, 69%, 71%); 69 | --white: #fff; 70 | 71 | /* Font Size */ 72 | --head: 3rem; 73 | --text: 1.3rem; 74 | 75 | /* Font Weight */ 76 | --regular: 400; 77 | --bold: 600; 78 | } 79 | 80 | /* */ 81 | 82 | /* <---------Utility Classes---------> */ 83 | 84 | .head { 85 | font-size: var(--head); 86 | font-weight: var(--bold); 87 | color: var(--white); 88 | font-family: "Poppins", sans-serif; 89 | } 90 | 91 | .text { 92 | font-size: var(--text); 93 | font-weight: var(--regular); 94 | color: var(--white); 95 | font-family: "Open Sans", sans-serif; 96 | } 97 | 98 | /* */ 99 | 100 | /* <---------General CSS---------> */ 101 | 102 | .background { 103 | min-height: 100vh; 104 | background-color: var(--Violet); 105 | background-image: url(https://bit.ly/3CA3FP6); 106 | background-repeat: no-repeat; 107 | background-size: 85% 100%; 108 | background-position: center; 109 | overflow: auto; 110 | padding: 0 4em; 111 | } 112 | 113 | .container { 114 | margin: 5em auto 2em auto; 115 | max-width: 1800px; 116 | } 117 | 118 | .hero { 119 | margin: 5em 0 3em 0; 120 | display: flex; 121 | gap: 6em; 122 | } 123 | 124 | .hero-img { 125 | flex-basis: 50%; 126 | } 127 | 128 | .mockup { 129 | width: 100%; 130 | } 131 | 132 | .hero-text { 133 | display: flex; 134 | flex-direction: column; 135 | gap: 1.5em; 136 | align-self: center; 137 | max-width: 35em; 138 | } 139 | 140 | .btn { 141 | background-color: var(--white); 142 | color: var(--Violet); 143 | border: 0; 144 | width: 15em; 145 | padding: 0.5em 1.5em; 146 | border-radius: 2em; 147 | box-shadow: 5px 5px 10px 0px rgba(63, 63, 63, 0.86); 148 | cursor: pointer; 149 | } 150 | 151 | .btn:hover { 152 | color: var(--white); 153 | background-color: var(--Soft-Magenta); 154 | } 155 | 156 | .socials { 157 | display: flex; 158 | gap: 1em; 159 | justify-content: flex-end; 160 | } 161 | 162 | .social-btn { 163 | border: 2px solid var(--white); 164 | border-radius: 100%; 165 | background: transparent; 166 | width: 3em; 167 | height: 3em; 168 | cursor: pointer; 169 | background-repeat: no-repeat; 170 | background-position: center; 171 | background-size: 1.5em; 172 | } 173 | 174 | .social-btn:hover { 175 | border: 2px solid var(--Soft-Magenta); 176 | } 177 | 178 | .facebook { 179 | background-image: url(https://bit.ly/3ANDWRW); 180 | } 181 | 182 | .facebook:hover { 183 | background-image: url(https://bit.ly/3Aj9mOo); 184 | } 185 | 186 | .twitter { 187 | background-image: url(https://bit.ly/3e1Xl8Q); 188 | } 189 | 190 | .twitter:hover { 191 | background-image: url(https://bit.ly/3R9V4Xp); 192 | } 193 | 194 | .instagram { 195 | background-image: url(https://bit.ly/3pO9z7r); 196 | } 197 | 198 | .instagram:hover { 199 | background-image: url(https://bit.ly/3dTh0aN); 200 | } 201 | 202 | /* */ 203 | 204 | /* <---------Media Queries---------> */ 205 | 206 | /* For medium screen */ 207 | @media (min-width: 800px) and (max-width: 1200px) { 208 | :root { 209 | --head: 2.5rem; 210 | --text: 1.2rem; 211 | } 212 | 213 | .hero-text { 214 | max-width: 30em; 215 | } 216 | } 217 | 218 | /* For smaller screen */ 219 | @media (min-width: 200px) and (max-width: 800px) { 220 | :root { 221 | --head: 2rem; 222 | --text: 1rem; 223 | } 224 | 225 | .background { 226 | min-height: 100vh; 227 | background-color: var(--Violet); 228 | background-image: url(https://bit.ly/3PN5FGJ); 229 | background-repeat: no-repeat; 230 | background-size: 100% 60%; 231 | background-position: top; 232 | overflow: auto; 233 | padding: 0 2em; 234 | 235 | } 236 | 237 | .container { 238 | margin: 2em 0 1em 0; 239 | } 240 | 241 | .logo { 242 | width: 12em; 243 | } 244 | 245 | .hero { 246 | flex-direction: column; 247 | margin: 3em 0 2em 0; 248 | } 249 | 250 | .hero-text { 251 | text-align: center; 252 | } 253 | 254 | .btn { 255 | margin: 0 auto; 256 | } 257 | 258 | .socials { 259 | justify-content: center; 260 | } 261 | } 262 | 263 | /* For medium screen */ 264 | @media (min-width: 600px) and (max-width: 800px) { 265 | :root { 266 | --head: 2.5rem; 267 | --text: 1.2rem; 268 | } 269 | } 270 | 271 | /* */ -------------------------------------------------------------------------------- /GayanKod/README.md: -------------------------------------------------------------------------------- 1 | # Illuminated Simple Responsive Landing Page 2 | 3 | **Screenshots** 4 | 5 | ![Screenshot01](screenshots/SS1.png) 6 | 7 | When sign up button clicked, 8 | 9 | ![Screenshot01](screenshots/SS2.png) -------------------------------------------------------------------------------- /GayanKod/css/style.css: -------------------------------------------------------------------------------- 1 | html { 2 | min-height: 100%; 3 | background: linear-gradient(0deg, rgba(34, 16, 2, 0.9), rgba(28, 180, 149, 0.2)), url(/img/bg.jpg); 4 | background-size: cover; 5 | } 6 | 7 | body { 8 | font-family: Roboto, sans-serif; 9 | font-size: 16px; 10 | background-color: rgba(0, 0, 0, 0.5); 11 | } 12 | 13 | * { 14 | margin: 0; 15 | padding: 0; 16 | } 17 | 18 | .content-container { 19 | position: absolute; 20 | top: 40%; 21 | left: 5%; 22 | } 23 | 24 | .topic { 25 | color: #fff; 26 | font-size: 52px; 27 | } 28 | 29 | .content { 30 | margin-top: 5%; 31 | color: rgba(255, 255, 255, 0.5); 32 | font-size: 10pt; 33 | width: 360px; 34 | 35 | } 36 | 37 | .email-signin { 38 | margin-top: 5%; 39 | } 40 | 41 | .email { 42 | background: transparent; 43 | width: 200px; 44 | height: 25px; 45 | color: rgba(255, 255, 255, 0.5); 46 | border: 1px solid rgba(255, 255, 255, 0.5); 47 | border-radius: 5px 5px; 48 | padding-left: 15px; 49 | } 50 | 51 | .email::placeholder { 52 | color: rgba(255, 255, 255, 0.5); 53 | padding: 15px; 54 | } 55 | 56 | .signup { 57 | width: 70px; 58 | height: 27px; 59 | color: #fff; 60 | background-color: #c77b09; 61 | border: none; 62 | border-radius: 5px; 63 | font-weight: bold; 64 | } 65 | 66 | .social-container { 67 | position: absolute; 68 | top: 85%; 69 | left: 5%; 70 | color: rgba(255, 255, 255, 0.5); 71 | } 72 | 73 | i { 74 | padding-right: 10px; 75 | } 76 | 77 | .footer { 78 | margin-top: 5%; 79 | font-size: 10px; 80 | } 81 | 82 | #demo { 83 | color: #c77b09; 84 | font-size: 14px; 85 | margin-top: 5px; 86 | } 87 | 88 | @media all and (max-width:420px) { 89 | 90 | .topic { 91 | display: none; 92 | } 93 | 94 | .content { 95 | display: none; 96 | } 97 | 98 | .email { 99 | display: block; 100 | margin: 0 auto; 101 | width: 80%; 102 | height: 35px; 103 | padding-left: 0px; 104 | } 105 | 106 | .signup { 107 | display: block; 108 | margin: 0 auto; 109 | width: 80%; 110 | margin-top: 3%; 111 | height: 35px; 112 | } 113 | 114 | .content-container { 115 | width: 100% 116 | } 117 | 118 | .social-container { 119 | margin-left: 10%; 120 | } 121 | 122 | #demo { 123 | margin-left: 10%; 124 | } 125 | } -------------------------------------------------------------------------------- /GayanKod/img/bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/GayanKod/img/bg.jpg -------------------------------------------------------------------------------- /GayanKod/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 10 | 11 | Responsive Simple Landing Page - GayanKod 12 | 13 | 14 | 15 |
16 |
17 |
Illuminated
18 |
19 | The illuminated life can happen now, in the moments left. Die to your ego, and become a True Human Being. 20 |
21 | 22 | 27 | 32 | 33 |
34 | 35 |
36 |
37 | 38 | 39 | 40 | 41 |
42 |
43 | 44 | GayanKod | Credit Unsplash + HTML5 UP 45 |
46 |
47 |
48 | 49 | 50 | -------------------------------------------------------------------------------- /GayanKod/screenshots/SS1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/GayanKod/screenshots/SS1.png -------------------------------------------------------------------------------- /GayanKod/screenshots/SS2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/GayanKod/screenshots/SS2.png -------------------------------------------------------------------------------- /Honey-9/css/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@300;400;700&display=swap"); 2 | 3 | * { 4 | box-sizing: border-box; 5 | padding: 0; 6 | margin: 0; 7 | } 8 | 9 | :root { 10 | --text-color: #00aa00; 11 | } 12 | 13 | body { 14 | font-family: "Source Code Pro", monospace; 15 | background-color: #333; 16 | color: #ccc; 17 | font-size: 18px; 18 | line-height: 1.6; 19 | } 20 | 21 | h1 { 22 | color: var(--text-color); 23 | font-size: 50px; 24 | letter-spacing: -5px; 25 | margin-bottom: 20px; 26 | } 27 | 28 | h2 { 29 | color: var(--text-color); 30 | } 31 | 32 | h3 { 33 | font-family: "Source Code Pro", monospace; 34 | margin-bottom: 10px; 35 | } 36 | 37 | ul { 38 | list-style-type: none; 39 | } 40 | 41 | a { 42 | color: var(--text-color); 43 | font-family: "Source Code Pro", monospace; 44 | text-decoration: none; 45 | } 46 | 47 | p { 48 | margin: 20px 0; 49 | } 50 | 51 | nav { 52 | width: 50%; 53 | } 54 | 55 | nav ul { 56 | display: flex; 57 | justify-content: space-around; 58 | align-items: center; 59 | } 60 | 61 | nav ul li { 62 | color: var(--text-color); 63 | cursor: pointer; 64 | } 65 | 66 | .container { 67 | max-width: 600px; 68 | margin: auto; 69 | height: 70vh; 70 | display: flex; 71 | flex-direction: column; 72 | justify-content: center; 73 | align-items: center; 74 | } 75 | 76 | .cursor { 77 | font-weight: 700; 78 | animation: 1s blink step-end infinite; 79 | } 80 | 81 | @keyframes blink { 82 | from, 83 | to { 84 | color: transparent; 85 | } 86 | 87 | 50% { 88 | color: var(--text-color); 89 | } 90 | } 91 | -------------------------------------------------------------------------------- /Honey-9/img/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/Honey-9/img/favicon.ico -------------------------------------------------------------------------------- /Honey-9/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Welcome 10 | 11 | 12 | 13 | 14 | 15 |
16 |
17 |

praveen:~$|

18 |

Find me online:

19 | 39 |
40 |
41 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /Honey-9/js/main.js: -------------------------------------------------------------------------------- 1 | const about = document.querySelector("#about"); 2 | const contact = document.querySelector("#contact"); 3 | const aboutContent = document.querySelector("#about-content"); 4 | const contactContent = document.querySelector("#contact-content"); 5 | 6 | about.addEventListener("click", () => { 7 | const aboutBox = new WinBox({ 8 | title: "About Me", 9 | width: "400px", 10 | height: "400px", 11 | top: 20, 12 | right: 20, 13 | bottom: 20, 14 | left: 20, 15 | mount: aboutContent, 16 | onfocus: function () { 17 | this.setBackground("#00aa00"); 18 | }, 19 | onblur: function () { 20 | this.setBackground("#777"); 21 | }, 22 | }); 23 | }); 24 | 25 | contact.addEventListener("click", () => { 26 | const contactBox = new WinBox({ 27 | title: "Contact Me", 28 | width: "400px", 29 | height: "400px", 30 | top: 150, 31 | right: 50, 32 | bottom: 50, 33 | left: 250, 34 | mount: contactContent, 35 | onfocus: function () { 36 | this.setBackground("#00aa00"); 37 | }, 38 | onblur: function () { 39 | this.setBackground("#777"); 40 | }, 41 | }); 42 | }); 43 | -------------------------------------------------------------------------------- /I2IT-ACM-Student-Chapter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | WhatsApp Web Portfolio 7 | 41 | 42 | 43 |
44 |

Praveen Kumar Purushothaman

45 |
46 | Website 47 | LinkedIn 48 | Website 49 | YouTube 50 |
51 |
52 | 53 | 54 | -------------------------------------------------------------------------------- /Jayesh_Tesla_clone/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 | 14 |
15 |
16 | Tesla 17 |
18 |
19 | 27 |
28 |
29 | 34 |
35 |
36 | 37 | 38 | 39 |
40 |
41 |
42 |

Model 3

43 |

44 | Order Online for 45 | Touchless Delivery 46 |

47 |
48 |
49 | 50 | 51 |
52 |
53 | 54 |
55 |
56 |

Model S

57 |

58 | Order Online for 59 | Touchless Delivery 60 |

61 |
62 |
63 | 64 | 65 |
66 |
67 | 68 | 69 |
70 |
71 |

Model Y

72 |

73 | Order Online for 74 | Touchless Delivery 75 |

76 |
77 |
78 | 79 | 80 |
81 |
82 | 83 |
84 |
85 |

Model X

86 |

87 | Order Online for 88 | Touchless Delivery 89 |

90 |
91 |
92 | 93 | 94 |
95 |
96 | 97 |
98 |
99 |

solar panels

100 |

101 | Lowest Cost Solar Panels In America 102 |

103 |
104 |
105 | 106 | 107 |
108 |
109 | 110 |
111 |
112 |

Solar roofs

113 |

114 | Produce Clean Energy From Your Roof 115 |

116 |
117 |
118 | 119 | 120 |
121 |
122 | 123 |
124 |
125 |

Accessories

126 |
127 |
128 | 129 |
130 | 131 |
132 | 142 |
143 |
144 |
145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | -------------------------------------------------------------------------------- /Jayesh_Tesla_clone/script.js: -------------------------------------------------------------------------------- 1 | new fullpage('#fullpage', { 2 | autoScrolling: true, 3 | scrollBar: true, 4 | }) -------------------------------------------------------------------------------- /Jayesh_Tesla_clone/style.css: -------------------------------------------------------------------------------- 1 | /**************************************************************************************/ 2 | 3 | @import url('https://fonts.googleapis.com/css2?family=Lato:wght@700&family=Mohave:wght@700&family=Montserrat:wght@100;200;300;400;500;600;700&family=Nothing+You+Could+Do&display=swap'); 4 | * { 5 | padding: 0px; 6 | margin: 0px; 7 | box-sizing: boder-box; 8 | font-family: 'Montserrat', sans-serif; 9 | } 10 | 11 | a { 12 | text-decoration: none; 13 | } 14 | 15 | ul li { 16 | list-style: none; 17 | } 18 | 19 | .header { 20 | display: flex; 21 | justify-content: space-between; 22 | position: fixed; 23 | top: 0px; 24 | left: 0; 25 | width: 100%; 26 | height: 60px; 27 | z-index: 100; 28 | } 29 | 30 | .header_left { 31 | margin: 0 50px; 32 | height: 100%; 33 | display: flex; 34 | align-items: center; 35 | } 36 | 37 | .header_left img { 38 | width: 110px; 39 | } 40 | 41 | .header_mid ul { 42 | display: flex; 43 | height: 100%; 44 | justify-content: space-around; 45 | align-items: center; 46 | } 47 | 48 | .header_mid ul li { 49 | /*background-color:transparent;*/ 50 | border-radius: 10px; 51 | transition: .3s; 52 | } 53 | 54 | .header_mid ul li:hover { 55 | background-color: rgba(0, 0, 0, 0.1); 56 | } 57 | 58 | .header_mid ul li a { 59 | color: #171a20; 60 | margin: 0px 8px; 61 | padding: 6px 8px; 62 | font-size: 14px; 63 | font-weight: 600; 64 | display: block; 65 | } 66 | 67 | .header_right { 68 | margin-right: 32px; 69 | } 70 | 71 | .header_right ul { 72 | display: flex; 73 | height: 100%; 74 | justify-content: space-around; 75 | align-items: center; 76 | } 77 | 78 | .header_right ul li { 79 | /*background-color:transparent;*/ 80 | border-radius: 10px; 81 | transition: .3s; 82 | } 83 | 84 | .header_right ul li:hover { 85 | background-color: rgba(0, 0, 0, 0.1); 86 | } 87 | 88 | .header_right ul li a { 89 | color: #171a20; 90 | margin: 0px 8px; 91 | padding: 6px 8px; 92 | font-size: 14px; 93 | font-weight: 600; 94 | display: block; 95 | } 96 | 97 | 98 | /* header end */ 99 | 100 | 101 | /*******************************************************************************************/ 102 | 103 | .section { 104 | width: 100%; 105 | height: 100vh; 106 | overflow: hidden; 107 | background-repeat: no-repeat; 108 | background-size: cover; 109 | background-position: center; 110 | z-index: 9; 111 | } 112 | 113 | .section_1 { 114 | background-image: url(https://thatanjan.github.io/tesla-clone-yt/media/3.avif); 115 | position: relative; 116 | } 117 | 118 | .section_2 { 119 | background-image: url(https://thatanjan.github.io/tesla-clone-yt/media/1.avif); 120 | position: relative; 121 | } 122 | 123 | .section_3 { 124 | background-image: url(https://thatanjan.github.io/tesla-clone-yt/media/2.avif); 125 | position: relative; 126 | } 127 | 128 | .section_4 { 129 | background-image: url(https://thatanjan.github.io/tesla-clone-yt/media/4.avif); 130 | position: relative; 131 | } 132 | 133 | .section_5 { 134 | background-image: url(https://thatanjan.github.io/tesla-clone-yt/media/5.avif); 135 | position: relative; 136 | } 137 | 138 | .section_6 { 139 | background-image: url(https://thatanjan.github.io/tesla-clone-yt/media/6.avif); 140 | position: relative; 141 | } 142 | 143 | .section_7 { 144 | background-image: url(https://thatanjan.github.io/tesla-clone-yt/media/7.avif); 145 | position: relative; 146 | } 147 | 148 | .text_box { 149 | width: 100%; 150 | margin-top: 120px; 151 | text-align: center; 152 | } 153 | 154 | .heding { 155 | font-weight: 600; 156 | font-size: 40px; 157 | color: #181b21; 158 | } 159 | 160 | .sub_heding { 161 | font-size: 14px; 162 | color: #000; 163 | } 164 | 165 | .sub_heding a { 166 | font-size: 14px; 167 | color: #000; 168 | border-bottom: 1px solid #000; 169 | } 170 | 171 | .sub_heding a:hover { 172 | border-bottom: 2px solid #000; 173 | } 174 | 175 | .btn_box { 176 | position: absolute; 177 | bottom: 16%; 178 | width: 100%; 179 | display: flex; 180 | justify-content: center; 181 | } 182 | 183 | .btn_box button { 184 | width: 250px; 185 | padding: 12px 24px; 186 | border-radius: 20px; 187 | margin: 0 20px; 188 | border: none; 189 | outline: none; 190 | text-transform: uppercase; 191 | font-size: 12px; 192 | font-weight: 500; 193 | } 194 | 195 | .primary_btn { 196 | color: #fff; 197 | background-color: rgba(0, 0, 0, .7); 198 | cursor: pointer; 199 | } 200 | 201 | .secondary_btn { 202 | color: #000; 203 | background-color: rgba(255, 255, 255, .7); 204 | cursor: pointer; 205 | } 206 | 207 | 208 | /************************footer********************************/ 209 | 210 | .footer { 211 | position: absolute; 212 | z-index: 100; 213 | bottom: 0; 214 | width: 100%; 215 | } 216 | 217 | .footer ul { 218 | width: 80%; 219 | margin: 20px auto; 220 | display: flex; 221 | justify-content: center; 222 | flex-wrap: wrap; 223 | } 224 | 225 | .footer ul li { 226 | margin: 0 10px; 227 | margin-top: 16px; 228 | text-transform: capitalize; 229 | font-weight: 600; 230 | } 231 | 232 | .footer ul li a { 233 | font-size: 12px; 234 | color: #817a7a; 235 | } 236 | 237 | 238 | /* responsive */ 239 | 240 | @media screen and (max-width: 1200px) { 241 | .header_mid { 242 | display: none; 243 | } 244 | .hide_manu { 245 | display: none; 246 | } 247 | .header_right ul li { 248 | background-color: rgba(0, 0, 0, 0.1); 249 | } 250 | } 251 | 252 | @media screen and (max-width: 600px) { 253 | .btn_box { 254 | display: flex; 255 | flex-direction: column; 256 | align-items: center; 257 | padding: 0px 20px; 258 | box-sizing: border-box; 259 | } 260 | .btn_box button { 261 | width: 100%; 262 | margin: 10px; 263 | } 264 | } -------------------------------------------------------------------------------- /Jayesh_gymwebsite/dumbell.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/Jayesh_gymwebsite/dumbell.png -------------------------------------------------------------------------------- /Jayesh_gymwebsite/gym.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/Jayesh_gymwebsite/gym.jpg -------------------------------------------------------------------------------- /Jayesh_gymwebsite/gym.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/Jayesh_gymwebsite/gym.png -------------------------------------------------------------------------------- /Jayesh_gymwebsite/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300&display=swap'); 2 | 3 | *{ 4 | margin: 0; 5 | padding: 0; 6 | } 7 | 8 | .container{ 9 | max-width: 80vw; 10 | font-family: 'Ubuntu', sans-serif; 11 | } 12 | 13 | .navbar{ 14 | display: flex; 15 | height: 67px; 16 | } 17 | .navbar li{ 18 | list-style: none; 19 | margin: 0 12px; 20 | } 21 | 22 | .topleft{ 23 | width: 50%; 24 | } 25 | 26 | .topright{ 27 | width: 50%; 28 | } 29 | 30 | .section1{ 31 | max-height: 100vh; 32 | color: #711e15; 33 | } 34 | 35 | .section1 h1{ 36 | color: #37110d; 37 | font-size: 2rem; 38 | } 39 | 40 | .logo{ 41 | font-size: 1.3rem; 42 | } 43 | 44 | .dumbellimg{ 45 | width: 289px; 46 | } 47 | 48 | .topright .gymimg{ 49 | width: 466px; 50 | } 51 | 52 | .section2{ 53 | padding: 73px; 54 | } 55 | 56 | .section2 h1{ 57 | font-size: 2.3rem; 58 | } 59 | 60 | .section2 p{ 61 | padding: 0 8vw; 62 | text-align: center; 63 | } 64 | 65 | .box{ 66 | padding: 8px 0; 67 | margin: 12px 22px; 68 | min-width: 20vw; 69 | border: 2px solid rgb(120, 54, 16); 70 | border-radius: 8px; 71 | text-align: center; 72 | } 73 | 74 | .box h2{ 75 | font-size: 2rem; 76 | padding: 15px 0; 77 | } 78 | 79 | .highlighted{ 80 | font-size: 1.2rem; 81 | font-weight: bolder; 82 | } 83 | 84 | .box ul{ 85 | list-style-type: none; 86 | } 87 | 88 | .box ul li{ 89 | margin: 12px 2px; 90 | } 91 | 92 | .plantable{ 93 | display: flex; 94 | justify-content: center; 95 | align-items: center; 96 | } 97 | 98 | .section3 table{ 99 | width: 100%; 100 | margin-bottom: 140px; 101 | margin-top: 20px; 102 | border-collapse: collapse; 103 | } 104 | 105 | .section3 table th{ 106 | width: 23vw; 107 | border-bottom: 2px solid black; 108 | padding: 15px 0; 109 | } 110 | 111 | .section3 table td{ 112 | border-bottom: 2px solid black; 113 | } 114 | 115 | 116 | .section3 h1{ 117 | font-size: 2.3rem; 118 | } 119 | 120 | .section3{ 121 | padding: 73px; 122 | } 123 | 124 | footer{ 125 | padding: 23px; 126 | text-align: center; 127 | } 128 | .buttons{ 129 | display: flex; 130 | justify-content: center; 131 | align-items: center; 132 | margin: 12px; 133 | } 134 | 135 | .deal{ 136 | font-size: 1.2rem; 137 | font-weight: bolder; 138 | margin: 12px 0; 139 | } -------------------------------------------------------------------------------- /Jayesh_gymwebsite/timer.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | var countDownDate = new Date("Jun 5, 2022 15:37:25").getTime(); 4 | 5 | var x = setInterval(function() { 6 | 7 | var now = new Date().getTime(); 8 | 9 | var distance = countDownDate - now; 10 | 11 | var days = Math.floor(distance / (1000 * 60 * 60 * 24)); 12 | var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); 13 | var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); 14 | var seconds = Math.floor((distance % (1000 * 60)) / 1000); 15 | 16 | document.getElementById("demo").innerHTML = days + "d " + hours + "h " 17 | + minutes + "m " + seconds + "s "; 18 | 19 | if (distance < 0) { 20 | clearInterval(x); 21 | document.getElementById("demo").innerHTML = "EXPIRED"; 22 | } 23 | }, 1000); -------------------------------------------------------------------------------- /Jayesh_gymwebsite/utils.css: -------------------------------------------------------------------------------- 1 | .min-h-screen{ 2 | min-height: 100vh; 3 | } 4 | 5 | .bg-red{ 6 | background-color: red; 7 | } 8 | 9 | .mx-auto{ 10 | margin-left: auto; 11 | margin-right: auto; 12 | } 13 | 14 | .flex{ 15 | display: flex; 16 | } 17 | 18 | .items-center{ 19 | align-items: center; 20 | } 21 | 22 | .justify-between{ 23 | justify-content: space-between; 24 | } 25 | 26 | .justify-center{ 27 | justify-content: center; 28 | } 29 | 30 | .flex-col{ 31 | flex-direction: column; 32 | } 33 | 34 | .font-bold{ 35 | font-weight: bolder; 36 | } 37 | 38 | .my-1{ 39 | margin-top: 13px; 40 | margin-bottom: 13px; 41 | } 42 | 43 | .my-2{ 44 | margin-top: 26px; 45 | margin-bottom: 26px; 46 | } 47 | 48 | .px-2{ 49 | padding-left: 13px; 50 | padding-right: 13px; 51 | } 52 | 53 | .text-blue{ 54 | color: rgb(227 74 56);; 55 | } 56 | 57 | .btn{ 58 | padding:7px 12px; 59 | border: 2px solid white; 60 | border-radius: 6px; 61 | cursor: pointer; 62 | color: white; 63 | background-color: rgb(227 74 56);; 64 | } 65 | 66 | .overflow-x-hidden{ 67 | overflow-x: hidden; 68 | } 69 | 70 | .text-center{ 71 | text-align: center; 72 | } -------------------------------------------------------------------------------- /Kashish Ahuja/assets/images/TAMS.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/Kashish Ahuja/assets/images/TAMS.mp4 -------------------------------------------------------------------------------- /Kashish Ahuja/assets/images/hello world turbo C.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/Kashish Ahuja/assets/images/hello world turbo C.PNG -------------------------------------------------------------------------------- /Kashish Ahuja/assets/images/hello world vs code.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/Kashish Ahuja/assets/images/hello world vs code.PNG -------------------------------------------------------------------------------- /Kashish Ahuja/assets/images/inheritance.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/Kashish Ahuja/assets/images/inheritance.png -------------------------------------------------------------------------------- /Kashish Ahuja/assets/images/meet the programmer.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/Kashish Ahuja/assets/images/meet the programmer.jpeg -------------------------------------------------------------------------------- /Kashish Ahuja/assets/images/pointers.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/Kashish Ahuja/assets/images/pointers.png -------------------------------------------------------------------------------- /Kashish Ahuja/assets/images/slider-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/Kashish Ahuja/assets/images/slider-1.jpg -------------------------------------------------------------------------------- /Kashish Ahuja/assets/images/slider-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/Kashish Ahuja/assets/images/slider-2.jpg -------------------------------------------------------------------------------- /Kashish Ahuja/assets/images/slider-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/Kashish Ahuja/assets/images/slider-3.jpg -------------------------------------------------------------------------------- /Kashish Ahuja/assets/images/star pattern questions.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/Kashish Ahuja/assets/images/star pattern questions.png -------------------------------------------------------------------------------- /Kashish Ahuja/assets/images/to-do.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/Kashish Ahuja/assets/images/to-do.mp4 -------------------------------------------------------------------------------- /Kashish Ahuja/assets/images/turbo c.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/Kashish Ahuja/assets/images/turbo c.jpeg -------------------------------------------------------------------------------- /Kashish Ahuja/assets/images/vs code.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/Kashish Ahuja/assets/images/vs code.jpeg -------------------------------------------------------------------------------- /MedEasy Website/images/about.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/MedEasy Website/images/about.png -------------------------------------------------------------------------------- /MedEasy Website/images/anatomy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/MedEasy Website/images/anatomy.png -------------------------------------------------------------------------------- /MedEasy Website/images/contactus.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/MedEasy Website/images/contactus.png -------------------------------------------------------------------------------- /MedEasy Website/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/MedEasy Website/images/logo.png -------------------------------------------------------------------------------- /MedEasy Website/images/main.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/MedEasy Website/images/main.png -------------------------------------------------------------------------------- /MedEasy Website/images/ophthalmalogy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/MedEasy Website/images/ophthalmalogy.png -------------------------------------------------------------------------------- /MedEasy Website/images/pharmacology.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/MedEasy Website/images/pharmacology.png -------------------------------------------------------------------------------- /MedEasy Website/images/physiology.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/MedEasy Website/images/physiology.png -------------------------------------------------------------------------------- /MedEasy Website/js/script.js: -------------------------------------------------------------------------------- 1 | const navMenu= document.getElementById('navMenu'), 2 | sideNavbar= document.getElementById('sideNavbar'), 3 | navClose= document.getElementById('navClose'); 4 | 5 | // showing menu 6 | sideNavbar.addEventListener('click', ()=>{ 7 | navMenu.classList.toggle('show') 8 | }) 9 | 10 | //hiding menu 11 | navClose.addEventListener('click', ()=>{ 12 | navMenu.classList.remove('show') 13 | }) -------------------------------------------------------------------------------- /MedEasy Website/preview images/about.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/MedEasy Website/preview images/about.png -------------------------------------------------------------------------------- /MedEasy Website/preview images/contactus.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/MedEasy Website/preview images/contactus.png -------------------------------------------------------------------------------- /MedEasy Website/preview images/contribute.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/MedEasy Website/preview images/contribute.png -------------------------------------------------------------------------------- /MedEasy Website/preview images/home.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/MedEasy Website/preview images/home.png -------------------------------------------------------------------------------- /MedEasy Website/preview images/services.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/MedEasy Website/preview images/services.png -------------------------------------------------------------------------------- /MedEasy Website/readme.md: -------------------------------------------------------------------------------- 1 | ### MedEasy - MMBS notes providing website 2 | This website can be used as template to provide mmbs notes for students, where they can purchase notes, contribute any notes. 3 | This is fully responsive website. 4 | 5 | ### Tech Stack 6 | HTML, CSS, JS. 7 | -------------------------------------------------------------------------------- /Mercedes Benz Landing Page/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Avik's Stellar Site 8 | 9 | 10 | 11 | 12 | 19 | 20 | 28 | 29 | 30 | 31 | 32 |
33 | 34 | 35 | 36 |
37 |
38 |

39 | The All New 40 | S-CLASS 41 |

42 | 43 |
44 |
45 |

Luxury

46 |
The Greatest refinement out there paired with Technological Brilliance.
47 |
48 |
49 |

362 hp

50 |
The S-Class has plenty of Punch when driven at full tilt on the Autobahn.
51 |
52 |
53 |

Twin Turbo

54 |
55 | Simultaneous performance and luxury. 56 |
57 | A unique unmatched synergy. 58 |
59 |
60 |
61 |
62 | 63 | 64 | 65 | 66 | 67 | -------------------------------------------------------------------------------- /Messi and Ronaldo/img/Messi.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/Messi and Ronaldo/img/Messi.png -------------------------------------------------------------------------------- /Messi and Ronaldo/img/Ronaldo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/Messi and Ronaldo/img/Ronaldo.png -------------------------------------------------------------------------------- /Messi and Ronaldo/img/bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/Messi and Ronaldo/img/bg.jpg -------------------------------------------------------------------------------- /Messi and Ronaldo/img/close.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/Messi and Ronaldo/img/close.png -------------------------------------------------------------------------------- /Messi and Ronaldo/img/menu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/Messi and Ronaldo/img/menu.png -------------------------------------------------------------------------------- /Messi and Ronaldo/img/mulher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/Messi and Ronaldo/img/mulher.png -------------------------------------------------------------------------------- /Messi and Ronaldo/img/nathan.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/Messi and Ronaldo/img/nathan.png -------------------------------------------------------------------------------- /Messi and Ronaldo/img/sam.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/Messi and Ronaldo/img/sam.png -------------------------------------------------------------------------------- /Messi and Ronaldo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Tibute To a Great Rivalry. 10 | 11 | 12 | 13 |
14 | 15 | 16 |
17 | 21 |
22 |
23 |

Two of Greatest Footballer's to have ever lived.

24 |

Football World has seen may greats like Pele, Maradona, Zidane, Ronaldinho, and many great rivalry. But a 25 | rivalry that is more consistent for more than a decade is Messi vs Ronaldo. In this landing 26 | Page we see some of the starts of them.

27 |
28 |
29 |
30 |

Lionel Messi

31 |

Lionel Andrés Messi, also known as Leo Messi, is an Argentine professional footballer who plays 32 | as a forward for Ligue 1 club Paris Saint-Germain and captains the Argentina national team.

33 | Read More 34 |
35 | 36 |
37 |
38 |
39 |

Cristiano Ronaldo

40 |

Cristiano Ronaldo dos Santos Aveiro GOIH ComM is a Portuguese professional footballer who plays 41 | as a forward for Premier League club Manchester United and captains the Portugal national team. 42 |

43 | Read More 44 |
45 | 46 |
47 |
48 |

These stats will be of Number of Trophies they have won. Number of individual Awards they have won and number 49 | of goals they have scored till now.

50 |
51 |
52 | 53 |
54 |

Number of Trophies

55 |

Messi and Ronaldo have won 36 and 32 Trophies respectively with clubs

56 | Read 58 | More. 59 |
60 |
61 |
62 | 63 |
64 |

Number of Individual Awards

65 |

Messi has won 49 individual awards whereas Ronaldo has won 48 individual awards

66 | Read 68 | more 69 |
70 |
71 |
72 | 73 |
74 |

Number of Ballon Dor

75 |

Messi has won 7 Ballon Dor's an all time record whereas Ronaldo has won 5 Ballon Dor's.

76 | Read 78 | More 79 |
80 |
81 |
82 |

This in no way is a comparision. It more made out of respect considering what they have achieved in their 83 | career's till now. Since their era is coming to an end and a new era is starting in world football, we will 84 | never know when will be able to see this kind of rivalry again. It is for sure that this rivalry will be 85 | remembered by all. People will remember Messi for his talent and skills whereas people will remember 86 | ronaldo as a guy whose hardwork made him achieve all of this. It is my tribute to two of the greatest 87 | players of all time who have graced the pitch.

88 |
89 |
Made By Avik
90 | 91 | 92 | 93 | -------------------------------------------------------------------------------- /Messi and Ronaldo/js/script.js: -------------------------------------------------------------------------------- 1 | window.addEventListener("scroll", function(){ 2 | const header = document.querySelector('header'); 3 | header.classList.toggle('sticky', window.scrollY > 0) 4 | }) 5 | const navigation = document.querySelector('nav'); 6 | document.querySelector('.toggle').onclick = function(){ 7 | this.classList.toggle('active'); 8 | navigation.classList.toggle('active'); 9 | } -------------------------------------------------------------------------------- /ReadMe.md: -------------------------------------------------------------------------------- 1 | # Creative & Simple Landing Pages 2 | 3 | This is a repository of Creative UI Designs for Creative & Simple Landing Pages. There is only one page and it is self contained - which means, all the HTML, CSS and JavaScripts are inside the same file or at least, the same directory. 4 | 5 | ![Hacktoberfest 2021 Included](https://i.imgur.com/Ei5gGAFh.png) 6 | 7 | This Repository is also participating in Hacktoberfest 2021. 8 | 9 | The User Interfaces feature with these qualities: 10 | 11 | * Completely Responsive 12 | * Code Properly Indented with ESLint & Prettier 13 | * Looks Really Good and User Friendly (smooth functioning) 14 | 15 | ## Contribution Instructions 16 | 17 | The simple contribution instructions are: 18 | 19 | 1. Star :star: & Fork :fork_and_knife: this Repository. [Subscribe to my **YouTube Channel**.](https://rb.gy/fupw21) 20 | 2. Create a directory under your GitHub Username. 21 | 3. Inside the directory, please have the list of static files. 22 | 4. Create a Pull Request with the PR Template given. 23 | 5. All the best for your Hacktoberfest Journey! 24 | 25 | ### Files to be Included 26 | 27 | Your submission should include: 28 | 29 | 1. One Supporting JavaScript File 30 | 2. One Supporting CSS File 31 | 3. The Landing Page: `index.html` 32 | 33 | In case if you are planning to make multiple submissions, please create a subfolder inside your Username directory. These both cases might give you an idea: 34 | 35 | **Only One Submission** 36 | 37 | ```text 38 | praveenscience/ 39 | ├── index.html 40 | ├── script.js 41 | └── styles.css 42 | ``` 43 | 44 | **Multiple Submissions** 45 | 46 | ```text 47 | praveenscience/ 48 | ├── first/ 49 | │ ├── index.html 50 | │ ├── script.js 51 | │ └── styles.css 52 | └── second/ 53 | ├── index.html 54 | ├── script.js 55 | └── styles.css 56 | ``` 57 | 58 | ## Contributors List 59 | 60 | If you're not there, I am not there. Thank you for making this repository great! ❤️ 61 | 62 | [![Contributors List](https://contrib.rocks/image?repo=praveenscience/Creative-Simple-Landing-Pages)](https://github.com/praveenscience/Creative-Simple-Landing-Pages/graphs/contributors) 63 | -------------------------------------------------------------------------------- /RealMadrid/Hala Madrid...y nada más (feat. RedOne).mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/RealMadrid/Hala Madrid...y nada más (feat. RedOne).mp3 -------------------------------------------------------------------------------- /RealMadrid/Images/Cabinet.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/RealMadrid/Images/Cabinet.jpg -------------------------------------------------------------------------------- /RealMadrid/Images/RealMadrid.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/RealMadrid/Images/RealMadrid.png -------------------------------------------------------------------------------- /RealMadrid/Images/SCDE.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/RealMadrid/Images/SCDE.png -------------------------------------------------------------------------------- /RealMadrid/Images/UCL.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/RealMadrid/Images/UCL.png -------------------------------------------------------------------------------- /RealMadrid/Images/UCLTrophy.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/RealMadrid/Images/UCLTrophy.jpg -------------------------------------------------------------------------------- /RealMadrid/Images/UCLTrophy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/RealMadrid/Images/UCLTrophy.png -------------------------------------------------------------------------------- /RealMadrid/Images/USC.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/RealMadrid/Images/USC.png -------------------------------------------------------------------------------- /RealMadrid/Images/cdr.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/RealMadrid/Images/cdr.png -------------------------------------------------------------------------------- /RealMadrid/Images/click-to-download-real-madrid-logo-sv-11563363482ppb2nhviwx-removebg-preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/RealMadrid/Images/click-to-download-real-madrid-logo-sv-11563363482ppb2nhviwx-removebg-preview.png -------------------------------------------------------------------------------- /RealMadrid/Images/cwc.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/RealMadrid/Images/cwc.png -------------------------------------------------------------------------------- /RealMadrid/Images/laliga.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/RealMadrid/Images/laliga.png -------------------------------------------------------------------------------- /RealMadrid/Images/output-onlinepngtools (1).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/RealMadrid/Images/output-onlinepngtools (1).png -------------------------------------------------------------------------------- /RealMadrid/Images/output-onlinepngtools.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/RealMadrid/Images/output-onlinepngtools.png -------------------------------------------------------------------------------- /RealMadrid/README.md: -------------------------------------------------------------------------------- 1 | # Real Madrid Website Template 2 | - It is not responsive. 3 | 4 | # Tech Stack Used: 5 | 6 | - HTML5 7 | - CSS3 8 | 9 | 10 | # Picture: 11 | 12 | Screenshot 2022-05-09 at 1 20 02 PM 13 | -------------------------------------------------------------------------------- /RealMadrid/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | XDA Web Design 6 | 7 | 9 | 10 | 11 | 12 |
13 |
14 | 15 |

Real Madrid

16 |
17 |
18 | Club Legends 19 | Trophy Cabinet 20 | Current Squads 21 | Merchandise 22 | Wallpapers 23 |
24 |
25 |
26 | La Liga 27 | Copa del Rey 28 | Copa de Espana 29 | UEFA Champions League 30 | UEFA Super Cup 31 | FIFA Club World Cup 32 |
33 |
34 |
35 |
36 |
37 |

All Time Stats

38 |
39 |
  • Matches - 438
    • 40 |
  • Wins - 262
    • 41 |
  • Draw - 76
    • 42 |
  • Lost - 100
    • 43 |
  • Goals - 972
    • 44 |
  • Win % - 59.82%
    • 45 |
    46 |
    47 |
    48 |

    Top Scorers from the Club

    49 |
    50 |
  • Cristiano Ronaldo - 105
    • 51 |
  • Raul Gonzalez - 66
    • 52 |
  • Karim Benzema - 52
    • 53 |
  • Alfredo Di Stéfano - 49
    • 54 |
  • Santillana - 47
    • 55 |
    56 |
    57 |

    Most Appearances for the Club

    58 |
  • Iker Casillas - 150
    • 59 |
  • Raul Gonzales - 130
    • 60 |
  • Sergio Ramos - 123
    • 61 |
  • Roberto Carlos - 107
    • 62 |
  • Cristiano Ronaldo - 101
    • 63 |
    64 |
    65 |
    66 |
    67 |
    68 | 69 |
    70 |

    Real has won a total of 13 UEFA Champions League trophies.

    71 |
    Most by any club.
    72 |
    73 |
    74 |
    75 |
    76 |
    77 |

    Play Hala Madrid Y Nada Mas

    78 |
    and sing along
    79 |
    80 | 83 |
    84 |
    85 |
    86 |
    87 |
    88 |

    Time-line of Trophies

    89 |
    90 |
    91 | 93 |
    94 |
  • Uno - 55/56
    • 95 |
  • Dos - 56/57
    • 96 |
  • Tres - 57/58
    • 97 |
  • Cuatro - 58/59
    • 98 |
  • Cinco - 59/60
    • 99 |
  • Seis - 65/66
    • 100 |
  • Siete - 56/57
    • 101 |
  • Ocho - 57/58
    • 102 |
  • Nueve - 01/02
    • 103 |
  • La Decima - 13/14
    • 104 |
  • Once - 15/16
    • 105 |
  • Doce - 16/17
    • 106 |
  • Trece - 17/18
    • 107 |
    108 |
    109 |
    110 |
    111 |

    Current Season

    112 |
    113 |
    114 |
  • 1st Leg [Away]
    • 115 |
  • 116 |
    MCI 4 - 3 RMA
    117 |
    • 118 |
    119 |
    120 |
  • 2nd Leg [H]
    • 121 |
  • 122 |
    Madrid 3 - 1 MCI
    123 |
    • 124 |
    125 |
    126 |
    127 |
    128 |

    Stats from UCL 21/22

    129 |
  • Matches - 12
    • 130 |
  • Won - 8
    • 131 |
  • Draw - 0
    • 132 |
  • Lost - 4
    • 133 |
  • Goals - 28
    • 134 |
  • Attempts - 176
    • 135 |
  • Passing - 87.59%
    • 136 |
  • Possession - 50.42%
    • 137 |
  • Distance - 1387.15 KM
    • 138 |
  • Saves - 52
    • 139 |
  • Tackles - 61
    • 140 |
  • Fouls - 113
    • 141 |
  • Yellow Card - 26
    • 142 |
  • Red Card - 0
    • 143 |
    144 |
    145 |
  • Source - UEFA
    • 147 |
    148 |
    149 |
    150 | 151 | 152 | -------------------------------------------------------------------------------- /RealMadrid/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: black; 3 | } 4 | 5 | body::-webkit-scrollbar { 6 | display: none; 7 | } 8 | 9 | .sidebar { 10 | height: 100%; 11 | width: 250px; 12 | position: fixed; 13 | z-index: 1; 14 | top: 0; 15 | left: 0; 16 | font-family: 'Montserrat', sans-serif; 17 | margin-top: 150px; 18 | background-color: #9A0F98; 19 | overflow-x: hidden; 20 | padding-top: 10px; 21 | } 22 | 23 | h1, 24 | h2, 25 | h3, 26 | h4, 27 | h5, 28 | h6, 29 | p, 30 | li { 31 | font-family: 'Montserrat', sans-serif; 32 | color: #f7f7f7; 33 | text-align: center; 34 | } 35 | 36 | .sidebar a { 37 | padding: 15px 25px; 38 | text-decoration: none; 39 | font-size: 18px; 40 | color: #f9cdfd; 41 | display: block; 42 | } 43 | 44 | .sidebar a:hover { 45 | color: #f7f7f7; 46 | } 47 | 48 | .navbar { 49 | height: 100px; 50 | background-color: #39065A; 51 | position: fixed; 52 | top: 0; 53 | left: 0; 54 | right: 0; 55 | display: flexbox; 56 | flex-direction: row; 57 | } 58 | 59 | .brand { 60 | display: flex; 61 | flex-direction: row; 62 | font-family: 'Josefin Sans', sans-serif; 63 | color: #f7f7f7; 64 | text-decoration: none; 65 | font-size: 30px; 66 | margin-left: 25px; 67 | height: 70px; 68 | padding-top: 5px; 69 | float: left; 70 | } 71 | 72 | .navel { 73 | font-family: 'Montserrat', sans-serif; 74 | float: right; 75 | margin-right: 25px; 76 | margin: 42px; 77 | } 78 | 79 | .navel a { 80 | padding: 15px; 81 | text-decoration: none; 82 | color: #f9cdfd; 83 | } 84 | 85 | .active { 86 | color: #f7f7f7 !important; 87 | } 88 | 89 | .navel :hover { 90 | color: #f7f7f7; 91 | } 92 | 93 | .container { 94 | width: 80%; 95 | margin-left: 300px; 96 | margin-top: 125px; 97 | display: flex; 98 | flex-direction: row; 99 | } 100 | 101 | .row { 102 | display: flexbox; 103 | width: 25%; 104 | flex-direction: column; 105 | margin: 0%; 106 | padding: 0%; 107 | } 108 | 109 | .cabinet { 110 | transition: transform .5s; 111 | } 112 | 113 | .cabinet:hover { 114 | transform: scale(1.8); 115 | justify-content: center; 116 | } 117 | 118 | .card { 119 | margin: 5%; 120 | padding: 2% 3%; 121 | border-radius: 7px; 122 | height: fit-content; 123 | width: 80%; 124 | background-color: #6A0572; 125 | } 126 | 127 | .trophy-text { 128 | margin-top: -25px; 129 | margin-bottom: 5% !important; 130 | } 131 | 132 | .trophy-card { 133 | justify-content: center; 134 | margin: 0; 135 | padding: 0; 136 | height: 100%; 137 | width: 100%; 138 | } 139 | 140 | .trophy-card h5 { 141 | margin-top: 0px; 142 | padding-top: 10px; 143 | padding: 10px; 144 | } 145 | 146 | li { 147 | list-style: none; 148 | color: #f7f7f7; 149 | text-align: left !important; 150 | padding-left: 2% !important; 151 | padding-bottom: 2%; 152 | margin-left: 0em !important; 153 | font-size: large; 154 | padding: 2px; 155 | } 156 | 157 | li h6 { 158 | margin: 0; 159 | text-align: left; 160 | } 161 | 162 | .song h3, 163 | h6 { 164 | margin-top: 0; 165 | margin: 2.45%; 166 | } -------------------------------------------------------------------------------- /SpaceX Website Template/dragon.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | SpaceX - Dragon 10 | 11 | 12 |
    13 |
    14 | 31 |
    32 |
    33 | 38 | 50 |
    51 | 52 | 53 | 58 | 59 |
    60 |
    61 |

    Dragon

    62 |

    Sending humans and cargo into space

    63 |
    64 | 65 |
    66 |
    67 | 0 68 |

    Total Launches

    69 |
    70 |
    71 | 0 72 |

    Visits to the ISS

    73 |
    74 |
    75 | 0 76 |

    Reflow Missions

    77 |
    78 |
    79 | 80 | 92 | 93 | 94 | -------------------------------------------------------------------------------- /SpaceX Website Template/falcon-heavy.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | SpaceX - Falcon Heavy 10 | 11 | 12 |
    13 |
    14 | 31 |
    32 |
    33 | 38 | 50 |
    51 | 52 | 53 | 58 | 59 |
    60 |
    61 |

    Falcon Heavy

    62 |

    The world's most powerful rocket

    63 |
    64 | 65 |
    66 |
    67 | 0 68 |

    Total Launches

    69 |
    70 |
    71 | 0 72 |

    Total Landings

    73 |
    74 |
    75 | 0 76 |

    Total Reflights

    77 |
    78 |
    79 | 80 | 92 | 93 | 94 | -------------------------------------------------------------------------------- /SpaceX Website Template/falcon9.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | SpaceX - Falcon 9 10 | 11 | 12 |
    13 |
    14 | 31 |
    32 |
    33 | 38 | 50 |
    51 | 52 | 53 | 58 | 59 |
    60 |
    61 |

    Falcon 9

    62 |

    First orbital class rocket capable of reflight

    63 |
    64 | 65 |
    66 |
    67 | 0 68 |

    Total Launches

    69 |
    70 |
    71 | 0 72 |

    Total Landings

    73 |
    74 |
    75 | 0 76 |

    Total Reflights

    77 |
    78 |
    79 | 80 | 92 | 93 | 94 | -------------------------------------------------------------------------------- /SpaceX Website Template/img/dragon.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/SpaceX Website Template/img/dragon.webp -------------------------------------------------------------------------------- /SpaceX Website Template/img/falcon-9.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/SpaceX Website Template/img/falcon-9.webp -------------------------------------------------------------------------------- /SpaceX Website Template/img/falcon-heavy.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/SpaceX Website Template/img/falcon-heavy.webp -------------------------------------------------------------------------------- /SpaceX Website Template/img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/SpaceX Website Template/img/logo.png -------------------------------------------------------------------------------- /SpaceX Website Template/img/screen.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/SpaceX Website Template/img/screen.jpg -------------------------------------------------------------------------------- /SpaceX Website Template/img/section-a.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/SpaceX Website Template/img/section-a.webp -------------------------------------------------------------------------------- /SpaceX Website Template/img/section-b.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/SpaceX Website Template/img/section-b.webp -------------------------------------------------------------------------------- /SpaceX Website Template/img/section-c.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/SpaceX Website Template/img/section-c.webp -------------------------------------------------------------------------------- /SpaceX Website Template/img/section-d.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/SpaceX Website Template/img/section-d.webp -------------------------------------------------------------------------------- /SpaceX Website Template/img/section-e.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/SpaceX Website Template/img/section-e.webp -------------------------------------------------------------------------------- /SpaceX Website Template/img/section-f.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/SpaceX Website Template/img/section-f.webp -------------------------------------------------------------------------------- /SpaceX Website Template/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | SpaceX 10 | 11 | 12 |
    13 |
    14 | 31 |
    32 |
    33 | 38 | 50 |
    51 | 52 | 53 | 58 | 59 | 60 |
    61 |
    62 |

    Upcoming Launch

    63 |

    CRS-25 Mission

    64 | 65 |
    66 | Rewatch 67 |     68 |
    69 | 70 |
    71 | 72 | 78 | 79 |
    80 |
    81 | 82 | 83 |
    84 |
    85 |

    Recent Launch

    86 |

    Starlink Mission

    87 | 88 |
    89 | Rewatch 90 |     91 |
    92 | 93 |
    94 | 95 | 101 | 102 |
    103 |
    104 | 105 | 106 |
    107 |
    108 |

    Recent Mission

    109 |

    SES-22 Mission

    110 | 111 |
    112 | Rewatch 113 |     114 |
    115 | 116 |
    117 | 118 | 124 | 125 |
    126 |
    127 | 128 | 129 |
    130 |
    131 |

    Recent Launch

    132 |

    Globalstar FM15 Mission

    133 | 134 |
    135 | Rewatch 136 |     137 |
    138 | 139 |
    140 | 141 | 147 | 148 |
    149 |
    150 | 151 | 152 |
    153 |
    154 |

    Starship Update

    155 | 156 |
    157 | Rewatch 158 |     159 |
    160 | 161 |
    162 | 163 | 169 | 170 |
    171 |
    172 | 173 | 174 |
    175 |
    176 |

    Starship to add NASA astronauts on the moon

    177 | 178 |
    179 | Rewatch 180 |     181 |
    182 |
    183 | 184 | 196 | 197 | 198 | -------------------------------------------------------------------------------- /SpaceX Website Template/script.js: -------------------------------------------------------------------------------- 1 | const btn = document.getElementById("menu-btn"); 2 | const overlay = document.getElementById("overlay"); 3 | const menu = document.getElementById("mobile-menu"); 4 | const counters = document.querySelectorAll(".counter"); 5 | let scrollStarted = false; 6 | 7 | btn.addEventListener("click", navToggle); 8 | document.addEventListener("scroll", scrollPage); 9 | 10 | function navToggle() { 11 | btn.classList.toggle("open"); 12 | overlay.classList.toggle("overlay-show"); 13 | document.body.classList.toggle("stop-scrolling"); 14 | menu.classList.toggle("show-menu"); 15 | } 16 | 17 | function scrollPage() { 18 | const scrollPos = window.scrollY; 19 | 20 | if (scrollPos > 100 && !scrollStarted) { 21 | countUp(); 22 | scrollStarted = true; 23 | } else if (scrollPos < 100 && scrollStarted) { 24 | reset(); 25 | scrollStarted = false; 26 | } 27 | } 28 | 29 | function countUp() { 30 | counters.forEach((counter) => { 31 | counter.innerText = "0"; 32 | 33 | const updateCounter = () => { 34 | // Get count target 35 | const target = +counter.getAttribute("data-target"); 36 | // Get current counter value 37 | const c = +counter.innerText; 38 | 39 | // Create an increment 40 | const increment = target / 100; 41 | 42 | // If counter is less than target, add increment 43 | if (c < target) { 44 | // Round up and set counter value 45 | counter.innerText = `${Math.ceil(c + increment)}`; 46 | 47 | setTimeout(updateCounter, 75); 48 | } else { 49 | counter.innerText = target; 50 | } 51 | }; 52 | 53 | updateCounter(); 54 | }); 55 | } 56 | 57 | function reset() { 58 | counters.forEach((counter) => (counter.innerHTML = "0")); 59 | } 60 | -------------------------------------------------------------------------------- /TTLC/images/ik-logo-dark-grey-bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/TTLC/images/ik-logo-dark-grey-bg.jpg -------------------------------------------------------------------------------- /TTLC/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | TTLC 8 | 9 | 10 | 11 | 12 |
    13 |
    14 |
    15 |

    Try to Laugh Challenge

    16 |
    17 |

    This is a joke website.
    Please do not take displayed on this page seriously.
    hehe :)

    18 |
    // Joke goes here
    19 | 20 |
    21 | 22 |
    23 | 24 | -------------------------------------------------------------------------------- /TTLC/script.js: -------------------------------------------------------------------------------- 1 | const jokeEl = document.getElementById('joke') 2 | const jokeBtn = document.getElementById('jokebtn') 3 | 4 | jokeBtn.addEventListener('click', generateJoke) 5 | generateJoke() 6 | 7 | function generateJoke() { 8 | const fj = { 9 | headers: { 10 | Accept: 'application/json', 11 | }, 12 | } 13 | 14 | fetch('https://icanhazdadjoke.com', fj) 15 | .then((res) => res.json()) 16 | .then((data) => { 17 | jokeEl.innerHTML = data.joke 18 | }) 19 | } -------------------------------------------------------------------------------- /TTLC/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;500;600;700&display=swap'); 2 | 3 | * { 4 | margin: 0%; 5 | padding: 0%; 6 | } 7 | 8 | body { 9 | background: #031323; 10 | overflow: hidden; 11 | font-family: 'Dancing Script', cursive; 12 | /* display: flex; 13 | flex-direction: column; 14 | align-items: center; 15 | justify-content: center; 16 | height: 100vh; 17 | overflow: hidden; 18 | margin: 0; 19 | padding: 20px; */ 20 | } 21 | section { 22 | display: flex; 23 | justify-content: center; 24 | align-items: center; 25 | min-height: 100vh; 26 | background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); 27 | background-size: 400% 400%; 28 | animation: gradient 10s ease infinite; 29 | } 30 | 31 | @keyframes gradient { 32 | 0% { 33 | background-position: 0% 50%; 34 | } 35 | 50% { 36 | background-position: 100% 50%; 37 | } 38 | 100% { 39 | background-position: 0% 50%; 40 | } 41 | } 42 | 43 | .container { 44 | border-radius: 20pt; 45 | padding: 50px 20px; 46 | text-align: center; 47 | background-color: rgba(237, 233, 237, 0.33); 48 | backdrop-filter: blur( 2px ); 49 | -webkit-backdrop-filter: blur( 2px ); 50 | padding: 20pt; 51 | display: block; 52 | margin-left: auto; 53 | margin-right: auto; 54 | width: max-content; 55 | } 56 | .heading { 57 | background-color: #2f5c6f63; 58 | border-radius: 13px; 59 | display: block; 60 | margin-left: auto; 61 | margin-right: auto; 62 | width: max-content; 63 | } 64 | 65 | h3 { 66 | padding: 3vh; 67 | font-weight: 900; 68 | font-size: 5vh; 69 | letter-spacing: 1px; 70 | word-spacing: 4px; 71 | } 72 | p { 73 | font-size: 20pt; 74 | padding-top: 10px; 75 | } 76 | 77 | .joke { 78 | font-family: 'Times New Roman', Times, serif; 79 | font-size: 40px; 80 | letter-spacing: 1px; 81 | line-height: 40px; 82 | margin: 50px auto; 83 | max-width: 600px; 84 | } 85 | 86 | .btn { 87 | background-color: #315f72; 88 | color: rgb(255, 187, 0); 89 | border: 0; 90 | border-radius: 10px; 91 | box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1), 0 6px 6px rgba(0, 0, 0, 0.1); 92 | padding: 14px 40px; 93 | font-size: 16px; 94 | cursor: pointer; 95 | } 96 | 97 | .btn:active { 98 | transform: scale(0.98); 99 | } 100 | 101 | .btn:focus { 102 | outline: 0; 103 | } -------------------------------------------------------------------------------- /divyanshraj0408/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | NEWS 24*7 11 | 12 | 13 | 14 | 29 |
    30 |

    LATEST NEWS By NEWS

    31 |
    32 |
    33 | 34 |
    35 |
    36 |
    37 |
    Card title
    38 |

    the caard will appear here

    39 | Go somewhere 40 |
    41 |
    42 |
    43 | 44 | 45 | 46 | 47 | 79 | 80 | -------------------------------------------------------------------------------- /divyanshraj0408/style.css: -------------------------------------------------------------------------------- 1 | .contianer2 { 2 | display: flex; 3 | justify-content: center; 4 | align-items: center; 5 | } 6 | 7 | .card { 8 | overflow-y: hidden; 9 | overflow-x: hidden; 10 | margin: 5px; 11 | position: inherit; 12 | text-align: center; 13 | } 14 | 15 | .card-body { 16 | box-sizing: border-box; 17 | } 18 | 19 | .navbar { 20 | position: sticky; 21 | top: 0; 22 | } 23 | -------------------------------------------------------------------------------- /ishita1427/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Creative Portfolio 7 | 60 | 61 | 62 |
    63 |

    Welcome To My Portfolio !

    64 | Girl 65 | Girl 66 |
    67 |

    Hi! I am Ishita

    68 |

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc hendrerit sodales dui tempor hendrerit. Aliquam ac euismod ex. Suspendisse ut egestas tellus. Donec ac aliquam lorem. Sed suscipit varius nisl et tempus. Cras sollicitudin nulla et metus ullamcorper placerat. Morbi in pharetra tortor. Suspendisse tempor lacus eu felis pellentesque, id cursus nulla semper.

    69 | 76 |
    77 |
    78 | 79 | 80 | -------------------------------------------------------------------------------- /jaysomani_Guess_the_Number/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Guess My Number! 10 | 11 | 12 | 13 |
    14 |

    Guess My Number!

    15 |

    (Between 1 and 20)

    16 | 17 |
    ?
    18 |
    19 |
    20 |
    21 | 22 | 23 |
    24 |
    25 |

    Start guessing...

    26 |

    💯 Score: 20

    27 |

    28 | 🥇 Highscore: 0 29 |

    30 |
    31 |
    32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /jaysomani_Guess_the_Number/script.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | /* 4 | console.log(document.querySelector('.message').textContent); 5 | document.querySelector('.message').textContent = '🎉 Correct Number!'; 6 | 7 | document.querySelector('.number').textContent = 13; 8 | document.querySelector('.score').textContent = 10; 9 | 10 | document.querySelector('.guess').value = 23; 11 | console.log(document.querySelector('.guess').value); 12 | */ 13 | 14 | let secretNumber = Math.trunc(Math.random() * 20) + 1; 15 | let score = 20; 16 | let highscore = 0; 17 | 18 | const displayMessage = function (message) { 19 | document.querySelector('.message').textContent = message; 20 | }; 21 | 22 | document.querySelector('.check').addEventListener('click', function () { 23 | const guess = Number(document.querySelector('.guess').value); 24 | console.log(guess, typeof guess); 25 | 26 | // When there is no input 27 | if (!guess) { 28 | // document.querySelector('.message').textContent = '⛔️ No number!'; 29 | displayMessage('⛔️ No number!'); 30 | 31 | // When player wins 32 | } else if (guess === secretNumber) { 33 | // document.querySelector('.message').textContent = '🎉 Correct Number!'; 34 | displayMessage('🎉 Correct Number!'); 35 | document.querySelector('.number').textContent = secretNumber; 36 | 37 | document.querySelector('body').style.backgroundColor = '#60b347'; 38 | document.querySelector('.number').style.width = '30rem'; 39 | 40 | if (score > highscore) { 41 | highscore = score; 42 | document.querySelector('.highscore').textContent = highscore; 43 | } 44 | 45 | // When guess is wrong 46 | } else if (guess !== secretNumber) { 47 | if (score > 1) { 48 | // document.querySelector('.message').textContent = 49 | // guess > secretNumber ? '📈 Too high!' : '📉 Too low!'; 50 | displayMessage(guess > secretNumber ? '📈 Too high!' : '📉 Too low!'); 51 | score--; 52 | document.querySelector('.score').textContent = score; 53 | } else { 54 | // document.querySelector('.message').textContent = '💥 You lost the game!'; 55 | displayMessage('💥 You lost the game!'); 56 | document.querySelector('.score').textContent = 0; 57 | } 58 | } 59 | 60 | // // When guess is too high 61 | // } else if (guess > secretNumber) { 62 | // if (score > 1) { 63 | // document.querySelector('.message').textContent = '📈 Too high!'; 64 | // score--; 65 | // document.querySelector('.score').textContent = score; 66 | // } else { 67 | // document.querySelector('.message').textContent = '💥 You lost the game!'; 68 | // document.querySelector('.score').textContent = 0; 69 | // } 70 | 71 | // // When guess is too low 72 | // } else if (guess < secretNumber) { 73 | // if (score > 1) { 74 | // document.querySelector('.message').textContent = '📉 Too low!'; 75 | // score--; 76 | // document.querySelector('.score').textContent = score; 77 | // } else { 78 | // document.querySelector('.message').textContent = '💥 You lost the game!'; 79 | // document.querySelector('.score').textContent = 0; 80 | // } 81 | // } 82 | }); 83 | 84 | document.querySelector('.again').addEventListener('click', function () { 85 | score = 20; 86 | secretNumber = Math.trunc(Math.random() * 20) + 1; 87 | 88 | // document.querySelector('.message').textContent = 'Start guessing...'; 89 | displayMessage('Start guessing...'); 90 | document.querySelector('.score').textContent = score; 91 | document.querySelector('.number').textContent = '?'; 92 | document.querySelector('.guess').value = ''; 93 | 94 | document.querySelector('body').style.backgroundColor = '#222'; 95 | document.querySelector('.number').style.width = '15rem'; 96 | }); 97 | 98 | /////////////////////////////////////// 99 | // Coding Challenge #1 100 | 101 | /* 102 | Implement a game rest functionality, so that the player can make a new guess! Here is how: 103 | 104 | 1. Select the element with the 'again' class and attach a click event handler 105 | 2. In the handler function, restore initial values of the score and secretNumber variables 106 | 3. Restore the initial conditions of the message, number, score and guess input field 107 | 4. Also restore the original background color (#222) and number width (15rem) 108 | 109 | GOOD LUCK 😀 110 | */ 111 | -------------------------------------------------------------------------------- /jaysomani_Guess_the_Number/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Press+Start+2P&display=swap'); 2 | 3 | * { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: inherit; 7 | } 8 | 9 | html { 10 | font-size: 62.5%; 11 | box-sizing: border-box; 12 | } 13 | 14 | body { 15 | font-family: 'Press Start 2P', sans-serif; 16 | color: #eee; 17 | background-color: #222; 18 | /* background-color: #60b347; */ 19 | } 20 | 21 | /* LAYOUT */ 22 | header { 23 | position: relative; 24 | height: 35vh; 25 | border-bottom: 7px solid #eee; 26 | } 27 | 28 | main { 29 | height: 65vh; 30 | color: #eee; 31 | display: flex; 32 | align-items: center; 33 | justify-content: space-around; 34 | } 35 | 36 | .left { 37 | width: 52rem; 38 | display: flex; 39 | flex-direction: column; 40 | align-items: center; 41 | } 42 | 43 | .right { 44 | width: 52rem; 45 | font-size: 2rem; 46 | } 47 | 48 | /* ELEMENTS STYLE */ 49 | h1 { 50 | font-size: 4rem; 51 | text-align: center; 52 | position: absolute; 53 | width: 100%; 54 | top: 52%; 55 | left: 50%; 56 | transform: translate(-50%, -50%); 57 | } 58 | 59 | .number { 60 | background: #eee; 61 | color: #333; 62 | font-size: 6rem; 63 | width: 15rem; 64 | padding: 3rem 0rem; 65 | text-align: center; 66 | position: absolute; 67 | bottom: 0; 68 | left: 50%; 69 | transform: translate(-50%, 50%); 70 | } 71 | 72 | .between { 73 | font-size: 1.4rem; 74 | position: absolute; 75 | top: 2rem; 76 | right: 2rem; 77 | } 78 | 79 | .again { 80 | position: absolute; 81 | top: 2rem; 82 | left: 2rem; 83 | } 84 | 85 | .guess { 86 | background: none; 87 | border: 4px solid #eee; 88 | font-family: inherit; 89 | color: inherit; 90 | font-size: 5rem; 91 | padding: 2.5rem; 92 | width: 25rem; 93 | text-align: center; 94 | display: block; 95 | margin-bottom: 3rem; 96 | } 97 | 98 | .btn { 99 | border: none; 100 | background-color: #eee; 101 | color: #222; 102 | font-size: 2rem; 103 | font-family: inherit; 104 | padding: 2rem 3rem; 105 | cursor: pointer; 106 | } 107 | 108 | .btn:hover { 109 | background-color: #ccc; 110 | } 111 | 112 | .message { 113 | margin-bottom: 8rem; 114 | height: 3rem; 115 | } 116 | 117 | .label-score { 118 | margin-bottom: 2rem; 119 | } 120 | -------------------------------------------------------------------------------- /kritika-sharma130/images/about-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/kritika-sharma130/images/about-bg.png -------------------------------------------------------------------------------- /kritika-sharma130/images/about-img.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/kritika-sharma130/images/about-img.png -------------------------------------------------------------------------------- /kritika-sharma130/images/contact-img.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/kritika-sharma130/images/contact-img.png -------------------------------------------------------------------------------- /kritika-sharma130/images/f-icon1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/kritika-sharma130/images/f-icon1.png -------------------------------------------------------------------------------- /kritika-sharma130/images/f-icon2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/kritika-sharma130/images/f-icon2.png -------------------------------------------------------------------------------- /kritika-sharma130/images/f-icon3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/kritika-sharma130/images/f-icon3.png -------------------------------------------------------------------------------- /kritika-sharma130/images/footer-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/kritika-sharma130/images/footer-bg.png -------------------------------------------------------------------------------- /kritika-sharma130/images/home-bg-img.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/kritika-sharma130/images/home-bg-img.png -------------------------------------------------------------------------------- /kritika-sharma130/images/home-img.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/kritika-sharma130/images/home-img.png -------------------------------------------------------------------------------- /kritika-sharma130/images/onboarding1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/kritika-sharma130/images/onboarding1.jpeg -------------------------------------------------------------------------------- /kritika-sharma130/images/onboarding2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/kritika-sharma130/images/onboarding2.jpeg -------------------------------------------------------------------------------- /kritika-sharma130/images/pic1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/kritika-sharma130/images/pic1.png -------------------------------------------------------------------------------- /kritika-sharma130/images/pic2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/kritika-sharma130/images/pic2.png -------------------------------------------------------------------------------- /kritika-sharma130/images/pic3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/kritika-sharma130/images/pic3.png -------------------------------------------------------------------------------- /kritika-sharma130/images/subscribe-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/kritika-sharma130/images/subscribe-bg.png -------------------------------------------------------------------------------- /kritika-sharma130/images/undraw_city_driver_re_0x5e (3).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/kritika-sharma130/images/undraw_city_driver_re_0x5e (3).png -------------------------------------------------------------------------------- /kritika-sharma130/images/undraw_off_road_9oae (2).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/kritika-sharma130/images/undraw_off_road_9oae (2).png -------------------------------------------------------------------------------- /kritika-sharma130/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | complete responsive app landing page website design tutorial 7 | 8 | 12 | 13 | 14 | 15 | 16 |
    17 | 18 | 19 | 20 | 21 | 22 | 28 |
    29 | 30 |
    31 |
    32 |

    Keep Calm & Share Your Ride

    33 |

    34 | What is Ride & Share - Carpool We all like going together. Ride & 35 | Share will help you to connect with other like-minded professionals 36 | who are traveling on the same route and same time. Ride & Share helps 37 | commuters to start sharing the ride instead of traveling alone. 38 | Innovative technology to discover, connect, route match, coordinate 39 | and cost-share in a seamless manner. Ride & Share automates end to end 40 | process of carpooling and makes pooling safe, comfortable and 41 | affordable for the urban commuters 42 |

    43 | download now 44 |
    45 | 46 |
    47 | 48 |
    49 |
    50 |
    51 |

    app features

    52 | 53 |
    54 |
    55 | 56 |

    Low Fare

    57 |

    Get a car ride at the cost of bus fare (1/5th of taxi cost).

    58 | read more 59 |
    60 | 61 |
    62 | 63 |

    Convenient & Affordable

    64 |

    Get a ride conveniently at a low fare in a very easy manner.

    65 | read more 66 |
    67 | 68 |
    69 | 70 |

    Friendly interactions

    71 |

    Interact with known and verified professionals

    72 | read more 73 |
    74 |
    75 |
    76 | 77 |
    78 |

    about the app

    79 | 80 |
    81 |
    82 | 83 |
    84 | 85 |
    86 |

    Easy And Perfect Solution For Your Easy Travel

    87 |

    88 | We are taking an initial step to reduce Pollution and Svae our 89 | Mother Earth through a small step of reducing the number of vehicles 90 | travelling on the road. 91 |

    92 |

    93 | Share your daily commute with Carpool. Reduce CO2 . Save Money . 94 | Grow network 95 |

    96 |
    97 | Download Now 98 |
    99 |
    100 |
    101 |
    102 | 103 | 104 | 105 | 106 | 107 | 118 | 119 |
    120 |
    121 | 122 |
    123 | 124 |
    125 |

    contact us

    126 | 127 |
    128 | 129 | 130 |
    131 | 132 |
    133 | 134 | 135 |
    136 | 137 |
    138 | 139 | 140 |
    141 | 142 |
    143 | 144 | 145 |
    146 | 147 | 148 |
    149 |
    150 | 151 |
    152 |
    153 |
    154 |

    about us

    155 |

    156 | On a mission to save our Mother Earth by reducing the number of cars 157 | running on the road per day. If we could all carpool, it would cut 158 | down the number of cars on the road to a great extent; mean there 159 | would be less emission of carbon into the air, causing less 160 | pollution.; mean a cleaner environment. 161 |

    162 |
    163 | 164 |
    165 |

    quick links

    166 | home 167 | features 168 | about 169 | contact 170 |
    171 | 172 |
    173 |

    Contact us

    174 | Divyansh Bhardwaj (Mentor) 175 | Kritika Sharma 178 | Komal Bindal 181 | Deepanshi Mittal 184 |
    185 | 186 |
    187 |

    contact info

    188 |
    189 | 190 |

    Gla University, Mathura

    191 |
    192 |
    193 |
    194 | 195 |

    © copyright @ 2021 by Kritika Sharma

    196 |
    197 | 198 | 199 | -------------------------------------------------------------------------------- /lead_tracker/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/lead_tracker/icon.png -------------------------------------------------------------------------------- /lead_tracker/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 10px; 4 | font-family: Arial, Helvetica, sans-serif; 5 | min-width: 400px; 6 | 7 | } 8 | 9 | input { 10 | border: 1px solid #5f9341; 11 | width: 100%; 12 | height: 40px; 13 | padding: 10px; 14 | box-sizing: border-box; 15 | } 16 | 17 | 18 | button { 19 | margin-top: 8px; 20 | font-weight: 600; 21 | border: 1.5px solid #5f9341; 22 | background-color: #5f9341; 23 | color: white; 24 | padding: 10px 20px; 25 | } 26 | 27 | #delete-btn{ 28 | margin-left: 7px; 29 | background-color: white; 30 | color: #5f9341; 31 | 32 | } 33 | 34 | #tab-btn{ 35 | margin-left: 7px; 36 | } 37 | 38 | input:focus { 39 | outline: none !important; 40 | border-color: #5f9341; 41 | box-shadow: 0 0 5px #5f9341; 42 | } 43 | 44 | ul{ 45 | list-style: none; 46 | padding-left: 0; 47 | margin-top: 20px; 48 | } 49 | 50 | li{ 51 | margin-top: 5px; 52 | } 53 | 54 | a{ 55 | color: #5f9341; 56 | } -------------------------------------------------------------------------------- /lead_tracker/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /lead_tracker/index.js: -------------------------------------------------------------------------------- 1 | let myLeads = [] 2 | const inputEl = document.getElementById("input-el") 3 | 4 | const inputBtn = document.getElementById("input-btn") 5 | 6 | const ulEl = document.getElementById("ul-el") 7 | 8 | const deleteBtn = document.getElementById("delete-btn") 9 | 10 | const tabBtn = document.getElementById("tab-btn") 11 | 12 | 13 | inputBtn.addEventListener("click",function(){ 14 | myLeads.push(inputEl.value) 15 | render(myLeads) 16 | inputEl.value="" 17 | 18 | localStorage.setItem("myLeads",JSON.stringify(myLeads)) 19 | 20 | // console.log(localStorage.getItem("myLeads")) 21 | }) 22 | 23 | 24 | tabBtn.addEventListener("click",function(){ 25 | chrome.tabs.query({active:true,currentWindow:true},function(tabs){ 26 | myLeads.push(tabs[0].url) 27 | render(myLeads) 28 | localStorage.setItem("myLeads",JSON.stringify(myLeads)) 29 | }) 30 | }) 31 | 32 | // tabBtn.addEventListener("click", function(){ 33 | // chrome.tabs.query({active: true, currentWindow: true}, function(tabs){ 34 | // myLeads.push(tabs[0].url) 35 | // localStorage.setItem("myLeads", JSON.stringify(myLeads) ) 36 | // render(myLeads) 37 | // }) 38 | // }) 39 | 40 | 41 | deleteBtn.addEventListener("dblclick",function(){ 42 | localStorage.clear() 43 | myLeads=[] 44 | render(myLeads) 45 | }) 46 | 47 | 48 | 49 | const leads = JSON.parse(localStorage.getItem("myLeads")) 50 | 51 | if(leads){ 52 | myLeads=leads 53 | render(myLeads) 54 | } 55 | 56 | 57 | 58 | function render(leads){ 59 | let listItems = "" 60 | for(let i=0;i" 67 | 68 | // listItems+="
  • "+myLeads[i]+"
    • " 69 | 70 | 71 | // template string 72 | listItems += ` 73 |
  • 74 | ${leads[i]} 75 |
    • 76 | ` 77 | } 78 | ulEl.innerHTML=listItems 79 | } 80 | 81 | 82 | 83 | 84 | 85 | -------------------------------------------------------------------------------- /lead_tracker/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "manifest_version": 3, 3 | "version": "1.0", 4 | "name": "Leads tracker", 5 | "action": { 6 | "default_popup": "index.html", 7 | "default_icon": "icon.png" 8 | }, 9 | "permissions":[ 10 | "tabs" 11 | ] 12 | } -------------------------------------------------------------------------------- /mifrasgaffoor/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 131 | 132 | 133 | 134 |
    135 | 143 |
    144 | 151 |
    152 |
    153 |
    154 | homepage_image 158 |
    159 |
    160 |

    Wel Come to mmm Hotel & Restuent

    161 |

    162 |
    163 | The finest star class hotel in Sri Lanka with the best of recipe & 164 | accommodation 165 |

    166 |
    167 | for booking 168 |
    169 |
    170 | 171 | 172 | -------------------------------------------------------------------------------- /niralverma/first/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | Niral One Page Landing Page 12 | 60 | 61 | 62 | 63 |
    64 | 73 |
    74 |
    75 | 76 |
    77 | 78 | 79 | -------------------------------------------------------------------------------- /niralverma/minimal.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | minimalist landing page 6 | 7 | 8 | 9 | 118 | 119 | 120 | 121 |
    122 | dehaze 123 |
    124 | Discover 125 | Products 126 | Wholesale 127 | Blog 128 | Contact 129 |
    130 |
    131 | Sign in 132 | local_mall 133 |
    134 |
    135 |

    136 | Succulent
    137 | Gardens 138 |

    139 |

    140 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do 141 | eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad 142 | minim veniam, quis nostrud exercitation ullamco laboris nisi ut 143 | aliquip ex ea commodo consequat. 144 |

    145 |

    146 |
    147 |
    148 | 149 | 150 |
    151 |
    152 |
    153 | 154 | 155 | 156 |
    157 | 158 | 159 | 160 | 161 |
    162 |
    163 |
    164 | 165 | 166 | -------------------------------------------------------------------------------- /niralverma/second/landingpage.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Nike 7 | 8 | 216 | 217 | 218 | 233 | 236 |
    237 | 238 | 239 |
    240 |
    241 |
    242 |

    NIKE DIGITAL EDITION

    243 |

    244 | The main goal was To 245 | replace the traditional real 246 | life prototyping process with 247 | fully-digital design development. 248 |

    249 |
    250 |
    251 |
    252 | 253 | 254 | -------------------------------------------------------------------------------- /onlineclothshopping website/images/about-img.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/onlineclothshopping website/images/about-img.png -------------------------------------------------------------------------------- /onlineclothshopping website/images/accessories/a.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/onlineclothshopping website/images/accessories/a.png -------------------------------------------------------------------------------- /onlineclothshopping website/images/accessories/b.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/onlineclothshopping website/images/accessories/b.png -------------------------------------------------------------------------------- /onlineclothshopping website/images/accessories/c.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/onlineclothshopping website/images/accessories/c.png -------------------------------------------------------------------------------- /onlineclothshopping website/images/accessories/d.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/onlineclothshopping website/images/accessories/d.png -------------------------------------------------------------------------------- /onlineclothshopping website/images/accessories/e.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/onlineclothshopping website/images/accessories/e.png -------------------------------------------------------------------------------- /onlineclothshopping website/images/accessories/f.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/onlineclothshopping website/images/accessories/f.png -------------------------------------------------------------------------------- /onlineclothshopping website/images/banner1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/onlineclothshopping website/images/banner1.png -------------------------------------------------------------------------------- /onlineclothshopping website/images/banner2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/onlineclothshopping website/images/banner2.png -------------------------------------------------------------------------------- /onlineclothshopping website/images/banner3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/onlineclothshopping website/images/banner3.png -------------------------------------------------------------------------------- /onlineclothshopping website/images/footer-img.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/onlineclothshopping website/images/footer-img.png -------------------------------------------------------------------------------- /onlineclothshopping website/images/home-img.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/onlineclothshopping website/images/home-img.png -------------------------------------------------------------------------------- /onlineclothshopping website/images/men's collect/a.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/onlineclothshopping website/images/men's collect/a.png -------------------------------------------------------------------------------- /onlineclothshopping website/images/men's collect/b.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/onlineclothshopping website/images/men's collect/b.png -------------------------------------------------------------------------------- /onlineclothshopping website/images/men's collect/c.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/onlineclothshopping website/images/men's collect/c.png -------------------------------------------------------------------------------- /onlineclothshopping website/images/men's collect/d.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/onlineclothshopping website/images/men's collect/d.png -------------------------------------------------------------------------------- /onlineclothshopping website/images/men's collect/e.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/onlineclothshopping website/images/men's collect/e.png -------------------------------------------------------------------------------- /onlineclothshopping website/images/men's collect/f.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/onlineclothshopping website/images/men's collect/f.png -------------------------------------------------------------------------------- /onlineclothshopping website/images/men's collect/g.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/onlineclothshopping website/images/men's collect/g.png -------------------------------------------------------------------------------- /onlineclothshopping website/images/men's collect/h.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/onlineclothshopping website/images/men's collect/h.png -------------------------------------------------------------------------------- /onlineclothshopping website/images/men's collect/i.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/onlineclothshopping website/images/men's collect/i.png -------------------------------------------------------------------------------- /onlineclothshopping website/images/offer1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/onlineclothshopping website/images/offer1.png -------------------------------------------------------------------------------- /onlineclothshopping website/images/offer2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/onlineclothshopping website/images/offer2.png -------------------------------------------------------------------------------- /onlineclothshopping website/images/offer3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/onlineclothshopping website/images/offer3.png -------------------------------------------------------------------------------- /onlineclothshopping website/images/testimonial-star.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /onlineclothshopping website/images/women's collect/a.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/onlineclothshopping website/images/women's collect/a.png -------------------------------------------------------------------------------- /onlineclothshopping website/images/women's collect/b.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/onlineclothshopping website/images/women's collect/b.png -------------------------------------------------------------------------------- /onlineclothshopping website/images/women's collect/c.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/onlineclothshopping website/images/women's collect/c.png -------------------------------------------------------------------------------- /onlineclothshopping website/images/women's collect/d.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/onlineclothshopping website/images/women's collect/d.png -------------------------------------------------------------------------------- /onlineclothshopping website/images/women's collect/e.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/onlineclothshopping website/images/women's collect/e.png -------------------------------------------------------------------------------- /onlineclothshopping website/images/women's collect/f.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/onlineclothshopping website/images/women's collect/f.png -------------------------------------------------------------------------------- /onlineclothshopping website/images/women's collect/g.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/onlineclothshopping website/images/women's collect/g.png -------------------------------------------------------------------------------- /onlineclothshopping website/images/women's collect/h.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/onlineclothshopping website/images/women's collect/h.png -------------------------------------------------------------------------------- /onlineclothshopping website/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;700&family=Libre+Baskerville:wght@400;700&family=Varela+Round&display=swap'); 2 | 3 | /* font-family: 'Dancing Script', cursive; */ 4 | /* font-family: 'Libre Baskerville', serif; */ 5 | /* font-family: 'Varela Round', sans-serif; */ 6 | 7 | 8 | /* root variables */ 9 | :root{ 10 | --cream-color: #F2EDDB; 11 | --brown-color: #967B5A; 12 | --body-font: 'Varela Round', sans-serif; 13 | --heading-font: 'Dancing Script', cursive; 14 | --black-color: #191613; 15 | --padding:7% 5%; 16 | --line-height: 2; 17 | } 18 | 19 | /* tag selectors */ 20 | html{ 21 | scroll-behavior: smooth; 22 | overflow-x: hidden; 23 | } 24 | 25 | body{ 26 | font-family: var(--body-font); 27 | overflow-x: hidden; 28 | } 29 | 30 | h1,h2,h5{ 31 | font-family: var(--heading-font); 32 | } 33 | 34 | img{ 35 | width: 100%; 36 | } 37 | 38 | /* commonly used css */ 39 | .button{ 40 | background-color: var(--brown-color); 41 | transition: all .3s; 42 | color: var(--cream-color); 43 | } 44 | 45 | .button-dark{ 46 | background-color: var(--black-color); 47 | } 48 | 49 | .button:hover{ 50 | border: 2px solid var(--brown-color); 51 | } 52 | 53 | .button-dark:hover{ 54 | border-color: var(--black-color); 55 | } 56 | 57 | .heading-dark{ 58 | color: var(--brown-color); 59 | } 60 | 61 | .heading-light{ 62 | color: var(--cream-color); 63 | } 64 | 65 | .section-light{ 66 | background-color: var(--cream-color); 67 | } 68 | .section-dark{ 69 | background-color: var(--black-color); 70 | } 71 | 72 | 73 | /* home section begins */ 74 | #home{ 75 | position: relative; 76 | background-image: url(images/home-img.png); 77 | background-repeat: no-repeat; 78 | background-size: cover; 79 | background-position: center; 80 | height: 100vh; 81 | overflow-x: hidden; 82 | } 83 | 84 | /* navbar */ 85 | .navbar-brand{ 86 | font-family: var(--heading-font); 87 | font-weight: 700; 88 | font-size: 2.5rem; 89 | } 90 | 91 | .nav-item{ 92 | margin: 0 20px; 93 | } 94 | 95 | .navbar-nav .button{ 96 | width: fit-content; 97 | padding: 0 10px; 98 | border-radius: 5px; 99 | background-color: transparent; 100 | border: 2px solid var(--brown-color); 101 | } 102 | /* nabvar ends */ 103 | 104 | /* title text */ 105 | .title{ 106 | padding: 5%; 107 | position: absolute; 108 | bottom: 3%; 109 | width: 100%; 110 | } 111 | 112 | .title h1{ 113 | font-size: 90px; 114 | font-family: var(--heading-font); 115 | } 116 | 117 | .title .button{ 118 | float: right; 119 | } 120 | 121 | 122 | /* offer section */ 123 | #offer{ 124 | color: var(--black-color); 125 | padding:var(--padding); 126 | } 127 | 128 | .offer-column{ 129 | margin: 40px 0; 130 | text-align: justify; 131 | line-height: var(--line-height); 132 | } 133 | 134 | .offer-row h2{ 135 | padding: 10px 0; 136 | } 137 | 138 | /* banner section */ 139 | #banner{ 140 | color: var(--cream-color); 141 | padding: 7% 0; 142 | } 143 | 144 | .vertical-img{ 145 | width: auto; 146 | height: 100%; 147 | } 148 | 149 | 150 | /* collection */ 151 | .collection{ 152 | padding: var(--padding); 153 | } 154 | 155 | .collection-row{ 156 | margin:5% 0; 157 | } 158 | 159 | .collection-column{ 160 | margin: 20px 0; 161 | } 162 | 163 | .collection-card{ 164 | display: flex; 165 | height: 150px; 166 | width: 310px; 167 | border-radius: 5px; 168 | } 169 | 170 | .collection-card-img{ 171 | width: 150px; 172 | height: 100%; 173 | border-radius: 5px; 174 | } 175 | 176 | .collection-card-info{ 177 | padding: 7px; 178 | display: flex; 179 | flex-direction: column; 180 | justify-content: space-between; 181 | } 182 | 183 | .collection-card-info p{ 184 | font-size: .8rem; 185 | } 186 | 187 | .collection-card button{ 188 | width: fit-content; 189 | } 190 | 191 | .btn-more{ 192 | display: block; 193 | margin:0 auto; 194 | } 195 | 196 | .dark-card{ 197 | background-color: var(--black-color); 198 | color: var(--cream-color); 199 | } 200 | 201 | .light-card{ 202 | background-color:var(--brown-color); 203 | color: var(--black-color); 204 | } 205 | 206 | /* testimonial section */ 207 | #testimonial{ 208 | padding: var(--padding); 209 | color: var(--cream-color); 210 | } 211 | 212 | .testimonial-col{ 213 | text-align: center; 214 | border: 2px solid var(--brown-color); 215 | line-height: var(--line-height); 216 | padding: 20px; 217 | margin: 5% 2%; 218 | } 219 | 220 | .testimonial-col img{ 221 | height: 100px; 222 | } 223 | 224 | .testimonial-col h2{ 225 | padding: 20px 0; 226 | } 227 | 228 | 229 | /* about section */ 230 | #about{ 231 | color: var(--black-color); 232 | text-align: center; 233 | padding: var(--padding); 234 | font-size: 20px; 235 | } 236 | 237 | .about-col{ 238 | line-height: var(--line-height); 239 | } 240 | 241 | .about-col h1{ 242 | font-size: 350%; 243 | margin-bottom: 30px; 244 | } 245 | 246 | .about-col img{ 247 | position: relative; 248 | left: 70px; 249 | width: 300px; 250 | } 251 | 252 | 253 | /* footer section */ 254 | #footer{ 255 | background-image: url(images/footer-img.png); 256 | background-size: cover; 257 | height: 100vh; 258 | background-position: center; 259 | color: var(--cream-color); 260 | } 261 | 262 | .footer-col{ 263 | text-align: center; 264 | padding: 10px; 265 | } 266 | 267 | .footer-col h1{ 268 | padding-bottom: 30px; 269 | font-size: 400%; 270 | } 271 | 272 | /* responsive media query */ 273 | @media (max-width: 780px){ 274 | .about-img{ 275 | display: none; 276 | } 277 | 278 | #about{ 279 | padding: 20%; 280 | } 281 | .about-col{ 282 | font-size: 17px; 283 | } 284 | .about-col h1{ 285 | font-size: 50px; 286 | } 287 | 288 | } 289 | 290 | @media (max-width:650px){ 291 | .collection, #testimonial{ 292 | padding: 10% 5%; 293 | } 294 | 295 | #offer{ 296 | padding-top: 10%; 297 | } 298 | 299 | .footer-col h1{ 300 | font-size: 50px; 301 | } 302 | 303 | } 304 | 305 | 306 | @media (max-width:500px){ 307 | .title h1{ 308 | font-size: 70px; 309 | } 310 | 311 | .title .button{ 312 | float: none; 313 | } 314 | .vertical-img{ 315 | width: 100%; 316 | height: auto; 317 | } 318 | 319 | .collection, #testimonial, #offer, #about{ 320 | padding: 20% 5%; 321 | } 322 | 323 | } 324 | 325 | 326 | @media (max-width:450px){ 327 | .collection-card{ 328 | height: 200px; 329 | width: 100%; 330 | position: relative; 331 | } 332 | 333 | .collection-card-img{ 334 | width: 130px; 335 | height: 130px; 336 | } 337 | 338 | .collection-card-info{ 339 | display: block; 340 | } 341 | .collection-card-info h5{ 342 | position: absolute; 343 | right: 7px; 344 | bottom: 0; 345 | } 346 | .collection-card-info .button{ 347 | position: absolute; 348 | left: 7px; 349 | bottom: 7px; 350 | } 351 | } -------------------------------------------------------------------------------- /pccoder-2000/Logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/pccoder-2000/Logo.png -------------------------------------------------------------------------------- /pccoder-2000/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 14 | 15 | 16 | COVID 19 17 | 18 | 19 |
    20 | 42 |
    43 |
    44 |

    COVID-19

    45 |

    Stay home , Stay Safe

    46 |
    47 | - The only medicine found till now for coronavirus. 48 |
    49 | 50 |
    51 |
    52 | 53 |
    54 |
    55 | 56 | 57 | 58 | -------------------------------------------------------------------------------- /pccoder-2000/index.js: -------------------------------------------------------------------------------- 1 | //Scroll To Top 2 | const scrollToTop = document.querySelector(".scrollToTop"); 3 | //When Scroll Height is greater than 400 then display scroll to top. 4 | window.addEventListener("scroll", () => { 5 | window.pageYOffset > 400 6 | ? (scrollToTop.style.display = "block") 7 | : (scrollToTop.style.display = "none"); 8 | }); 9 | 10 | // Scroll to top on click 11 | scrollToTop.addEventListener("click", () => { 12 | window.scrollTo({ top: 0 }); 13 | }); 14 | 15 | // Maintaining the responsive navbar state. 16 | let navBarState = false; 17 | const navbarToggle = document.querySelector(".responsive-toggle"); 18 | 19 | navbarToggle.addEventListener("click", () => { 20 | const navlinks = document.querySelector(".links"); 21 | if (navBarState) { 22 | navlinks.style.top = "-40rem"; 23 | navBarState = false; 24 | } else { 25 | navlinks.style.top = "-4rem"; 26 | navBarState = true; 27 | } 28 | }); 29 | 30 | // When click on any link on the responsive navbar close the responsive navbar 31 | const navLinks = document.querySelectorAll("#nav-link"); 32 | //Adding the event listeners to all the links on the responsive navbar 33 | navLinks.forEach((link) => 34 | link.addEventListener("click", () => { 35 | const navlinks = document.querySelector(".links"); 36 | navlinks.style.top = "-40rem"; 37 | navBarState = false; 38 | }) 39 | ); 40 | 41 | // Scroll Reveal Animations 42 | const sr = ScrollReveal({ 43 | origin: "top", 44 | distance: "80px", 45 | duration: 2000, 46 | reset: true, 47 | }); -------------------------------------------------------------------------------- /pccoder-2000/starter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/pccoder-2000/starter.png -------------------------------------------------------------------------------- /pccoder-2000/stay.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/pccoder-2000/stay.png -------------------------------------------------------------------------------- /pccoder-2000/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600&display=swap"); 2 | html { 3 | scroll-behavior: smooth; 4 | } 5 | body { 6 | margin: 0; 7 | padding: 0; 8 | -webkit-box-sizing: border-box; 9 | box-sizing: border-box; 10 | font-family: "Rubik", sans-serif; 11 | background-color: black; 12 | } 13 | 14 | body::-webkit-scrollbar { 15 | background-color: black; 16 | width: 0.4rem; 17 | } 18 | body::-webkit-scrollbar-thumb { 19 | background-color: #ef233c; 20 | } 21 | img { 22 | object-fit: cover; 23 | } 24 | h1, 25 | h2, 26 | h3, 27 | h4, 28 | h5, 29 | h6, 30 | a, 31 | ul, 32 | li, 33 | p { 34 | margin: 0; 35 | padding: 0; 36 | } 37 | ul { 38 | list-style-type: none; 39 | } 40 | 41 | a { 42 | text-decoration: none; 43 | } 44 | 45 | button { 46 | background-color: #ef233c; 47 | border: none; 48 | padding: 1.3rem 3rem; 49 | border-radius: 3rem; 50 | color: white; 51 | font-size: larger; 52 | font-weight: bold; 53 | -webkit-transition: 0.3s ease-in-out; 54 | transition: 0.3s ease-in-out; 55 | border: 0.1rem solid transparent; 56 | } 57 | li.button:hover { 58 | background-color: red; 59 | border-color: white; 60 | color: white; 61 | } 62 | button:hover { 63 | background-color: white; 64 | border-color: #ef233c; 65 | color: #ef233c; 66 | } 67 | 68 | h1 { 69 | color: #248277; 70 | font-size: 3em; 71 | } 72 | h2 { 73 | color: #248277; 74 | font-size: 2.2em; 75 | } 76 | 77 | h3 { 78 | color: #ef233c; 79 | font-size: 1.4em; 80 | } 81 | 82 | h4 { 83 | color: #ef233c; 84 | font-size: 1.2em; 85 | } 86 | 87 | h5 { 88 | color: #747474; 89 | font-weight: 500; 90 | font-size: 1.15em; 91 | letter-spacing: 0.05rem; 92 | line-height: 1.7em; 93 | } 94 | 95 | p { 96 | color: #747474; 97 | font-size: 1.1em; 98 | letter-spacing: 0.04em; 99 | line-height: 1.5em; 100 | } 101 | 102 | a { 103 | color: #248277; 104 | -webkit-transition: 0.3s ease-in-out; 105 | transition: 0.3s ease-in-out; 106 | font-size: 1.3em; 107 | margin: 0 2em; 108 | } 109 | a:hover { 110 | color: #ef233c; 111 | } 112 | 113 | .info .title { 114 | margin-top: 0.5rem; 115 | } 116 | 117 | .info .description { 118 | margin: 1.2rem 0; 119 | } 120 | 121 | ul { 122 | display: -webkit-box; 123 | display: -ms-flexbox; 124 | display: flex; 125 | -webkit-box-align: center; 126 | -ms-flex-align: center; 127 | align-items: center; 128 | } 129 | 130 | .scrollToTop { 131 | height: 5rem; 132 | width: 5rem; 133 | background-color: black; 134 | -webkit-box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px; 135 | box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px; 136 | background-position: center center; 137 | background-size: 3rem; 138 | background-repeat: no-repeat; 139 | border-radius: 4rem; 140 | position: fixed; 141 | bottom: 10px; 142 | right: 25px; 143 | cursor: pointer; 144 | display: none; 145 | z-index: 4; 146 | } 147 | 148 | nav { 149 | margin: 0 2rem; 150 | padding: 2rem; 151 | color: black; 152 | } 153 | 154 | nav .container { 155 | display: -webkit-box; 156 | display: -ms-flexbox; 157 | display: flex; 158 | -webkit-box-align: center; 159 | -ms-flex-align: center; 160 | align-items: center; 161 | -webkit-box-pack: center; 162 | -ms-flex-pack: center; 163 | justify-content: center; 164 | -webkit-box-pack: justify; 165 | -ms-flex-pack: justify; 166 | justify-content: space-between; 167 | color: black; 168 | } 169 | 170 | nav .container .brand { 171 | display: -webkit-box; 172 | display: -ms-flexbox; 173 | display: flex; 174 | -webkit-box-align: center; 175 | -ms-flex-align: center; 176 | align-items: center; 177 | -webkit-box-pack: center; 178 | -ms-flex-pack: center; 179 | justify-content: center; 180 | -webkit-box-pack: justify; 181 | -ms-flex-pack: justify; 182 | justify-content: space-between; 183 | color: black; 184 | } 185 | nav .container .brand .responsive-toggle { 186 | display: none; 187 | color: white; 188 | } 189 | 190 | nav .container .links ul li:nth-child(1) a { 191 | color: #ef233c; 192 | } 193 | 194 | nav .container .links ul li button { 195 | background-color: black; 196 | border: 0.1rem solid #ef233c; 197 | color: #ef233c; 198 | } 199 | 200 | .starter { 201 | display: -webkit-box; 202 | display: -ms-flexbox; 203 | display: flex; 204 | margin: 2rem 0; 205 | } 206 | 207 | .starter .info { 208 | margin: 3rem 2rem 0 4rem; 209 | } 210 | 211 | .starter .info .title { 212 | margin: 0.5rem 0 2rem 0; 213 | } 214 | 215 | .starter .info .description { 216 | margin-bottom: 2rem; 217 | } 218 | 219 | .starter .image img { 220 | max-width: 100%; 221 | } 222 | @media (max-width: 480px) { 223 | body { 224 | font-size: 8px; 225 | } 226 | button { 227 | background-color: #ef233c; 228 | border: none; 229 | padding: 0.5rem 1rem; 230 | border-radius: 3rem; 231 | color: white; 232 | font-size: larger; 233 | font-weight: bold; 234 | -webkit-transition: 0.3s ease-in-out; 235 | transition: 0.3s ease-in-out; 236 | border: 0.1rem solid transparent; 237 | } 238 | .starter .image img { 239 | width: 200px; 240 | height: 200px; 241 | } 242 | .info .description { 243 | width: 90% !important; 244 | } 245 | nav { 246 | position: relative; 247 | padding: 1rem; 248 | margin: 0; 249 | } 250 | nav .responsive-toggle { 251 | display: block !important; 252 | position: absolute; 253 | right: 2rem; 254 | } 255 | nav .responsive-toggle i { 256 | font-size: 1.5rem; 257 | } 258 | nav .logo img { 259 | height: 3rem; 260 | } 261 | nav .links { 262 | position: absolute; 263 | top: -40rem; 264 | left: 0; 265 | margin-top: 10rem; 266 | background-color: white; 267 | width: 100%; 268 | -webkit-transition: 0.3s ease-in-out; 269 | transition: 0.3s ease-in-out; 270 | z-index: 99; 271 | -webkit-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1); 272 | box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1); 273 | border-radius: 0 0 1rem 1rem; 274 | padding: 2rem 0; 275 | } 276 | nav .links ul { 277 | -webkit-box-orient: vertical; 278 | -webkit-box-direction: normal; 279 | -ms-flex-direction: column; 280 | flex-direction: column; 281 | gap: 2rem; 282 | } 283 | nav .links ul button { 284 | padding: 1rem 2rem; 285 | } 286 | 287 | .starter .info { 288 | margin: 0rem; 289 | padding-left: 1rem; 290 | } 291 | } 292 | @media (min-width: 768px) and (max-width: 1024px) { 293 | body { 294 | font-size: 15px; 295 | } 296 | .info .description { 297 | width: 90% !important; 298 | } 299 | nav { 300 | position: relative; 301 | padding: 2rem; 302 | margin: 0; 303 | } 304 | nav .responsive-toggle { 305 | display: block !important; 306 | position: absolute; 307 | right: 5rem; 308 | } 309 | nav .responsive-toggle i { 310 | font-size: 1.5rem; 311 | } 312 | nav .logo img { 313 | height: 3rem; 314 | } 315 | nav .links { 316 | position: absolute; 317 | top: -40rem; 318 | left: 0; 319 | margin-top: 10rem; 320 | background-color: white; 321 | width: 100%; 322 | -webkit-transition: 0.3s ease-in-out; 323 | transition: 0.3s ease-in-out; 324 | -webkit-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1); 325 | box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1); 326 | border-radius: 0 0 1rem 1rem; 327 | padding: 2rem 0; 328 | z-index: 99; 329 | } 330 | nav .links ul { 331 | -webkit-box-orient: vertical; 332 | -webkit-box-direction: normal; 333 | -ms-flex-direction: column; 334 | flex-direction: column; 335 | gap: 2rem; 336 | } 337 | nav .links ul button { 338 | padding: 1rem 2rem; 339 | } 340 | .starter { 341 | -webkit-box-orient: vertical; 342 | -webkit-box-direction: normal; 343 | -ms-flex-direction: column; 344 | flex-direction: column; 345 | gap: 4rem; 346 | } 347 | } 348 | -------------------------------------------------------------------------------- /praveenscience/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | Praveen Kumar 22 | 23 | 24 | 25 | 40 | 41 | 42 |
    43 |
    44 |
    45 | Praveen Kumar 46 |
    47 |

    Hey 👋🏻, my name is Praveen Kumar

    48 |

    I’m a Software Developer at Cloudroit

    49 |
    50 |
    51 |
    52 |
    53 | 61 | 62 | 63 | -------------------------------------------------------------------------------- /rwiteshbera/images/background.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/rwiteshbera/images/background.jpg -------------------------------------------------------------------------------- /rwiteshbera/images/member.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/rwiteshbera/images/member.png -------------------------------------------------------------------------------- /rwiteshbera/images/team.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/praveenscience/Creative-Simple-Landing-Pages/bd4419e23e00edb41435051c4a1359e7cf084b9c/rwiteshbera/images/team.jpg -------------------------------------------------------------------------------- /rwiteshbera/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | RedWitch 11 | 12 | 13 | 14 |
    15 | 42 |
    43 | 44 | 45 | 46 |
    47 |
    48 |
    49 | 50 |
    51 |
    52 |

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur, ducimus.

    53 | 54 |

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia magnam, veritatis aliquid qui 55 | laboriosam unde animi dolorum nulla. Similique non, quisquam nisi, obcaecati sed dolore fugiat 56 | consequatur ea distinctio veritatis quae. Cupiditate accusantium ut, dolores ex laudantium 57 | repellendus, doloremque maiores sint nulla saepe atque, iste odit ipsam non fuga incidunt vel illum? 58 | Deleniti, est! Assumenda, ratione nihil. Reiciendis cumque, laborum eveniet neque atque nesciunt 59 | dolores dolorum vero placeat. Aliquid, explicabo.

    60 |
    61 |

    Read More

    62 |
    63 |
    64 | 65 |
    66 |
    67 |

    About

    68 | Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eius, labore vero error laborum, illum magnam 69 | accusamus impedit vitae suscipit quasi dolorum iste ducimus velit cum esse fugiat nihil sequi voluptatum, 70 | rem dignissimos! Doloremque reiciendis iusto temporibus recusandae placeat itaque, enim tempora accusamus 71 | ipsum magnam quod, saepe autem magni rerum architecto nam amet rem inventore ratione eius. Ad in amet facere 72 | itaque architecto, modi vel! In itaque atque aliquam qui laboriosam esse vero magni est eveniet non neque, 73 | animi iure officia ipsum temporibus aut natus illum! Laudantium nam maiores fugit dignissimos eligendi sit 74 | distinctio consequuntur nulla rem quaerat, harum odio. A. 75 |
    76 |
    77 | 78 |
    79 |
    80 | 81 |
    82 |

    Call to action

    83 |
    84 |

    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Expedita cumque doloribus exercitationem 85 | assumenda accusantium! Accusantium veniam magni sit rem fugit fuga repellat asperiores beatae assumenda! 86 | Perferendis atque optio dolorem culpa.

    87 | 88 |
    89 |
    90 | 91 |
    92 |

    Team

    93 |
    94 |
    95 | 96 |

    Mr. X

    97 |
    98 |
    99 | 100 |

    Mr. Y

    101 |
    102 |
    103 | 104 |

    Mr. Z

    105 |
    106 |
    107 | 108 |

    Mr. A

    109 |
    110 | 111 |
    112 | 113 |
    114 | RedWitch © 2021 115 |
    116 | 117 | 118 | 119 | -------------------------------------------------------------------------------- /rwiteshbera/script.js: -------------------------------------------------------------------------------- 1 | const menu = document.getElementById('check'); 2 | const menuIcon = document.getElementById('menu-btn'); 3 | const mediaMenu = document.getElementById('media-menu'); 4 | 5 | menuIcon.addEventListener('click', ()=>{ 6 | if(menu.checked == false) { 7 | mediaMenu.style.display = 'block'; 8 | } 9 | if(menu.checked == true) { 10 | mediaMenu.style.display = 'none'; 11 | } 12 | }); 13 | 14 | function toggle(checked) { 15 | if(checked!= menu.checked) { 16 | menu.click(); 17 | } 18 | } 19 | 20 | const ipadMediaQuery = window.matchMedia('(min-width: 953px)') 21 | 22 | if(ipadMediaQuery.matches){ 23 | document.querySelector('.navbar .nav .media-menu-bar').style.display = 'none'; 24 | } -------------------------------------------------------------------------------- /surveyform.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | SURVEY-FORM 8 | 34 | 35 | 36 |

    WELCOME TO THE SHORT SURVEY

    37 |
    38 |
    39 |

    About yourself

    40 | 41 | 42 | 43 | Male Female 44 | 45 | 46 | 47 | 56 | 57 | 63 |
    64 |
    65 |

    Contact details

    66 | 67 | 68 |
    69 |

    How would you ike to rateHacktoberfest 2022

    70 | Very poor 71 | 72 | 73 | 74 | 75 | Excellent 76 |
    77 | Any comments 78 | 79 |
    80 | 81 |
    82 | 83 | 84 | --------------------------------------------------------------------------------