Skip to content

Instantly share code, notes, and snippets.

@Skydrifa

Skydrifa/Css Chant Exercise

Created March 29, 2021 05:39
Show Gist options
  • Save Skydrifa/e1b6e192e658f0e75d27ef8623c5a734 to your computer and use it in GitHub Desktop.
Save Skydrifa/e1b6e192e658f0e75d27ef8623c5a734 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Css Chant Exercise
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="My Fakebook">
<meta name="keywords" content="Archetype of the people today">
<meta name="author" content="Alexandra Freitas">
<link rel="stylesheet" href="style.css">
<link rel="icon" type="image/png" href="https://i.imgur.com/B8KiTZ4.gif">
<title> Conscious </title>
</head>
<body>
<header>
<div class="container2">
<h1>Smart Ninja</h1>
<h2> CSS3 + HTML5 showcase styled </h2>
<p>
Made by <a href="https://soundcloud.com/user-105417860/intimate-convictions/s-wBaFtQJfSoQ">Alexandra Freitas</a> of
<a href="https://moderncss.dev">ModernCSS.dev</a>
</p>
<a href="" class="link-github"> Github _ Project </a>
</div>
</header>
<main class="container">
<div class="canvas">
<section class="canvas2">
<div class="header2">
<details>
<summary> Concept of the Work </summary>
<p> This is a Epigram. A brief poetic composition of a single thought in a ingenious way.</p>
</details>
<div class="header1">
<h1 > Life Hacks </h1>
<br>
<h3>You will need to harmonize <br> your yin yang from outside to inside.</h3>
<br>
<p>The most profound problems of modern life arise from the demand on the part of the individual to preserve the autonomy and individuality of his existence in the face of the overwhelming social alters of the past, the culture and the technique of life that are external to him. The fight against nature - our nature.</p>
</div>
<details>
<summary>Details</summary>
<p> Practice your own art with responsibility. And when you know the truth of you the knowledge that gives you power appropriately use it to build dignity surroundings. </p>
</details>
<details>
<summary>Education</summary>
<p> I’m not in this world to live up to your expectations, you will waste your time on recreating. In real living first we need to know how to survive for reaching the supreme value of dignity, helping others. In this life you will need to make decisions with responsibility and with knowledge. You can anticipate problems, but you can choose. In the obscurity of life there will be someone dancing, in this confusion of so much information you forget what really matters, the ones who stand by you in the difficult times. Don't always express yourself some people don't deserve your true self. </p>
</details>
<details>
<summary> 21# Century </summary>
<p> The ubiquitous data about yourself, know one knows who will use it against you. A Ninja nowadays fears, their own shadow. And if you can't beat them, join them in silence. </p>
</details>
</div>
</section>
<section class="canvas2">
<div class="blackcanvas">
<div class="center">
<iframe src="https://giphy.com/embed/IG5tmcGU9xenK" width="280" height="245" frameBorder="0" class="giphy-embed" allowFullScreen></iframe>
<div class="handle center">
<span> </span>
</div>
</div>
</div>
</section>
<section>
<h4> Terms of Use. Privacy Policy </h4>
<div>
<p style="font-size: 0.8rem; opacity: 0.5;"> <em> © Demo Project At SmartNinja </em> </p>
</div>
</section>
</div>
</main>
</body>
</html>
Raw
gistfile1.txt
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,700);
@import url(https://fonts.googleapis.com/css?family=Quicksand:300,400);
@import url(https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Sora:wght@400;600;700&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Sora:wght@400;600;700&display=swap);
/* Display purposes */
* {
margin: 0; /*for reset page for all browsers */
padding:0;
box-sizing: border-box;
font-weight: normal; /*for reset pre-def of type */
width:100%;
}
body {
font-family: "Sora","Inter","Quicksand", Arial;
font-style: normal;
font-size: 100%;
min-height:960px;
height:100%;
min-width:560px;
width: 100%;
overflow: hidden;
text-rendering: optimizeSpeed;
}
header{
padding:0;
display: flex;
height:40px;
}
header .container2 {
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
text-align: center;
padding: 0;
text-align: left;
border: 3px solid black;
}
header .container2 h1 {
width:50%;
}
header .container2 p {
font-size: 1.5rem;
font-size: 1rem;
padding: 1em 1.5em;
line-height: 1;
}
header .container2 h2 {
font-size: 1.3rem;
font-size: 1rem;
padding: 1em 1.5em;
line-height: 1;
}
header .link-github {
border: 1px solid black;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background-color: var(--color-secondary);
color: var(--color-primary);
padding: 0.5em 1em;
text-decoration: none;
font-size: 1rem;
}
header i {
text-align: left;
}
.container {
margin: auto;
width: 100%;
position: absolute;
}
.canvas {
display:flex;
flex-wrap: wrap;
align-items: center;
justify-content: left;
width: 70%;
height:100vh;
margin: auto;
}
.header2 {
display:block;
align-items: left;
width:60%;
justify-content: left;
}
.header2 h1 {
padding-top:2%;
font-size: 3rem;
font-weight: 700;
}
.header1 p {
font-size: 0.9rem;
font-style: light;
font-family:"Inter";
line-height: 1.5rem;
}
.header2 details {
margin-top: 20px;
font-size: 1.2rem;
}
.canvas2 {
flex-direction: row;
width:50%;
}
.content2 {
display: flex;
font-size: 0.7em;
}
/* movie Script */
.blackcanvas {
display: flex;
align-items: center;
bottom: 4%;
justify-content: center;
width: 100%;
height: 320px;
background:black;
text-align: center;
}
.canvas2 details {
padding-top: 2%;
}
.header1 img {
width:10%;
padding: 2%;
align-item: center;
float:right;
}
.center {
width: 100%;
text-align: center;
}
.giphy-embed {
padding-top: 6%;
}
.handle{
height: 30px;
line-height: 30px;
overflow: hidden;
}
.handle center {
position: center;
font-size: 20px;
font-family: monospace;
overflow: hidden;
text-align: center;
}
.handle span {
vertical-align: top;
white-space: pre;
}
.handle:before, .handle:after {
color: white;
white-space: pre;
position: relative;
animation: roll 6s linear infinite;
animation-delay: 6s;
}
/*animation movie */
.handle:before {
content: "Look around you \a \ Focus \a\ \a\ You must be shapeless, formless, like water. ";
}
@keyframes roll {
0%, 20% {
top: 0;
}
20%, 30% {
top: -30px;
}
30%, 45% {
top: -60px;
}
45%, 100% {
top: -90px;
}
}
/* Minimize Things */
details{
font-family: 'Quicksand', sans-serif;
display: block;
}
details p{
font-family: 'Inter', sans-serif;
font-style: normal;
opacity: 50%;
text-align: left;
font-size: 0.8rem;
letter-spacing: 0.01em;
line-height: 1.5em;
padding-top: 6%;
}
summary {
transition: background .75s ease;
width: 100%;
outline: 0;
font-size: 75%;
cursor: pointer;
border-bottom: 1px solid #D3D3D3;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment