Annika/tomodachi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

completed mobile layout

Browse Source
This commit is contained in:
Annika
2022-05-13 14:33:11 -06:00
parent b245d79936
commit b2e5fdfacc
2 changed files with 29 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+16 -16
View File
@@ -25,7 +25,7 @@
<body> <body>
<header> <header>
<div class="site-title"> <div class="site-title">
<i class="mdi mdi-desktop-classic mdi-48px px-4"></i> <i class="mdi mdi-desktop-classic mdi-48px pe-1 ps-md-4 pe-md-3"></i>
<h1>TOMODACHI</h1> <h1>TOMODACHI</h1>
</div> </div>
</header> </header>
@@ -93,7 +93,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="col-6 offset-1 txt-lt"> <div class="col-6 offset-1 d-none d-md-block txt-lt">
<div class="left-bar px-2"> <div class="left-bar px-2">
<h4>The Retro Renaissance is Here!</h4> <h4>The Retro Renaissance is Here!</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas exercitationem impedit nobis delectus aliquam.</p> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas exercitationem impedit nobis delectus aliquam.</p>
@@ -103,12 +103,8 @@
</section> </section>
<section id="pitch-bar" class="container-fluid txt-lt bg-drk"> <section id="pitch-bar" class="container-fluid txt-lt bg-drk">
<div class="row"> <div class="row">
<div class="col-md-5 txt-lt p-5"> <div class="col-md-7 order-md-1">
<h3>Powerful 16-bit Computing, in an Affordable Package!</h3> <div class="card hanging-card mx-2 my-3 my-md-0 mx-md-5 txt-lt bg-trans sq display-6 p-3 px-5">
<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 mx-5 txt-lt bg-trans sq display-6 p-3 px-5">
<ul class="list-unstyled"> <ul class="list-unstyled">
<li>🐈 lorem3</li> <li>🐈 lorem3</li>
<li>🐈 lorem3</li> <li>🐈 lorem3</li>
@@ -118,15 +114,19 @@
</ul> </ul>
</div> </div>
</div> </div>
<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> </div>
</section> </section>
<section id="pitch"> <section id="pitch">
<div class="container-fluid"> <div class="container-fluid">
<div class="row h-70"> <div class="row">
<div class="col-md-3 ps-5"> <div class="col-md-3 p-0 ps-md-5">
<img class="" src="macboard.jpg" alt=""> <img class="" src="macboard.jpg" alt="">
</div> </div>
<div class="col-md-9 pd-15 txt-lt px-5"> <div class="col-md-9 p-5 pd-15 txt-lt">
<h4 class="display-4">🐈 Lorem ipsum dolor sit amet consectetur adipisicing elit.</h4> <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>
<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>
@@ -135,8 +135,8 @@
</div> </div>
</section> </section>
<section id="reviews" class="container-fluid"> <section id="reviews" class="container-fluid">
<div class="row p-5 full-height"> <div class="row p-3 p-md-5 full-height">
<div class="col-md-4 order-md-1"> <div class="col-md-4 my-2 my-md-0 order-md-1">
<div class="card full-height sq bg-grey txt-lt"> <div class="card full-height sq bg-grey txt-lt">
<div class="card-body text-center"> <div class="card-body text-center">
<h4 class="fs-1">💯💯💯</h4> <h4 class="fs-1">💯💯💯</h4>
@@ -145,7 +145,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="col-md-4 my-5 ps-md-0"> <div class="col-md-4 my-2 my-md-5 ps-md-0">
<div class="card full-height sq bg-grey txt-lt"> <div class="card full-height sq bg-grey txt-lt">
<div class="card-body text-center"> <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-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, inventore officiis? Porro illum cupiditate similique modi.</p>
@@ -153,7 +153,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="col-md-4 my-5 order-md-2 pe-md-0"> <div class="col-md-4 my-2 my-md-5 order-md-2 pe-md-0">
<div class="card full-height sq bg-grey txt-lt"> <div class="card full-height sq bg-grey txt-lt">
<div class="card-body text-center"> <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-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, inventore officiis? Porro illum cupiditate similique modi.</p>
@@ -169,7 +169,7 @@
<h4>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</h4> <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> <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Error tempore similique enim necessitatibus nisi.</p>
</section> </section>
<section class="bg-dgry h-10 txt-lt d-flex align-items-center justify-content-center"> <section class="bg-dgry h-10 txt-lt d-flex align-items-center justify-content-center p-1">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium beatae minus sequi praesentium modi odio numquam?</p> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium beatae minus sequi praesentium modi odio numquam?</p>
</section> </section>
</footer> </footer>
style.css
+10 -7
View File
@@ -47,7 +47,7 @@ main {
} }
#pitch-bar { #pitch-bar {
height: 30vh; min-height: 30vh;
background-color: var(--dark-bg); background-color: var(--dark-bg);
color: var(--light-text); color: var(--light-text);
} }
@@ -64,12 +64,20 @@ main {
background-color: var(--dark-bg); background-color: var(--dark-bg);
} }
.hanging-card { @media only screen and (min-width: 768px) {
.hanging-card {
min-height: 30vh; min-height: 30vh;
position: relative; position: relative;
top: 10vh; top: 10vh;
}
/* Push Down 15vh */
.pd-15 {
margin-top: 15vh;
}
} }
#pitch { #pitch {
background-image: linear-gradient(135deg, #c90051, #194bd3); background-image: linear-gradient(135deg, #c90051, #194bd3);
} }
@@ -89,11 +97,6 @@ img {
min-height: 70vh; min-height: 70vh;
} }
/* Push Down 15vh */
.pd-15 {
margin-top: 15vh;
}
.left-bar { .left-bar {
border-left-width: 0.4em; border-left-width: 0.4em;
border-left-style: solid; border-left-style: solid;