Styling changes

diff --git a/index.html b/index.html
index 30037342625980f5527afddaa13c80b8a18b1f3d..02a1f15244f6f78ce7af94774a7d6f5a41ca8114 100644 (file)
--- a/index.html
+++ b/index.html
@@ -12,6 +12,12 @@
                <h2>[Studios]</h2>
        </header>
        <main>
                <h2>[Studios]</h2>
        </header>
        <main>

+               <contact>
+                       <u>CONTACT</u><br>
+                       Will Greenwood<br>
+                       greenwoodw50 [at] gmail [dot] com<br>
+                       07594 768180
+               </contact>

                <section>
                        <h2>INT. DAY - WEBSITE (BACKGROUND)</h2>
                        <p>
                <section>
                        <h2>INT. DAY - WEBSITE (BACKGROUND)</h2>
                        <p>

diff --git a/style.css b/style.css
index c095b2cce1d730e6da16bdec4808c516b5997f36..d812fb8ad2afb348c2734a0a645777b0eb948876 100644 (file)
--- a/style.css
+++ b/style.css
@@ -34,6 +34,13 @@ header > h2 {
        transform: skew(-0.5rad);
 }
 
        transform: skew(-0.5rad);
 }
 

+contact {
+       display: block;
+       width: 100%;
+       text-align: right;
+       color: gray;
+}
+

 /* Main section */
 
 main {
 /* Main section */
 
 main {


@@ -42,24 +49,27 @@ main {
        line-height: 1.2;
 }
 
        line-height: 1.2;
 }
 

-section {
-       width: min(100%, 650px);
-}

 
 

-@media (max-width: 1250px) {
+@media (max-width: 1000px) {

        /* Formatting for mobile */
        /* Formatting for mobile */

+

        img {
        img {

-               width: min(100%, 200px);
+               margin: 20px;
+               width: min(100%, 300px);
+       }
+
+       section {
+               width: 100%;

        }
 }
 
 /* Variables for the photo arrangement to make it easier to tweak */
 :root {
        }
 }
 
 /* Variables for the photo arrangement to make it easier to tweak */
 :root {

-       --x: 750px;
-       --y: 220px;
+       --x: 600px;
+       --y: 400px;

 }
 
 }
 

-@media (min-width: 1250px) {
+@media (min-width: 1000px) {

        /* Formatting for computer */
 
        img {
        /* Formatting for computer */
 
        img {


@@ -78,4 +88,8 @@ section {
                top: calc(var(--y) + 350px);
                left: calc(var(--x) + 25px);
        }
                top: calc(var(--y) + 350px);
                left: calc(var(--x) + 25px);
        }

+
+       section {
+               width: 450px;
+       }

 }
 }