First init
This commit is contained in:
gauvainboiche
92
Build a Website Design System/fonts.css
Normal file
92
Build a Website Design System/fonts.css
Normal file
@@ -0,0 +1,92 @@
|
|||||||
|
/* Overall configuration */
|
||||||
|
|
||||||
|
body {
|
||||||
|
width: 80%;
|
||||||
|
margin: 0 auto;
|
||||||
|
font-family: "Nunito Sans", sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
section {
|
||||||
|
border: solid 1px gray;
|
||||||
|
border-radius: 5px;
|
||||||
|
padding: 10px;
|
||||||
|
margin: 20px auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Colors Elements targeting */
|
||||||
|
|
||||||
|
.color-box li {
|
||||||
|
display: inline-block;
|
||||||
|
width: 40%;
|
||||||
|
border: 1px solid gray;
|
||||||
|
border-radius: 10px;
|
||||||
|
padding: 10px;
|
||||||
|
margin: 20px auto;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#goldenrod {
|
||||||
|
background-color: goldenrod;
|
||||||
|
}
|
||||||
|
|
||||||
|
#salmon {
|
||||||
|
background-color: salmon;
|
||||||
|
}
|
||||||
|
|
||||||
|
#teal {
|
||||||
|
background-color: teal;
|
||||||
|
}
|
||||||
|
|
||||||
|
#forestgreen {
|
||||||
|
background-color: forestgreen;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Fonts Elements targeting */
|
||||||
|
|
||||||
|
#fonts h3 {
|
||||||
|
font-size: 3em;
|
||||||
|
text-decoration: underline;
|
||||||
|
font-weight: 200;
|
||||||
|
}
|
||||||
|
|
||||||
|
#limelight {
|
||||||
|
font-family: "Limelight", sans-serif;
|
||||||
|
font-size: 1.3em;
|
||||||
|
}
|
||||||
|
|
||||||
|
#instrumentserif {
|
||||||
|
font-family: "Instrument Serif", serif;
|
||||||
|
font-size: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
#audiowide {
|
||||||
|
font-family: "Audiowide", sans-serif;
|
||||||
|
font-size: 1.2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
#manufacturingconsent {
|
||||||
|
font-family: "Manufacturing Consent", system-ui;
|
||||||
|
font-size: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.regular {
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bold {
|
||||||
|
font-weight: 1000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.italic {
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
.font-box li {
|
||||||
|
display: inline;
|
||||||
|
padding: 5px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
76
Build a Website Design System/index.html
Normal file
76
Build a Website Design System/index.html
Normal file
@@ -0,0 +1,76 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="fr">
|
||||||
|
<head>
|
||||||
|
<title>Quick presentation of colors, fonts and styles</title>
|
||||||
|
<link href="./styles.css" rel="stylesheet" />
|
||||||
|
<link href="./fonts.css" rel="stylesheet" />
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||||
|
<link
|
||||||
|
href="https://fonts.googleapis.com/css2?family=Audiowide&family=Instrument+Serif:ital@0;1&family=Limelight&family=Manufacturing+Consent&family=Nunito+Sans:opsz@6..12&display=swap"
|
||||||
|
rel="stylesheet"
|
||||||
|
/>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>Quick presentation of colors, fonts and styles</h1>
|
||||||
|
<section id="colors">
|
||||||
|
<h2 class="section-title">Colors</h2>
|
||||||
|
<div class="content">
|
||||||
|
<ul class="color-box">
|
||||||
|
<li id="goldenrod">
|
||||||
|
<p>Goldenrod</p>
|
||||||
|
<p>#DAA520</p>
|
||||||
|
</li>
|
||||||
|
<li id="salmon">
|
||||||
|
<p>Salmon</p>
|
||||||
|
<p>#FA8072</p>
|
||||||
|
</li>
|
||||||
|
<li id="teal">
|
||||||
|
<p><span class="dark">Teal</span></p>
|
||||||
|
<p><span class="dark">#008080</span></p>
|
||||||
|
</li>
|
||||||
|
<li id="forestgreen">
|
||||||
|
<p>ForestGreen</p>
|
||||||
|
<p>#228B22</p>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section id="fonts">
|
||||||
|
<h2 class="section-title">Fonts</h2>
|
||||||
|
<div class="content">
|
||||||
|
<ul class="font-box">
|
||||||
|
<li id="limelight">
|
||||||
|
<h3>Limelight</h3>
|
||||||
|
<p class="regular">Portez ce vieux whisky au juge blond qui fume</p>
|
||||||
|
<p class="bold">Portez ce vieux whisky au juge blond qui fume</p>
|
||||||
|
<p class="italic">Portez ce vieux whisky au juge blond qui fume</p>
|
||||||
|
</li>
|
||||||
|
<li id="instrumentserif">
|
||||||
|
<h3>Instrument Serif</h3>
|
||||||
|
<p class="regular">Portez ce vieux whisky au juge blond qui fume</p>
|
||||||
|
<p class="bold">Portez ce vieux whisky au juge blond qui fume</p>
|
||||||
|
<p class="italic">Portez ce vieux whisky au juge blond qui fume</p>
|
||||||
|
</li>
|
||||||
|
<li id="audiowide">
|
||||||
|
<h3>Audiowide</h3>
|
||||||
|
<p class="regular">Portez ce vieux whisky au juge blond qui fume</p>
|
||||||
|
<p class="bold">Portez ce vieux whisky au juge blond qui fume</p>
|
||||||
|
<p class="italic">Portez ce vieux whisky au juge blond qui fume</p>
|
||||||
|
</li>
|
||||||
|
<li id="manufacturingconsent">
|
||||||
|
<h3>Manufacturing Consent</h3>
|
||||||
|
<p class="regular">Portez ce vieux whisky au juge blond qui fume</p>
|
||||||
|
<p class="bold">Portez ce vieux whisky au juge blond qui fume</p>
|
||||||
|
<p class="italic">Portez ce vieux whisky au juge blond qui fume</p>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section id="styles">
|
||||||
|
<h2 class="section-title">Styles</h2>
|
||||||
|
<div class="content"></div>
|
||||||
|
</section>
|
||||||
|
</body>
|
||||||
|
<footer>For Codecademy, Gauvain B, 2025</footer>
|
||||||
|
</html>
|
||||||
39
Build a Website Design System/styles.css
Normal file
39
Build a Website Design System/styles.css
Normal file
@@ -0,0 +1,39 @@
|
|||||||
|
.limelight-regular {
|
||||||
|
font-family: "Limelight", sans-serif;
|
||||||
|
font-weight: 400;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.instrument-serif-regular {
|
||||||
|
font-family: "Instrument Serif", serif;
|
||||||
|
font-weight: 400;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.instrument-serif-regular-italic {
|
||||||
|
font-family: "Instrument Serif", serif;
|
||||||
|
font-weight: 400;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
.audiowide-regular {
|
||||||
|
font-family: "Audiowide", sans-serif;
|
||||||
|
font-weight: 400;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.manufacturing-consent-regular {
|
||||||
|
font-family: "Manufacturing Consent", system-ui;
|
||||||
|
font-weight: 400;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nunito-sans-<uniquifier> {
|
||||||
|
font-family: "Nunito Sans", sans-serif;
|
||||||
|
font-optical-sizing: auto;
|
||||||
|
font-weight: 400;
|
||||||
|
font-style: normal;
|
||||||
|
font-variation-settings:
|
||||||
|
"wdth" 100,
|
||||||
|
"YTLC" 500;
|
||||||
|
}
|
||||||
36
_small_exercices/calculate_weight.js
Normal file
36
_small_exercices/calculate_weight.js
Normal file
@@ -0,0 +1,36 @@
|
|||||||
|
// Write your function here:
|
||||||
|
|
||||||
|
function calculateWeight(earthWeight, planet) {
|
||||||
|
if (!Number.isInteger(earthWeight)) {
|
||||||
|
return("Please enter an integer for weight.");
|
||||||
|
}
|
||||||
|
if (typeof planet !== "string") {
|
||||||
|
return("Please enter a string for planet.");
|
||||||
|
}
|
||||||
|
|
||||||
|
switch (planet) {
|
||||||
|
case "Mercury" :
|
||||||
|
return earthWeight * 0.378;
|
||||||
|
case "Venus" :
|
||||||
|
return earthWeight * 0.907;
|
||||||
|
case "Mars" :
|
||||||
|
return earthWeight * 0.377;
|
||||||
|
case "Jupiter" :
|
||||||
|
return earthWeight * 2.36;
|
||||||
|
case "Saturn" :
|
||||||
|
return earthWeight * 0.916;
|
||||||
|
default :
|
||||||
|
return("Invalid Planet Entry. Try: Mercury, Venus, Mars, Jupiter, or Saturn.");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log(calculateWeight(100, "Camembert"));
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// Uncomment the line below when you're ready to try out your function
|
||||||
|
// console.log(calculateWeight(100, 'Jupiter')) // Should print 236
|
||||||
|
|
||||||
|
// We encourage you to add more function calls of your own to test your code!
|
||||||
24
_small_exercices/race_day.js
Normal file
24
_small_exercices/race_day.js
Normal file
@@ -0,0 +1,24 @@
|
|||||||
|
const getRunner = (runners) => {
|
||||||
|
let runner = 0;
|
||||||
|
|
||||||
|
while (runner < runners) {
|
||||||
|
let raceNumber = Math.floor(Math.random() * 1000);
|
||||||
|
let isRegistered = Math.random() < 0.5; // get 50% chance of getting true
|
||||||
|
let runnerAge = Math.floor(Math.random() * 45 + 15); // considering a minimum age of 15yo and maximum age of 60yo
|
||||||
|
|
||||||
|
if (isRegistered && runnerAge > 18) {
|
||||||
|
raceNumber += 1000;
|
||||||
|
console.log(`Runner ${raceNumber} are to begin race at 09:30 MT.`);
|
||||||
|
} else if (!isRegistered && runnerAge > 18) {
|
||||||
|
raceNumber += 1000;
|
||||||
|
console.log(`Runner ${raceNumber} are to begin race at 11:00 MT. Please register before 10:00 MT.`);
|
||||||
|
} else if (runnerAge < 18) {
|
||||||
|
console.log(`Runner ${raceNumber} are to begin race at 12:30 MT. Please register before 11:30 MT.`);
|
||||||
|
} else {
|
||||||
|
console.log(`Please come to the registration desk for clarification.`);
|
||||||
|
}
|
||||||
|
runner++;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
getRunner(10);
|
||||||
69
_small_exercices/rock_paper_scissors.js
Normal file
69
_small_exercices/rock_paper_scissors.js
Normal file
@@ -0,0 +1,69 @@
|
|||||||
|
const getComputerChoice = () => {
|
||||||
|
const randomValue = Math.floor(Math.random() * 3);
|
||||||
|
switch (randomValue) {
|
||||||
|
case 0 :
|
||||||
|
return "rock";
|
||||||
|
case 1 :
|
||||||
|
return "paper";
|
||||||
|
case 2 :
|
||||||
|
return "scissors";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const getUserChoice = (userInput) => {
|
||||||
|
userInput ? userInput = userInput.toLowerCase() : userInput = getComputerChoice();
|
||||||
|
switch (userInput) {
|
||||||
|
case "rock" :
|
||||||
|
case "paper" :
|
||||||
|
case "scissors" :
|
||||||
|
case "bomb" :
|
||||||
|
return userInput;
|
||||||
|
default :
|
||||||
|
console.log('Error: Invalid input. Please choose rock, paper, scissors, or bomb.');
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const determineWinner = (userChoice, computerChoice) => {
|
||||||
|
if (userChoice === computerChoice) {
|
||||||
|
return(`${userChoice} against ${computerChoice}. Tie.`);
|
||||||
|
} else if (userChoice === "bomb") {
|
||||||
|
return(`${userChoice} against ${computerChoice}. The bomb exploded, everything but the user lose.`);
|
||||||
|
} else if (userChoice === "rock") {
|
||||||
|
if (computerChoice === "paper") {
|
||||||
|
return(`${userChoice} against ${computerChoice}. Computer wins.`);
|
||||||
|
} else {
|
||||||
|
return(`${userChoice} against ${computerChoice}. User wins.`);
|
||||||
|
}
|
||||||
|
} else if (userChoice === "paper") {
|
||||||
|
if (computerChoice === "scissors") {
|
||||||
|
return(`${userChoice} against ${computerChoice}. Computer wins.`);
|
||||||
|
} else {
|
||||||
|
return(`${userChoice} against ${computerChoice}. User wins.`);
|
||||||
|
}
|
||||||
|
} else if (userChoice === "scissors") {
|
||||||
|
if (computerChoice === "rock") {
|
||||||
|
return(`${userChoice} against ${computerChoice}. Computer wins.`);
|
||||||
|
} else {
|
||||||
|
return(`${userChoice} against ${computerChoice}. User wins.`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/*console.log(determineWinner("rock", "scissors"));
|
||||||
|
console.log(determineWinner("rock", "paper"));
|
||||||
|
console.log(determineWinner("bomb", "rock"));*/
|
||||||
|
|
||||||
|
const playGame = (choice) => {
|
||||||
|
const userChoice = getUserChoice(choice);
|
||||||
|
const computerChoice = getComputerChoice();
|
||||||
|
|
||||||
|
console.log(`
|
||||||
|
User choose > ${userChoice}
|
||||||
|
Computer choose > ${computerChoice}
|
||||||
|
------------------------------`);
|
||||||
|
|
||||||
|
console.log(determineWinner(userChoice, computerChoice));
|
||||||
|
}
|
||||||
|
|
||||||
|
playGame(); // type "bomb" to cheat
|
||||||
92
company_home_page_with_flexbox/index.html
Normal file
92
company_home_page_with_flexbox/index.html
Normal file
@@ -0,0 +1,92 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="fr">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Accueil - SESIQ</title>
|
||||||
|
<link rel="stylesheet" href="./resources/css/style.css">
|
||||||
|
<link rel="stylesheet" href="./resources/css/fonts.css">
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Orbitron:wght@400..900&display=swap" rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<img class="logo-img" src="./resources/img/main-logo.png">
|
||||||
|
<nav class="navigation-bar">
|
||||||
|
<ul>
|
||||||
|
<li class="navigation"><a href="#title">SESIQ</a></li>
|
||||||
|
<li class="navigation"><a href="#mission">Our vision</a></li>
|
||||||
|
<li class="navigation"><a href="#products">Our products</a></li>
|
||||||
|
<li class="navigation"><a href="#employees">Our heroes</a></li>
|
||||||
|
<li class="navigation"><a href="#machines">Our hope</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
<section class="container logo-title">
|
||||||
|
<img class="title-img" src="./resources/img/main-logo.jpg">
|
||||||
|
<h1>SESIQ INDUSTRIAL</h1>
|
||||||
|
</section>
|
||||||
|
<section class="container mission" id="mission">
|
||||||
|
<h1>Our Mission</h1>
|
||||||
|
</section>
|
||||||
|
<section class="container products" id="products">
|
||||||
|
<h1>Our Products</h1>
|
||||||
|
<div class="presentation">
|
||||||
|
<img src="./resources/img/starship-1.jpg">
|
||||||
|
<h2>Nebula-class Luxury ship</h2>
|
||||||
|
<p>This very ship was designed by our best engineers to appeal to our special clients wanting luxury and strong pirate-free hull.</p>
|
||||||
|
<h3>450.000 £</h3>
|
||||||
|
</div>
|
||||||
|
<div class="presentation">
|
||||||
|
<img src="./resources/img/starship-2.jpg">
|
||||||
|
<h2>Blackhole-class "Line breaker" Racer ship</h2>
|
||||||
|
<p>Designed to break by force - without firing any weapon - any law-enforcment or pirate barrage, at the cost of cargo space as well as confort, while remaining in the highest standards of equipments.</p>
|
||||||
|
<h3>375.000 £</h3>
|
||||||
|
</div>
|
||||||
|
<div class="presentation">
|
||||||
|
<img src="./resources/img/starship-3.jpg">
|
||||||
|
<h2>Moon-class Cargofret ship</h2>
|
||||||
|
<p>Specially designed for cargo space, while remaining in the best standards for sleep solutions, passengers transport and accomodations, you can pack up to 200 metric tons of merchandises.</p>
|
||||||
|
<h3>600.000 £</h3>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section class="container employees" id="employees">
|
||||||
|
<h1>Our Heroes</h1>
|
||||||
|
<div class="presentation">
|
||||||
|
<img src="./resources/img/employees-1.jpg">
|
||||||
|
<h2>Testers</h2>
|
||||||
|
<p>Our dedicated team for testing purposes will always make sure the highest luxury standards are enforced. Nothing but the best is good enough for them.</p>
|
||||||
|
</div>
|
||||||
|
<div class="presentation">
|
||||||
|
<img src="./resources/img/employees-2.jpg">
|
||||||
|
<h2>Protectors</h2>
|
||||||
|
<p>Protecting products and employees requires a full military-prepped and organized in-house militia. We can and will protect by any mean necessary the very starship we ought to ship you, and even offer some limited physical protection by landing out militia members. Please contact Sales before placing an order requiring it.</p>
|
||||||
|
</div>
|
||||||
|
<div class="presentation">
|
||||||
|
<img src="./resources/img/employees-3.jpg">
|
||||||
|
<h2>Engineers</h2>
|
||||||
|
<p>We only work with the best engineers the galaxy can found. The salary and compensation package include full dental plan, regular doctors appointments, exoskeletons provided at will to prevent ribs and lungs damages, as well as a full retirement plan and life insurance policy to ensure that your kids won't need anything in their live, would something happen.</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section class="container machines" id="machines">
|
||||||
|
<h1>Our Hope</h1>
|
||||||
|
<div class="presentation">
|
||||||
|
<img src="./resources/img/lines-1.jpg">
|
||||||
|
<h2>Security</h2>
|
||||||
|
<p>We only work with the higher security standards. Our employees are all fully equipped and trained to minimze any injury during worktime.</p>
|
||||||
|
</div>
|
||||||
|
<div class="presentation">
|
||||||
|
<img src="./resources/img/lines-2.jpg">
|
||||||
|
<h2>Scalability</h2>
|
||||||
|
<p>We work with small blocks, with extra scalability would the order requires it. Anything can be vertically and horizontally upgraded for better performances.</p>
|
||||||
|
</div>
|
||||||
|
<div class="presentation">
|
||||||
|
<img src="./resources/img/lines-3.jpg">
|
||||||
|
<h2>Continuous formation</h2>
|
||||||
|
<p>We believe in people well-trained and happy. So we always have 20% of our workforce composed only by young people without or preparing a diploma, or searching for a first employment without experience.</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<footer>2025. Gauvain Boiché. All rights reserved, but feel free to steal anything you want and consider it public domain. All pictures are AI generated and thus not subject to copyright.</footer>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
17
company_home_page_with_flexbox/resources/css/fonts.css
Normal file
17
company_home_page_with_flexbox/resources/css/fonts.css
Normal file
@@ -0,0 +1,17 @@
|
|||||||
|
.nunito-sans-<uniquifier> {
|
||||||
|
font-family: "Nunito Sans", sans-serif;
|
||||||
|
font-optical-sizing: auto;
|
||||||
|
font-weight: <weight>;
|
||||||
|
font-style: normal;
|
||||||
|
font-variation-settings:
|
||||||
|
"wdth" 100,
|
||||||
|
"YTLC" 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.orbitron-<uniquifier> {
|
||||||
|
font-family: "Orbitron", sans-serif;
|
||||||
|
font-optical-sizing: auto;
|
||||||
|
font-weight: <weight>;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
161
company_home_page_with_flexbox/resources/css/style.css
Normal file
161
company_home_page_with_flexbox/resources/css/style.css
Normal file
@@ -0,0 +1,161 @@
|
|||||||
|
body {
|
||||||
|
font-family: "Nunito Sans", sans-serif;
|
||||||
|
background-color: seashell;
|
||||||
|
color: rgb(22, 29, 36);
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* GENERIC ELEMENTS */
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-family: Orbitron, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
section {
|
||||||
|
border-bottom: solid 5px black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: start;
|
||||||
|
align-content: space-around;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 1000px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container h1 {
|
||||||
|
flex-basis: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* HEADER */
|
||||||
|
|
||||||
|
header {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 99;
|
||||||
|
display: inline-grid;
|
||||||
|
justify-items: center;
|
||||||
|
align-items: center;
|
||||||
|
background-color: black;
|
||||||
|
width: 100%;
|
||||||
|
height: 120px;
|
||||||
|
}
|
||||||
|
|
||||||
|
header ul li {
|
||||||
|
display: inline-flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
header ul li:not(:last-child)::after {
|
||||||
|
color: seashell;
|
||||||
|
content: "°";
|
||||||
|
margin: 0 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
header ul li a {
|
||||||
|
color: seashell;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo-img {
|
||||||
|
height: 50px;
|
||||||
|
width: auto;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* SECTION : TITLE */
|
||||||
|
|
||||||
|
.container .logo-title {
|
||||||
|
margin-top: 80px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title-img {
|
||||||
|
margin-top: 130px;
|
||||||
|
width: 600px;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* SECTION : MISSION */
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* SECTION : PRODUCTS */
|
||||||
|
|
||||||
|
.container .presentation {
|
||||||
|
width: 45%;
|
||||||
|
margin: 2.5%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.presentation img {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* SECTION : EMPLOYEES */
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* SECTION : MACHINES */
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* FOOTER */
|
||||||
|
|
||||||
|
footer {
|
||||||
|
width: 500px;
|
||||||
|
font-size: 0.7em;
|
||||||
|
text-align: center;
|
||||||
|
margin: 10px auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* SMALLER SCREEN ADAPTATIONS */
|
||||||
|
|
||||||
|
@media only screen and (max-width: 800px) {
|
||||||
|
.container .presentation {
|
||||||
|
width: 90%;
|
||||||
|
margin: 5%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title-img {
|
||||||
|
margin-top: 60px;
|
||||||
|
width: 300px;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo-img {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
height: 50px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 600px) {
|
||||||
|
.title-img {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo-img {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
width: 90%;
|
||||||
|
position: static;
|
||||||
|
font-size: 0.5em;
|
||||||
|
text-align: center;
|
||||||
|
margin: 10px auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
BIN
company_home_page_with_flexbox/resources/img/employees-1.jpg
Normal file
BIN
company_home_page_with_flexbox/resources/img/employees-1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 96 KiB |
BIN
company_home_page_with_flexbox/resources/img/employees-2.jpg
Normal file
BIN
company_home_page_with_flexbox/resources/img/employees-2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 125 KiB |
BIN
company_home_page_with_flexbox/resources/img/employees-3.jpg
Normal file
BIN
company_home_page_with_flexbox/resources/img/employees-3.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 95 KiB |
BIN
company_home_page_with_flexbox/resources/img/lines-1.jpg
Normal file
BIN
company_home_page_with_flexbox/resources/img/lines-1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 58 KiB |
BIN
company_home_page_with_flexbox/resources/img/lines-2.jpg
Normal file
BIN
company_home_page_with_flexbox/resources/img/lines-2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 154 KiB |
BIN
company_home_page_with_flexbox/resources/img/lines-3.jpg
Normal file
BIN
company_home_page_with_flexbox/resources/img/lines-3.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 81 KiB |
BIN
company_home_page_with_flexbox/resources/img/main-logo.jpg
Normal file
BIN
company_home_page_with_flexbox/resources/img/main-logo.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
BIN
company_home_page_with_flexbox/resources/img/main-logo.png
Normal file
BIN
company_home_page_with_flexbox/resources/img/main-logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 127 KiB |
BIN
company_home_page_with_flexbox/resources/img/starship-1.jpg
Normal file
BIN
company_home_page_with_flexbox/resources/img/starship-1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 92 KiB |
BIN
company_home_page_with_flexbox/resources/img/starship-2.jpg
Normal file
BIN
company_home_page_with_flexbox/resources/img/starship-2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 62 KiB |
BIN
company_home_page_with_flexbox/resources/img/starship-3.jpg
Normal file
BIN
company_home_page_with_flexbox/resources/img/starship-3.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 98 KiB |
28
company_home_page_with_flexbox/syllabus.txt
Normal file
28
company_home_page_with_flexbox/syllabus.txt
Normal file
@@ -0,0 +1,28 @@
|
|||||||
|
You’re going to build a company homepage for a real or imagined company. You’ll get to decide exactly what content to include for this company, but you should at least include:
|
||||||
|
|
||||||
|
A title and logo or splash image.
|
||||||
|
A mission statement or brief description of the company.
|
||||||
|
A list or set of images and titles representing the product or products of the company.
|
||||||
|
A section describing some of the company’s employees or teammates.
|
||||||
|
|
||||||
|
If you want, you can tour our example site (https://content.codecademy.com/PRO/independent-practice-projects/flexbox-business-site/example-site/index.html) for inspiration or to see how we used flexbox. Your site will probably look very different from ours, and that’s great!
|
||||||
|
|
||||||
|
Your project should use flexbox styling for layout. Aim to use flexbox’s advantages, such as easy horizontal and vertical positioning, flexible element flows as the page size changes, and great styling for repeated elements.
|
||||||
|
|
||||||
|
In our example project, we used flexbox to:
|
||||||
|
|
||||||
|
Create a centered navbar at the top of the page.
|
||||||
|
Create a flexible display of company products that changes from a more grid-like list to a column list as the page shrinks.
|
||||||
|
Create a flexible display of company employees.
|
||||||
|
|
||||||
|
Our example site is not an elaborate use of flexbox–we’re sure you can come up with other uses of flexbox in your layout, such as taking advantage of flex-grow or flex-shrink.
|
||||||
|
|
||||||
|
Your page should also use custom styles for other properties, such as colors, fonts, and other layout properties such as borders and padding.
|
||||||
|
|
||||||
|
Our example site uses:
|
||||||
|
|
||||||
|
A simple color scheme using CSS named colors, but yours can be more elaborate with hexadecimal, RGB, or HSL colors.
|
||||||
|
Fonts from the Google Fonts API.
|
||||||
|
Custom images. A great source for project images when you’re practicing web design is Unsplash.
|
||||||
|
|
||||||
|
Get creative! Customizing your site’s look and feel is one of the most exciting parts of building your own websites.
|
||||||
BIN
fotomatic_broken.zip
Normal file
BIN
fotomatic_broken.zip
Normal file
Binary file not shown.
122
fotomatic_broken/index.html
Normal file
122
fotomatic_broken/index.html
Normal file
@@ -0,0 +1,122 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Damion" rel="stylesheet">
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Rubik" rel="stylesheet">
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,600,700" rel="stylesheet">
|
||||||
|
<link rel="stylesheet" href="./resources/css/reset.css">
|
||||||
|
<link rel="stylesheet" href="./resources/css/style.css">
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<!-- Header -->
|
||||||
|
<header>
|
||||||
|
<div class="content">
|
||||||
|
<a href="index.html" class="desktop logo">Fotomatic</a>
|
||||||
|
<nav class="desktop">
|
||||||
|
<ul>
|
||||||
|
<li><a href="#">Product detail</a></li>
|
||||||
|
<li><a href="#">About us</a></li>
|
||||||
|
<li><a href="https://www.instagram.com/">Follow us <img class="icon" src="./resources/images/instagram.png"></a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
<nav class="mobile">
|
||||||
|
<ul>
|
||||||
|
<li><a href="#"><img src="./resources/images/ic-logo.svg"></a></li>
|
||||||
|
<li><a href="#"><img src="./resources/images/ic-product-detail.svg"></a></li>
|
||||||
|
<li><a href="#"><img src="./resources/images/ic-about-us.svg"></a></li>
|
||||||
|
<li><a href="#" class="button">Join us</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<!-- Main Content -->
|
||||||
|
<div class="main-content">
|
||||||
|
|
||||||
|
<!-- Sign Up Section -->
|
||||||
|
<div id="sign-up-section" class="banner">
|
||||||
|
<div id="sign-up-cta">
|
||||||
|
<div class="content center">
|
||||||
|
<div class="header">
|
||||||
|
|
||||||
|
<h2 class="cursive">Instant</h2>
|
||||||
|
<h1 class="striking">FORMAT CAMERA</h1>
|
||||||
|
</div>
|
||||||
|
<div class="email">
|
||||||
|
<span>
|
||||||
|
Email us to request a demo and be in our waiting list for the <strong>Febuary 2017</strong> release!
|
||||||
|
</span>
|
||||||
|
<div class="button">Join the waiting list</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Features Section -->
|
||||||
|
<div id="features-section">
|
||||||
|
<div class="feature">
|
||||||
|
<div class="center">
|
||||||
|
<div class="image-container">
|
||||||
|
<img src="./resources/images/feature-1.png" />
|
||||||
|
</div>
|
||||||
|
<div class="content">
|
||||||
|
<h2>Advanced, automatic, instant</h2>
|
||||||
|
<h3>Shutter speed, apperture and flash output adjust automatically</h3>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="feature">
|
||||||
|
<div class="center">
|
||||||
|
<div class="image-container">
|
||||||
|
<img src="./resources/images/feature-2.png" />
|
||||||
|
</div>
|
||||||
|
<div class="content">
|
||||||
|
<h2>Beautifully crafted inside-out</h2>
|
||||||
|
<h3>From the paint outside to the tiny screw inside, Fotomatic is crafted with love and 20-year of expertise</h3>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Filters Section -->
|
||||||
|
<div id="filters-section">
|
||||||
|
<div class="content center">
|
||||||
|
<h2>Over 20+ filters to choose from</h2>
|
||||||
|
<h3>Feed your creativity with 20 different filter designed by our eclectic in-house photographers!</h3>
|
||||||
|
</div>
|
||||||
|
<div class="images-container">
|
||||||
|
<div class="image-container">
|
||||||
|
<img src="./resources/images/filter-1.png" />
|
||||||
|
</div>
|
||||||
|
<div class="image-container">
|
||||||
|
<img src="./resources/images/filter-2.png" />
|
||||||
|
</div>
|
||||||
|
<div class="image-container">
|
||||||
|
<img src="./resources/images/filter-3.png" />
|
||||||
|
</div>
|
||||||
|
<div class="image-container extra">
|
||||||
|
<img src="./resources/images/filter-4.png" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Quotes Section
|
||||||
|
<div id="quotes-section">
|
||||||
|
<div class="content center">
|
||||||
|
<span class="quote">“It’s truly something that could create a brand new photography Renaissance”</span>
|
||||||
|
<img class="quote-citation" src="./resources/images/photography-logo.png" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Footer -->
|
||||||
|
<footer>
|
||||||
|
<div class="content">
|
||||||
|
<span class="copyright">© 2016 Fotomatic, All Rights Reserved</span>
|
||||||
|
<span class="location">Designed in NYC</span>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
53
fotomatic_broken/resources/css/reset.css
Normal file
53
fotomatic_broken/resources/css/reset.css
Normal file
@@ -0,0 +1,53 @@
|
|||||||
|
/* http://meyerweb.com/eric/tools/css/reset/
|
||||||
|
v2.0 | 20110126
|
||||||
|
License: none (public domain)
|
||||||
|
*/
|
||||||
|
|
||||||
|
html, body, div, span, applet, object, iframe,
|
||||||
|
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||||
|
a, abbr, acronym, address, big, cite, code,
|
||||||
|
del, dfn, em, img, ins, kbd, q, s, samp,
|
||||||
|
small, strike, strong, sub, sup, tt, var,
|
||||||
|
b, u, i, center,
|
||||||
|
dl, dt, dd, ol, ul, li,
|
||||||
|
fieldset, form, label, legend,
|
||||||
|
table, caption, tbody, tfoot, thead, tr, th, td,
|
||||||
|
article, aside, canvas, details, embed,
|
||||||
|
figure, figcaption, footer, header, hgroup,
|
||||||
|
menu, nav, output, ruby, section, summary,
|
||||||
|
time, mark, audio, video {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
border: 0;
|
||||||
|
font-size: 100%;
|
||||||
|
font: inherit;
|
||||||
|
vertical-align: baseline;
|
||||||
|
}
|
||||||
|
/* HTML5 display-role reset for older browsers */
|
||||||
|
article, aside, details, figcaption, figure,
|
||||||
|
footer, header, hgroup, menu, nav, section {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
ol, ul {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
blockquote, q {
|
||||||
|
quotes: none;
|
||||||
|
}
|
||||||
|
blockquote:before, blockquote:after,
|
||||||
|
q:before, q:after {
|
||||||
|
content: '';
|
||||||
|
content: none;
|
||||||
|
}
|
||||||
|
table {
|
||||||
|
border-collapse: collapse;
|
||||||
|
border-spacing: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: black;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
401
fotomatic_broken/resources/css/style.css
Normal file
401
fotomatic_broken/resources/css/style.css
Normal file
@@ -0,0 +1,401 @@
|
|||||||
|
/* Universal Styles */
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-family: "Roboto", sans-serif;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-content {
|
||||||
|
position: relative;
|
||||||
|
top: 5.3125rem; /* To offset for fixed header. */
|
||||||
|
}
|
||||||
|
|
||||||
|
.center {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button {
|
||||||
|
border-radius: 4px;
|
||||||
|
background-color: #4a4a4a;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-container {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-container img {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 760px) {
|
||||||
|
.main-content {
|
||||||
|
top: 2.5625rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Header */
|
||||||
|
|
||||||
|
header {
|
||||||
|
position: fixed;
|
||||||
|
width: 100%;
|
||||||
|
border-bottom: solid 1px #c6c1c1;
|
||||||
|
background-color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
header .content {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 1.875rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
header .logo {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
header nav ul {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav li {
|
||||||
|
padding-left: 3.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav a {
|
||||||
|
vertical-align: bottom;
|
||||||
|
line-height: 1.6;
|
||||||
|
font-size: 1rem;
|
||||||
|
color: #4a4a4a;
|
||||||
|
}
|
||||||
|
|
||||||
|
header .icon {
|
||||||
|
width: 1rem;
|
||||||
|
padding-left: .75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
header .mobile {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 760px) {
|
||||||
|
header .desktop {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
header .mobile {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
header .content {
|
||||||
|
padding: .5rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
header .mobile ul {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
header .mobile li {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
header .mobile .button {
|
||||||
|
padding: .1875rem .5rem;
|
||||||
|
background-color: #9dc20b;
|
||||||
|
line-height: 1.6;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Sign Up Section */
|
||||||
|
|
||||||
|
#sign-up-section {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-items: flex-start;
|
||||||
|
height: 43.5rem;
|
||||||
|
background-image: url(../images/banner-landingpage.jpg);
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sign-up-cta {
|
||||||
|
padding: 0 5rem 2.5rem 5rem;
|
||||||
|
border: solid 1px #979797;
|
||||||
|
border-radius: 4px;
|
||||||
|
background-color: #9dc20b;
|
||||||
|
margin-top: 170px;
|
||||||
|
margin-left: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sign-up-cta .content {
|
||||||
|
width: 25.625rem;
|
||||||
|
margin-top: 2rem;
|
||||||
|
font-family: "Roboto", sans-serif;
|
||||||
|
font-size: 1.25rem;
|
||||||
|
line-height: 1.4;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sign-up-cta h1 {
|
||||||
|
font-size: 3.125rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sign-up-cta h2 {
|
||||||
|
font-size: 2.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sign-up-cta span strong {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sign-up-cta .cursive {
|
||||||
|
font-family: "Damion", cursive;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sign-up-cta .striking {
|
||||||
|
font-family: "Rubik", sans-serif;
|
||||||
|
padding-bottom: .75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sign-up-cta .button {
|
||||||
|
margin-top: 1.625rem;
|
||||||
|
padding: 1.25rem 7.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 760px) {
|
||||||
|
#sign-up-section {
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
height: 28rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sign-up-cta {
|
||||||
|
position: static;
|
||||||
|
width: auto;
|
||||||
|
height: auto;
|
||||||
|
background-color: transparent;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sign-up-cta .content {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sign-up-cta .email {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sign-up-cta h1 {
|
||||||
|
font-size: 3.125rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sign-up-cta h2 {
|
||||||
|
font-size: 2.25rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 450px) {
|
||||||
|
#sign-up-section {
|
||||||
|
height: 20rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sign-up-cta h1 {
|
||||||
|
font-size: 2.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sign-up-cta h2 {
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Features Section */
|
||||||
|
|
||||||
|
#features-section {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 4rem 5%;
|
||||||
|
background-color: #f3f3f3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature {
|
||||||
|
flex: 1;
|
||||||
|
padding: 2rem;
|
||||||
|
margin: 0px 1.25rem;
|
||||||
|
background-color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature .image-container {
|
||||||
|
width: 90%;
|
||||||
|
height: 65%;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature .content {
|
||||||
|
padding: 2.5rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.feature h2 {
|
||||||
|
padding-bottom: .5rem;
|
||||||
|
font-size: 2.25rem;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #4a4a4a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature h3 {
|
||||||
|
font-size: 1rem;
|
||||||
|
line-height: 1.2;
|
||||||
|
font-weight: 300;
|
||||||
|
color: #4a4a4a;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 890px) {
|
||||||
|
.feature h2 {
|
||||||
|
font-size: 1.125rem;
|
||||||
|
line-height: 1.3;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature h3 {
|
||||||
|
font-size: .875rem;
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 760px) {
|
||||||
|
#features-section {
|
||||||
|
flex-flow: column;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature {
|
||||||
|
margin: 0;
|
||||||
|
padding: 1.25rem 1rem 0 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Filters Section */
|
||||||
|
|
||||||
|
#filters-section {
|
||||||
|
padding: 4rem 0;
|
||||||
|
background-color: #4a4a4a;
|
||||||
|
}
|
||||||
|
|
||||||
|
#filters-section .content {
|
||||||
|
padding: 0 .625rem;
|
||||||
|
margin-bottom: 5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#filters-section .content h2 {
|
||||||
|
font-size: 2.25rem;
|
||||||
|
font-weight: bold;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
#filters-section .content h3 {
|
||||||
|
font-size: 1rem;
|
||||||
|
line-height: 1.4;
|
||||||
|
font-weight: 300;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
#filters-section .images-container {
|
||||||
|
max-width: 100%;
|
||||||
|
padding: 0 1%;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 760px) {
|
||||||
|
#filters-section {
|
||||||
|
padding: 1.5rem 0 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#filters-section .content {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#filters-section .content h2 {
|
||||||
|
padding-bottom: .625rem;
|
||||||
|
font-size: 1.125rem;
|
||||||
|
line-height: 1.3;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
#filters-section .content h3 {
|
||||||
|
font-size: .875rem;
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
|
||||||
|
#filters-section .images-container {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#filters-section .extra {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Quotes Section */
|
||||||
|
|
||||||
|
#quotes-section {
|
||||||
|
background-color: #f3f3f3;
|
||||||
|
}
|
||||||
|
|
||||||
|
#quotes-section content {
|
||||||
|
padding: 5rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#quotes-section quote {
|
||||||
|
padding-right: 1.875rem;
|
||||||
|
font-family: "Palatino", serif;
|
||||||
|
font-size: 1.875rem;
|
||||||
|
line-height: 1.1;
|
||||||
|
font-style: italic;
|
||||||
|
color: #4a4a4a;
|
||||||
|
}
|
||||||
|
|
||||||
|
#quotes-section quote-citation {
|
||||||
|
height: 1.875rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 760px) {
|
||||||
|
#quotes-section content {
|
||||||
|
padding: 1.875rem .625rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#quotes-section quote {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
|
||||||
|
#quotes-section quote-citation {
|
||||||
|
display: block;
|
||||||
|
padding-top: 1rem;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Footer */
|
||||||
|
|
||||||
|
footer {
|
||||||
|
background-color: #9b9b9b;
|
||||||
|
padding: 1.5rem 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer .content {
|
||||||
|
color: white;
|
||||||
|
display: flex;
|
||||||
|
font-size: .75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer .copyright {
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (min-width: 760px) {
|
||||||
|
footer .content {
|
||||||
|
font-size: .625rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
411
fotomatic_broken/resources/css/style_CORRIGE.css
Normal file
411
fotomatic_broken/resources/css/style_CORRIGE.css
Normal file
@@ -0,0 +1,411 @@
|
|||||||
|
/* Universal Styles */
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-family: "Roboto", sans-serif;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-content {
|
||||||
|
position: relative;
|
||||||
|
top: 5.3125rem; /* To offset for fixed header. */
|
||||||
|
}
|
||||||
|
|
||||||
|
.center {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button {
|
||||||
|
border-radius: 4px;
|
||||||
|
background-color: #4a4a4a;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-container {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-container img {
|
||||||
|
display: block;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 760px) {
|
||||||
|
.main-content {
|
||||||
|
top: 2.5625rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Header */
|
||||||
|
|
||||||
|
header {
|
||||||
|
position: fixed;
|
||||||
|
z-index: 100;
|
||||||
|
width: 100%;
|
||||||
|
border-bottom: solid 1px #c6c1c1;
|
||||||
|
background-color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
header .content {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 1.875rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
header .logo {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
header nav ul {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav li {
|
||||||
|
padding-left: 3.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav a {
|
||||||
|
vertical-align: bottom;
|
||||||
|
line-height: 1.6;
|
||||||
|
font-size: 1rem;
|
||||||
|
color: #4a4a4a;
|
||||||
|
}
|
||||||
|
|
||||||
|
header .icon {
|
||||||
|
width: 1rem;
|
||||||
|
padding-left: .75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
header .mobile {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 760px) {
|
||||||
|
header .desktop {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
header .mobile {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
header .content {
|
||||||
|
padding: .5rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
header .mobile ul {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
header .mobile li {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
header .mobile .button {
|
||||||
|
padding: .1875rem .5rem;
|
||||||
|
background-color: #9dc20b;
|
||||||
|
line-height: 1.6;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Sign Up Section */
|
||||||
|
|
||||||
|
#sign-up-section {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-items: flex-start;
|
||||||
|
height: 43.5rem;
|
||||||
|
background-image: url('../images/banner-landingpage.jpg');
|
||||||
|
background-position: bottom;
|
||||||
|
background-size: cover;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sign-up-cta {
|
||||||
|
position: relative;
|
||||||
|
top: 171px;
|
||||||
|
left: 10%;
|
||||||
|
padding: 0 5rem 2.5rem 5rem;
|
||||||
|
border: solid 1px #979797;
|
||||||
|
border-radius: 4px;
|
||||||
|
background-color: #9dc20b;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sign-up-cta .content {
|
||||||
|
width: 25.625rem;
|
||||||
|
margin-top: 2rem;
|
||||||
|
font-family: "Roboto", sans-serif;
|
||||||
|
font-size: 1.25rem;
|
||||||
|
line-height: 1.4;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sign-up-cta h1 {
|
||||||
|
font-size: 3.125rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sign-up-cta h2 {
|
||||||
|
font-size: 2.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sign-up-cta span strong {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sign-up-cta .cursive {
|
||||||
|
font-family: "Damion", cursive;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sign-up-cta .striking {
|
||||||
|
font-family: "Rubik", sans-serif;
|
||||||
|
padding-bottom: .75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sign-up-cta .button {
|
||||||
|
margin-top: 1.625rem;
|
||||||
|
padding: 1.25rem 7.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 760px) {
|
||||||
|
#sign-up-section {
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
height: 28rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sign-up-cta {
|
||||||
|
position: static;
|
||||||
|
width: auto;
|
||||||
|
height: auto;
|
||||||
|
background-color: transparent;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sign-up-cta .content {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sign-up-cta .email {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sign-up-cta h1 {
|
||||||
|
font-size: 3.125rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sign-up-cta h2 {
|
||||||
|
font-size: 2.25rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 450px) {
|
||||||
|
#sign-up-section {
|
||||||
|
height: 20rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sign-up-cta h1 {
|
||||||
|
font-size: 2.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sign-up-cta h2 {
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Features Section */
|
||||||
|
|
||||||
|
#features-section {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 4rem 5%;
|
||||||
|
background-color: #f3f3f3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature {
|
||||||
|
flex: 1;
|
||||||
|
padding: 2rem;
|
||||||
|
margin: 0px 1.25rem;
|
||||||
|
background-color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature .image-container {
|
||||||
|
width: 90%;
|
||||||
|
height: 65%;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature .content {
|
||||||
|
padding: 2.5rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature h2 {
|
||||||
|
padding-bottom: .5rem;
|
||||||
|
font-size: 2.25rem;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #4a4a4a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature h3 {
|
||||||
|
font-size: 1rem;
|
||||||
|
line-height: 1.2;
|
||||||
|
font-weight: 300;
|
||||||
|
color: #4a4a4a;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 890px) {
|
||||||
|
.feature h2 {
|
||||||
|
font-size: 1.125rem;
|
||||||
|
line-height: 1.3;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature h3 {
|
||||||
|
font-size: .875rem;
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 760px) {
|
||||||
|
#features-section {
|
||||||
|
flex-flow: column;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature {
|
||||||
|
margin: 0;
|
||||||
|
padding: 1.25rem 1rem 0 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature .content {
|
||||||
|
padding: 1.25rem 0 1.875rem 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Filters Section */
|
||||||
|
|
||||||
|
#filters-section {
|
||||||
|
padding: 4rem 0;
|
||||||
|
background-color: #4a4a4a;
|
||||||
|
}
|
||||||
|
|
||||||
|
#filters-section .content {
|
||||||
|
padding: 0 .625rem;
|
||||||
|
margin-bottom: 5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#filters-section .content h2 {
|
||||||
|
font-size: 2.25rem;
|
||||||
|
font-weight: bold;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
#filters-section .content h3 {
|
||||||
|
font-size: 1rem;
|
||||||
|
line-height: 1.4;
|
||||||
|
font-weight: 300;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
#filters-section .images-container {
|
||||||
|
display: flex;
|
||||||
|
max-width: 100%;
|
||||||
|
padding: 0 1%;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 760px) {
|
||||||
|
#filters-section {
|
||||||
|
padding: 1.5rem 0 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#filters-section .content {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#filters-section .content h2 {
|
||||||
|
padding-bottom: .625rem;
|
||||||
|
font-size: 1.125rem;
|
||||||
|
line-height: 1.3;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
#filters-section .content h3 {
|
||||||
|
font-size: .875rem;
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
|
||||||
|
#filters-section .images-container {
|
||||||
|
display: flex;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#filters-section .extra {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Quotes Section */
|
||||||
|
|
||||||
|
#quotes-section {
|
||||||
|
background-color: #f3f3f3;
|
||||||
|
}
|
||||||
|
|
||||||
|
#quotes-section .content {
|
||||||
|
padding: 5rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#quotes-section .quote {
|
||||||
|
padding-right: 1.875rem;
|
||||||
|
font-family: "Palatino", serif;
|
||||||
|
font-size: 1.875rem;
|
||||||
|
line-height: 1.1;
|
||||||
|
font-style: italic;
|
||||||
|
color: #4a4a4a;
|
||||||
|
}
|
||||||
|
|
||||||
|
#quotes-section .quote-citation {
|
||||||
|
height: 1.875rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 760px) {
|
||||||
|
#quotes-section .content {
|
||||||
|
padding: 1.875rem .625rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#quotes-section .quote {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
|
||||||
|
#quotes-section .quote-citation {
|
||||||
|
display: block;
|
||||||
|
padding-top: 1rem;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Footer */
|
||||||
|
|
||||||
|
footer {
|
||||||
|
background-color: #9b9b9b;
|
||||||
|
padding: 1.5rem 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer .content {
|
||||||
|
color: white;
|
||||||
|
display: flex;
|
||||||
|
font-size: .75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer .copyright {
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 760px) {
|
||||||
|
footer .content {
|
||||||
|
font-size: .625rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
BIN
fotomatic_broken/resources/images/banner-landingpage.jpg
Normal file
BIN
fotomatic_broken/resources/images/banner-landingpage.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 522 KiB |
BIN
fotomatic_broken/resources/images/feature-1.png
Normal file
BIN
fotomatic_broken/resources/images/feature-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
BIN
fotomatic_broken/resources/images/feature-2.png
Normal file
BIN
fotomatic_broken/resources/images/feature-2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
BIN
fotomatic_broken/resources/images/filter-1.png
Normal file
BIN
fotomatic_broken/resources/images/filter-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 664 KiB |
BIN
fotomatic_broken/resources/images/filter-2.png
Normal file
BIN
fotomatic_broken/resources/images/filter-2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 881 KiB |
BIN
fotomatic_broken/resources/images/filter-3.png
Normal file
BIN
fotomatic_broken/resources/images/filter-3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 592 KiB |
BIN
fotomatic_broken/resources/images/filter-4.png
Normal file
BIN
fotomatic_broken/resources/images/filter-4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 768 KiB |
14
fotomatic_broken/resources/images/ic-about-us.svg
Normal file
14
fotomatic_broken/resources/images/ic-about-us.svg
Normal file
@@ -0,0 +1,14 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<svg width="29px" height="18px" viewBox="0 0 29 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||||
|
<!-- Generator: sketchtool 41.2 (35397) - http://www.bohemiancoding.com/sketch -->
|
||||||
|
<title>C9E72C16-2987-4DEC-A43B-989EA4FF9285</title>
|
||||||
|
<desc>Created with sketchtool.</desc>
|
||||||
|
<defs></defs>
|
||||||
|
<g id="Visual-Design" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||||
|
<g id="Fotomat_mobileLanding" transform="translate(-160.000000, -15.000000)" fill="#4A4A4A">
|
||||||
|
<g id="ic_aboutUs" transform="translate(160.000000, 15.000000)">
|
||||||
|
<path d="M19.2857143,10.2857143 C18.9128571,10.2857143 18.4885714,10.2857143 18.0385714,10.35 C19.53,11.43 20.5714286,12.8571429 20.5714286,14.7857143 L20.5714286,18 L28.2857143,18 L28.2857143,14.7857143 C28.2857143,11.79 22.2814286,10.2857143 19.2857143,10.2857143 L19.2857143,10.2857143 Z M9,10.2857143 C6.00428571,10.2857143 0,11.79 0,14.7857143 L0,18 L18,18 L18,14.7857143 C18,11.79 11.9957143,10.2857143 9,10.2857143 L9,10.2857143 Z M9,7.71428571 C11.1302412,7.71428571 12.8571429,5.98738404 12.8571429,3.85714286 C12.8571429,1.72690168 11.1302412,0 9,0 C6.86975882,0 5.14285714,1.72690168 5.14285714,3.85714286 C5.14285714,5.98738404 6.86975882,7.71428571 9,7.71428571 L9,7.71428571 Z M19.2857143,7.71428571 C21.4159555,7.71428571 23.1428571,5.98738404 23.1428571,3.85714286 C23.1428571,1.72690168 21.4159555,0 19.2857143,0 C17.1554731,0 15.4285714,1.72690168 15.4285714,3.85714286 C15.4285714,5.98738404 17.1554731,7.71428571 19.2857143,7.71428571 Z" id="Shape"></path>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.7 KiB |
17
fotomatic_broken/resources/images/ic-logo.svg
Normal file
17
fotomatic_broken/resources/images/ic-logo.svg
Normal file
@@ -0,0 +1,17 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<svg width="22px" height="22px" viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||||
|
<!-- Generator: sketchtool 41.2 (35397) - http://www.bohemiancoding.com/sketch -->
|
||||||
|
<title>4A09CB50-F1D5-4364-BAE6-33FCCDC44261</title>
|
||||||
|
<desc>Created with sketchtool.</desc>
|
||||||
|
<defs></defs>
|
||||||
|
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||||
|
<g id="nav" transform="translate(-16.000000, -13.000000)">
|
||||||
|
<g id="ic_logo" transform="translate(16.000000, 13.000000)">
|
||||||
|
<rect id="Rectangle" fill="#4A4A4A" x="0" y="0" width="22" height="22"></rect>
|
||||||
|
<text id="F" font-family="AndaleMono, Andale Mono" font-size="18" font-weight="normal" fill="#FFFFFF">
|
||||||
|
<tspan x="5.92307692" y="17.5">F</tspan>
|
||||||
|
</text>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 955 B |
14
fotomatic_broken/resources/images/ic-product-detail.svg
Normal file
14
fotomatic_broken/resources/images/ic-product-detail.svg
Normal file
@@ -0,0 +1,14 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<svg width="24px" height="22px" viewBox="0 0 24 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||||
|
<!-- Generator: sketchtool 41.2 (35397) - http://www.bohemiancoding.com/sketch -->
|
||||||
|
<title>2C7427D9-ECE1-4C4E-8060-6394F9CC28E7</title>
|
||||||
|
<desc>Created with sketchtool.</desc>
|
||||||
|
<defs></defs>
|
||||||
|
<g id="Visual-Design" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||||
|
<g id="Fotomat_mobileLanding" transform="translate(-89.000000, -13.000000)" fill="#4A4A4A">
|
||||||
|
<g id="ic_productDetail" transform="translate(89.000000, 13.000000)">
|
||||||
|
<path d="M2.4,2.4 L6,2.4 L8.4,0 L15.6,0 L18,2.4 L21.6,2.4 C22.9254834,2.4 24,3.4745166 24,4.8 L24,19.2 C24,20.5254834 22.9254834,21.6 21.6,21.6 L2.4,21.6 C1.0745166,21.6 0,20.5254834 0,19.2 L0,4.8 C-2.66453526e-16,3.4745166 1.0745166,2.4 2.4,2.4 L2.4,2.4 Z M12,6 C8.6862915,6 6,8.6862915 6,12 C6,15.3137085 8.6862915,18 12,18 C15.3137085,18 18,15.3137085 18,12 C18,8.6862915 15.3137085,6 12,6 L12,6 Z M12,8.4 C13.9882251,8.4 15.6,10.0117749 15.6,12 C15.6,13.9882251 13.9882251,15.6 12,15.6 C10.0117749,15.6 8.4,13.9882251 8.4,12 C8.4,10.0117749 10.0117749,8.4 12,8.4 Z" id="Shape"></path>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.3 KiB |
BIN
fotomatic_broken/resources/images/instagram.png
Normal file
BIN
fotomatic_broken/resources/images/instagram.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
BIN
fotomatic_broken/resources/images/photography-logo.png
Normal file
BIN
fotomatic_broken/resources/images/photography-logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
BIN
fotomatic_broken/resources/images/staff/allie.png
Normal file
BIN
fotomatic_broken/resources/images/staff/allie.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 138 KiB |
BIN
fotomatic_broken/resources/images/staff/andy.png
Normal file
BIN
fotomatic_broken/resources/images/staff/andy.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 68 KiB |
BIN
fotomatic_broken/resources/images/staff/jessica.png
Normal file
BIN
fotomatic_broken/resources/images/staff/jessica.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 101 KiB |
BIN
html-css-cheatsheet-starting.zip
Normal file
BIN
html-css-cheatsheet-starting.zip
Normal file
Binary file not shown.
47
html-css-cheatsheet-starting/index.html
Normal file
47
html-css-cheatsheet-starting/index.html
Normal file
@@ -0,0 +1,47 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="fr">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Codecademy HTML/CSS Cheatsheet</title>
|
||||||
|
<link rel="stylesheet" href="./styles.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>Codecademy HTML/CSS Cheatsheet</h1>
|
||||||
|
<nav>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#html">HTML</a></li>
|
||||||
|
<li><a href="#css">CSS</a></li>
|
||||||
|
<li><a href="#resources">Resources</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
<main>
|
||||||
|
<section id="html">
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Élément</th>
|
||||||
|
<th>Description</th>
|
||||||
|
<th>Exemple</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tr>
|
||||||
|
<td id="column-1">Aze</td>
|
||||||
|
<td id="column-2">Aze</td>
|
||||||
|
<td id="column-3">Aze</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td id="column-1">Aze</td>
|
||||||
|
<td id="column-2">Aze</td>
|
||||||
|
<td id="column-3">Aze</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td id="column-1">Aze</td>
|
||||||
|
<td id="column-2">Aze</td>
|
||||||
|
<td id="column-3">Aze</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
21
html-css-cheatsheet-starting/styles.css
Normal file
21
html-css-cheatsheet-starting/styles.css
Normal file
@@ -0,0 +1,21 @@
|
|||||||
|
table {
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
th, td {
|
||||||
|
border: 1px solid black;
|
||||||
|
padding: 10px;
|
||||||
|
width: 33vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
#column-1 {
|
||||||
|
background-color: lightblue;
|
||||||
|
}
|
||||||
|
|
||||||
|
#column-2 {
|
||||||
|
background-color: lightgreen;
|
||||||
|
}
|
||||||
|
|
||||||
|
#column-3 {
|
||||||
|
background-color: lightcoral;
|
||||||
|
}
|
||||||
32
off_platform_project_dasmotos_arts_and_crafts/index.html
Normal file
32
off_platform_project_dasmotos_arts_and_crafts/index.html
Normal file
@@ -0,0 +1,32 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="fr">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Dasmoto's Arts & Crafts</title>
|
||||||
|
<link rel="stylesheet" href="./resources/css/style.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="header">
|
||||||
|
<h1>Dasmoto's Arts & Crafts</h1>
|
||||||
|
</div>
|
||||||
|
<div class="product">
|
||||||
|
<h2 id="brushes">Brushes</h2>
|
||||||
|
<img src="./resources/img/hacksaw.jpeg" />
|
||||||
|
<h3>Art Frames (assorted)</h3>
|
||||||
|
<p>Made of the highest quality oak, Hacksaw brushes are known for their weight and ability to hold paint in large amounts. Available in different sizes. <span id="price">Starting at $3.00 / brush.</span></p>
|
||||||
|
</div>
|
||||||
|
<div class="product">
|
||||||
|
<h2 id="frames">Frames</h2>
|
||||||
|
<img src="./resources/img/frames.jpeg" />
|
||||||
|
<h3>Hacksaw Brushes</h3>
|
||||||
|
<p>Assorted frames made of different material, including MDF, birchwood, and PDE. Select frames can be sanded and painted according to your needs. <span id="price">Starting at $2.00 / frame.</span></p>
|
||||||
|
</div>
|
||||||
|
<div class="product">
|
||||||
|
<h2 id="paint">Paint</h2>
|
||||||
|
<img src="./resources/img/finnish.jpeg" />
|
||||||
|
<h3>Clean Finnish Paint</h3>
|
||||||
|
<p>Imported paint from Finland. Over 256 colors available in-store, varying in quantity (1 oz. to 8 oz.). Clean Finnish paint microbinds to canvas, increasing the finish and longevity of any artwork. <span id="price">Starting at $5.00 / tube.</span></p>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,42 @@
|
|||||||
|
body {
|
||||||
|
font-family: Helvetica;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
background-image: url(../img/pattern.jpeg);
|
||||||
|
font-size: 100px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: khaki;
|
||||||
|
text-align: center;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
#price {
|
||||||
|
font-weight: bold;
|
||||||
|
color: blue;
|
||||||
|
}
|
||||||
|
|
||||||
|
#brushes {
|
||||||
|
background-color: mediumspringgreen;
|
||||||
|
color: white;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#frames {
|
||||||
|
background-color: lightcoral;
|
||||||
|
color: white;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#paint {
|
||||||
|
background-color: skyblue;
|
||||||
|
color: white;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 32px;
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.3 MiB |
BIN
tea_cozy/img-tea-cozy-redline.jpg
Normal file
BIN
tea_cozy/img-tea-cozy-redline.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 290 KiB |
83
tea_cozy/index.html
Normal file
83
tea_cozy/index.html
Normal file
@@ -0,0 +1,83 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="fr">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Tea Cozy</title>
|
||||||
|
<link rel="stylesheet" href="./resources/css/style.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header class="header">
|
||||||
|
<img src="./resources/imgs/img-tea-cozy-logo.png" id="header-img">
|
||||||
|
<nav id="header-nav">
|
||||||
|
<a href="#mission">Mission</a>
|
||||||
|
<a href="#featured">Featured Tea</a>
|
||||||
|
<a href="#locations">Locations</a>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
<section class="mission">
|
||||||
|
<img src="./resources/imgs/img-mission-background.jpg">
|
||||||
|
<div id="center-band">
|
||||||
|
<h2>Our Mission</h2>
|
||||||
|
<h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section class="tea-of-the-month">
|
||||||
|
<h2>Tea of the Month</h2>
|
||||||
|
<h4>What's steeping at The Tea Cozy ?</h4>
|
||||||
|
<div class="tea-month-gallery">
|
||||||
|
<div class="tea-month-img">
|
||||||
|
<img src="./resources/imgs/img-berryblitz.jpg">
|
||||||
|
<h4>Fall Berry Blitz Tea</h4>
|
||||||
|
</div>
|
||||||
|
<div class="tea-month-img">
|
||||||
|
<img src="./resources/imgs/img-spiced-rum.jpg">
|
||||||
|
<h4>Spiced Rum Tea</h4>
|
||||||
|
</div>
|
||||||
|
<div class="tea-month-img">
|
||||||
|
<img src="./resources/imgs/img-donut.jpg">
|
||||||
|
<h4>Seasonal Donuts</h4>
|
||||||
|
</div>
|
||||||
|
<div class="tea-month-img">
|
||||||
|
<img src="./resources/imgs/img-myrtle-ave.jpg">
|
||||||
|
<h4>Myrtle Ave Tea</h4>
|
||||||
|
</div>
|
||||||
|
<div class="tea-month-img">
|
||||||
|
<img src="./resources/imgs/img-bedford-bizarre.jpg">
|
||||||
|
<h4>Bedford Bizarre Tea</h4>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section class="locations">
|
||||||
|
<h2>Locations</h2>
|
||||||
|
<div class="location-gallery">
|
||||||
|
<div class="location">
|
||||||
|
<h4>Downtown</h4>
|
||||||
|
<p>384 West 4th St<br>
|
||||||
|
Suite 108<br>
|
||||||
|
Portland, Maine</p>
|
||||||
|
</div>
|
||||||
|
<div class="location">
|
||||||
|
<h4>East Bayside</h4>
|
||||||
|
<p>3433 Phisherman's Avenue<br>
|
||||||
|
(Northwest Corner)<br>
|
||||||
|
Portland, Maine</p>
|
||||||
|
</div>
|
||||||
|
<div class="location">
|
||||||
|
<h4>Oakdale</h4>
|
||||||
|
<p>515 Crescent Avenue<br>
|
||||||
|
Second Floor<br>
|
||||||
|
Portland, Maine</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section class="contacts">
|
||||||
|
<h2>The Tea Cozy</h2>
|
||||||
|
<h5>contact@theteacozy.com</h5>
|
||||||
|
<h5>917-555-8904</h5>
|
||||||
|
</section>
|
||||||
|
<footer>
|
||||||
|
<p>© 2023 Tea Cozy. Tous droits réservés.</p>
|
||||||
|
</footer>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
155
tea_cozy/resources/css/style.css
Normal file
155
tea_cozy/resources/css/style.css
Normal file
@@ -0,0 +1,155 @@
|
|||||||
|
* {
|
||||||
|
font-family: Helvetica;
|
||||||
|
font-size: 22px;
|
||||||
|
color: seashell;
|
||||||
|
opacity: 0.9;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin-top: 69px;
|
||||||
|
background-color: rgba(0, 0, 0, 1);
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Header */
|
||||||
|
|
||||||
|
.header {
|
||||||
|
z-index: 10;
|
||||||
|
position: fixed;
|
||||||
|
display: flex;
|
||||||
|
top: 0px;
|
||||||
|
height: 69px;
|
||||||
|
width: 100%;
|
||||||
|
border-bottom: 1px solid seashell;
|
||||||
|
align-items: center;
|
||||||
|
background-color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
#header-img {
|
||||||
|
display: inline;
|
||||||
|
height: 50px;
|
||||||
|
margin-left: 10px;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
justify-content: left;
|
||||||
|
align-content: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
header nav {
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
header nav a {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 10px;
|
||||||
|
margin: 0 5px;
|
||||||
|
align-content: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Body */
|
||||||
|
|
||||||
|
/* Global */
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: 1.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Our Mission */
|
||||||
|
|
||||||
|
.mission {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 90vw;
|
||||||
|
max-width: 1200px;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mission img {
|
||||||
|
object-fit: cover;
|
||||||
|
height: 700px;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 1200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mission #center-band {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 2;
|
||||||
|
width: 1200px;
|
||||||
|
background-color: black;
|
||||||
|
padding: 0px;
|
||||||
|
margin: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mission h2, .mission h4 {
|
||||||
|
background-color: transparent;
|
||||||
|
margin: 10px 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Tea of the month */
|
||||||
|
|
||||||
|
.tea-of-the-month .tea-month-gallery {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
gap: 30px;
|
||||||
|
width: 1000px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tea-of-the-month .tea-month-img {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-content: stretch;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tea-of-the-month .tea-month-img img {
|
||||||
|
width: 300px;
|
||||||
|
height: 200px;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Locations */
|
||||||
|
|
||||||
|
.locations {
|
||||||
|
background-image: url(../imgs/img-locations-background.jpg);
|
||||||
|
background-size: cover;
|
||||||
|
height: 500px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.locations h2 {
|
||||||
|
padding-top: 70px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.locations .location-gallery {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.locations .location {
|
||||||
|
background-color: black;
|
||||||
|
width: 300px;
|
||||||
|
height: 250px;
|
||||||
|
margin: 20px;
|
||||||
|
line-height: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Contact section */
|
||||||
|
|
||||||
|
.contacts {
|
||||||
|
height: 200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contacts h5 {
|
||||||
|
font-size: 0.7em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Footer */
|
||||||
|
|
||||||
|
footer {
|
||||||
|
text-align: left !important;
|
||||||
|
}
|
||||||
BIN
tea_cozy/resources/imgs/img-bedford-bizarre.jpg
Normal file
BIN
tea_cozy/resources/imgs/img-bedford-bizarre.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 MiB |
BIN
tea_cozy/resources/imgs/img-berryblitz.jpg
Normal file
BIN
tea_cozy/resources/imgs/img-berryblitz.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 130 KiB |
BIN
tea_cozy/resources/imgs/img-donut.jpg
Normal file
BIN
tea_cozy/resources/imgs/img-donut.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 250 KiB |
BIN
tea_cozy/resources/imgs/img-locations-background.jpg
Normal file
BIN
tea_cozy/resources/imgs/img-locations-background.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 70 KiB |
BIN
tea_cozy/resources/imgs/img-mission-background.jpg
Normal file
BIN
tea_cozy/resources/imgs/img-mission-background.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 127 KiB |
BIN
tea_cozy/resources/imgs/img-myrtle-ave.jpg
Normal file
BIN
tea_cozy/resources/imgs/img-myrtle-ave.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 299 KiB |
BIN
tea_cozy/resources/imgs/img-spiced-rum.jpg
Normal file
BIN
tea_cozy/resources/imgs/img-spiced-rum.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 347 KiB |
BIN
tea_cozy/resources/imgs/img-tea-cozy-logo.png
Normal file
BIN
tea_cozy/resources/imgs/img-tea-cozy-logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.8 KiB |
Reference in New Issue
Block a user