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>
<header>
<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>
</div>
</header>
@@ -93,7 +93,7 @@
</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">
<h4>The Retro Renaissance is Here!</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas exercitationem impedit nobis delectus aliquam.</p>
@@ -103,12 +103,8 @@
</section>
<section id="pitch-bar" class="container-fluid txt-lt bg-drk">
<div class="row">
<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 mx-5 txt-lt bg-trans sq display-6 p-3 px-5">
<div class="col-md-7 order-md-1">
<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">
<ul class="list-unstyled">
<li>🐈 lorem3</li>
<li>🐈 lorem3</li>
@@ -118,15 +114,19 @@
</ul>
</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>
</section>
<section id="pitch">
<div class="container-fluid">
<div class="row h-70">
<div class="col-md-3 ps-5">
<div class="row">
<div class="col-md-3 p-0 ps-md-5">
<img class="" src="macboard.jpg" alt="">
</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>
<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>
</section>
<section id="reviews" class="container-fluid">
<div class="row p-5 full-height">
<div class="col-md-4 order-md-1">
<div class="row p-3 p-md-5 full-height">
<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-body text-center">
<h4 class="fs-1">💯💯💯</h4>
@@ -145,7 +145,7 @@
</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-body text-center">
<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 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-body text-center">
<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>
<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">
<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>
</section>
</footer>