diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..6b665aa
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+ "liveServer.settings.port": 5501
+}
diff --git a/index.css b/index.css
index 08f3422..7ef7571 100644
--- a/index.css
+++ b/index.css
@@ -122,6 +122,7 @@ body {
margin-bottom: 2rem;
}
+
@media only screen and (max-width:700px) {
.container {
box-shadow: 5px 10px 5px black;
@@ -148,10 +149,7 @@ body {
text-align: center;
}
- .footer-copyright {
- background-color: white;
- color: black;
- }
+
.container button {
width: 100px;
@@ -173,3 +171,271 @@ body {
}
}
+.footer {
+ background: #282727;
+ padding: 1rem 7%;
+}
+
+.footer .box-container {
+ display: flex;
+ flex-wrap: wrap;
+}
+
+.footer .box-container .box {
+ flex: 1 1 25rem;
+ margin: 2rem;
+}
+
+.footer .box-container .box h3 {
+ font-size: 2.5rem;
+ color: #fff;
+ padding: 1rem 0;
+ font-weight: normal;
+}
+
+.footer .box-container .box p {
+ font-size: 1.7rem;
+ color: #eee;
+ padding: 1rem 0;
+}
+
+.footer .box-container .box a {
+ font-size: 1.7rem;
+ color: #eee;
+ padding: 1rem 0;
+ display: block;
+}
+
+.footer .box-container .box a:hover {
+ color: var(--yellow);
+}
+
+.footer .box-container .box p i {
+ padding-right: .5rem;
+ color: var(--yellow);
+}
+
+.footer .credit {
+ font-size: 2rem;
+ text-align: center;
+ border-top: .2rem solid rgba(255, 255, 255, .7);
+ padding: 2rem 1rem;
+ font-weight: normal;
+ letter-spacing: .1rem;
+ color: #fff;
+}
+
+.footer .credit a {
+ color: var(--yellow);
+}
+:root {
+ --yellow: #F7CA3E;
+}
+
+* {
+ font-family: 'Roboto', sans-serif;
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ text-decoration: none;
+ outline: none;
+ border: none;
+ text-transform: capitalize;
+ transition: all .2s linear;
+}
+
+h1,
+h3 {
+ font-family: 'Oswald', sans-serif;
+}
+
+*::selection {
+ background: var(--yellow);
+ color: #fff;
+}
+
+html {
+ font-size: 62.5%;
+ overflow-x: hidden;
+}
+
+body {
+ overflow-x: hidden;
+ /* height:200rem; */
+}
+
+html::-webkit-scrollbar {
+ width: 1.4rem;
+}
+
+html::-webkit-scrollbar-track {
+ background: #333;
+}
+
+html::-webkit-scrollbar-thumb {
+ background: var(--yellow);
+}
+
+section {
+ min-height: 100vh;
+ padding: 1rem 10%;
+ padding-top: 8.5rem;
+}
+
+.btn {
+ font-size: 1.7rem;
+ padding: .7rem 4rem;
+ border-radius: 5rem;
+ margin-top: 1rem;
+ background: none;
+ color: #333;
+ cursor: pointer;
+ border: .2rem solid var(--yellow);
+}
+
+.btn:hover {
+ background: var(--yellow);
+}
+
+.heading {
+ text-align: center;
+ font-size: 4rem;
+ padding: 0 .5rem;
+ color: #333;
+}
+
+.heading span {
+ color: var(--yellow);
+}
+section {
+ min-height: 100vh;
+ padding: 1rem 10%;
+ padding-top: 8.5rem;
+}
+
+
+
+.heading {
+ text-align: center;
+ font-size: 4rem;
+ padding: 0 .5rem;
+ color: #333;
+}
+
+.heading span {
+ color: var(--yellow);
+}
+
+header {
+ position: fixed;
+ top: 0;
+ left: 0;
+ z-index: 1000;
+ width: 100%;
+ background: #fff;
+ padding: 1.5rem 10%;
+ box-shadow: 0 .3rem 2rem rgba(0, 0, 0, .1);
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+}
+
+header .logo img {
+ height: 5rem;
+}
+
+header .navbar ul {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ list-style: none;
+}
+
+header .navbar ul li {
+ margin-left: 3rem;
+}
+
+header .navbar ul li a {
+ font-size: 1.7rem;
+ color: #666;
+}
+
+header .navbar ul li a.active,
+header .navbar ul li a:hover {
+ color: var(--yellow);
+}
+
+header #menu-bar {
+ font-size: 3rem;
+ color: #666;
+ cursor: pointer;
+ display: none;
+}
+
+.home {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-wrap: wrap;
+ position: relative;
+ z-index: 0;
+ overflow: hidden;
+}
+
+.home::before,
+.home::after {
+ content: '';
+ position: absolute;
+ top: 5rem;
+ right: -6rem;
+ background: var(--yellow);
+ border-radius: 3rem;
+ transform: rotate(-45deg);
+ height: 40rem;
+ width: 70rem;
+ z-index: -2;
+ animation: animte 1s linear 1;
+}
+
+@keyframes animte {
+ 0% {
+ transform: rotate(45deg) translateY(-40rem);
+ }
+}
+
+.home::before {
+ top: -7rem;
+ background: #fff;
+ box-shadow: 0 1rem 4rem rgba(0, 0, 0, .1);
+ z-index: -1;
+}
+
+.home .image {
+ flex: 1 1 39rem;
+}
+
+.home .image img {
+ width: 100%;
+}
+
+.home .content {
+ flex: 1 1 39rem;
+}
+
+.home .content h3 {
+ color: #333;
+ font-size: 6rem;
+}
+
+.home .content p {
+ color: #666;
+ font-size: 2rem;
+ padding: 1rem 0;
+}
+
+.about {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-wrap: wrap;
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index b2dd004..df43f57 100644
--- a/index.html
+++ b/index.html
@@ -66,7 +66,7 @@ JOIN THE BEST GYM
-
About Us
+ About Us
Fitness Factory Fitness Institute was started on 4th October 2011.
It’s been more than a decade of educating people in fitness.
Every year 1000+ students pass out of the institute.
@@ -77,8 +77,55 @@ About Us
Becoming a Fitness Factory Fitness Institute certified Advanced Personal trainer is your foundation for success. It
offers you complete approach to fitness, wellness and business skills.
Make an investment in yourself and become a Fitness Factory Fitness Institute certified personal trainer.
+
+
+
+
+
@@ -88,11 +135,7 @@ About Us
-