React Redux Mastery Resources

This article contains resources needed for the next video

1. The CSS Code for Photoframe.

2.  An Array 

3. The font url for our Title. 

You’ll know what to do with them once you get to the next tutorial.

Copy the css code and paste it in stylesheet.css file

html {
    font-size: 10px;
    font-family: verdana;
}
p {
    font-size: 1.6rem;
    line-height: 1.5;
}

h1{
    font-family: 'Grand Hotel', cursive;
    text-align: center;
    font-size: 10rem;
    font-weight: 100;
    letter-spacing: 1px;
    color:#000;
    margin: 2rem 0;
}

h1 a {
    color:black;
    text-decoration: none;
}

.photo-grid{
    max-width: 1000px;
    margin: 0 auto;
    display:flex;
    flex-wrap: wrap;
}

.figure{
    flex-basis:calc(25% - 4rem);
    border:1px solid #d3d3d3;
    padding:2rem;
    flex-grow:1;
}

.figure .single-photo {
	flex-basis: calc(33.333% - 4rem);
	flex-grow: 1;
	flex-shrink: 0;
	margin: 0 2rem 2rem 2rem;
	padding: 2rem;
	border: 1px solid #d3d3d3;
	background: #fff;
	position: relative;
}


.single-photo {
	max-width: 1000px;
	margin: 0 auto;
	display: flex;
	background: #fff;
	border: black;
}


.single-photo .figure {
	box-shadow: none;
	margin: 0 2rem 0 0;
	border: 0;
	padding: 0;
	flex: 1 0 60%;
	max-width: 60%;
}

.single-photo .comments {
	flex: 1 0 40%;
	max-width: 40%;
}

.single-photo .photo {
	width: 100%;
	margin: 0;
}

.photo {
    width:calc(100% + 4rem);
    margin: -2rem 0rem 0rem -2rem;
}
.comment{
	width: 100%
}
.comment p {
	border-bottom: 1px solid #d3d3d3;
	padding: 0.5rem 0;
}
.comment-form input,
.comment-form textarea {
	width: 100%;
	border: 0;
	font-size: 1.3rem;
	padding: 1rem 0;
	border-bottom: 1px solid #d3d3d3;
	outline: none;
	resize: vertical;
}

.button-container{
    display:flex;
    justify-content: center;
}

button, .button {
	border: 2px solid #f2f2f2;
	background: none;
	flex-basis: 48%;
	display: inline-block;
	line-height: 2;
	text-decoration: none;
	padding: 5px;
	text-align: center;
	font-size: 15px;
	color: red;
	transition: all 0.2s;
	box-sizing: padding-box;
	
}
button:hover,.button:hover, button:focus, .button:focus {
	border-color: #00f;
	outline: 0;
}
.addIcon {
    margin: 20px auto;
    display:table;
    padding:40px;
    background:url("https://image.flaticon.com/icons/svg/14/14232.svg") center no-repeat;
    background-size:contain;
    border:none;
}
.speech-bubble {
	background: url("https://d30y9cdsu7xlg0.cloudfront.net/png/51904-200.png") center no-repeat;
	background-size: contain;
	padding: 10px;
	margin: 5px;
	display: inline-block;
	border: none;
	position: relative;
}


.comment-count {
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	color: black
}

.form {
    background:white;
    max-width:360px;
    margin: 0px auto;
    padding:45px;
    text-align:center;
}

.form input {
    font-family:verdana;
    background:#f2f2f2;
    width:100%;
    border:none;
    padding:15px;
    box-sizing:border-box;
    font-size:14px;
    margin:0px 0px 15px 0px;
}

.form button {
    font-family:verdana;
    text-transform: uppercase;
    background:#065784;
    width:100%;
    border:none;
    padding:15px;
    color:white;
    font-size:14px;
    cursor:pointer;
}

.form button:hover {
    background:#7b8589;
}

button:hover {
    border-color:blue;
}

.loader {
	height: 20%;
	width: 100%;
	display: flex;
	position: fixed;
	align-items: center;
	justify-content: center;
	font-size: 28pt;
}

Copy the array and paste it in Main.js

const allPhotos = [{
    id: "0",
    description: "beautiful sea",
    imageLink: "https://picsum.photos/800/600?image=14"
    }, {
    id: "1",
    description: "Coffee cup",
    imageLink: "https://picsum.photos/800/600?image=30"
    }, {
    id: "2",
    description: "Freedom",
    imageLink: "https://picsum.photos/800/600?image=50"
    }, {
    id: "3",
    description: "Farm",
    imageLink: "https://picsum.photos/800/600?image=85"
    }]

Copy the URL and paste it in index.html file

 <link href="https://fonts.googleapis.com/css?family=Grand+Hotel" rel="stylesheet">