NicoleKenney · NicoleKenney · Oct 9, 2020 · Oct 9, 2020 · Oct 9, 2020 · Oct 9, 2020
diff --git a/images/celestialdate.jpg b/images/celestialdate.jpg
diff --git a/images/cosmictouch.jpg b/images/cosmictouch.jpg
diff --git a/images/cosmonaut.jpg b/images/cosmonaut.jpg
diff --git a/images/dreamscape.jpg b/images/dreamscape.jpg
diff --git a/images/foreststars.jpg b/images/foreststars.jpg
diff --git a/images/galacticglitz.jpg b/images/galacticglitz.jpg
diff --git a/images/levitation.jpg b/images/levitation.jpg
diff --git a/images/lovesme.jpg b/images/lovesme.jpg
diff --git a/images/mindblown.PNG b/images/mindblown.PNG
diff --git a/images/purplehaze.jpg b/images/purplehaze.jpg
diff --git a/images/scarletk.jpg b/images/scarletk.jpg
diff --git a/images/she.jpg b/images/she.jpg
diff --git a/images/skylanterns.jpg b/images/skylanterns.jpg
diff --git a/images/spacekitty.jpg b/images/spacekitty.jpg
diff --git a/images/stargazer.jpg b/images/stargazer.jpg
diff --git a/images/subconscious.jpg b/images/subconscious.jpg
diff --git a/images/swimmers.jpg b/images/swimmers.jpg
diff --git a/images/tinylights.jpg b/images/tinylights.jpg
diff --git a/images/universal.jpg b/images/universal.jpg
diff --git a/index.html b/index.html
@@ -4,8 +4,65 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
+    <link rel="stylesheet" href="/style/index.css">
+
 </head>
 <body>
-
+   <section class="title">Raven's Starry Night</section> 
+    <header>
+        <div class="intro">
+            <h2>Nicole Kenney</h2>
+            <nav>
+                <a class="box1" href="#home">Home</a>
+                <a class="box2" href="#about">About</a>
+                <a class="box3" href="#contact"target="_contact.html">Contact</a>
+                <a class="box4" href="#projects"target="_projects.html">Projects</a>
+            </nav>
+        </div>
+        <div class="spacecake">
+            <h1>Stellar Designs</h1>
+            <h3> Welcome</h3>
+        </div>
+    </header>
+
+    <section class="gallery">
+        <div class="img1">
+        <img src="/images/mindblown.PNG" alt="woman with moon for head">
+        <p class="cosmos">cosmos</p>
+        </div>
+
+        <div class="img2">
+        <img src="/images/swimmers.jpg" alt="divers jumping into space">
+        <p class="nebulae">nebulae</p>
+        </div>
+
+        <div class="img3">
+        <img src="/images/she.jpg" alt="woman made of stardust">
+        <p class="stardust">stardust</p>
+        </div>
+
+        <div class="img4">
+        <img src="/images/scarletk.jpg" alt="woman in cosmos">
+        <p class="singularity">singularity</p>
+        </div>
+
+        <div class="img5">
+        <img src="/images/spacekitty.jpg" alt="cat in space">
+        <p class="wormhole">wormhole</p>
+        </div>
+
+        <div class="img6">
+        <img src="/images/levitation.jpg" alt="woman levitating in space">
+        <p class="eventhorizon">event horizon</p>
+        </div>
+    </section>
+
+    <footer>
+        <div class="button">
+            <button>
+                <a href="https://twitter.com/NicoleKenney10" target="_blank">Contact Me</a>
+            </button>
+        </div>
+    </footer>
 </body>
 </html>
diff --git a/style/index.css b/style/index.css
@@ -1 +1,176 @@
-/* Add CSS styling here */
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, 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;
+border: 0;
+font-size: 62.5%;
+font: inherit; vertical-align: baseline;
+}
+
+/* Add CSS styling here */
+
+body{
+
+    background-color:#01011a;
+}
+
+
+.title{
+    text-align:center;
+    border:1px solid black;
+    background:#ddc7f0;
+}
+
+h2{
+    color:white;
+    font-size:1.5rem;
+    margin:20px;
+}
+.intro{
+    display:flex;
+    justify-content:space-between; 
+}
+
+nav{
+    margin:20px;
+}
+
+nav a{
+    text-decoration:none;
+    border-radius:15%;
+}
+
+nav a:hover{
+    background:#31023b;
+    color:white;
+}
+
+.box1 {
+    border:2px solid black;
+    background-color:#ddc7f0;
+
+}
+.box2 {
+    border:2px solid black;
+    background-color:#ddc7f0;
+}
+
+.box3 {
+    border:2px solid black;
+    background-color:#ddc7f0;
+}
+
+.box4 {
+    border:2px solid black;
+    background-color:#ddc7f0;
+}
+
+header{
+    margin:20px 20px 100px 20px;
+}
+
+.spacecake{
+    background-image:url("/images/cosmictouch.jpg");
+    min-height:500px;
+    max-width:850px;
+    margin:0 auto;
+    margin-top:20px;
+    background-size:cover;
+    background-repeat:no-repeat;
+} 
+
+
+h1{
+    color:white;
+    font-size:3rem;
+    text-align:center;
+    padding:30px;
+}
+
+h3{
+    color:white;
+    font-size:2rem;
+    text-align:center;
+}
+
+.gallery{
+    width:100%;
+    display:flex;
+    flex-wrap:wrap;
+    justify-content:center;
+    align-items:center; 
+    margin-bottom:40px;
+}
+
+.gallery img{
+    width:20rem;
+    height:20rem;
+    margin:10px;
+}
+
+.cosmos{
+    color:white;
+    text-align:center;
+}
+
+.nebulae{
+    color:white;
+    text-align:center;
+}
+
+.stardust{
+    color:white;
+    text-align:center;
+}
+
+.singularity{
+    color:white;
+    text-align:center;
+}
+
+.wormhole{
+    color:white;
+    text-align:center;
+}
+
+.eventhorizon{
+    color:white;
+    text-align:center;
+}
+
+.button{
+    text-align:center;
+}
+
+button{
+    background-color:#ddc7f0;
+    margin-top:20px;
+    margin-bottom:20px;
+}
+
+button:hover{
+    background:#31023b;
+}
+
+.button a{
+    text-decoration:none;
+}
+
+.button a:hover{
+    color:white;
+}
+
+footer{
+    background-color:#5c0341;
+}