-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
0 parents
commit 6f010a2
Showing
14 changed files
with
12,047 additions
and
0 deletions.
There are no files selected for viewing
Binary file not shown.
Binary file not shown.
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,239 @@ | ||
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,700&display=swap'); | ||
|
||
/* ================================== | ||
======== typography reset | ||
================================== */ | ||
h1, | ||
.h1, | ||
h2, | ||
.h2, | ||
h3, | ||
.h3, | ||
h4, | ||
.h4, | ||
h5, | ||
.h5, | ||
h6, | ||
.h6 { | ||
font-family: "Source Sans Pro", sans-serif; | ||
} | ||
|
||
h1, | ||
.h1 { | ||
font-size: 2.25rem; | ||
} | ||
|
||
h2, | ||
.h2 { | ||
font-size: 1.875rem; | ||
} | ||
|
||
h3, | ||
.h3 { | ||
font-size: 1.5rem; | ||
} | ||
|
||
h4, | ||
.h4 { | ||
font-size: 1.125rem; | ||
} | ||
|
||
h5, | ||
.h5 { | ||
font-size: 0.75rem; | ||
} | ||
|
||
|
||
/* ================================== | ||
======== reset css | ||
================================== */ | ||
*, | ||
*::before, | ||
*::after { | ||
margin: 0; | ||
padding: 0; | ||
outline: none; | ||
-webkit-tap-highlight-color: transparent; | ||
} | ||
|
||
::-moz-selection { | ||
color: #ffffff; | ||
background: #6FC05B; | ||
} | ||
|
||
html, | ||
body { | ||
scroll-behavior: smooth; | ||
} | ||
|
||
html { | ||
font-size: 16px; | ||
-webkit-text-size-adjust: none; | ||
-moz-text-size-adjust: none; | ||
text-size-adjust: none; | ||
} | ||
|
||
body { | ||
color: #1b1b1b; | ||
font-weight: 400; | ||
font-family: "Source Sans Pro", sans-serif; | ||
background-color: #f5f5f5; | ||
overflow-x: hidden; | ||
} | ||
|
||
a, | ||
a:hover, | ||
a:focus, | ||
a:active { | ||
text-decoration: none; | ||
color: unset; | ||
} | ||
|
||
button, | ||
button:hover, | ||
button:focus, | ||
button:active { | ||
outline: none; | ||
} | ||
|
||
input:-webkit-autofill { | ||
-webkit-text-fill-color: unset; | ||
-webkit-transition: background-color 5000s; | ||
transition: background-color 5000s; | ||
} | ||
|
||
ul, | ||
ol { | ||
list-style: none; | ||
} | ||
|
||
img { | ||
display: block; | ||
max-width: 100%; | ||
-o-object-fit: cover; | ||
object-fit: cover; | ||
} | ||
|
||
.object-fit--contain { | ||
-o-object-fit: contain; | ||
object-fit: contain; | ||
} | ||
|
||
.user-select-none { | ||
pointer-events: none; | ||
} | ||
|
||
.list-inline { | ||
font-size: 0; | ||
} | ||
|
||
.list-inline-item { | ||
font-size: 1rem; | ||
} | ||
|
||
/* ================================== | ||
======== comon button style css | ||
================================== */ | ||
.primary-btn { | ||
position: relative; | ||
display: inline-block; | ||
color: #1b1b1b; | ||
font-size: 1.25rem; | ||
font-family: "Source Sans Pro", sans-serif; | ||
font-weight: 700; | ||
padding: 0.625rem 2.1875rem; | ||
background-color: #ffffff; | ||
transition: color 0.4s cubic-bezier(0.455, 0.03, 0.515, 0.955); | ||
isolation: isolate; | ||
box-shadow: 0 10px 60px rgba(0, 0, 0, 0.1); | ||
} | ||
|
||
.primary-btn::before { | ||
content: ""; | ||
position: absolute; | ||
top: 0; | ||
left: 0; | ||
bottom: 0; | ||
background-color: #6FC05B; | ||
width: 100%; | ||
height: 100%; | ||
z-index: -1; | ||
-webkit-clip-path: polygon(0 0, 50px 0, 0 100%, 0 100%); | ||
clip-path: polygon(0 0, 50px 0, 0 100%, 0 100%); | ||
transition: -webkit-clip-path 0.4s cubic-bezier(0.455, 0.03, 0.515, 0.955); | ||
transition: clip-path 0.4s cubic-bezier(0.455, 0.03, 0.515, 0.955); | ||
transition: clip-path 0.4s cubic-bezier(0.455, 0.03, 0.515, 0.955), -webkit-clip-path 0.4s cubic-bezier(0.455, 0.03, 0.515, 0.955); | ||
} | ||
|
||
.primary-btn:hover, | ||
.primary-btn:focus { | ||
color: #ffffff; | ||
} | ||
|
||
.primary-btn:hover::before, | ||
.primary-btn:focus::before { | ||
-webkit-clip-path: polygon(0 0, calc(100% + 50px) 0, 100% 100%, 0 100%); | ||
clip-path: polygon(0 0, calc(100% + 50px) 0, 100% 100%, 0 100%); | ||
} | ||
|
||
/* ================================== | ||
======== common css starts from here | ||
================================== */ | ||
|
||
:root { | ||
--primary-font: 'Lato', sans-serif; | ||
--primary-color: #211C28; | ||
--secondary-color: #4D4953; | ||
--special-color: #F63333; | ||
} | ||
|
||
.centered-div { | ||
display: flex; | ||
justify-content: center; | ||
align-items: center; | ||
} | ||
|
||
.section-padding { | ||
padding: 100px; | ||
} | ||
|
||
.common-header { | ||
font-size: 40px; | ||
font-weight: 700; | ||
color: var(--primary-color); | ||
text-transform: capitalize; | ||
} | ||
|
||
.common-paragraph { | ||
font-size: 16px; | ||
font-weight: 400; | ||
color: var(--secondary-color); | ||
} | ||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
/* ================================== | ||
======== toggle css starts from here | ||
================================== */ | ||
.hidden { | ||
display: none; | ||
} | ||
|
||
.active { | ||
display: block; | ||
} | ||
|
||
.active-button { | ||
background-color: #007bff; | ||
color: #fff; | ||
} | ||
|
||
.box { | ||
height: 150px; | ||
width: 300px | ||
} |
Binary file added
BIN
+1.34 MB
...y of vivid colors. The background showcases a gradient transitioning from w.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+1.43 MB
...t exudes vibrant reflections, set against a gradient background transitioni.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+1.79 MB
...doscope of colors. The scene_s background transitions elegantly from the wa.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+1.94 MB
...emanating a myriad of shimmering colors. The backdrop shifts from the golde.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+1.48 MB
...ecting colors in a mesmerizing dance. The scene_s gradient background moves.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+1.22 MB
... of colors that shimmer and shift. The background gracefully transitions fr.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,35 @@ | ||
|
||
// toggle button js | ||
function showDiv(divNumber) { | ||
for (let i = 1; i <= 5; i++) { | ||
const div = document.getElementById(`div${i}`); | ||
const button = document.getElementById(`btn${i}`); | ||
|
||
if (i === divNumber) { | ||
div.classList.add('active'); | ||
div.classList.remove('hidden'); | ||
button.classList.add('active-button'); | ||
} else { | ||
div.classList.remove('active'); | ||
div.classList.add('hidden'); | ||
button.classList.remove('active-button'); | ||
} | ||
} | ||
} | ||
|
||
function NestedshowDiv(divNumber) { | ||
for (let i = 5; i <= 7; i++) { | ||
const div = document.getElementById(`div${i}`); | ||
const button = document.getElementById(`btn${i}`); | ||
|
||
if (i === divNumber) { | ||
div.classList.add('active'); | ||
div.classList.remove('hidden'); | ||
button.classList.add('active-button'); | ||
} else { | ||
div.classList.remove('active'); | ||
div.classList.add('hidden'); | ||
button.classList.remove('active-button'); | ||
} | ||
} | ||
} |
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,53 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="UTF-8"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
<title>Bootstrap Collapse Example</title> | ||
|
||
<!-- Include Bootstrap CSS --> | ||
<link href="assets/css/bootstrap.min.css" rel="stylesheet"> | ||
<link rel="stylesheet" href="assets/css/style.css"> | ||
</head> | ||
<body> | ||
|
||
|
||
|
||
|
||
|
||
|
||
<!-- toggle section --> | ||
<div class="container"> | ||
<button id="btn1" class="active-button" onclick="showDiv(1)">Button 1</button> | ||
<button id="btn2" onclick="showDiv(2)">Button 2</button> | ||
<button id="btn3" onclick="showDiv(3)">Button 3</button> | ||
<button id="btn4" onclick="showDiv(4)">Button 4</button> | ||
<button id="btn5" onclick="showDiv(5)">Button 5</button> | ||
|
||
<div id="div1" class="active"> | ||
<button id="btn6" class="active-button" onclick="NestedshowDiv(6)">Button 6</button> | ||
<button id="btn7" onclick="NestedshowDiv(7)">Button 7</button> | ||
<div id="div6" class="active">Div 6 is hidden</div> | ||
<div id="div7" class="hidden">Div 7 is hidden</div> | ||
|
||
|
||
</div> | ||
<div id="div2" class="hidden">Div 2 is hidden</div> | ||
<div id="div3" class="hidden">Div 3 is hidden</div> | ||
<div id="div4" class="hidden">Div 4 is hidden</div> | ||
<div id="div5" class="hidden">Div 5 is hidden</div> | ||
</div> | ||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<!-- Include Bootstrap JavaScript at the end of the body tag to ensure proper functionality --> | ||
<script src="assets/js/jquery-1.12.4.min.js"></script> | ||
<script src="assets/js/bootstrap.min.js"></script> | ||
<script src="assets/js/index.js"></script> | ||
</body> | ||
</html> |