NST Infotech

Web development online courses

  • Home
  • About
  • Tutorials

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">

About me

I am Sarfaraz Kasmani a Front End Developer from Mumbai, India. I am having more than 7 years of experience in the field of Front End Development. I blog about Front End Development tips at this blog nstinfotech.com. Contact me or learn more about me from this page. Read More…

Recent Posts

  • GetResponse VS SendinBlue! Which One is Better? (All in 1 Guide)
  • How to create focus item pop up in mautic
  • Why use React instead of JavaScript HTML and CSS
  • Now Is The Time For You To Know The Truth About Top 4 Reasons To Choose ReactJS For Website Development
  • Best Simple Solution For Automatically Fetching Ip Lookup Data Failed

Archives

Categories

Connect Online

  • Facebook
  • LinkedIn
  • Twitter
  • YouTube

© 2021 · NST Infotech | Privacy Policy