Skip to content

Instantly share code, notes, and snippets.

@blynnewat42

blynnewat42/index.html

Created May 29, 2020 14:17
Show Gist options
  • Save blynnewat42/92985fb4cc36e9a7beda2a47be97feb7 to your computer and use it in GitHub Desktop.
Save blynnewat42/92985fb4cc36e9a7beda2a47be97feb7 to your computer and use it in GitHub Desktop.
Download ZIP
// source https://jsbin.com
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://code.s3.yandex.net/web-code/normalize.css">
<link rel="stylesheet" href="style.css">
<title>Your Portfolio</title>
<style id="jsbin-css">
div {
border: 1px solid red;
display: flex;
}
.header {
display: flex;
height: 95px;
text-align: center;
}
.header-link{
margin:auto;
}
.menu {
display: flex;
justify-content: center;
min-height: 75px;
align-items: center;
flex-wrap: wrap;
}
.flex-row{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
}
.flex-row_reversed{
flex-direction: row-reverse;
}
.project{
background-position: center;
background-size: cover;
}
.project_beginner{
width: 636px;
height: 430px;
}
.project_music-album {
background-image: url(https://code.s3.yandex.net/web-code/album.png);
}
.project_design-principles {
background-image: url(https://code.s3.yandex.net/web-code/design.png);
}
.project_frameworks{
}
.flex-column{
display: flex;
width: 636px;
height: 557px;
justify-content: space-between;
}
.project_procrastinate{
width: 636px;
height: 557px;
}
.project-video{
width: 100%;
height: 100%;
object-fit: cover;
}
.project_p5{
width: 636px;
height: 240px;
}
.flex-row_frameworks-inner{
width: 636px;
height: 290px;
}
.project_slider{
width: 306px;
height: 290px;
background-image: url(https://code.s3.yandex.net/web-code/slider.gif);
}
.project_reactive{
width: 306px;
height: 290px;
background-image: url(https://code.s3.yandex.net/web-code/reactive.gif);
}
.flex-column_reversed{
flex-direction: column-reverse;
}
.project_vanilla{
width: 306px;
height: 290px;
}
.project_how-to-study{
background-image: url(https://code.s3.yandex.net/web-code/how-to-study-eng.png);
order: 3;
}
.project_across-usa{
background-image: url(https://code.s3.yandex.net/web-code/across-usa.png);
order: 2;
}
.project_around{
background-image: url(https://code.s3.yandex.net/web-code/around.png);
order: 1;
}
.footer{
display: flex;
height: 95px;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<header>
<div class="header">
<a href="#" class="header-link"> Practicum by Yandex
</a>
</div>
</header>
<nav class="menu">
<nav class="menu menu-link">
<a href="#" class="menu-link">First steps in HTML and CSS</a>
<a href="#" class="menu-link">JavaScript libraries</a>
<a href="#" class="menu-link">Practicing HTML, CSS, and JavaScript</a>
</nav>
</nav>
<div class="flex-row">
<div class="project project_beginner project_music-album"> </div>
<div class="project project_beginner project_design-principles"> </div>
</div>
<div class="flex-row flex-row_reversed">
<div class="flex-column flex-column_reversed">
<div class="project project_frameworks project_p5">
<video class="project-video" src="https://code.s3.yandex.net/web-code/like.mp4" autoplay muted loop></video>
</div>
<div class="flex-row flex-row_frameworks-inner">
<div class="project project_frameworks project_slider"></div>
<div class="project project_frameworks project_reactive"></div>
</div>
<div class="project project_frameworks project_frameworks"></div>
<div class="project project_frameworks project_procrastinate"></div>
<video class="project-video" src="https://code.s3.yandex.net/web-code/procrastinate-eng.mov" autoplay muted loop></video>
</div>
</div>
<div class="flex-row">
<div class="project project_vanilla project_how-to-study"></div>
<div class="project project_vanilla project_across-usa"></div>
<div class="project project_vanilla project_around"></div>
</div>
<div class="footer"></div>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://code.s3.yandex.net/web-code/normalize.css">
<link rel="stylesheet" href="style.css">
<title>Your Portfolio</title>
</head>
<body>
<header>
<div class="header">
<a href="#" class="header-link"> Practicum by Yandex
</a>
</div>
</header>
<nav class="menu">
<nav class="menu menu-link">
<a href="#" class="menu-link">First steps in HTML and CSS</a>
<a href="#" class="menu-link">JavaScript libraries</a>
<a href="#" class="menu-link">Practicing HTML, CSS, and JavaScript</a>
</nav>
</nav>
<div class="flex-row">
<div class="project project_beginner project_music-album"> </div>
<div class="project project_beginner project_design-principles"> </div>
</div>
<div class="flex-row flex-row_reversed">
<div class="flex-column flex-column_reversed">
<div class="project project_frameworks project_p5">
<video class="project-video" src="https://code.s3.yandex.net/web-code/like.mp4" autoplay muted loop></video>
</div>
<div class="flex-row flex-row_frameworks-inner">
<div class="project project_frameworks project_slider"></div>
<div class="project project_frameworks project_reactive"></div>
</div>
<div class="project project_frameworks project_frameworks"></div>
<div class="project project_frameworks project_procrastinate"></div>
<video class="project-video" src="https://code.s3.yandex.net/web-code/procrastinate-eng.mov" autoplay muted loop></video>
</div>
</div>
<div class="flex-row">
<div class="project project_vanilla project_how-to-study"></div>
<div class="project project_vanilla project_across-usa"></div>
<div class="project project_vanilla project_around"></div>
</div>
<div class="footer"></div>
</body>
</html>
</script>
<script id="jsbin-source-css" type="text/css">
div {
border: 1px solid red;
display: flex;
}
.header {
display: flex;
height: 95px;
text-align: center;
}
.header-link{
margin:auto;
}
.menu {
display: flex;
justify-content: center;
min-height: 75px;
align-items: center;
flex-wrap: wrap;
}
.flex-row{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
}
.flex-row_reversed{
flex-direction: row-reverse;
}
.project{
background-position: center;
background-size: cover;
}
.project_beginner{
width: 636px;
height: 430px;
}
.project_music-album {
background-image: url(https://code.s3.yandex.net/web-code/album.png);
}
.project_design-principles {
background-image: url(https://code.s3.yandex.net/web-code/design.png);
}
.project_frameworks{
}
.flex-column{
display: flex;
width: 636px;
height: 557px;
justify-content: space-between;
}
.project_procrastinate{
width: 636px;
height: 557px;
}
.project-video{
width: 100%;
height: 100%;
object-fit: cover;
}
.project_p5{
width: 636px;
height: 240px;
}
.flex-row_frameworks-inner{
width: 636px;
height: 290px;
}
.project_slider{
width: 306px;
height: 290px;
background-image: url(https://code.s3.yandex.net/web-code/slider.gif);
}
.project_reactive{
width: 306px;
height: 290px;
background-image: url(https://code.s3.yandex.net/web-code/reactive.gif);
}
.flex-column_reversed{
flex-direction: column-reverse;
}
.project_vanilla{
width: 306px;
height: 290px;
}
.project_how-to-study{
background-image: url(https://code.s3.yandex.net/web-code/how-to-study-eng.png);
order: 3;
}
.project_across-usa{
background-image: url(https://code.s3.yandex.net/web-code/across-usa.png);
order: 2;
}
.project_around{
background-image: url(https://code.s3.yandex.net/web-code/around.png);
order: 1;
}
.footer{
display: flex;
height: 95px;
align-items: center;
justify-content: center;
}
</script>
</body>
</html>
Raw
jsbin.untitled.css
div {
border: 1px solid red;
display: flex;
}
.header {
display: flex;
height: 95px;
text-align: center;
}
.header-link{
margin:auto;
}
.menu {
display: flex;
justify-content: center;
min-height: 75px;
align-items: center;
flex-wrap: wrap;
}
.flex-row{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
}
.flex-row_reversed{
flex-direction: row-reverse;
}
.project{
background-position: center;
background-size: cover;
}
.project_beginner{
width: 636px;
height: 430px;
}
.project_music-album {
background-image: url(https://code.s3.yandex.net/web-code/album.png);
}
.project_design-principles {
background-image: url(https://code.s3.yandex.net/web-code/design.png);
}
.project_frameworks{
}
.flex-column{
display: flex;
width: 636px;
height: 557px;
justify-content: space-between;
}
.project_procrastinate{
width: 636px;
height: 557px;
}
.project-video{
width: 100%;
height: 100%;
object-fit: cover;
}
.project_p5{
width: 636px;
height: 240px;
}
.flex-row_frameworks-inner{
width: 636px;
height: 290px;
}
.project_slider{
width: 306px;
height: 290px;
background-image: url(https://code.s3.yandex.net/web-code/slider.gif);
}
.project_reactive{
width: 306px;
height: 290px;
background-image: url(https://code.s3.yandex.net/web-code/reactive.gif);
}
.flex-column_reversed{
flex-direction: column-reverse;
}
.project_vanilla{
width: 306px;
height: 290px;
}
.project_how-to-study{
background-image: url(https://code.s3.yandex.net/web-code/how-to-study-eng.png);
order: 3;
}
.project_across-usa{
background-image: url(https://code.s3.yandex.net/web-code/across-usa.png);
order: 2;
}
.project_around{
background-image: url(https://code.s3.yandex.net/web-code/around.png);
order: 1;
}
.footer{
display: flex;
height: 95px;
align-items: center;
justify-content: center;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment