diff --git a/LandingPages/grid/hexagon/index.html b/LandingPages/grid/hexagon/index.html new file mode 100644 index 00000000..aa2587da --- /dev/null +++ b/LandingPages/grid/hexagon/index.html @@ -0,0 +1,23 @@ + + + + + + + + Document + + +
+
+
+
+
+
+
+
+
+
+
+ + \ No newline at end of file diff --git a/LandingPages/grid/hexagon/style.css b/LandingPages/grid/hexagon/style.css new file mode 100644 index 00000000..e69de29b diff --git a/LandingPages/grid/index.html b/LandingPages/grid/index.html new file mode 100644 index 00000000..5441db9e --- /dev/null +++ b/LandingPages/grid/index.html @@ -0,0 +1,20 @@ + + + + + + + + Document + + +
+

Header

+
+
+
4
+
5
+ +
+ + diff --git a/LandingPages/grid/style.css b/LandingPages/grid/style.css new file mode 100644 index 00000000..3c221235 --- /dev/null +++ b/LandingPages/grid/style.css @@ -0,0 +1,43 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +.container { + background: rgb(255, 90, 90); + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-gap: 10px; + padding: 10px; +} + +.box { + margin: 0.2em; + background: rgb(233, 233, 233); + padding: 6vh; + +} + +.container :nth-child(1){ + grid-column: span 3; + display: flex; + justify-content: center; + background-color: blueviolet; +} +.container :nth-child(2){ + grid-row: span 2; + background-color: blueviolet; +} + +.container :nth-child(5){ + grid-column: span 2; + background-color: rgb(233, 132, 0); +} + + +@media(max-width:370px){ + .container{ + display: block; + } +} \ No newline at end of file diff --git a/LandingPages/l1/img/rhamely-yrWL7KrigPo-unsplash.jpg b/LandingPages/l1/img/rhamely-yrWL7KrigPo-unsplash.jpg new file mode 100644 index 00000000..a52cfbdb Binary files /dev/null and b/LandingPages/l1/img/rhamely-yrWL7KrigPo-unsplash.jpg differ diff --git a/LandingPages/l1/img/wallpapersden.com_iceberg-minimalist_1920x1080.jpg b/LandingPages/l1/img/wallpapersden.com_iceberg-minimalist_1920x1080.jpg new file mode 100644 index 00000000..6b016cf3 Binary files /dev/null and b/LandingPages/l1/img/wallpapersden.com_iceberg-minimalist_1920x1080.jpg differ diff --git a/LandingPages/l1/index.css b/LandingPages/l1/index.css new file mode 100644 index 00000000..af04ab88 --- /dev/null +++ b/LandingPages/l1/index.css @@ -0,0 +1,68 @@ +@import url('https://fonts.googleapis.com/css2?family=Silkscreen&display=swap'); + +* { + box-sizing: border-box; +} + +body { + margin: 0; + padding: 0; + font-family: 'Silkscreen', cursive; + position: absolute; + background-image: url("img/rhamely-yrWL7KrigPo-unsplash.jpg"); + background-repeat: no-repeat; + background-size: cover; +} + +.navbar { + width: 100%; + display: flex; + border: 3px solid black; + align-items: center; + justify-content: center; + background: rgb(54, 54, 54, 0.3); + /* position: absolute; */ +} + +.navbar .links ul { + display: flex; + justify-content: center; + align-items: center; + text-align: center; +} + +.navbar .links ul li { + display: flex; + list-style-type: none; + margin: 1em; + margin-top: 0.2em; + +} + +a { + display: flex; + + text-decoration: none; + /* position: absolute; */ + padding: 5px; + color: rgb(39, 26, 26); +} + +a:hover { + background-color: rgb(54, 54, 54, 0.4); + border-radius: 5px; +} + + + + +.bg { + + margin: 200px; + padding: 30px; + background-color: rgb(54, 54, 54, 0.4); + text-align: center; + color: rgb(0, 0, 0); + + +} \ No newline at end of file diff --git a/LandingPages/l1/index.html b/LandingPages/l1/index.html new file mode 100644 index 00000000..6545bc6f --- /dev/null +++ b/LandingPages/l1/index.html @@ -0,0 +1,87 @@ + + + + + + + + Document + + +
+
+ +
+
+
+
+

Landing Page

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos + dignissimos vero enim repellendus dolor, nemo tempora amet ut + recusandae reprehenderit reiciendis similique aut voluptate nam, + provident totam, at voluptatem eaque. Reprehenderit ipsum architecto + voluptate, aut quas eveniet numquam cumque delectus ratione in unde, + ab, reiciendis saepe iure velit eaque? Laborum iure esse mollitia a + rerum illum excepturi sapiente inventore numquam molestias + necessitatibus debitis incidunt odio sequi architecto, odit quibusdam + nam nesciunt fugiat deleniti. Iste placeat blanditiis at atque + repellat totam deserunt suscipit dolorem facilis earum nam illo + laudantium quia, commodi molestias maxime aperiam soluta similique. + Hic sequi ipsum non voluptatibus in consequuntur, vel ipsam architecto + animi autem. Distinctio dicta molestias dolorum eos incidunt! Quam + quia pariatur dignissimos autem dolorum et obcaecati aspernatur + asperiores impedit facere quis saepe, consectetur dolore enim fuga. + Nam sint eaque repellat! Suscipit numquam modi necessitatibus + provident dolores, velit asperiores tenetur eius non quis eveniet quo + explicabo eaque odio sint, porro recusandae excepturi rem iste. + Aspernatur veritatis fuga asperiores debitis? Optio quasi sed a + provident distinctio nihil libero nam delectus. Eligendi culpa + reiciendis vel quia perspiciatis ad corporis natus dolor, magnam + incidunt fugit? Beatae recusandae commodi laboriosam quos corrupti + cupiditate ea obcaecati, soluta nam veniam at nobis. +

+
+ +
+ + diff --git a/LandingPages/l2/img/jerry-zhang-ePpaQC2c1xA-unsplash.jpg b/LandingPages/l2/img/jerry-zhang-ePpaQC2c1xA-unsplash.jpg new file mode 100644 index 00000000..7aeb68ff Binary files /dev/null and b/LandingPages/l2/img/jerry-zhang-ePpaQC2c1xA-unsplash.jpg differ diff --git a/LandingPages/l2/img/konstantin-kleine-V1NVvXmO_dk-unsplash.jpg b/LandingPages/l2/img/konstantin-kleine-V1NVvXmO_dk-unsplash.jpg new file mode 100644 index 00000000..585d0323 Binary files /dev/null and b/LandingPages/l2/img/konstantin-kleine-V1NVvXmO_dk-unsplash.jpg differ diff --git a/LandingPages/l2/img/luca-bravo-O453M2Liufs-unsplash.jpg b/LandingPages/l2/img/luca-bravo-O453M2Liufs-unsplash.jpg new file mode 100644 index 00000000..e6378323 Binary files /dev/null and b/LandingPages/l2/img/luca-bravo-O453M2Liufs-unsplash.jpg differ diff --git a/LandingPages/l2/img/rohit-tandon-9wg5jCEPBsw-unsplash.jpg b/LandingPages/l2/img/rohit-tandon-9wg5jCEPBsw-unsplash.jpg new file mode 100644 index 00000000..c16d0cd9 Binary files /dev/null and b/LandingPages/l2/img/rohit-tandon-9wg5jCEPBsw-unsplash.jpg differ diff --git a/LandingPages/l2/img/tim-stief-YFFGkE3y4F8-unsplash.jpg b/LandingPages/l2/img/tim-stief-YFFGkE3y4F8-unsplash.jpg new file mode 100644 index 00000000..1da6048e Binary files /dev/null and b/LandingPages/l2/img/tim-stief-YFFGkE3y4F8-unsplash.jpg differ diff --git a/LandingPages/l2/img/tobias-keller-73F4pKoUkM0-unsplash.jpg b/LandingPages/l2/img/tobias-keller-73F4pKoUkM0-unsplash.jpg new file mode 100644 index 00000000..4f923d3d Binary files /dev/null and b/LandingPages/l2/img/tobias-keller-73F4pKoUkM0-unsplash.jpg differ diff --git a/LandingPages/l2/index.html b/LandingPages/l2/index.html new file mode 100644 index 00000000..86b09c81 --- /dev/null +++ b/LandingPages/l2/index.html @@ -0,0 +1,69 @@ + + + + + + + + + Parallax + + + + +
+
+

Hello,

+
+
+

About us

+

+ Lorem ipsum, dolor sit amet consectetur adipisicing elit. Distinctio + autem maiores nemo rem dolorem necessitatibus, quas, vero vitae + veritatis porro eligendi nulla sed ullam ratione sunt error, itaque + ipsa exercitationem. Quis doloremque enim illum natus, nihil alias + aperiam doloribus velit? +

+
+ +
+ + + + + + + + diff --git a/LandingPages/l2/main.js b/LandingPages/l2/main.js new file mode 100644 index 00000000..f85f8a48 --- /dev/null +++ b/LandingPages/l2/main.js @@ -0,0 +1,6 @@ +const parallax=document.getElementsByClassName("greete-container"); + +window.addEventListener("scroll",function(){ + let offset=window.pageYOffset; + parallax.style.backgroundPositionY=offset*7+"px"; +}) \ No newline at end of file diff --git a/LandingPages/l2/style.css b/LandingPages/l2/style.css new file mode 100644 index 00000000..bd17752f --- /dev/null +++ b/LandingPages/l2/style.css @@ -0,0 +1,139 @@ +* { + border: 0; + padding: 0; + margin: 0; + font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + overflow-x: hidden; + + box-sizing: border-box; +} + + + +.navbar { + /* position: absolute; */ + display: flex; + background-color: rgba(109, 104, 104, 0.616); + height: 7vh; + align-items: center; +} + +.navbar ul { + display: flex; + margin: 10px; + +} + +.navbar ul li { + margin-right: 3ch; +} + +/* *************************************************************************************** */ +main { + + background: hsl(204 100% 5%); + background: hsl(204 100% 5%); + /* background: conic-gradient( + hsl(100 100% 60%), + hsl(200 100% 60%), + hsl(100 100% 60%) + ) fixed; */ + color: white; + min-block-size: 200vh; + min-inline-size: 100%; + padding: 5vmin; + box-sizing: border-box; + display: grid; + place-content: center; + font-family: system-ui; + font-size: min(200%, 5vmin); +} + + +main div { + display: flex; + align-items: center; + justify-content: center; + font-weight: bold; + font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + width: 100%; + height: 100vh; + +} + +/* *************************************************************************************** */ + + +/* *************************************************************************************** */ +/* 1st div */ + +.greet { + color: rgb(0, 0, 0); + font-size: 5vw; + background: rgba(255, 255, 255, 0.796); + padding: 8px 24px; + border-radius: 16px; + +} + +main div:nth-child(1) { + background: rgba(181, 141, 141, 0.759); + background-image: url(img/luca-bravo-O453M2Liufs-unsplash.jpg); + background-size: cover; + background-attachment: fixed; + /* position: absolute; */ +} + +/* *************************************************************************************** */ + + + + +.about-conatiner { + + background-color: black; + +} + +.about-container h1{ + padding: 100px; +position: absolute; +font-size: 30vh; +text-decoration: line-through; +z-index: 0; +opacity: 0.4; +background-color: black; +background-image: linear-gradient(60deg, #b4b4b4, #da435f); +-webkit-background-clip: text; +-webkit-text-fill-color: transparent; +text-align: center; +} + +.about { + + background-color: black; + background: radial-gradient(hsl(100 100% 60%), + hsl(200 100% 60%)) fixed; + background: conic-gradient(hsl(100 100% 60%), + hsl(200 100% 60%), + hsl(100 100% 60%)) fixed; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + text-align: center; + z-index: 3; +} + + +footer { + background: rgb(206, 204, 210); + padding: 40px; +} + +footer ul { + display: grid; +} + +footer ul li { + margin: 20px; + grid-template-rows: repeat(1, 1fr); +} \ No newline at end of file diff --git a/LandingPages/l3/img/circuit.svg b/LandingPages/l3/img/circuit.svg new file mode 100644 index 00000000..53595169 --- /dev/null +++ b/LandingPages/l3/img/circuit.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/LandingPages/l3/img/mountain.svg b/LandingPages/l3/img/mountain.svg new file mode 100644 index 00000000..fc07b071 --- /dev/null +++ b/LandingPages/l3/img/mountain.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/LandingPages/l3/index.html b/LandingPages/l3/index.html new file mode 100644 index 00000000..26fa44dc --- /dev/null +++ b/LandingPages/l3/index.html @@ -0,0 +1,27 @@ + + + + + + + + + Document + + + + +
+ +

Welcome

+
+ + diff --git a/LandingPages/l3/style.css b/LandingPages/l3/style.css new file mode 100644 index 00000000..7066c937 --- /dev/null +++ b/LandingPages/l3/style.css @@ -0,0 +1,126 @@ +@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Silkscreen&display=swap'); + +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Poppins', sans-serif; + font-family: 'Silkscreen', cursive; +} + +body { + /* background: linear-gradient(109.6deg, rgb(36, 45, 57) 11.2%, rgb(16, 37, 60) 51.2%, rgb(0, 0, 0) 98.6%); */ + background: black; + overflow-x: hidden; + background-size: cover; +} + +nav { + position: absolute; + background: rgb(25, 24, 24); + height: 100%; + position: fixed; + z-index: 11; +} + +.material-symbols-outlined { + display: block; + color: aliceblue; + padding: 20px; +} + +.material-symbols-outlined:hover { + color: #fff; + cursor: pointer; + transition: all ease-in 0.2s; + text-shadow: + 0 0 7px #fff, + 0 0 10px #fff, + 0 0 21px #fff, + 0 0 42px #1f4a5d, + 0 0 82px #1e5269, + 0 0 92px #215266, + 0 0 102px #28637c, + 0 0 151px #1f6482; +} + +.bg { + background-repeat: no-repeat; + background-size: cover; + background-attachment: fixed; + opacity: 0.3; + z-index: -2; +} + +.parallax .text-box { + + /* text-align: center; */ + top: 30%; + left: 60%; + position: absolute; + padding: 5rem; + color: aliceblue; + + +} + +.text-box { + /* background: rgba(0, 0, 0, 0.5); */ + position: relative; + display: flex; + height: 2px; + align-items: center; + justify-content: center; + overflow: hidden; + border-radius: 16px; +} + +.text-box::before { + content: ''; + position: absolute; + z-index: -3; + width: 100px; + height: 550px; + background: #000428; + /* fallback for old browsers */ + background: -webkit-linear-gradient(to right, #004e92, #000428); + /* Chrome 10-25, Safari 5.1-6 */ + background: linear-gradient(to right, #004e92, #000428); + /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ + + + + + animation: animate 4s linear infinite; + + +} + +.text-box::after { + content: ''; + position: absolute; + inset: 4px; + background: rgba(0, 0, 0); + +} + +.text-box h1 { + position: relative; + z-index: 4; +} + +@keyframes animate { + 0% { + transform: rotate(0deg); + } + + 100% { + transform: rotate(360deg); + } +} + +.text h1 { + position: relative; + color: #fff; + z-index: 1; +} \ No newline at end of file diff --git a/LandingPages/l4/img/wallpaperflare.com_wallpaper (11).jpg b/LandingPages/l4/img/wallpaperflare.com_wallpaper (11).jpg new file mode 100644 index 00000000..89f20af0 Binary files /dev/null and b/LandingPages/l4/img/wallpaperflare.com_wallpaper (11).jpg differ diff --git a/LandingPages/l4/index.html b/LandingPages/l4/index.html new file mode 100644 index 00000000..66aebf4e --- /dev/null +++ b/LandingPages/l4/index.html @@ -0,0 +1,33 @@ + + + + + + + + Neon + + + + +
+

Hello, world

+
+ +
+
!?
+
Nani?
+
what????????
+
pardon..
+
+ + diff --git a/LandingPages/l4/style.css b/LandingPages/l4/style.css new file mode 100644 index 00000000..46d90309 --- /dev/null +++ b/LandingPages/l4/style.css @@ -0,0 +1,130 @@ +@import url('https://fonts.googleapis.com/css2?family=Raleway+Dots&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Gemunu+Libre:wght@200&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Gemunu+Libre:wght@200&family=Silkscreen&display=swap'); + +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Poppins', sans-serif; + font-family: 'Raleway Dots', cursive; + + +} + +.skeleton { + + + animation: skeleton-loading 1s linear infinite alternate; + + +} + +@keyframes animation { + 0% { + background-color: hsl(200, 20%, 70%); + } + + 100% { + background-color: hsl(200, 20%, 95%); + } +} + +.container { + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; + background: #07252d; + overflow-x: hidden; + +} + +.container h1 { + position: relative; + font-size: 10vw; + letter-spacing: 15px; + color: #0e3742; + text-transform: uppercase; + width: 100%; + text-align: center; + -webkit-box-reflect: below 1px linear-gradient(transparent, #0008); + line-height: 0.73em; + outline: none; + animation: animate 3s linear infinite; + + +} + +@keyframes animate { + + 0%, + 18%, + 20%, + 50.1%, + 60%, + 65.1%, + 80%, + 90.1%, + 92% { + color: #0e3742; + box-shadow: none; + } + + 18.1%, + 20.1%, + 30%, + 50%, + 60.1%, + 65%, + 80.1%, + 90%, + 90.2%, + 100% { + color: #fff; + box-shadow: 0 0 10px #03bcf4, + 0 0 20px #03bcf4, + 0 0 40px #03bcf4, + 0 0 60px #03bcf4, + 0 0 160px #03bcf4, + ; + } +} + +nav { + background: transparent; + border-bottom: 4px solid white; + position: absolute; + width: 100%; +} + +.items { + padding: 1rem; + -webkit-box-reflect: below 1px linear-gradient(transparent, #0008); + +} + +.items ul { + display: flex; + list-style: none; +} + +.items ul li { + margin-right: 2rem; +} + +.items ul li a { + color: rgb(255, 255, 255); + text-decoration: none; + font-family: 'Gemunu Libre', sans-serif; + font-family: 'Silkscreen', cursive; + font-size: 2vh; + +} + +a:hover { + border-bottom: 3px solid white; + border-radius: 2px; + +} +