diff --git a/header.jpg b/header.jpg new file mode 100644 index 0000000..23e862e Binary files /dev/null and b/header.jpg differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..4051355 --- /dev/null +++ b/index.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html> + <head> + <title>Startup</title> + <!-- Required meta tags --> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> + <!-- Google Fonts --> + <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet"> + + <!-- Note that the below Bootstrap file is a specific version. If you grab the most + current from Bootstrap website, you will see the button grow transition being a lot faster + than in my video. Use whichever style sheet you like best! --> + <!-- Bootstrap CSS from a CDN. This way you don't have to include the bootstrap file yourself --> + <!-- CSS only --> + <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous"> + + <!-- My own stylesheet --> + <link href="style.css" rel="stylesheet"> + </head> + <body> + <div class="container d-flex align-items-center h-100"> + <div class="row"> + <header class="text-center col-12"> + <h1 class="text-uppercase"><strong>The biggest startup event of the year</strong></h1> + </header> + <div class="buffer col-12"></div> + <section class="text-center col-12"> + <hr> + <a href="https://mailchi.mp/6abbf1fa1707/123213"> + <button class="btn btn-primary btn-xl">Find out more</button> + </a> + </section> + </div> + </div> + </body> +</html> diff --git a/style.css b/style.css new file mode 100644 index 0000000..b492bfb --- /dev/null +++ b/style.css @@ -0,0 +1,56 @@ +body, +html { + width: 100%; + height: 100%; + font-family: 'Montserrat', sans-serif; + + background: url(header.jpg) no-repeat center center fixed; + -webkit-background-size: cover; + -moz-background-size: cover; + -o-background-size: cover; + background-size: cover; + +} +h1 { + font-size: 3rem; + color: #e2dbdb; + +} +hr { + margin: 20px auto; + color: #F05F44; + border: 3px solid #F05F44; + max-width: 65px; + opacity: 1; +} + +.btn { + font-weight: 700; + border-radius: 300px; + text-transform: uppercase; +} + +.btn-primary { + background-color: #f05f44; + border-color: #f05f44; +} + +.btn-primary:hover { + background-color: #ee4b08; + border-color: #ee4b08; + border-width: 4px; +} + +.buffer { + height: 10rem; +} +.btn-xl { + padding: 1rem 2rem; +} + +.btn-primary { + background-color: #F05F44; + border-color: #F05F44; + --bs-btn-hover-bg: #ee4b08; + --bs-btn-hover-border-color: #ee4b08; +} \ No newline at end of file