updated footer

black-RAM · Aug 17, 2023 · d84b4fa · d84b4fa
1 parent 956d7c4
commit d84b4fa
Show file tree

Hide file tree

Showing 2 changed files with 122 additions and 52 deletions.
diff --git a/index.html b/index.html
@@ -92,6 +92,8 @@ <h3>Find us in London</h3>
     </blockquote>
     <footer>
         <p>All photos are from Unsplash</p>
+        <p>Authored by Robert Topaz</p>
+        <p><a href="https://github.com/black-RAM/tasty-INC">Code Repository</a></p>
     </footer>
 </body>
 </html>
diff --git a/style.css b/style.css
@@ -1,11 +1,16 @@
 @import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,700;0,800;1,300;1,400&family=Oswald:wght@700&display=swap');
-*, *::before, *::after{
+
+*,
+*::before,
+*::after {
     box-sizing: border-box !important;
 }
-html{
+
+html {
     scroll-behavior: smooth;
 }
-:root{
+
+:root {
     --yellow: hsl(41, 99%, 46%);
     --dark-brown: hsl(12, 30%, 12%);
     --gray: hsl(0, 0%, 25%);
@@ -14,90 +19,126 @@ html{
     --black: hsl(250, 29%, 10%);
     font-size: 62.5%;
 }
-::selection{
+
+::selection {
     background-color: hsla(195, 53%, 79%, 0.8);
 }
-body{
+
+body {
     font-family: 'Open Sans', Arial, Helvetica, sans-serif;
     margin: 0px;
 }
+
 /* resets */
-h1, h2, h3, blockquote, footer, figure{
+h1,
+h2,
+h3,
+blockquote,
+footer,
+figure {
     margin: 0px;
 }
-h1{ font-size: clamp(7rem, 9vmax, 14rem);}
-h2{ font-size: 4.5rem;}
-h3{ font-size: 3rem;}
-a{
+
+h1 {
+    font-size: clamp(7rem, 9vmax, 14rem);
+}
+
+h2 {
+    font-size: 4.5rem;
+}
+
+h3 {
+    font-size: 3rem;
+}
+
+a {
     color: inherit;
     text-decoration: none;
 }
+
 a:focus {
     outline: solid 2px lightblue;
     padding: 0.5em 1em;
 }
-p, a{
+
+p,
+a {
     font-size: 1.6rem;
     line-height: 1.5em;
 }
-img{
+
+img {
     height: 100%;
     width: 100%;
     object-fit: cover;
 }
-img:focus{
+
+img:focus {
     border: none;
     outline: none;
 }
+
 /* resets end */
 /* utilitly classes */
-.underline{
+.underline {
     text-decoration: underline;
 }
-.caps{
+
+.caps {
     text-transform: uppercase;
 }
+
 .readmore {
     text-decoration-color: var(--yellow);
     text-decoration-thickness: 4px;
     color: gray;
     transition: color 400ms ease;
 }
-.readmore:is(:hover, :active){
+
+.readmore:is(:hover, :active) {
     color: var(--blue);
 }
+
 /* end of utilitly classes */
-h1, h2, h3, h4{
+h1,
+h2,
+h3,
+h4 {
     font-family: 'Oswald', Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
     color: var(--dark-brown);
 }
+
 /* header start */
-.main-header{
+.main-header {
     display: grid;
     grid-template-columns: repeat(10, 10vw);
     grid-template-rows: 8% 92%;
     height: 100vh;
     margin: 0 auto;
     overflow: hidden visible;
 }
-.main-header hr{
-    grid-row: 1 / 1 ;
+
+.main-header hr {
+    grid-row: 1 / 1;
     grid-column: 1 / span 4;
     color: var(--gray);
     background-color: var(--gray);
     height: 0.8rem;
     width: 40vw;
     margin: 40px 0px 10px 40px;
 }
-.main-header figure{
+
+.main-header figure {
     grid-column: 5 / 11;
-    grid-row: 1  / 3;
+    grid-row: 1 / 3;
     background-color: black;
 }
-.main-header figure img{
+
+.main-header figure img {
     object-position: center;
 }
-.header-content{
+
+.header-content {
     position: relative;
     z-index: 1;
     grid-column: 1 / 6;
@@ -106,17 +147,19 @@ h1, h2, h3, h4{
     margin-left: 40px;
     background-color: hsla(0, 0%, 100%, 0.8);
     /* align items to center */
-    display:flex;
+    display: flex;
     flex-flow: column nowrap;
     justify-content: center;
 }
-.header-content h1{
+
+.header-content h1 {
     position: relative;
     margin-bottom: 0.2em;
     line-height: 1em;
     color: hsl(12, 30%, 18%);
 }
-.header-content h1::before{
+
+.header-content h1::before {
     content: "";
     position: absolute;
     z-index: -1;
@@ -126,19 +169,22 @@ h1, h2, h3, h4{
     width: 2em;
     filter: brightness(125%) saturate(150%);
 }
+
 .header-content p {
     margin-right: 20%;
     min-width: 14rem;
 }
+
 /* header end */
 
 /* introduction start (section 1) */
-.intro{
+.intro {
     position: relative;
     margin: 10rem 3vw 10rem 34px;
     padding-left: max(30px, 5vw);
 }
-.intro::before{
+
+.intro::before {
     content: "";
     position: absolute;
     right: 0;
@@ -151,7 +197,8 @@ h1, h2, h3, h4{
     max-width: 40rem;
     background-color: var(--white-gray);
 }
-.intro::after{
+
+.intro::after {
     content: "";
     position: absolute;
     left: 0;
@@ -161,53 +208,64 @@ h1, h2, h3, h4{
     max-height: 22rem;
     width: 4px;
 }
-.intro h2{
+
+.intro h2 {
     text-transform: capitalize;
 }
+
 /* introdection end */
 
 /* section 2 (img gallery) */
-.gallery{
+.gallery {
     margin: 0 calc(2% + 12px);
 }
-.gallery > .row{
+
+.gallery>.row {
     margin-bottom: 20px;
 }
-.gallery > .row > .row {
+
+.gallery>.row>.row {
     flex: 1 1 calc(40rem + 20px);
 }
-.row{
+
+.row {
     display: flex;
     flex-flow: row wrap;
     gap: 20px;
 }
-.row>figure{
+
+.row>figure {
     max-width: 100%;
     flex: 1 1 20rem;
 }
+
 /* section 2 end */
 /* main sections 3 & 4 */
-.main-sect{
+.main-sect {
     display: flex;
     flex-flow: row wrap;
     align-items: center;
     gap: 20px;
     background-color: snow;
 }
-.main-sect figure{
+
+.main-sect figure {
     flex: 1 1 300px;
     height: 60rem;
     width: 100%;
 }
-.main-sect .content{
+
+.main-sect .content {
     flex: 1 1 300px;
     padding: calc(2vw + 12px);
 }
-.main-sect h2{
+
+.main-sect h2 {
     position: relative;
     z-index: 1;
 }
-.main-sect h2::after{
+
+.main-sect h2::after {
     content: "";
     position: absolute;
     left: 0;
@@ -218,53 +276,63 @@ h1, h2, h3, h4{
     width: 20rem;
     filter: brightness(125%) saturate(150%);
 }
-.main-sect#main-sect-1{
+
+.main-sect#main-sect-1 {
     margin-top: 5rem;
 }
-.main-sect#main-sect-2 h2::after{
+
+.main-sect#main-sect-2 h2::after {
     inset: auto 0 0 auto;
 }
-.main-sect#main-sect-2 figure{
+
+.main-sect#main-sect-2 figure {
     flex-basis: 340px;
 }
+
 /* main sectins end */
 /* map section start */
-.map{
+.map {
     padding: 5rem calc(2vw + 2rem);
     background-color: whitesmoke;
     clip-path: polygon(0 0, 100% 0%, 100% calc(100% - 40px), 0% 100%);
     margin-bottom: -40px;
-    text-align: center; 
+    text-align: center;
 }
-.map *{
+
+.map * {
     margin-bottom: 20px;
 }
-.map iframe{
+
+.map iframe {
     width: 100%;
     height: 48rem;
-    border:0 !important;
+    border: 0 !important;
 }
+
 /* map section end */
 /* testimonial start */
-.testimonial{
+.testimonial {
     padding: 80px calc(2% + 15px);
     text-align: right;
     background-color: hsl(230, 20%, 92%);
     font-size: 1.5rem;
 }
-.testimonial p{
+
+.testimonial p {
     font-size: 2rem;
     line-height: 2em;
     color: hsl(0, 0%, 20%);
     word-break: break-all;
     font-style: italic;
 }
+
 /* testimonial end */
 /* footer */
-footer{
+footer {
     background-color: hsl(240, 50%, 25%);
     color: var(--white-gray);
     font-size: 2rem;
     text-align: center;
     padding: 2rem;
+    font-style: italic;
 }