2022-05-13 10:44:48 -06:00
<!doctype html>
< html lang = "en" >
2022-05-13 12:03:03 -06:00
< head >
< title > Tomodachi< / title >
<!-- Required meta tags -->
< meta charset = "utf-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1, shrink-to-fit=no" >
<!-- Custom Fonts -->
<!-- MDI -->
< link rel = 'stylesheet' href = 'https://cdn.jsdelivr.net/npm/@mdi/font@5.9.55/css/materialdesignicons.min.css' >
<!-- Bootstrap CSS v5.0.2 -->
< link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
integrity = "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin = "anonymous" >
<!-- Custom CSS -->
< link rel = "stylesheet" href = "style.css" >
< / head >
< body >
< header >
2022-05-13 12:43:52 -06:00
< div class = "site-title" >
2022-05-13 14:33:11 -06:00
< i class = "mdi mdi-desktop-classic mdi-48px pe-1 ps-md-4 pe-md-3" > < / i >
2022-05-13 12:43:52 -06:00
< h1 > TOMODACHI< / h1 >
< / div >
2022-05-13 12:03:03 -06:00
< / header >
< main >
< section id = "hero-img" class = "container-fluid p-5" >
< div class = "row" >
2022-05-13 16:03:01 -06:00
< div class = "col-md-3 subway" id = "signup-box" >
2022-05-13 12:43:52 -06:00
< h4 class = "txt-lt" > Keep updated< / h4 >
2022-05-13 14:03:43 -06:00
< div class = "card bg-blur sq" >
2022-05-13 12:03:03 -06:00
< div class = "card-body" >
2022-05-13 14:03:43 -06:00
< h5 class = "card-subtitle txt-lt" > Tell us about you< / h5 >
2022-05-13 12:03:03 -06:00
< form >
< div class = "row" >
2022-05-13 14:03:43 -06:00
< div class = "col px-0 my-1" >
2022-05-13 12:03:03 -06:00
< div class = "form-floating" >
< input type = "name" class = "form-control" id = "userName" >
< label for = "userName" > Name< / label >
< / div >
< / div >
< / div >
< div class = "row" >
2022-05-13 14:03:43 -06:00
< div class = "col px-0 my-1" >
2022-05-13 12:03:03 -06:00
< div class = "form-floating" >
< input type = "email" class = "form-control" id = "userEmail" >
< label for = "userEmail" > Email< / label >
< / div >
< / div >
< / div >
< div class = "row" >
2022-05-13 14:03:43 -06:00
< div class = "col-8 px-0 my-1" >
2022-05-13 12:03:03 -06:00
< div class = "form-floating" >
< input type = "tel" class = "form-control" id = "userPhone" >
< label for = "userPhone" > Phone< / label >
< / div >
< / div >
2022-05-13 14:03:43 -06:00
< div class = "col-4 px-0 my-1" >
2022-05-13 12:03:03 -06:00
< div class = "form-floating" >
< input type = "tel" maxlength = 4 class = "form-control" id = "userExt" >
< label for = "userExt" > Ext.< / label >
< / div >
< / div >
< / div >
< div class = "row" >
2022-05-13 14:03:43 -06:00
< div class = "col px-0 my-1" >
2022-05-13 12:03:03 -06:00
< div class = "form-floating" >
< textarea class = "form-control" id = "userComment" > < / textarea >
< label for = "userComment" > Comments< / label >
< / div >
< / div >
< / div >
< div class = "row" >
2022-05-13 14:03:43 -06:00
< div class = "col px-0 my-1" >
2022-05-13 12:03:03 -06:00
< input type = "checkbox" class = "form-check-input" id = "tosCheck" >
2022-05-13 14:03:43 -06:00
< label for = "tosCheck" class = "form-check-label txt-lt" >
2022-05-13 12:03:03 -06:00
Agree to receive messages
< / label >
< / div >
< / div >
< div class = "row" >
2022-05-13 14:03:43 -06:00
< div class = "col px-0 my-1" >
< button type = "submit" class = "btn" > Submit< / button >
2022-05-13 12:03:03 -06:00
< / div >
< / div >
< / form >
< / div >
< / div >
< / div >
2022-05-13 14:33:11 -06:00
< div class = "col-6 offset-1 d-none d-md-block txt-lt" >
2022-05-13 14:03:43 -06:00
< div class = "left-bar px-2" >
2022-05-13 16:03:01 -06:00
< h4 class = "tomodachi fs-4" > The Retro Renaissance is Here!< / h4 >
< p class = "subway" > Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas exercitationem impedit nobis delectus aliquam.< / p >
2022-05-13 14:03:43 -06:00
< / div >
2022-05-13 12:03:03 -06:00
< / div >
< / div >
< / section >
2022-05-13 12:43:52 -06:00
< section id = "pitch-bar" class = "container-fluid txt-lt bg-drk" >
2022-05-13 12:03:03 -06:00
< div class = "row" >
2022-05-13 14:33:11 -06:00
< div class = "col-md-7 order-md-1" >
2022-05-13 16:03:01 -06:00
< div class = "card hanging-card mx-2 my-3 my-md-0 mx-md-5 txt-lt bg-trans sq fs-2 p-3 px-4 px-md-5" >
< ul class = "list-unstyled dyn-fsize-3 subway" >
< li > < i class = "mdi mdi-chip" > < / i > Blazing Fast 50MHz eZ80< / li >
< li > < i class = "mdi mdi-memory" > < / i > 4MiB Low Latency SRAM< / li >
< li > < i class = "mdi mdi-space-invaders" > < / i > Full 15-bit Color Graphics< / li >
< li > < i class = "mdi mdi-speaker" > < / i > Stereo Wavetable Synthesis< / li >
< li > < i class = "mdi mdi-keyboard" > < / i > Compact Mechanical Keyboard< / li >
2022-05-13 12:43:52 -06:00
< / ul >
< / div >
< / div >
2022-05-13 14:33:11 -06:00
< div class = "col-md-5 txt-lt p-5" >
2022-05-13 16:03:01 -06:00
< h3 class = "fs-5 fs-md-4 tomodachi" > Powerful 24-bit Computing, in an Affordable Package!< / h3 >
< p class = "subway" > Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fuga velit nesciunt id error nobis iste sequi hic voluptates ut cupiditate.< / p >
2022-05-13 14:33:11 -06:00
< / div >
2022-05-13 12:03:03 -06:00
< / div >
< / section >
2022-05-13 14:03:43 -06:00
< section id = "pitch" >
< div class = "container-fluid" >
2022-05-13 14:33:11 -06:00
< div class = "row" >
2022-05-13 15:05:25 -06:00
< div class = "col-md-3 p-0" >
2022-05-13 14:03:43 -06:00
< img class = "" src = "macboard.jpg" alt = "" >
< / div >
2022-05-13 15:05:25 -06:00
< div class = "col-md-9 p-5 mt-md-15vh txt-lt" >
2022-05-13 16:03:01 -06:00
< h4 class = "fs-4 fs-md-3 tomodachi" > < i class = "mdi mdi-desktop-classic" > < / i > Lorem ipsum dolor sit amet consectetur adipisicing elit.< / h4 >
< p class = "fs-5 subway" > Lorem ipsum dolor sit, amet consectetur adipisicing elit. Blanditiis molestias eius asperiores vel, reprehenderit eveniet ipsa esse veritatis similique, veniam animi aperiam sunt! Autem.< / p >
< p class = "fs-5 subway" > Lorem ipsum dolor sit, amet consectetur adipisicing elit. Blanditiis molestias eius asperiores vel, reprehenderit eveniet ipsa esse veritatis similique, veniam animi aperiam sunt! Autem.< / p >
2022-05-13 14:03:43 -06:00
< / div >
< / div >
< / div >
< / section >
2022-05-13 16:03:01 -06:00
< section id = "reviews" class = "container-fluid bg-dgry subway" >
2022-05-13 15:05:25 -06:00
< div class = "row p-3 p-md-5 full-height mh-40vh" >
2022-05-13 14:33:11 -06:00
< div class = "col-md-4 my-2 my-md-0 order-md-1" >
2022-05-13 14:03:43 -06:00
< div class = "card full-height sq bg-grey txt-lt" >
< div class = "card-body text-center" >
2022-05-13 16:03:01 -06:00
< h4 class = "fs-1 txt-red" >
< i class = "mdi mdi-space-invaders" > < / i >
< i class = "mdi mdi-space-invaders" > < / i >
< i class = "mdi mdi-space-invaders" > < / i >
< / h4 >
2022-05-13 14:03:43 -06:00
< p class = "fs-5" > Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, inventore officiis? Porro illum cupiditate similique modi.< / p >
< p class = "fs-6 txt-red fw-bold" > Lorem ipsum dolor sit amet consectetur.< / p >
< / div >
< / div >
< / div >
2022-05-13 14:33:11 -06:00
< div class = "col-md-4 my-2 my-md-5 ps-md-0" >
2022-05-13 14:03:43 -06:00
< div class = "card full-height sq bg-grey txt-lt" >
< div class = "card-body text-center" >
< p class = "fs-5" > Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, inventore officiis? Porro illum cupiditate similique modi.< / p >
< p class = "fs-6 txt-red fw-bold" > Lorem ipsum dolor sit amet consectetur.< / p >
< / div >
< / div >
< / div >
2022-05-13 14:33:11 -06:00
< div class = "col-md-4 my-2 my-md-5 order-md-2 pe-md-0" >
2022-05-13 14:03:43 -06:00
< div class = "card full-height sq bg-grey txt-lt" >
< div class = "card-body text-center" >
< p class = "fs-5" > Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, inventore officiis? Porro illum cupiditate similique modi.< / p >
< p class = "fs-6 txt-red fw-bold" > Lorem ipsum dolor sit amet consectetur.< / p >
< / div >
< / div >
< / div >
< / div >
< / section >
2022-05-13 12:03:03 -06:00
< / main >
< footer >
2022-05-13 16:03:01 -06:00
< section class = "bg-grey mh-20vh txt-lt p-5 subway" >
2022-05-13 14:03:43 -06:00
< h4 > Lorem ipsum, dolor sit amet consectetur adipisicing elit.< / h4 >
< p > Lorem ipsum dolor, sit amet consectetur adipisicing elit. Error tempore similique enim necessitatibus nisi.< / p >
< / section >
2022-05-13 16:03:01 -06:00
< section class = "bg-dgry mh-10vh txt-lt d-flex align-items-center justify-content-center p-1 subway" >
2022-05-13 14:03:43 -06:00
< p > Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium beatae minus sequi praesentium modi odio numquam?< / p >
< / section >
2022-05-13 12:03:03 -06:00
< / footer >
<!-- Bootstrap JavaScript Libraries -->
< script src = "https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
integrity = "sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
crossorigin = "anonymous" > < / script >
< script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"
integrity = "sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF"
crossorigin = "anonymous" > < / script >
< / body >
2022-05-13 10:44:48 -06:00
< / html >
