completed wireframe!
This commit is contained in:
Annika
+71
-22
@@ -34,12 +34,12 @@
|
||||
<div class="row">
|
||||
<div class="col-md-3" id="signup-box">
|
||||
<h4 class="txt-lt">Keep updated</h4>
|
||||
<div class="card">
|
||||
<div class="card bg-blur sq">
|
||||
<div class="card-body">
|
||||
<h5 class="card-subtitle">Tell us about you</h5>
|
||||
<h5 class="card-subtitle txt-lt">Tell us about you</h5>
|
||||
<form>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="col px-0 my-1">
|
||||
<div class="form-floating">
|
||||
<input type="name" class="form-control" id="userName">
|
||||
<label for="userName">Name</label>
|
||||
@@ -47,7 +47,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="col px-0 my-1">
|
||||
<div class="form-floating">
|
||||
<input type="email" class="form-control" id="userEmail">
|
||||
<label for="userEmail">Email</label>
|
||||
@@ -55,13 +55,13 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-8">
|
||||
<div class="col-8 px-0 my-1">
|
||||
<div class="form-floating">
|
||||
<input type="tel" class="form-control" id="userPhone">
|
||||
<label for="userPhone">Phone</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="col-4 px-0 my-1">
|
||||
<div class="form-floating">
|
||||
<input type="tel" maxlength=4 class="form-control" id="userExt">
|
||||
<label for="userExt">Ext.</label>
|
||||
@@ -69,7 +69,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="col px-0 my-1">
|
||||
<div class="form-floating">
|
||||
<textarea class="form-control" id="userComment"></textarea>
|
||||
<label for="userComment">Comments</label>
|
||||
@@ -77,16 +77,16 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="col px-0 my-1">
|
||||
<input type="checkbox" class="form-check-input" id="tosCheck">
|
||||
<label for="tosCheck" class="forom-check-label">
|
||||
<label for="tosCheck" class="form-check-label txt-lt">
|
||||
Agree to receive messages
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<button type="submit" class="btn btn-primary">Submit</button>
|
||||
<div class="col px-0 my-1">
|
||||
<button type="submit" class="btn">Submit</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
@@ -94,35 +94,84 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 offset-1 txt-lt">
|
||||
<div class="left-bar px-2">
|
||||
<h4>The Retro Renaissance is Here!</h4>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas exercitationem impedit nobis delectus aliquam.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section id="pitch-bar" class="container-fluid txt-lt bg-drk">
|
||||
<div class="row">
|
||||
<div class="col-md-5 txt-lt">
|
||||
<div class="col-md-5 txt-lt p-5">
|
||||
<h3>Powerful 16-bit Computing, in an Affordable Package!</h3>
|
||||
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fuga velit nesciunt id error nobis iste sequi hic voluptates ut cupiditate.</p>
|
||||
</div>
|
||||
<div class="col-7">
|
||||
<div class="card hanging-card">
|
||||
<ul class="list-group">
|
||||
<li class="list-group-item">lorem3</li>
|
||||
<li class="list-group-item">lorem3</li>
|
||||
<li class="list-group-item">lorem3</li>
|
||||
<li class="list-group-item">lorem3</li>
|
||||
<li class="list-group-item">lorem3</li>
|
||||
<div class="card hanging-card mx-5 txt-lt bg-trans sq display-6 p-3 px-5">
|
||||
<ul class="list-unstyled">
|
||||
<li>🐈 lorem3</li>
|
||||
<li>🐈 lorem3</li>
|
||||
<li>🐈 lorem3</li>
|
||||
<li>🐈 lorem3</li>
|
||||
<li>🐈 lorem3</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<section id="pitch">
|
||||
<div class="container-fluid">
|
||||
<div class="row h-70">
|
||||
<div class="col-md-3 ps-5">
|
||||
<img class="" src="macboard.jpg" alt="">
|
||||
</div>
|
||||
<div class="col-md-9 pd-15 txt-lt px-5">
|
||||
<h4 class="display-4">🐈 Lorem ipsum dolor sit amet consectetur adipisicing elit.</h4>
|
||||
<p class="fs-4">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-4">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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section id="reviews" class="container-fluid">
|
||||
<div class="row p-5 full-height">
|
||||
<div class="col-md-4 order-md-1">
|
||||
<div class="card full-height sq bg-grey txt-lt">
|
||||
<div class="card-body text-center">
|
||||
<h4 class="fs-1">💯💯💯</h4>
|
||||
<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 class="col-md-4 my-5 ps-md-0">
|
||||
<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 class="col-md-4 my-5 order-md-2 pe-md-0">
|
||||
<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>
|
||||
</main>
|
||||
<footer>
|
||||
|
||||
<section class="bg-grey h-20 txt-lt p-5">
|
||||
<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>
|
||||
<section class="bg-dgry h-10 txt-lt d-flex align-items-center justify-content-center">
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium beatae minus sequi praesentium modi odio numquam?</p>
|
||||
</section>
|
||||
</footer>
|
||||
|
||||
<!-- Bootstrap JavaScript Libraries -->
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 155 KiB |
@@ -33,7 +33,7 @@ header {
|
||||
|
||||
main {
|
||||
/* margin-top: 10vh; */
|
||||
height: 500vh;
|
||||
/* height: 500vh; */
|
||||
}
|
||||
|
||||
#hero-img {
|
||||
@@ -56,12 +56,100 @@ main {
|
||||
color: var(--light-text);
|
||||
}
|
||||
|
||||
.txt-wht {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.bg-drk {
|
||||
background-color: var(--dark-bg);
|
||||
}
|
||||
|
||||
.hanging-card {
|
||||
min-height: 36vh;
|
||||
min-height: 30vh;
|
||||
position: relative;
|
||||
top: 10vh;
|
||||
}
|
||||
|
||||
#pitch {
|
||||
background-image: linear-gradient(135deg, #c90051, #194bd3);
|
||||
}
|
||||
|
||||
img {
|
||||
height: 100%;
|
||||
max-width: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.full-height {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* min Height 70vh */
|
||||
.h-70 {
|
||||
min-height: 70vh;
|
||||
}
|
||||
|
||||
/* Push Down 15vh */
|
||||
.pd-15 {
|
||||
margin-top: 15vh;
|
||||
}
|
||||
|
||||
.left-bar {
|
||||
border-left-width: 0.4em;
|
||||
border-left-style: solid;
|
||||
border-left-color: darkred;
|
||||
}
|
||||
|
||||
.txt-blk {
|
||||
color: black;
|
||||
}
|
||||
|
||||
.sq {
|
||||
border-radius: 0px;
|
||||
}
|
||||
|
||||
.bg-trans {
|
||||
background-color: #00000040;
|
||||
}
|
||||
|
||||
.bg-blur {
|
||||
background-color: transparent;
|
||||
backdrop-filter: blur(8px);
|
||||
}
|
||||
|
||||
.form-control {
|
||||
background-color: #D0D0D080;
|
||||
border-radius: 0px;
|
||||
border-width: 0px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
border-radius: 0px;
|
||||
color: white;
|
||||
background-color: darkred;
|
||||
}
|
||||
|
||||
#reviews, .bg-dgry {
|
||||
background-color: #2e2e2e;
|
||||
}
|
||||
|
||||
#reviews .row {
|
||||
min-height: 40vh;
|
||||
}
|
||||
|
||||
.bg-grey {
|
||||
background-color: #777374;
|
||||
}
|
||||
|
||||
.txt-red {
|
||||
color: darkred;
|
||||
}
|
||||
|
||||
/* min Height 24vh */
|
||||
.h-20 {
|
||||
min-height: 20vh;
|
||||
}
|
||||
|
||||
.h-10 {
|
||||
min-height: 10vh;
|
||||
}
|
||||
Reference in New Issue
Block a user