NerdSports Landing Page

Developer
Matt Cowley
Size
2,407 Kb
Views
109,296
  1. NerdSports Landing Page Previews
  2. NerdSports Landing Page HTML Codes
  3. NerdSports Landing Page CSS Codes

How do I make an nerdsports landing page?

What is a nerdsports landing page? How do you make a nerdsports landing page? This script and codes were developed by Matt Cowley on 12 June 2022, Sunday.

NerdSports Landing Page Previews
IQ Test

NerdSports Landing Page - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>NerdSports Landing Page</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <section class="section"> <article class="article"> <h1 class="site-title"><span>Nerd</span>Sports</h1> <h2 class="site-subtitle">Linus Media Group vs Athletes<br/>...in their own sport</h2> <h2 class="site-subtitle">Brought to you by Vessel</h2> <a href="https://www.vessel.com/shows/nerdsports" class="button" target="_blank">Watch Now</a> </article>
</section>
</body>
</html>

NerdSports Landing Page - Script Codes CSS Codes

@import url("http://fonts.googleapis.com/css?family=Open+Sans:300|Press+Start+2P|Audiowide");
::-moz-selection { background-color: rgb(53, 1, 9); color: rgb(200, 201, 190);
}
::selection { background-color: rgb(53, 1, 9); color: rgb(200, 201, 190);
}
html,
body { height: 100vH; min-height: 100vH; max-height: 100vH; margin: 0;
}
html { background-color: #C7C7CC; background: -webkit-linear-gradient(135deg, #8E8E93 0%, #C7C7CC 50%, #8E8E93 100%); background: linear-gradient(-45deg, #8E8E93 0%, #C7C7CC 50%, #8E8E93 100%);
}
body { background: -webkit-linear-gradient(45deg, rgba(199, 58, 3, 0.8) 0%, rgba(199, 58, 3, 0.8) 10%, rgba(199, 58, 3, 0.2) 20%, rgba(29, 98, 240, 0.2) 80%, rgba(29, 98, 240, 0.8) 90%, rgba(29, 98, 240, 0.8) 100%); background: linear-gradient(45deg, rgba(199, 58, 3, 0.8) 0%, rgba(199, 58, 3, 0.8) 10%, rgba(199, 58, 3, 0.2) 20%, rgba(29, 98, 240, 0.2) 80%, rgba(29, 98, 240, 0.8) 90%, rgba(29, 98, 240, 0.8) 100%); background-size: cover; width: 100%; height: 100%; font-family: "Open Sans", sans-serif; color: rgb(24, 27, 36); overflow: hidden;
}
.section { box-sizing: border-box; width: 100%; height: 100%; padding: 10vW;
}
.article { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: center;
}
.site-title { padding: 1vW 0; margin-bottom: 2vW; font-size: 5vW; font-weight: 700; letter-spacing: 2vW; text-indent: 3vW; text-align: center; text-transform: uppercase; white-space: nowrap; border: 0.5vW solid currentcolor; font-family: 'Audiowide', cursive;
}
.site-title span { vertical-align: -0.75vW; font-size: 4.5vW; font-family: 'Press Start 2P', cursive; color: #1D62F0;
}
.site-title::first-letter { color: #C73A03; /* LTT Color */
}
.site-subtitle { font-size: 2vW; font-weight: 300; letter-spacing: 0.75vW; text-align: center; text-transform: uppercase;
}
.button { margin-top: 0.5vW; letter-spacing: 0.5vW; padding: 1.5vW 2.5vW; color: #fff; background: #333; border: none; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; display: inline-block; text-decoration: none; text-transform: uppercase;
}
.button:hover { box-shadow: 0.3vW 0.3vW 0 #C73A03 inset, 0.7vW 0.7vW 0 rgba(0, 0, 0, 0.3);
}
.button:active { box-shadow: 0.2vW 0.2vW 0 #1D62F0 inset, 0.5vW 0.5vW 0 rgba(0, 0, 0, 0.3); left: 50.5%; bottom: 14.5%;
}
NerdSports Landing Page - Script Codes
NerdSports Landing Page - Script Codes
Home Page Home
Developer Matt Cowley
Username MattCowley
Uploaded June 12, 2022
Rating 3
Size 2,407 Kb
Views 109,296
Do you need developer help for NerdSports Landing Page?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Matt Cowley (MattCowley) Script Codes
Name
Skyblock Landing
Windows 10 Install
OxmeadJB Landing Page
Matilda the Musical Site
Email Signature
Sign
Unreal-Designs.co.uk Client Area Email
UD System - Domain Not Found
The Modern Developer
Dots - Pretty animation
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!