Commit b442d454 authored by Ian Stump's avatar Ian Stump 🏋🏼

Merge remote-tracking branch 'origin/week2day5'

# Conflicts:
#	WEEK2/DAY4/index_notes.html
#	WEEK2/DAY4/propulsion_simple_website/propulsion_simple_website/images/logo.jpg
parents f51f2432 66c90500
/*:root {
--background-color: #5d5d5d;
--border-color: #462921;
--numbers-background-color: #7d694c;
--light-tile-color: #b5915f;
--dark-tile-color: #441a03;
}
*/
body{
display:flex;
justify-content: center;
align-items: center;
height: 100%hv;
background-color: brown;
}
/*
.board{
display:none;
}
*/
.message{
color: pink;}
@media screen and (min-width: 700px) {
.message {
display: none;
}
.board{
display:grid;
border-color: #462921;
grid-template-columns: 8 auto;
grid-template-rows: 8 auto;
}
.top_numbers div,
.bottom_numbers div {
display: grid;
grid-template-columns: 8, auto;
background-color: rgb(119, 119, 7);
}
.top_box div,
.bottom_box div {
display:flex;
flex-basis: 100%;
align-content: center;
}
.tile__number {
display:flex;
justify-content: space-between;
align-items: center;
color: black;
}
.tile {
padding: 20px;
background-color: #b5915f;
}
.top_box {
display:grid;
grid-column-start: 1;
grid-column-end: 9;
grid-row-start: 1;
grid-row-end: 1;
}
.bottom_box {
display:grid;
grid-column-start: 1;
grid-column-end: 9;
grid-row-start: 10;
grid-row-end: 10;
}
.tile:nth-child(-2n + 9),
.tile:nth-child(9) ~ .tile:nth-child(-2n + 16),
.tile:nth-child(17) ~ .tile:nth-child(-2n + 25),
.tile:nth-child(25) ~ .tile:nth-child(-2n + 32),
.tile:nth-child(33) ~ .tile:nth-child(-2n + 41),
.tile:nth-child(41) ~ .tile:nth-child(-2n + 48),
.tile:nth-child(49) ~ .tile:nth-child(-2n + 57),
.tile:nth-child(57) ~ .tile:nth-child(-2n + 64) {
background-color: black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="./chessboard.css" />
</head>
<body>
<main>
<div class="message">
<h1>Sorry - this screensize is not yet supported.</h1>
</div>
<div class="board">
<div class="top_box">
<div>
<div class="tile__number">1</div>
<div class="tile__number">2</div>
<div class="tile__number">3</div>
<div class="tile__number">4</div>
<div class="tile__number">5</div>
<div class="tile__number">6</div>
<div class="tile__number">7</div>
<div class="tile__number">8</div>
</div>
<div>
</div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="bottom_box">
<div>
<div class="tile__number">1</div>
<div class="tile__number">2</div>
<div class="tile__number">3</div>
<div class="tile__number">4</div>
<div class="tile__number">5</div>
<div class="tile__number">6</div>
<div class="tile__number">7</div>
<div class="tile__number">8</div>
</div>
</div>
</div>
</div>
</main>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html> <!-- just to say we want to use html site -->
<html lang="en">
<!-- defines main language of website -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- width device width is to make usre that it adapts to mobile/different screen sizes -->
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- to link the CSS file - we use link tag in the head -->
<title>Document</title> <!-- tittle of tab -->
</head>
<body>
</body>
</html>
<!-- head is for server and crawlers ; has meta data, SEO etc -->
<!-- search engines do not understand semantics so we need to use good practices, so that things are read as , e.g. if they see a button class (CSS) crawlers from search engines and disbaled user tools (screen readers) will know that is a "button", if button is made with div they will not know -->
<!-- div - main use for the is to split things; one interview question was to write a button, so thye see if you use a class (which you should) -->
<!-- p - is paragraph -->
<!-- span - different than div, bc it tkaes only the space it needs, can also be used to apply styles to specific words in a text -->
<!-- CSS RESET - copy paste it to my website to reset any browser specific styles -->
<!-- shoudl only have 2 types of clickable elements in website: anchor link (rediects to new page); and button -->
<!-- aside tag to put nav menus on the side of the page -->
<!-- hr - thematic break-->
<!-- form tag to submit information always need to wrap i tin this tag -->
<!-- google chrome - got to inspect element -- AUDIT -- gives us pointers to improve website -->
<!--CSS -->
<!--to add style we can add in a file in CSS, in a style tag in the html file (in the head), in the tags themselves; but best practice is to use CSS -->
<!-- in CSS order maters within each type (ID, class, tag), but there is a priority order between different categories: ID first, class second, tag third-->
<!-- display: inline, block and inline block - inline block allows to define margin and if we are applying it to a span tag, so we cna change the width and height a little -->
<!-- flex display is REALLY IMPORTANT-->
<!-- positions: STATIC(default), FIXED (relative to the viewport of the browser - ie always y=0, x=10px to the left), ABSOLUTE - relative to the body always, independent of parents - RELATIVE, changes it relative to the body OR the parent tag if the parent is not static (ie, has a class / a margin)-->
<!-- the best position is relative; for absolute or fixed elements, sometimes mobiles do not show them right while scrolling, bc these are outside the flow of a website-->
<!-- FLEX-->
<!-- FLEX, display flex , will add a flex direction automatically to row (not visible) - we can overwrite this with "flex-direction:column"-->
<!-- div tag always takes the width of the page, but height only as specified-->
<!-- screen readers will ALWAYS read semantics from html orders; if we change positions just using style, e.g. flex-direction", screen readers will not see that visual change but stick to what is in the html-->
<!-- justify content -- moves in the X axis; align items -- moves on the Y axis; they apply to all flex class paren, children-->
<!-- order and align self ( flex end) - child flex properties -->
<!-- LOOK AT "CAN I USE.COM" TO SEE WHAT CSS PROPERTIES SPECIFIC BROWSERS ACCEPT -->
<!-- MEDIA QUERIES-->
<!-- to apply styles based on size of the screen-->
<!-- BEM-->
<!--interview question: if we know some CSS framework. answer: BEM-->
<!--GRID LAYOUT-->
<!-- display: grid ;; allows to tell the elements hw to use the space, by defining how many ros and columns; it is an alternative to flex, better than flex for layouts-->
\ No newline at end of file
.DS_Store
node_modules/
node_modules
/dist/
dist
npm-debug.log*
yarn-debug.log*
yarn-error.log*
/test/unit/coverage/
/test/e2e/reports/
selenium-debug.log
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
This diff is collapsed.
This diff is collapsed.
@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,700");
:root {
--color-primary: #c468ff;
--linear-gradient: linear-gradient(102deg, #c468ff, #6e91f6); }
* {
margin: 0;
padding: 0; }
*,
*::after,
*::before {
box-sizing: inherit; }
html {
box-sizing: border-box;
font-size: 100%;
font-family: 'Roboto', sans-serif;
font-weight: 400; }
.container {
height: 100vh;
display: flex;
object-fit: contain; }
.col {
width: 60%;
display: flex;
flex-flow: column; }
.col.left {
background-image: url("../assets/images/background_image.png"), var(--linear-gradient);
background-repeat: no-repeat;
background-size: cover;
width: 40%;
display: flex;
justify-content: center;
align-items: center; }
.col.right {
width: 60%; }
.logo-content {
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
color: white;
text-align: center;
margin-top: 16.5625rem;
margin-bottom: 2.5rem;
max-width: 17.1875rem; }
.logo-content .motion-logo {
margin-bottom: 0.9375rem; }
.logo-content h1 {
margin-bottom: 1.5625rem;
font-weight: 300;
font-size: 1.875rem; }
.logo-content p {
font-weight: 300;
font-size: 1rem;
line-height: 1.5;
opacity: 0.6; }
.buttons {
display: flex;
align-items: center;
width: 17.1875rem;
margin-bottom: 7.9375rem; }
.buttons .apple_store {
display: flex;
justify-content: center;
align-items: center;
border: 2px solid;
border-color: white;
border-radius: 6.25rem;
height: 2.5rem;
width: 7.875rem; }
.buttons .google_play {
display: flex;
justify-content: center;
align-items: center;
border: 2px solid;
border-color: white;
border-radius: 6.25rem;
height: 2.5rem;
width: 7.875rem;
margin-left: 1rem; }
.social_media {
display: flex;
justify-content: center;
align-items: center;
width: 17.1875rem;
margin-bottom: 2.625rem; }
.social_media .twitter {
display: flex;
justify-content: center;
align-items: center;
border: 2px, solid;
border-radius: 50%;
opacity: 0.5;
background-color: #ffffff;
width: 2.5rem;
height: 2.5rem; }
.social_media .facebook {
display: flex;
justify-content: center;
align-items: center;
border: 2px, solid;
border-radius: 50%;
opacity: 0.5;
background-color: #ffffff;
width: 2.5rem;
height: 2.5rem;
margin-left: 16px; }
.social_media .instagram {
display: flex;
justify-content: center;
align-items: center;
border: 2px, solid;
border-radius: 50%;
opacity: 0.5;
background-color: #ffffff;
width: 2.5rem;
height: 2.5rem;
margin-left: 1rem; }
.footer_info {
font-size: 12px;
color: white;
display: flex;
justify-content: center;
margin-bottom: 2.5rem; }
/* right side of website */
.sign_up {
display: flex;
justify-content: flex-end;
align-items: center;
margin-top: 2.5rem; }
.sign_up .sign_up_btn {
border: 2px solid;
border-color: lightgrey;
border-radius: 100px;
height: 2.5rem;
width: 7.5rem;
margin-right: 40px; }
.sign_up .sign_up_label {
font-size: 14px;
margin-right: 0.875rem; }
.sign_in {
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
margin-top: 8.8125rem; }
.sign_in .title {
font-size: 40px;
margin-bottom: 4rem; }
.username {
display: flex;
flex-flow: row-reverse;
justify-content: center;
align-items: center;
/* with input boxes ----
.input_user{
display:flex;
justify-content: center;
align-items: center;
font-size: 20px;
color: black;
margin-bottom:rem(58px);
} */ }
.username .input_user {
display: flex;
align-items: center;
font-size: 20px;
color: black;
margin-right: 29.4375rem;
margin-left: 1.4375rem; }
.username .username_logo {
display: flex;
margin-left: 15.75rem; }
.username_line {
width: 340px;
height: 2px;
color: grey;
margin-top: 0.8125rem;
margin-bottom: 2.6875rem; }
.password {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row-reverse;
/* with input boxes ----
.input_pass{
display:flex;
justify-content: center;
align-items: center;
font-size: 20px;
color: black;
margin-bottom: rem(167px);
}*/ }
.password .input_pass {
display: flex;
justify-content: flex-start;
align-items: center;
font-size: 20px;
color: black;
margin-right: 29.4375rem;
margin-left: 1.4375rem; }
.password .password_logo {
display: flex;
margin-left: 15.75rem; }
.password_line {
width: 340px;
height: 2px;
color: grey;
margin-top: 0.8125rem;
margin-bottom: 10.4375rem; }
.sign_in_button {
border-radius: 100px;
width: 16.25rem;
height: 3.75rem;
background-image: linear-gradient(102deg, #c468ff, #6e91f6);
color: white;
font-size: 12px; }
This diff is collapsed.
This diff is collapsed.
{
"name": "motion",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"scss": "node-sass --watch ./sass/main.scss -o css"
},
"author": "Laurent Hoxhaj",
"license": "ISC",
"dependencies": {
"node-sass": "^4.11.0"
}
}
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,700');
:root {
--color-primary: #c468ff;
--linear-gradient: linear-gradient(102deg, #c468ff, #6e91f6);
}
* {
margin: 0;
padding: 0;
}
*,
*::after,
*::before {
box-sizing: inherit;
}
html {
box-sizing: border-box;
font-size: 100%;
font-family: 'Roboto', sans-serif;
font-weight: 400;
}
@import "functions";
.logo-content{
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
color: white;
text-align: center;
margin-top: rem(265px);
margin-bottom: rem(40px);
max-width: rem(275px);
.motion-logo {
margin-bottom: rem(15px);
}
h1 {
margin-bottom: rem(25px);
font-weight: 300;
font-size: rem(30px);
}
p{
font-weight: 300;
font-size: rem(16px);
line-height: 1.5;
opacity: 0.6;
}
}
.buttons{
display:flex;
align-items: center;
width: rem(275px);
margin-bottom: rem(127px);
.apple_store {
display:flex;
justify-content: center;
align-items: center;
border: 2px solid;
border-color: white;
border-radius: rem(100px);
height: rem(40px);
width: rem(126px);
}
.google_play {
display:flex;
justify-content: center;
align-items: center;
border: 2px solid;
border-color: white;
border-radius: rem(100px);
height: rem(40px);
width:rem(126px);
margin-left: rem(16px);
}
}
.social_media{
display:flex;
justify-content: center;
align-items: center;
width: rem(275px);
margin-bottom:rem(42px);
.twitter{
display:flex;
justify-content: center;
align-items: center;
border: 2px, solid;
border-radius: 50%;
opacity: 0.5;
background-color: #ffffff;
width: rem(40px);
height: rem(40px);
}
.facebook{
display:flex;
justify-content: center;
align-items: center;
border: 2px, solid;
border-radius: 50%;
opacity: 0.5;
background-color: #ffffff;
width: rem(40px);
height: rem(40px);
margin-left: 16px;
}
.instagram{
display:flex;
justify-content: center;
align-items: center;
border: 2px, solid;
border-radius: 50%;
opacity: 0.5;
background-color: #ffffff;
width: rem(40px);
height: rem(40px);
margin-left: rem(16px);
}
}
.footer_info{
font-size:12px;
color: white;
display:flex;
justify-content: center;
margin-bottom:rem(40px);
}
/* right side of website */
.sign_up{
display:flex;
justify-content: flex-end;
align-items: center;