distro-depot-mockup/index.html

127 lines
3.5 KiB
HTML

<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="operating-system-card">
<div class="distro-header">
<div>
<h2>Operating System</h2>
</div>
<div>
<img class="distro-icon" src="assets/distro-fedora.png">
</div>
</div>
<div class="distro-links">
<a>wiki</a><a>download</a><a>website</a>
</div>
<p class="os-quick-summary">
Non nesciunt voluptatibus numquam quidem in fugit. Error perspiciatis qui tempore labore architecto vitae. Id et ut harum molestiae fugit cupiditate. Nesciunt quidem rerum exercitationem aperiam optio cum dolorum quia.
</p>
<div class="operating-system-columns">
<span>
<h3>Freedom</h3>
<ul>
<li p>Ducimus fuga</li>
<li p>Quaerat nostrum</li>
<li p>Ducimus fuga</li>
<li p>Quaerat nostrum</li>
<li p>Quaerat nostrum</li>
<br>
<li n>Possimus delectus</li>
<li n>Possimus delectus</li>
<li n>Possimus delectus</li>
<li n>Possimus delectus</li>
</ul>
</span>
<span>
<h3>Usability</h3>
<ul>
<li p>Ducimus fuga</li>
<li p>Quaerat nostrum</li>
<li p>Ducimus fuga</li>
<li p>Ducimus fuga</li>
<li p>Quaerat nostrum</li>
<li p>Quaerat nostrum</li>
<br>
<li n>Possimus delectus</li>
<li n>Possimus delectus</li>
</ul>
</span>
<span>
<h3>Privacy</h3>
<ul>
<li p>Ducimus fuga</li>
<li p>Quaerat nostrum</li>
<br>
<li n>Possimus delectus</li>
<li n>Possimus delectus</li>
<li n>Possimus delectus</li>
<li n>Possimus delectus</li>
</ul>
<p>
</p>
</span>
</div>
<div class="star-columns">
<span>
<img class="star" src="assets/icons_star.svg">
<img class="star" src="assets/icons_star.svg">
<img class="star" src="assets/icons_star.svg">
<img class="star" src="assets/icons_star-empty.svg">
<img class="star" src="assets/icons_star-empty.svg">
</span>
<span>
<img class="star" src="assets/icons_star.svg">
<img class="star" src="assets/icons_star.svg">
<img class="star" src="assets/icons_star.svg">
<img class="star" src="assets/icons_star-empty.svg">
<img class="star" src="assets/icons_star-empty.svg">
</span>
<span>
<img class="star" src="assets/icons_star.svg">
<img class="star" src="assets/icons_star.svg">
<img class="star" src="assets/icons_star.svg">
<img class="star" src="assets/icons_star-empty.svg">
<img class="star" src="assets/icons_star-empty.svg">
</span>
</div>
</div>
<div class="operating-system-card">
<h2>Operating System</h2>
<p class="os-quick-summary">
Non nesciunt voluptatibus numquam quidem in fugit. Error perspiciatis qui tempore labore architecto vitae. Id et ut harum molestiae fugit cupiditate. Nesciunt quidem rerum exercitationem aperiam optio cum dolorum quia.
</p>
<div class="operating-system-columns">
<span>
<h3>Freedom</h3>
<ul>
<li p>a</li>
<li n>a</li>
<li p>a</li>
</ul>
<h2 class="score"><span>5/10</span></h2>
</span>
<span>
<h3>Usability</h3>
<ul>
<li p>a</li>
<li n>a</li>
<li p>a</li>
</ul>
<h2 class="score"><span>5/10</span></h2>
</span>
<span>
<h3>Privacy</h3>
<ul>
<li p>a</li>
<li n>a</li>
<li p>a</li>
</ul>
<h2 class="score"><span>5/10</span></h2>
</span>
</div>
</div>
</body>
</html>