diff --git a/about.html b/about.html index df1043036..64bfad02c 100644 --- a/about.html +++ b/about.html @@ -6,6 +6,7 @@ Document -

ABOUT

+

+ \ No newline at end of file diff --git a/index.html b/index.html index d01f779ff..6f1c2c5ce 100644 --- a/index.html +++ b/index.html @@ -4,8 +4,77 @@ Document + + + + + + + + + + +
+

VALORANT

+ +
+ +
+ +
+ +
+
+ + + + +
+ +
+

+ 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. +

+
+
+ + - \ No newline at end of file + diff --git a/style/index.css b/style/index.css index 440e53514..4bb702dbf 100644 --- a/style/index.css +++ b/style/index.css @@ -1 +1,182 @@ -/* Add CSS styling here */ \ No newline at end of file +/* 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;} \ No newline at end of file diff --git a/valo.css b/valo.css new file mode 100644 index 000000000..1977d2e56 --- /dev/null +++ b/valo.css @@ -0,0 +1,215 @@ +/* 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;} + +/* Responsive Design*/ +/* Tablet */ +@media(max-width:800px){ + #about{ + height:90vh; + background-position:right; + } +#about div{ + width:35%; + margin-right:5%; +} +.text div{ + width:65%; +} +} + +/*Phone*/ +@media(max-width:500px){ + nav{ + flex-direction:column; + } +#about{ +background-image:none; +background-color:purple; +height:auto; +justify-content:center; +text-align:center; +} +#about div{ + width:90%; + margin-right:0; +} \ No newline at end of file diff --git a/valo.html b/valo.html new file mode 100644 index 000000000..6f1c2c5ce --- /dev/null +++ b/valo.html @@ -0,0 +1,80 @@ + + + + + + Document + + + + + + + + + + + + +
+

VALORANT

+ +
+ +
+ +
+ +
+
+ + + + +
+ +
+

+ 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. +

+
+
+ + + +