Skip to content

Instantly share code, notes, and snippets.

@Twikito

Twikito/README.md

Last active March 18, 2024 22:20
Show Gist options
  • Save Twikito/2149a6ad93dd99f1ee449bd9afd45c2c to your computer and use it in GitHub Desktop.
Save Twikito/2149a6ad93dd99f1ee449bd9afd45c2c to your computer and use it in GitHub Desktop.
Download ZIP
myCloud: HTML and CSS first practice for students
Raw
README.md

myCloud: HTML and CSS first practice for students

You'll have to code this mockup with HTML and CSS according to the state of the art, with responsive adaptations for mobile.

You can't use class, identifier or attribute selectors, neither images or javascript.

Pay particular attention to semantics.

Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>☁ myCloud: HTML and CSS first practice for students</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&family=Yanone+Kaffeesatz:wght@200..700&display=swap">
<link rel="stylesheet" href="style.css">
</head>
<body>
<input type="checkbox" id="nav-trigger" role="button">
<label for="nav-trigger" tabindex="-1">
<span>menu</span>
</label>
<header>
<svg viewBox="0 0 640 512">
<!-- https://fontawesome.com/icons/cloud?f=classic&s=solid -->
<path d="M0 336c0 79.5 64.5 144 144 144H512c70.7 0 128-57.3 128-128c0-61.9-44-113.6-102.4-125.4c4.1-10.7 6.4-22.4 6.4-34.6c0-53-43-96-96-96c-19.7 0-38.1 6-53.3 16.2C367 64.2 315.3 32 256 32C167.6 32 96 103.6 96 192c0 2.7 .1 5.4 .2 8.1C40.2 219.8 0 273.2 0 336z"/>
</svg>
<h1>
my<wbr>Cloud
<span>
my work, my place
</span>
</h1>
</header>
<nav>
<a href="#what">what?</a>
<a href="#demo">demo</a>
<a href="#features">features</a>
<a href="#download">download</a>
</nav>
<main>
<section id="what">
<h2>What the frak is that?</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer aliquet arcu ut nisi aliquet semper sodales lorem aliquet. Suspendisse ut ipsum et neque tincidunt scelerisque.</p>
<blockquote>In hac habitasse platea dictumst. Sed luctus fermentum arcu ut tempor. Sed id dictum ligula. Aenean ac enim enim, eget tincidunt lacus&hellip;</blockquote>
<p>Maecenas vel justo non mi posuere rhoncus sed eu augue. Ut eget eros metus. Quisque non imperdiet lacus. Curabitur velit leo, <a href="#">commodo id hendrerit vel</a>, posuere ut arcu. Nullam arcu ante, dignissim in pharetra eu, facilisis ut libero.</p>
<ul>
<li>Donec <strong>dui nisl</strong>, iaculis quis convallis in,</li>
<li>sodales nec lacus. Cum <strong>sociis natoque</strong> penatibus,
<ol>
<li>Cras ullamcorper,</li>
<li>dui non interdum mollis,</li>
</ol>
</li>
<li>et magnis dis <strong>parturient</strong> montes, nascetur ridiculus mus.
<ol start="3">
<li>urna dolor lacinia erat,</li>
<li>sed suscipit felis tellus eget odio.</li>
</ol>
</li>
<li>Fusce sagittis aliquet ipsum non ultricies.</li>
</ul>
<p>Donec id arcu <strong>non magna accumsan malesuada</strong> sed accumsan enim.</p>
</section>
<section id="demo">
<h2>Please show me!</h2>
<p>Vivamus rutrum velit a nisl faucibus eu sagittis urna condimentum. <abbr title="HyperText Markup Language">HTML</abbr> and <abbr title="Cascading StyleSheet">CSS</abbr> Proin eu libero nulla, non vehicula ante. Cras malesuada sem id velit pretium sagittis.</p>
<figure>
<pre>
label[for^="toggle"], [type=checkbox] {cursor: pointer}
label[for^="toggle"] + [type=checkbox] {display: none}
/* MEDIA QUERY */
@media (max-width: 800px) {
section, #aside {
padding: 1em;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
header {
position: relative;
padding: 1em .8em;
background: #2D2D2D;
}
}</pre>
<figcaption>This is a frakking awesome code sample!</figcaption>
</figure>
<p>Nunc vel auctor orci. Nullam sit amet quam risus, vitae bibendum neque. Vestibulum vitae odio sed lorem <code>section</code> and <code>header</code> scelerisque faucibus. Integer convallis lacinia viverra.</p>
<p>Nam porta, mi vel ullamcorper porta, sem elit aliquet felis, at ullamcorper dolor ipsum quis velit. <a href="#">Phasellus condimentum</a>, neque eu malesuada ultricies, sem justo adipiscing justo, vel ultricies lorem odio in mauris.</p>
</section>
<section id="features">
<h2>Ok, so what's inside?</h2>
<table>
<caption>Outstanding features!</caption>
<colgroup>
<col>
<col id="col-web">
<col id="col-mobile">
<col id="col-desktop">
</colgroup>
<thead>
<tr>
<th></th>
<th scope="col">
<a href="#col-web">Web</a>
</th>
<th scope="col">
<a href="#col-mobile">Mobile</a>
</th>
<th scope="col">
<a href="#col-desktop">Desktop</a>
</th>
</tr>
</thead>
<tfoot>
<tr>
<th scope="row">Price</th>
<td>Free!</td>
<td>Free!</td>
<td>Free!</td>
</tr>
</tfoot>
<tbody>
<tr>
<th scope="row">Lorem ipsum</th>
<td>Yeah</td>
<td>Yeah</td>
<td>Yeah</td>
</tr>
<tr>
<th scope="row">Dolor sit amet</th>
<td>Yeah</td>
<td>Yeah</td>
<td></td>
</tr>
<tr>
<th scope="row">Consectetur adipiscing elit</th>
<td>Yeah</td>
<td>Yeah</td>
<td>Yeah</td>
</tr>
<tr>
<th scope="row">Proin neque ligula</th>
<td>Yeah</td>
<td></td>
<td>Yeah</td>
</tr>
<tr>
<th scope="row">Cum sociis natoque penatibus</th>
<td></td>
<td></td>
<td>Yeah</td>
</tr>
</tbody>
</table>
</section>
<section id="download">
<h2>High five, bro!</h2>
<p>Proin neque ligula, sagittis sed tincidunt at, scelerisque in nisl. Aenean non libero sed est scelerisque pulvinar. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<p>Aliquam tincidunt laoreet est, vel malesuada nunc vehicula a. Praesent rutrum auctor justo, posuere convallis <strong>magna aliquam sit amet</strong>. Donec ac risus ut eros elementum tempus vel eu urna. Sed dignissim ultrices felis, convallis mollis nisi suscipit nec. Nullam non tincidunt augue.</p>
<div>
<a href="#">download yeah!</a>
</div>
</section>
</main>
<footer>
<div>
<section>
<h3>Blog</h3>
<p>Duis pharetra, lorem in vulputate blandit, quam ipsum tincidunt lectus, sed tincidunt nisi mauris in leo. <a href="#">See more&hellip;</a></p>
</section>
<section>
<h3>Twitter</h3>
<p>RT <a href="#">@codrops</a> Responsive CSS Timeline with 3D Effect <a href="#">goo.gl/OkluS</a> <a href="#">#wdfr</a> <a href="#">#CSS3</a> — Nice!</p>
</section>
</div>
</footer>
</body>
</html>
Raw
style.css
:root {
--main-regular: #74d0ff;
--main-darker: #2ca6e5;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
background-color: #f7f7f7;
font-family: 'Inter', sans-serif;
line-height: 1.5;
color: #6a6a6a;
}
header,
nav,
main,
footer div {
/* Global inline-size definition: 620px in rem */
max-inline-size: 38.75rem;
margin-inline: auto;
padding: 0 1em;
}
a {
color: #07b66a;
text-decoration: underline;
transition: .2s ease-in-out;
}
a:hover,
a:focus {
text-decoration: none;
}
strong {
color: var(--main-darker);
}
header {
margin-block-start: 3em;
margin-block-end: 4em;
text-align: center;
color: var(--main-regular);
}
header svg {
display: block;
max-inline-size: 10em;
margin-inline: auto;
margin-block-end: 1em;
fill: white;
animation: cloud 8s cubic-bezier(0.455, 0.030, 0.515, 0.955) alternate infinite;
filter:
drop-shadow(0 1px 0 #ccc)
drop-shadow(0 2px 0 #c9c9c9)
drop-shadow(0 3px 0 #bbb)
drop-shadow(0 5px 10px rgb(0 0 0 / .3))
drop-shadow(0 15px 20px rgb(0 0 0 / .2))
drop-shadow(0 15px 30px rgb(0 0 0 / .1));
}
h1 {
font-family: 'Source Sans 3', sans-serif;
margin: 0;
display: inline flow-root;
font-weight: 500;
font-size: 3.75em;
line-height: .8;
text-align: end;
letter-spacing: -.05em;
}
h1 span {
display: block;
margin-inline-end: .1em;
font-size: .3em;
letter-spacing: -.02em;
}
input,
label {
display: none;
}
nav {
display: block flex;
flex-flow: row no-wrap;
justify-content: space-between;
}
nav a {
flex: 0 1 8em;
background-color: var(--main-regular);
color: white;
box-sizing: border-box;
padding: .5em;
text-decoration: none;
text-align: center;
}
nav a:hover,
nav a:focus {
background-color: #26ec96;
}
main section {
padding: 1.5em 0;
}
h2,
h3 {
margin: 1em 0 .5em;
font-family: 'Yanone Kaffeesatz', sans-serif;
font-size: 3.75em;
font-weight: 500;
line-height: 1;
color: var(--main-regular);
text-shadow: 0 -1px 0 #6a6a6a;
text-transform: capitalize;
}
blockquote {
font-style: italic;
quotes: "« "" »";
}
blockquote::before {
content: open-quote;
}
blockquote::after {
content: close-quote;
}
abbr {
text-decoration: underline dotted #6a6a6a;
}
figure {
margin: 2em 0;
}
figcaption,
caption {
font-style: italic;
font-size: .875em;
margin: .5em 0;
}
figcaption {
text-align: end;
}
caption {
text-align: center;
}
pre {
padding: 1em 2em;
background-color: white;
border: 1px solid var(--main-regular);
box-shadow: 0 0 1em rgb(116 208 255 / .5);
border-radius: 1em;
overflow: auto;
}
code {
padding: .25em;
background-color: white;
border: 1px solid var(--main-regular);
}
table {
inline-size: 100%;
border-collapse: collapse;
}
col {
inline-size: 20%;
}
col:first-child {
inline-size: 40%;
}
col:nth-child(even) {
background-color: #f0f0f0;
}
col:target {
background-color: #2ca6e533;
}
tbody tr:nth-child(odd) {
background-color: #fffa;
}
th,
td {
padding: .75em 2%;
text-align: center;
}
th:first-child {
text-align: start;
}
thead,
tfoot,
tbody td {
text-transform: uppercase;
font-weight: bold;
}
tbody th {
font-weight: normal;
}
thead th a,
tfoot td {
color: var(--main-darker);
}
tbody td {
color: #07b66a;
}
main div {
margin: 3em 0;
text-align: center;
}
main div a {
display: inline flow-root;
background-color: #ffc843;
color: white;
text-decoration: none;
font-family: 'Yanone Kaffeesatz', sans-serif;
font-size: 3em;
padding: .1em .5em;
text-transform: capitalize;
box-shadow: 0 .1em 0 #ffa823;
}
main div a:hover,
main div a:focus {
background-color: #26ec96;
translate: 0 .1em;
box-shadow: 0 .0 0 #06cc76;
transition-timing-function: ease-out;
}
main div a::before {
content: '⮋';
display: inline flow-root;
inline-size: 1em;
block-size: 1em;
line-height: 1.2em;
margin-inline-end: .25em;
transition: .2s ease-out;
}
main div a:hover::before,
main div a:focus::before {
rotate: 360deg;
}
footer {
padding: 1.5em 0 2em;
background-color: var(--main-regular);
}
footer * {
color: white;
}
footer div {
display: block grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 1.5em;
grid-auto-flow: row;
}
footer h3 {
text-shadow: none;
}
footer a {
color: white;
text-decoration: none;
font-weight: bold;
}
footer a:hover,
footer a:focus {
text-decoration: underline;
}
@media (max-width: 26em) {
header {
margin-block-start: 5em;
margin-block-end: 1em;
}
label,
input {
position: absolute;
display: block;
}
input {
/* Do not use display: none */
visibility: hidden;
opacity: 0;
}
label {
cursor: pointer;
transition: .2s ease-in-out;
}
label span {
position: fixed;
inset-block-start: 1em;
inset-inline-start: 1em;
z-index: 10;
padding: .5em;
background-color: var(--main-regular);
color: white;
}
label span::before {
content: '☰';
display: inline flow-root;
margin-inline-end: .5em;
transition: .2s ease-in-out;
}
label:hover span,
input:focus ~ label span {
background-color: #26ec96;
}
label::before {
/* Outside nav area */
position: fixed;
inset: 0;
z-index: 8;
visibility: hidden;
opacity: 0;
background-color: rgb(255 255 255 / .5);
pointer-events: none;
backdrop-filter: blur(2px);
transition: .2s ease-out;
content: '';
}
nav {
position: fixed;
inset-block-start: 0;
inset-inline-start: 0;
inset-block-end: 0;
z-index: 9;
padding: 4em 1em 1em;
flex-direction: column;
justify-content: flex-start;
translate: -100%;
background-color: var(--main-regular);
transition: .2s ease-out;
}
nav a {
flex-basis: auto;
margin: .5em 0;
background-color: none;
text-align: start;
}
input:checked ~ nav {
translate: 0;
}
input:checked ~ nav a:hover,
input:checked ~ nav a:focus,
input:checked ~ label:hover span,
input:checked:focus ~ label span {
background-color: white;
color: var(--main-regular);
}
input:checked ~ label::before {
visibility: visible;
opacity: 1;
pointer-events: auto;
}
input:checked ~ label span::before {
content: '✕';
rotate: 180deg;
}
h2,
h3 {
font-size: 2.75em;
}
colgroup {
display: none;
}
tr {
display: block flex;
margin: 1em 0;
flex-flow: row wrap;
align-items: stretch;
border: solid #d0d0d0;
border-width: .15em 0;
background-color: white;
}
tr > * {
display: inline flow-root;
box-sizing: border-box;
flex: 1 1 33%;
}
th:nth-child(even),
td:nth-child(even) {
background-color: #f0f0f0;
}
th:first-child {
text-align: center;
}
thead {
position: sticky;
inset-block-start: 3.5em;
}
thead th:first-child {
display: none;
}
tbody th,
tfoot th {
flex-basis: 100%;
}
main div a {
font-size: 2em;
}
footer div {
grid-template-columns: auto;
}
}
@keyframes cloud {
from {
translate: 2em;
}
to {
translate: -2em;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment