Properly fixed positioning apps
This commit is contained in:
parent
d27a781ac5
commit
06b0f46e64
74
index.html
74
index.html
|
@ -17,86 +17,118 @@
|
|||
</div>
|
||||
|
||||
</li>
|
||||
<div style="display: flex;">
|
||||
<div class="appcontainer">
|
||||
<div class="burgerbox">
|
||||
<li><img src="https://www.designyourway.net/drb/wp-content/uploads/2017/04/Nature-Wallpaper-Desktop-Background-101-1-1600x900.jpg" style="position: static;"></li>
|
||||
<li><img src="https://www.designyourway.net/drb/wp-content/uploads/2017/04/Nature-Wallpaper-Desktop-Background-101-1-1600x900.jpg"></li>
|
||||
<li><h>BurgerNotes</h></li>
|
||||
<li><p>iOS: v1.0</p></li>
|
||||
<li><p style="">Android: v1.0</p></li>
|
||||
<li><p>Linux: v1.0</p></li>
|
||||
<li><p>Web: v1.0</p></li><a href="https://hectabit.org" style="background-color: lightblue;display: flex;height: 100%;text-align: center;flex-direction: column;justify-content: center;margin: 5px;border-radius: 8px;text-decoration: none;color: black;font-size: 20px;">Get</a></li>
|
||||
<li><p>Web: v1.0</p></li><a href="https://hectabit.org" class="burgerbutton">Get</a></li>
|
||||
</div>
|
||||
<div class="burgerbox">
|
||||
<li><img src="https://www.designyourway.net/drb/wp-content/uploads/2017/04/Nature-Wallpaper-Desktop-Background-101-1-1600x900.jpg" style="position: static;"></li>
|
||||
<li><img src="https://www.designyourway.net/drb/wp-content/uploads/2017/04/Nature-Wallpaper-Desktop-Background-101-1-1600x900.jpg"></li>
|
||||
<li><h>BurgerNotes</h></li>
|
||||
<li><p>iOS: v1.0</p></li>
|
||||
<li><p style="">Android: v1.0</p></li>
|
||||
<li><p>Linux: v1.0</p></li>
|
||||
<li><p>Web: v1.0</p></li><a href="https://hectabit.org" style="background-color: lightblue;display: flex;height: 100%;text-align: center;flex-direction: column;justify-content: center;margin: 5px;border-radius: 8px;text-decoration: none;color: black;font-size: 20px;">Get</a></li>
|
||||
<li><p>Web: v1.0</p></li><a href="https://hectabit.org" class="burgerbutton">Get</a></li>
|
||||
</div>
|
||||
<div class="burgerbox">
|
||||
<li><img src="https://www.designyourway.net/drb/wp-content/uploads/2017/04/Nature-Wallpaper-Desktop-Background-101-1-1600x900.jpg" style="position: static;"></li>
|
||||
<li><img src="https://www.designyourway.net/drb/wp-content/uploads/2017/04/Nature-Wallpaper-Desktop-Background-101-1-1600x900.jpg"></li>
|
||||
<li><h>BurgerNotes</h></li>
|
||||
<li><p>iOS: v1.0</p></li>
|
||||
<li><p style="">Android: v1.0</p></li>
|
||||
<li><p>Linux: v1.0</p></li>
|
||||
<li><p>Web: v1.0</p></li><a href="https://hectabit.org" style="background-color: lightblue;display: flex;height: 100%;text-align: center;flex-direction: column;justify-content: center;margin: 5px;border-radius: 8px;text-decoration: none;color: black;font-size: 20px;">Get</a></li>
|
||||
<li><p>Web: v1.0</p></li><a href="https://hectabit.org" class="burgerbutton">Get</a></li>
|
||||
</div>
|
||||
<div class="burgerbox">
|
||||
<li><img src="https://www.designyourway.net/drb/wp-content/uploads/2017/04/Nature-Wallpaper-Desktop-Background-101-1-1600x900.jpg" style="position: static;"></li>
|
||||
<li><img src="https://www.designyourway.net/drb/wp-content/uploads/2017/04/Nature-Wallpaper-Desktop-Background-101-1-1600x900.jpg"></li>
|
||||
<li><h>BurgerNotes</h></li>
|
||||
<li><p>iOS: v1.0</p></li>
|
||||
<li><p style="">Android: v1.0</p></li>
|
||||
<li><p>Linux: v1.0</p></li>
|
||||
<li><p>Web: v1.0</p></li><a href="https://hectabit.org" style="background-color: lightblue;display: flex;height: 100%;text-align: center;flex-direction: column;justify-content: center;margin: 5px;border-radius: 8px;text-decoration: none;color: black;font-size: 20px;">Get</a></li>
|
||||
<li><p>Web: v1.0</p></li><a href="https://hectabit.org" class="burgerbutton">Get</a></li>
|
||||
</div>
|
||||
<div class="burgerbox">
|
||||
<li><img src="https://www.designyourway.net/drb/wp-content/uploads/2017/04/Nature-Wallpaper-Desktop-Background-101-1-1600x900.jpg" style="position: static;"></li>
|
||||
<li><img src="https://www.designyourway.net/drb/wp-content/uploads/2017/04/Nature-Wallpaper-Desktop-Background-101-1-1600x900.jpg"></li>
|
||||
<li><h>BurgerNotes</h></li>
|
||||
<li><p>iOS: v1.0</p></li>
|
||||
<li><p style="">Android: v1.0</p></li>
|
||||
<li><p>Linux: v1.0</p></li>
|
||||
<li><p>Web: v1.0</p></li><a href="https://hectabit.org" style="background-color: lightblue;display: flex;height: 100%;text-align: center;flex-direction: column;justify-content: center;margin: 5px;border-radius: 8px;text-decoration: none;color: black;font-size: 20px;">Get</a></li>
|
||||
<li><p>Web: v1.0</p></li><a href="https://hectabit.org" class="burgerbutton">Get</a></li>
|
||||
</div>
|
||||
<div class="burgerbox">
|
||||
<li><img src="https://www.designyourway.net/drb/wp-content/uploads/2017/04/Nature-Wallpaper-Desktop-Background-101-1-1600x900.jpg" style="position: static;"></li>
|
||||
<li><img src="https://www.designyourway.net/drb/wp-content/uploads/2017/04/Nature-Wallpaper-Desktop-Background-101-1-1600x900.jpg"></li>
|
||||
<li><h>BurgerNotes</h></li>
|
||||
<li><p>iOS: v1.0</p></li>
|
||||
<li><p style="">Android: v1.0</p></li>
|
||||
<li><p>Linux: v1.0</p></li>
|
||||
<li><p>Web: v1.0</p></li><a href="https://hectabit.org" style="background-color: lightblue;display: flex;height: 100%;text-align: center;flex-direction: column;justify-content: center;margin: 5px;border-radius: 8px;text-decoration: none;color: black;font-size: 20px;">Get</a></li>
|
||||
<li><p>Web: v1.0</p></li><a href="https://hectabit.org" class="burgerbutton">Get</a></li>
|
||||
</div>
|
||||
<div class="burgerbox">
|
||||
<li><img src="https://www.designyourway.net/drb/wp-content/uploads/2017/04/Nature-Wallpaper-Desktop-Background-101-1-1600x900.jpg" style="position: static;"></li>
|
||||
<li><img src="https://www.designyourway.net/drb/wp-content/uploads/2017/04/Nature-Wallpaper-Desktop-Background-101-1-1600x900.jpg"></li>
|
||||
<li><h>BurgerNotes</h></li>
|
||||
<li><p>iOS: v1.0</p></li>
|
||||
<li><p style="">Android: v1.0</p></li>
|
||||
<li><p>Linux: v1.0</p></li>
|
||||
<li><p>Web: v1.0</p></li><a href="https://hectabit.org" style="background-color: lightblue;display: flex;height: 100%;text-align: center;flex-direction: column;justify-content: center;margin: 5px;border-radius: 8px;text-decoration: none;color: black;font-size: 20px;">Get</a></li>
|
||||
<li><p>Web: v1.0</p></li><a href="https://hectabit.org" class="burgerbutton">Get</a></li>
|
||||
</div>
|
||||
<div class="burgerbox">
|
||||
<li><img src="https://www.designyourway.net/drb/wp-content/uploads/2017/04/Nature-Wallpaper-Desktop-Background-101-1-1600x900.jpg" style="position: static;"></li>
|
||||
<li><img src="https://www.designyourway.net/drb/wp-content/uploads/2017/04/Nature-Wallpaper-Desktop-Background-101-1-1600x900.jpg"></li>
|
||||
<li><h>BurgerNotes</h></li>
|
||||
<li><p>iOS: v1.0</p></li>
|
||||
<li><p style="">Android: v1.0</p></li>
|
||||
<li><p>Linux: v1.0</p></li>
|
||||
<li><p>Web: v1.0</p></li><a href="https://hectabit.org" style="background-color: lightblue;display: flex;height: 100%;text-align: center;flex-direction: column;justify-content: center;margin: 5px;border-radius: 8px;text-decoration: none;color: black;font-size: 20px;">Get</a></li>
|
||||
<li><p>Web: v1.0</p></li><a href="https://hectabit.org" class="burgerbutton">Get</a></li>
|
||||
</div>
|
||||
<div class="burgerbox">
|
||||
<li><img src="https://www.designyourway.net/drb/wp-content/uploads/2017/04/Nature-Wallpaper-Desktop-Background-101-1-1600x900.jpg" style="position: static;"></li>
|
||||
<li><img src="https://www.designyourway.net/drb/wp-content/uploads/2017/04/Nature-Wallpaper-Desktop-Background-101-1-1600x900.jpg"></li>
|
||||
<li><h>BurgerNotes</h></li>
|
||||
<li><p>iOS: v1.0</p></li>
|
||||
<li><p style="">Android: v1.0</p></li>
|
||||
<li><p>Linux: v1.0</p></li>
|
||||
<li><p>Web: v1.0</p></li><a href="https://hectabit.org" style="background-color: lightblue;display: flex;height: 100%;text-align: center;flex-direction: column;justify-content: center;margin: 5px;border-radius: 8px;text-decoration: none;color: black;font-size: 20px;">Get</a></li>
|
||||
<li><p>Web: v1.0</p></li><a href="https://hectabit.org" class="burgerbutton">Get</a></li>
|
||||
</div>
|
||||
<div class="burgerbox">
|
||||
<li><img src="https://www.designyourway.net/drb/wp-content/uploads/2017/04/Nature-Wallpaper-Desktop-Background-101-1-1600x900.jpg" style="position: static;"></li>
|
||||
<li><img src="https://www.designyourway.net/drb/wp-content/uploads/2017/04/Nature-Wallpaper-Desktop-Background-101-1-1600x900.jpg"></li>
|
||||
<li><h>BurgerNotes</h></li>
|
||||
<li><p>iOS: v1.0</p></li>
|
||||
<li><p style="">Android: v1.0</p></li>
|
||||
<li><p>Linux: v1.0</p></li>
|
||||
<li><p>Web: v1.0</p></li><a href="https://hectabit.org" style="background-color: lightblue;display: flex;height: 100%;text-align: center;flex-direction: column;justify-content: center;margin: 5px;border-radius: 8px;text-decoration: none;color: black;font-size: 20px;">Get</a></li>
|
||||
<li><p>Web: v1.0</p></li><a href="https://hectabit.org" class="burgerbutton">Get</a></li>
|
||||
</div>
|
||||
<div class="burgerbox">
|
||||
<li><img src="https://www.designyourway.net/drb/wp-content/uploads/2017/04/Nature-Wallpaper-Desktop-Background-101-1-1600x900.jpg"></li>
|
||||
<li><h>BurgerNotes</h></li>
|
||||
<li><p>iOS: v1.0</p></li>
|
||||
<li><p style="">Android: v1.0</p></li>
|
||||
<li><p>Linux: v1.0</p></li>
|
||||
<li><p>Web: v1.0</p></li><a href="https://hectabit.org" class="burgerbutton">Get</a></li>
|
||||
</div>
|
||||
<div class="burgerbox">
|
||||
<li><img src="https://www.designyourway.net/drb/wp-content/uploads/2017/04/Nature-Wallpaper-Desktop-Background-101-1-1600x900.jpg"></li>
|
||||
<li><h>BurgerNotes</h></li>
|
||||
<li><p>iOS: v1.0</p></li>
|
||||
<li><p style="">Android: v1.0</p></li>
|
||||
<li><p>Linux: v1.0</p></li>
|
||||
<li><p>Web: v1.0</p></li><a href="https://hectabit.org" class="burgerbutton">Get</a></li>
|
||||
</div>
|
||||
<div class="burgerbox">
|
||||
<li><img src="https://www.designyourway.net/drb/wp-content/uploads/2017/04/Nature-Wallpaper-Desktop-Background-101-1-1600x900.jpg"></li>
|
||||
<li><h>BurgerNotes</h></li>
|
||||
<li><p>iOS: v1.0</p></li>
|
||||
<li><p style="">Android: v1.0</p></li>
|
||||
<li><p>Linux: v1.0</p></li>
|
||||
<li><p>Web: v1.0</p></li><a href="https://hectabit.org" class="burgerbutton">Get</a></li>
|
||||
</div>
|
||||
<div class="burgerbox">
|
||||
<li><img src="https://www.designyourway.net/drb/wp-content/uploads/2017/04/Nature-Wallpaper-Desktop-Background-101-1-1600x900.jpg"></li>
|
||||
<li><h>BurgerNotes</h></li>
|
||||
<li><p>iOS: v1.0</p></li>
|
||||
<li><p style="">Android: v1.0</p></li>
|
||||
<li><p>Linux: v1.0</p></li>
|
||||
<li><p>Web: v1.0</p></li><a href="https://hectabit.org" class="burgerbutton">Get</a></li>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
20
styles.css
20
styles.css
|
@ -64,3 +64,23 @@ img {
|
|||
text-decoration: none;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.appcontainer {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.burgerbutton {
|
||||
background-color: lightblue;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
margin: 5px;
|
||||
border-radius: 8px;
|
||||
text-decoration: none;
|
||||
color: black;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
|
Reference in New Issue