💅 style: Add new css rules

Were added stylization to the 3 project's pages. In order to fulfill the requirements of the week 2 main assignment.
Raphael-GC · Oct 8, 2024 · 21243eb · 21243eb
1 parent 35fef22
commit 21243eb
Show file tree

Hide file tree

Showing 6 changed files with 139 additions and 16 deletions.
diff --git a/index.html b/index.html
@@ -12,8 +12,8 @@
     <header>
       <nav>
         <a href="#">Home</a>
-        <a href="https://raphael-gc.github.io/wdd130/week02/holygrail.html">Holy Grail</a>
-        <a href="https://raphael-gc.github.io/wdd130/week02/box-model.html">Box-Model</a>
+        <a href="./week02/holygrail.html">Holy Grail</a>
+        <a href="./week02/box-model.html">Box-Model</a>
       </nav>
     </header>
     <main>

diff --git a/styles/styles.css b/styles/styles.css
@@ -6,14 +6,14 @@ nav {
 }
 
 nav a {
-    color: white;
+    color: #ffffff;
     padding: 5px;
     margin: 0;
     font-size: 20px;
     background-color: #999999;
     border-radius: 10%;
     text-decoration: none;
-    box-shadow: 0 0 30px gray;
+    box-shadow: 0 0 30px #808080;
 }
 
 h1 {
@@ -28,7 +28,7 @@ img {
     height: auto;
     border: 1px solid steelblue;
     padding: 2px;
-    box-shadow: 0 0 30px gray;
+    box-shadow: 0 0 30px #808080;
     margin: 15px;
 }
 

diff --git a/week02/box-model.html b/week02/box-model.html
@@ -11,15 +11,13 @@
 <body>
     <header>
         <nav>
-          <a href="https://raphael-gc.github.io/wdd130/index.html">Home</a>
-          <a href="https://raphael-gc.github.io/wdd130/week02/holygrail.html">Holy Grail</a>
+          <a href="../index.html">Home</a>
+          <a href="./holygrail.html">Holy Grail</a>
         </nav>
     </header>
     <main>
         <div class="callout">
-            <aside>
-                <img src="https://churchofjesuschrist.org/imgs/0d9965bac82711eda736eeeeac1e6a3620d4c7dc/full/500%2C/0/default" alt="Paul the Apostle" width="150" height="150">
-            </aside>
+            <img src="https://churchofjesuschrist.org/imgs/0d9965bac82711eda736eeeeac1e6a3620d4c7dc/full/500%2C/0/default" alt="Paul the Apostle" width="150" height="150">
             <blockquote>
                 <p>11 Not that I speak in respect of want: for I have learned, in whatsoever state I am, therewith to be content.</p>
                 <p>12 I know both how to be abased, and I know how to abound: every where and in all things I am instructed both to be full and to be hungry, both to abound and to suffer need.</p>
@@ -29,5 +27,8 @@
             <p></p>
         </div>
     </main>
+    <footer>
+        <p>©2024 Raphael Carneiro 🌳 Rio de Janeiro, Brazil</p>
+    </footer>
 </body>
 </html>
diff --git a/week02/holygrail.html b/week02/holygrail.html
@@ -3,6 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="styles/holygrail.css">
     <title>Raphael Carneiro | Holy Grail Layout Example</title>
     <meta name="author" content="Raphael Guedes Carneiro">
     <meta name="description" content="A common layout example on the web called the 'holy grail' layout.">
@@ -13,26 +14,43 @@ <h1>A Holy Grail Layout Example</h1>
     </header>
     <nav>
         <ul>
-            <a href="https://raphael-gc.github.io/wdd130/index.html">Home</a>
+            <li><a href="../index.html">Home</a></li>
             <li><a href="https://byui.edu">BYU-Idaho</a></li>
             <li><a href="https://churchofjesuschrist.org">The Church</a></li>
         </ul>
     </nav>
+    <div>
+        <main>
+
+        </main>
+    </div>
     <main>
         <section>
-            <h2>Headings</h2>
+            <h2>Rio de Janeiro Brazil Temple</h2>
             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum nam quaerat exercitationem doloribus harum velit omnis ipsam alias itaque ea explicabo doloremque aliquam assumenda commodi, libero temporibus, voluptas numquam voluptatem?</p>
         </section>
         <section>
-            <h2>Headings</h2>
+            <h2>Belém Brazil Temple</h2>
+
             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum nam quaerat exercitationem doloribus harum velit omnis ipsam alias itaque ea explicabo doloremque aliquam assumenda commodi, libero temporibus, voluptas numquam voluptatem?</p>
         </section>
     </main>
+
     <aside>
-        <img src="https://content.churchofjesuschrist.org/templesldsorg/bc/Temples/photo-galleries/rio-de-janeiro-brazil/800x800/11-44a124e6fe618047c177f883622a35d3a95dec86.jpeg" alt="Rio de Janeiro Temple Celestial Room" width="200">
+        <img src="https://content.churchofjesuschrist.org/templesldsorg/bc/Temples/photo-galleries/rio-de-janeiro-brazil/800x800/11-44a124e6fe618047c177f883622a35d3a95dec86.jpeg" 
+            alt="Rio de Janeiro Temple Celestial Room" 
+            width="200"
+        >
     </aside>
+    <aside>
+        <img src="https://content.churchofjesuschrist.org/templesldsorg/bc/Temples/photo-galleries/belem-brazil/800x500/belem_brazil_temple_sealing.jpg" 
+            alt="Belem Brazil Temple Sealing Room" 
+            width="200"
+        >
+    </aside>
+
     <footer>
-        Raphael Carneiro 🌳
+        <p>©2024 Raphael Carneiro 🌳 Rio de Janeiro, Brazil</p>
     </footer>
 </body>
 </html>
diff --git a/week02/styles/box-model.css b/week02/styles/box-model.css
@@ -1,5 +1,26 @@
+* {
+    max-width: 400px;
+}
+
+nav {
+    display: flex;
+    gap: 20px;
+    padding: 10px 10px 0px 10px;
+    justify-content: center;
+}
+
+nav a {
+    color: white;
+    padding: 5px;
+    margin: 0;
+    font-size: 20px;
+    background-color: #999999;
+    border-radius: 10%;
+    text-decoration: none;
+    box-shadow: 0 0 30px gray;
+}
+
 .callout {
-	max-width: 400px;
     margin: 1rem; 
     border: 1px solid rgba(0, 0, 0, .1); 
     padding: 1rem; 
@@ -27,4 +48,10 @@ cite {
     text-align: right;
     font-size: smaller;
     color: #fff;
+}
+
+footer {
+    margin: 0;
+    text-align: center;
+    padding-right: 10px;
 }
diff --git a/week02/styles/holygrail.css b/week02/styles/holygrail.css
@@ -0,0 +1,77 @@
+body {
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+    margin: 0;
+}
+
+h1 {
+    text-align: center;
+    color: #5b6dcd;
+}
+
+nav {
+    padding: 10px 10px 0px 10px;
+    justify-content: left;
+}
+
+nav ul {
+    display: grid;
+    gap: 15px;
+}
+
+nav a {
+    color: #ffffff;
+    padding: 3px;
+    margin: 0;
+    font-size: 20px;
+    background-color: #999999;
+    border-radius: 10%;
+    text-decoration: none;
+    box-shadow: 0 0 30px #808080;
+}
+
+main {
+    padding: 0 10px;
+    margin: 10px;
+    background-color: #f2f2f2;
+}
+
+main section {
+    margin-bottom: 10px;
+    border: none;
+    padding: 15px;
+    background-color: #5b6dcd;
+    border-radius: 5%;
+    text-decoration: none;
+    box-shadow: 0 0 30px #808080;
+}
+
+main h2 {
+    text-align: left;
+    color: #fff;
+}
+
+main p {
+    color: #fff;
+    padding: 10px;
+}
+
+aside {
+    display: flex;
+    flex-direction: row;
+    float: right;
+}
+
+aside img {
+    width: 300px;
+    height: auto;
+    border: 1px solid steelblue;
+    padding: 2px;
+    box-shadow: 0 0 30px #808080;
+    margin: 15px;
+}
+
+footer {
+    text-align: center;
+}