selinax19 · selinax19 · Sep 2, 2021 · Sep 2, 2021 · Sep 2, 2021 · Sep 2, 2021
diff --git a/about.html b/about.html
@@ -6,6 +6,7 @@
     <title>Document</title>
 </head>
 <body>
-    <h1> ABOUT </h1>
+    <h1>  </h1>
+
 </body>
 </html>
diff --git a/index.html b/index.html
@@ -4,8 +4,77 @@
     <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">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
+
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
+<style>
+    body{
+        font-family:'Press Start 2P', cursive;
+    }
+    a{
+        font-family: 'Bebas Neue', cursive;    
+    }
+</style>
 </head>
+
 <body>
+    <header>
+        <h1>VALORANT</h1>
+
+<nav>
+    <div class= "nav-container">
 
+        <div class="nav-links">
+        <a href= "">Home</a>
+        <a href= "">About</a>
+        <a href= "">Contact</a>
+        <a href= "">Project</a>
+        </div>
+
+        <h2>PRECISE GUN PLAY</h2>
+
+        <p>
+            DEFY THE LIMITS
+            Blend your style and experience on a global, competitive stage. You have
+            13 rounds to attach and defend your side using sharp gunplay and tactical
+            abilities. And, with one life per-round, you'll need to think faster than your
+            opponent if you want to survive. Take on foes across Competitive and Unranked
+            modes as well as Deathmatch and Spike Rush.
+        </p>
+    </header>
+
+    <div class="main-image-container">
+<img src="https://images.unsplash.com/photo-1542751371-adc38448a05e?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80">
+    </div>
+
+    <div class="all">
+        <div class="image-container">
+            <img src="https://images.unsplash.com/photo-1618193139062-2c5bf4f935b7?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80">
+            <img src="https://images.unsplash.com/photo-1597938430467-c7a5f65c24f2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=634&q=80">
+            <img src="https://images.unsplash.com/photo-1610041321063-bbaf5286de89?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=634&q=80">
+            <img src="https://images.unsplash.com/photo-1535223289827-42f1e9919769?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80">
+        </div>
+
+        <div class="paragraph-container">
+            <p>
+                CREATIVITY IS YOUR GREATEST WEAPON.
+            More than guns and bullets, you’ll choose an Agent armed with adaptive, swift, and lethal abilities that create opportunities to let your gunplay shine. 
+            No two Agents play alike, just as no two highlight reels will look the same.
+            </p>
+        </div>
+    </div>
+
+<footer>
+<div class="button-container">
+<a href= "#Contact Me">Contact Me</a>
+    </div>
+    </div>
+</div>
+</footer>
 </body>
-</html>
+</html>
diff --git a/style/index.css b/style/index.css
@@ -1 +1,182 @@
-/* Add CSS styling here */
+/* Add CSS styling here */
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+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;
+	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 own */
+*{
+    box-sizing: border-box;
+}
+html{
+    font-size: 62.5%;
+}
+body {
+    font-size: 1.6rem;
+}
+
+header{
+    text-align: center;
+    font-family: 'Press Start 2P', cursive;
+}
+
+h1{
+    font-size:95px;
+    padding:1%;
+}
+
+h2{
+    font-size:35px;
+    margin-bottom: 20px;
+    background-color: #6411ad;
+}
+
+p{
+    font-size:20px;
+}
+.nav-container{
+    margin: 0 10px;
+    border: 1px solid lightgray;
+    padding: 20px;
+    display: inline-block;
+    color: white;
+    text-decoration: none;
+    margin-bottom: 20px;
+    background-color: #a663cc;
+}
+.nav-links a{
+    text-decoration: none;
+    margin: 0 10px;
+    border: 1px solid lightgray;
+    padding: 20px;
+    display: inline-block;
+    border-radius: 20px;
+    color: white;
+    text-decoration: none;
+    margin-bottom: 20px;
+    background-color: #6411ad;
+    font-size: 20px;
+    justify-content:space-evenly;
+
+}
+
+.nav-links a:hover {
+    background-color: white;
+  color:#757bc8;
+}
+.p{
+    font-family:'Bebas Neue', cursive;
+}
+
+.main-image-container{
+    align-items:center;
+    display:flex;
+    width:100%;
+    height:max-content;
+    justify-content:center;
+}
+.main-image-container img{
+    width:190%;
+    padding:0.5%;
+
+}
+.image-container{
+    display:flex;
+    align-items:center;
+    width:65%;
+    max-width: 1500px;
+    padding: 2rem 0%;
+    justify-content:space-between;
+}
+.image-container img{
+    width:20%;
+    border:5px solid purple;
+    height:auto;
+    display:flex;
+    padding: 2rem 0;
+  justify-content:space-between;
+}
+
+.button-container{
+    width:100%;
+    font-size: 45px;
+    align-items:center;
+    display:flex;
+    justify-content:space-around;
+}
+
+.button-container a{
+text-decoration: none;
+}
+
+.all{
+    width:225%;
+    height: 650px;
+    display:flex;
+    padding: 2rem 0;
+}
+
+.p{
+    display:flex;
+    justify-content:flex-end;
+}
+.paragraph-container{
+    width:7%;
+    padding-left:2rem;
+}
+
+
+footer{
+    text-decoration: none;
+    border: 1px solid purple;
+    border-radius:6px;
+    color: purple;
+    text-decoration: none;
+    background-color: #fff;
+    font-size: 20px;
+    justify-content:space-evenly;
+    align-items:center;
+    text-align
+
+}
+footer a:hover{
+    background-color: white;
+color:#757bc8;}