CodeYourFuture · CallumTanner · Jan 26, 2023
diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
@@ -16,21 +16,22 @@ Please complete the details below this message
 
 # Your Details
 
-- Your Name:
-- Your City:
-- Your Slack Name:
+- Your Name: Cal Tanner
+- Your City: London
+- Your Slack Name: Cal
 
 # Homework Details
 
-- Module:
-- Week:
+- Module: html/css
+- Week: 1
 
 # Notes
 
 - What did you find easy?
-
+The semantic HTML
 - What did you find hard?
 
 - What do you still not understand?
 
 - Any other notes?
+I need to work out how to stop the links in the articles inheriting the first-child class of the articles 
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+  "liveServer.settings.port": 5501
+}
diff --git a/css/style.css b/css/style.css
@@ -6,3 +6,52 @@
  *    for example: General styles, Navigation styles, Hero styles, Footer etc.
  * 
  */
+
+body {
+    background-color: rgb(10, 97, 97);
+}
+
+header h1 {
+    display:flex;
+    justify-content: center;
+    color:rgb(241, 224, 207)
+}
+
+header, h1 {
+    color: white;
+}
+
+nav{
+    display: flex;
+    justify-content: right;
+}
+
+ ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+ }
+
+ la {
+    display: block;
+    width: 60px;
+ }
+
+ article :first-child  {
+    color: whitesmoke;
+    background-color: black;
+    padding: 5px;
+ }
+
+ article p {
+    color: rgb(5, 5, 5);
+    background-color: rgb(250, 248, 247);
+ }
+
+
+
+ footer{
+    display: flex;
+    justify-content: center;
+    color: white;
+ }
diff --git a/index.html b/index.html
@@ -16,6 +16,51 @@
     <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
   </head>
   <body>
+    <header>
+      <h1>HTML, CSS & Javascript</h1>
+      <h2> My submission for the html & css coursework</h2>
+    </header>
+    <main>
+      <nav>
+        <ul>
+          <li>
+            <a href="#article1">Html</a>
+            <a href="#article2">CSS</a>
+            <a href="#article3">Javascript</a>
+          </ui>
+        </ol>
+      </nav>
+      <br>
+      <article class="article1">
+        <h2>HTML</h2>
+        <details>
+        <summary>
+          What Is HTML?
+        </summary>
+        <p> Html stands for hypertext markup language ... Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum laborum totam optio harum reprehenderit eligendi quam fugit, incidunt porro tempora exercitationem, iusto earum? Laboriosam molestias consequatur pariatur commodi fugit ipsa consectetur, qui omnis odio quo sequi perferendis aperiam quas autem cupiditate deleniti saepe nihil expedita, beatae porro esse magni! Sapiente nam quasi, numquam aspernatur laboriosam unde ea, veritatis repudiandae officia necessitatibus explicabo, facere maiores eaque adipisci. Facilis quas nemo fugiat error cum? Dolorem ut deleniti reprehenderit? dolor sit amet consectetur adipisicing elit. Hic esse asperiores at delectus maxime mollitia veniam minima nam id voluptatem ipsam, doloremque quam eveniet modi. <a class="link" href="https://www.w3schools.com/html/html_intro.asp" target="_blank">Click here for more information on HTML</a></p>
+        </details>
+      </article>
+      <article class="article2">
+        <h2>CSS</h2>
+        <details>
+        <summary>
+          What Is CSS?
+        </summary>
+        <p> CSS stands for Cascading style sheets ... Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque optio et quibusdam voluptas ullam delectus rem incidunt tenetur itaque veritatis quisquam, iusto distinctio iste cumque necessitatibus iure aspernatur voluptates. Temporibus rem nobis aspernatur molestiae ex mollitia. Laudantium sunt tempore recusandae unde aspernatur sit facere accusantium, perferendis soluta culpa ut voluptate perspiciatis rerum minus iste? Porro harum quas corrupti ut cupiditate suscipit facere dignissimos sint? Quasi, velit quis molestiae explicabo incidunt quo odit rem consequatur tempora. ipsum dolor sit, amet consectetur adipisicing elit. Quos nisi ex labore minima temporibus debitis officia molestias illo? Blanditiis et illo ut sed placeat dicta. <a href="https://www.w3schools.com/css/css_intro.asp" target="_blank">To learn more about CSS click here</a></p>
+        </details>
+      </article>
+      <article class="article3">
+        <h2>Javascript</h2>
+        <details>
+        <summary>
+          What Is Javascript?
+        </summary>
+        <p> Javascript is not my name ... Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolore dolorum provident tenetur, illum cupiditate expedita cumque explicabo maxime! Quis aspernatur, optio similique, cupiditate ad ex architecto nostrum exercitationem veritatis vero, tempore nemo. Suscipit quam numquam itaque aliquam, eaque dolores illo consequatur perferendis doloribus beatae accusantium eius, harum necessitatibus dolor reprehenderit in magnam maiores delectus corrupti! Ratione quaerat aliquam at doloremque voluptas qui eius? Quia, dolorem! Ab quis commodi sed necessitatibus aliquid odit doloribus eum eligendi iusto doloremque! Minima, delectus ipsum earum, non veritatis fugit ex ducimus harum laboriosam omnis perferendis! Aliquid illum nulla modi deleniti dolorum dicta fuga harum veniam. Aperiam possimus quia aut placeat inventore expedita similique suscipit sint, temporibus eos illum necessitatibus iste accusamus delectus ab consectetur qui nobis praesentium rerum obcaecati ducimus ratione. Sed vero voluptate ex pariatur voluptas placeat obcaecati dolorem fuga, repellendus corrupti possimus dolor unde, officiis excepturi soluta iure? Numquam excepturi dignissimos animi veniam totam velit, debitis mollitia et eveniet nemo ratione necessitatibus quidem cupiditate maxime iure nostrum illo eos enim dolores? Facilis numquam, itaque eum culpa, temporibus repudiandae fugit, quia dicta ex magni aperiam animi. Similique quos quo nostrum vitae distinctio nesciunt sed odit exercitationem beatae eveniet harum, provident reiciendis totam sint placeat. <a href="https://www.w3schools.com/whatis/whatis_js.asp" target="_blank">Learn more about Javascript here</a>
+        </p>
+      </article>
+      <hr>
+      <footer> Copyright Cal Tanner</footer>
+    </main>
     <!-- Add your HTML markup here -->
     <!-- Remember: Use semantic HTML tags like <header>, <main>, <nav>, <footer>, <section> etc -->
   </body>