Web-and-Java-Script-Projects · sikoh · Jun 3, 2021 · Jun 4, 2021 · Jun 4, 2021 · Jun 4, 2021
diff --git a/index.html b/index.html
@@ -3,9 +3,92 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style/index.css">
+    <link rel="menusheet" href="about.html">
+    <link rel="menusheet" href="contact.html">
+    <link rel="menusheet" href="projects.html">
     <title>Document</title>
 </head>
-<body>
-
+<body> 
+
+    <header>
+        <div class="logo"><img src="style/logo.png"></div>
+        <div class="sitetitle"><h4>Beatiful Power</h4></div>
+    </header>
+
+    <!-- navigation-->
+    <nav>
+        <div class="name"><h1>Si Koh</h1></div>
+         <div class="links"> 
+          <a href="index.html">Home</a>
+          <a href="about.html">About Me</a>
+          <a href="contact.html">Contact</a>
+          <a href="projects.html">Projects</a></div>
+      </nav>
+
+    <!--main picture with text and button-->
+    <section class="main">
+        <div class="picture">
+        <img src="https://picsum.photos/seed/picsum/700/300" alt="Snowy hill">
+        </div>
+        <div class="text">
+        <h1> Let's go hiking in the snow!</h1>
+        <button class="button1" href="projects.html" target="_blank"> My Projects </button>
+        <p>Here we go go go go, on an adventure!<br>
+          The Thingamajigger is up and away. Go go go go, on an adventure. <br>
+          We’re flying with the Cat in the Hat today!</p>
+        </div>
+    </section>
+
+
+
+
+<!--list-->
+
+<section class="list">
+    <div>
+      <img src="https://picsum.photos/seed/picsum/400/250" alt="Snowy hill">
+      <p>text</p>
+    </div>
+    <div>
+      <img src="https://picsum.photos/seed/picsum/400/250" alt="Snowy hill">
+      <p>Text</p>
+    </div>
+    <div>
+     <img src="https://picsum.photos/seed/picsum/400/250" alt="Snowy hill">
+     <p>Text</p>
+    </div>
+    <div>
+    <img src="https://picsum.photos/seed/picsum/400/250" alt="Snowy hill">
+    <p>Text</p>
+    </div>
+    <div>
+      <img src="https://picsum.photos/seed/picsum/400/250" alt="Snowy hill">
+      <p>text</p>
+    </div>
+    <div>
+      <img src="https://picsum.photos/seed/picsum/400/250" alt="Snowy hill">
+      <p>Text</p>
+    </div>
+    <div>
+     <img src="https://picsum.photos/seed/picsum/400/250" alt="Snowy hill">
+     <p>Text</p>
+    </div>
+    <div>
+    <img src="https://picsum.photos/seed/picsum/400/250" alt="Snowy hill">
+    <p>Text</p>
+    </div>
+</section>
+
+
+
+
+
+
+    <footer>
+        <h4>Like what you see?</h4>
+        <button class="button2" href="contact.html" target="_blank"> Contact Me </button>
+    </footer>
 </body>
+
 </html>
diff --git a/style/index.css b/style/index.css
@@ -1 +1,144 @@
-/* Add CSS styling here */
+/* Add CSS styling here */
+html, body, div, span, applet, object, iframe, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+    display: block;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
+
+
+
+
+
+/*my css*/
+
+*{
+
+    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
+}
+
+
+/*top of the site*/
+header{
+    display:flex;
+}
+
+.logo{
+    margin-top: 1%;
+}
+.sitetitle{
+text-align: center;
+margin-left: 45%;
+}
+
+
+
+
+/*navication*/
+nav{
+    background-color: #D8D8D8;
+    padding: 1% 2% 2%;
+    font-size: 18px;
+}
+.name{
+    text-align: left; 
+    font-weight: bold;
+    font-size: 20px;
+  }
+  .links a{
+    border: 1px solid darkgray;
+    padding: 20px;
+    display: inline-block;
+    color: black;
+    text-decoration: none;
+    margin-bottom: 20px;
+    background-color: white;
+  }
+  a:visited {
+    color: white;
+    background-color: black;
+  }
+
+/*main picture with text and button*/
+.main{
+display:flex;
+align-items: center;
+flex-direction: row;
+margin: 0.5% 0.5% 2%;
+}
+.text{
+text-align: center;
+margin: 0 7% 0;
+padding: 2%;
+content: 3%;
+}
+
+.button1{
+    padding: 2%;
+    margin: 2%;
+    background-color: gray;
+    color: white;
+    font-size: 18px;
+    }
+
+/*list of pictures and text*/
+
+.list{
+    display:flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    text-align: center;
+    margin:0.5% ;
+  }
+
+  p{
+    margin:0.2% 0 10%;
+  }
+
+
+  .button2{
+    padding: 1% 2% 1%;
+    margin: 2%;
+    background-color: white;
+    font-size: 18px;
+    }
+
+  /*footer*/
+  footer{
+      background-color: #D8D8D8;
+      text-align: center;
+      padding: 1.5%;
+      font-size: 23px;
+  }
diff --git a/style/logo.png b/style/logo.png