Commit c1172a00 authored by Raquel's avatar Raquel 💬

added day5

parent 6beb18cd
/*: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
......@@ -41,4 +41,26 @@
<!-- 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-->
\ No newline at end of file
<!-- 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
<!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>Propulsion Simple App</title>
<link rel="stylesheet" href="./styles.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"
integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
</head>
<body>
<main>
<aside>
<i class="fa fa-bars"></i>
<i class="fa fa-home"></i>
<i class="fa fa-search"></i>
<i class="fab fa-js"></i>
<i class="fab fa-css3-alt"></i>
<i class="fab fa-react"></i>
<i class="fab fa-python"></i>
<i class="fab fa-docker"></i>
</aside>
<section class="content">
<div class="header">
<img src="images/logo.jpg" />
<section class="header_description">
<div>
<p>Fullstack and Data-Science Bootcamps</p>
<p>Propulsion Academy</p>
<p>First Enterprise Coding Academy in Switzerland</p>
</div>
<div>
<i class="fas_fa-map-pin"> &nbsp;Technoparkstrasse 1, 8005 Zurich</i>
<i class="fas_fa-envelope"> &nbsp;learn@propulsionacademy.com</i>
</div>
</section>
</div>
<ul class="courses_list">
<li>
<p>Data Science Immersive</p>
<p>Mar 11 - May 31, 2019</p>
<p>CHF 12'000</p>
<button>Apply now</button>
</li>
<li>
<p>Full-Stack Immersive</p>
<p>May 6 - Aug 2, 2019</p>
<p>CHF 10'000</p>
<button>Apply now</button>
</li>
<li>
<p>Web Development Toolkit</p>
<p>May 13 - May 17, 2019</p>
<p>CHF 2'500</p>
<button>Apply now</button>
</li>
<li>
<p>Data Science Toolkit</p>
<p>Jun 10 - Jun 14, 2019</p>
<p>CHF 3'000</p>
<button>Apply now</button>
</li>
</ul>
</section>
</main>
<footer>
<div class="right">
<p>© Propulsion Academy, 2018</p>
</div>
<div class="left">
<i class="fab fa-facebook-square"></i>
<i class="fab fa-instagram"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-google-plus-g"></i>
<i class="fab fa-github"></i>
<i class="fab fa-gitlab"></i>
</div>
</footer>
</body>
</html>
\ No newline at end of file
html,
body {
display:flex;
flex-direction: column;
height: 100%;
padding: 0;
margin: 0;
}
main{
display: flex;
}
img {
width: 200px;
padding: 20px;
display:flex;
align-self: center
}
.content {
display: flex;
flex-direction:column;
flex-grow:1;
margin: 30px;
}
.header{
display: flex;
background-color: #03BAE4;
z-index: -1;
flex:0 0 20%
}
.header_description{
display: flex;
flex-direction: column;
justify-content: space-between;
flex-basis: 100%;
color: white;
}
.courses_list li:nth-of-type(even){
background: lightgrey;}
footer{
display: flex;
flex-basis:auto;
background-color: #F37786;
}
.right{
display:flex;
justify-content: flex-start;
color: white;
}
.left{
display:flex;
justify-content: space-around ;
flex-basis: 70%;
padding: 20px;
color: white;
}
.courses_list li{
display: flex;
flex-basis: 100%;
justify-content: space-between;
align-content: space-between;
}
button {
display:flex;
margin:10px;
border-radius:10px;
background-color: #F37786;
color: white;
}
.courses_list {
display: flex;
flex-direction:column;
}
aside {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100vh;
border-color: darkgrey;
}
\ No newline at end of file
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment