Skip to content

Instantly share code, notes, and snippets.

@yadavanuj1996

yadavanuj1996/fcc-build-a-personal-portfolio-webpage.markdown

Created August 1, 2019 06:18
Show Gist options
  • Save yadavanuj1996/b9a767e5a9d130c7a9b55a809631c77b to your computer and use it in GitHub Desktop.
Save yadavanuj1996/b9a767e5a9d130c7a9b55a809631c77b to your computer and use it in GitHub Desktop.
Download ZIP
FCC: Build a Personal Portfolio Webpage
Raw
index.html
<!--<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
dots for section change heart animations
I am a software developer freelancer noob web designer
add keywords in html head tag,
use keyword meta tag
zebra crossing
project box shadow
header bottom line shadow
-->
<!Doctype html>
<html lang="en-US">
<head>
<title>Portfolio</title>
<meta charset="utf-8">
<meta name="author" content="Anuj Yadav">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Anuj Yadav personal portfolio page, full stack web development, software developer">
<script src="https://kit.fontawesome.com/ba3646b588.js"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/konpa/devicon/df6431e323547add1b4cf45992913f15286456d3/devicon.min.css">
<link rel="stylesheet" href="./style.css">
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans&display=swap" rel="stylesheet">
</head>
<body>
<header>
<navbar id="navbar">
<div id="navbar-links">
<a href="#welcome-section"><img id="logo-image" alt="logo image" src="https://i.ibb.co/4NVSPGM/imageedit-3-6286965642.png"></a>
<a class="navbar-link" id="navbar-about" href="#about">About</a>
<a class="navbar-link" id="navbar-project" href="#projects">Projects</a>
<a class="navbar-link" id="navbar-notes" href="#contact">Contact</a>
</div>
</navbar>
</header>
<div id="welcome-section">
<div id="welcome-content">
<img id="welcome-image" alt="welcome image" src="https://image.flaticon.com/icons/svg/1831/1831951.svg">
<h1>Hola Amigo</h1>
</div>
</div>
<div id="introduction">
<h3 id="introduction-heading">Hi</h3>
<p id="introduction-content">
I'm a software engineer specializing in full stack web development based in Mumbai, India. I have a passion for development and love to create web, desktop and mobile app projects.
</p>
</div>
<div id="about">
<h2 id="about-heading">What I can Do</h2>
<div id="about-content-1">
<img id="about-content-image-1" src="https://image.flaticon.com/icons/svg/1197/1197511.svg" alt="computer image">
<h3 id="about-content-heading-1">Full Stack Web Development</h3>
<p id="about-content-subcontent-1">I am fully proficient with full stack web development and have experience of developing and delivering various responsive web applications to SMEs & startups across various business domains.</p>
</div>
<div id="about-content-2">
<img id="about-content-image-2" src="https://image.flaticon.com/icons/svg/1640/1640940.svg" alt="computer image">
<h3 id="about-content-heading-2">Desktop and Mobile App Development</h3>
<p id="about-content-subcontent-2">I have prior experience of developing Desktop software applications and cross-platform mobile applications and have worked with clients across domains.</p>
</div>
</div>
<div id="skills">
<h2 id="skills-heading">Skills</h2>
<h3 class="skills-subheading">Programming Languages & Frameworks</h3>
<div class="skills-listing">
<i class="devicon-angularjs-plain colored"></i>
<i class="devicon-nodejs-plain-wordmark colored"></i>
<i class="devicon-express-original-wordmark colored"></i>
<i class="devicon-java-plain-wordmark"></i>
<i class="devicon-php-plain colored"></i>
</div>
<div class="skills-listing skills-icon-padding">
<i class="devicon-bootstrap-plain-wordmark colored"></i>
<img class="skills-list-images" src="https://www.paceit.co.uk/wp-content/uploads/2019/04/nativescript-app-development.png" alt="nativescript">
<img class="skills-list-images" src="http://198.211.104.161/wp-content/uploads/2014/01/Hibernate-logo.png" alt="hibernate">
<img class="skills-list-images"src="https://www.consolebit.com/media/technologies/logo-materialize.png" alt="materialize">
<img id="primeng" class="skills-list-images" src="https://i2.wp.com/www.primefaces.org/wp-content/uploads/2016/10/primeng.png?resize=250%2C250&ssl=1" alt="primeng">
</div>
<h3 class="skills-subheading"> Web Technologies & Databases</h3>
<div class="skills-listing">
<i class="devicon-html5-plain-wordmark colored"></i>
<i class="devicon-css3-plain-wordmark colored"></i>
<i class="devicon-javascript-plain colored"></i>
<i class="devicon-jquery-plain-wordmark colored"></i>
</div>
<div class="skills-listing skills-icon-padding">
<i class="devicon-mysql-plain-wordmark colored"></i>
<i class="devicon-mongodb-plain-wordmark colored"></i>
<img src="https://www.vectorlogo.zone/logos/sqlite/sqlite-ar21.svg" alt="mysqlite">
</div>
<h3 class="skills-subheading"> Version Control, Operating System and tools</h3>
<div class="skills-listing">
<i class="devicon-git-plain-wordmark colored"></i>
<i class="devicon-ubuntu-plain-wordmark colored"></i>
<i class="devicon-windows8-original colored"></i>
<i class="devicon-visualstudio-plain colored"></i>
<i class="devicon-heroku-original-wordmark colored"></i>
</div>
</div>
<div id="projects">
<h2 id="projects-heading">Projects</h2>
<div id="project-card-holder">
<div id="project-1" class="project-tile">
<img class="projects-image" src="https://i.ibb.co/4Ryk0Xg/proj1.png" alt="project-tile-image">
<div class="project-title-div">
<p class="project-title">Product Landing Page</p>
</div>
</div>
<div id="project-2" class="project-tile"><img class="projects-image" src="https://i.ibb.co/L9SWnGg/proj2.png" alt="project-tile-image">
<div class="project-title-div">
<p class="project-title">Vristam</p>
</div>
</div>
<div id="project-3" class="project-tile"><img class="projects-image" src="https://i.ibb.co/5sqhqPm/proj3.png" alt="project-tile-image">
<div class="project-title-div">
<p class="project-title">MS Spices</p>
</div>
</div>
<div id="project-4" class="project-tile">
<img class="projects-image" src="https://i.ibb.co/3Ss8DFp/proj4.png" alt="project-tile-image">
<div class="project-title-div">
<p class="project-title">Jyoti Handlooms</p>
</div>
</div>
<div id="project-5" class="project-tile"><img class="projects-image" src="https://image.freepik.com/free-photo/group-diverse-people-having-business-meeting_53876-25060.jpg" alt="project-tile-image">
<div class="project-title-div">
<p class="project-title">Wenestor</p>
</div>
</div>
<div id="project-6" class="project-tile"><img class="projects-image" src="https://i.ibb.co/71rcWSS/proj5.png" alt="project-tile-image">
<div class="project-title-div">
<p class="project-title">Fataka Market</p>
</div>
</div>
<div id="project-7" class="project-tile minimized-project"><img class="projects-image" src="https://i.ibb.co/C5d2dYw/equip.png" alt="project-tile-image">
<div class="project-title-div">
<p class="project-title">Equip Share</p>
</div>
</div>
<div id="project-8" class="project-tile minimized-project"><img class="projects-image" src="https://i.ibb.co/h2jy27B/proj6.png" alt="project-tile-image">
<div class="project-title-div">
<p class="project-title">Edunomics</p>
</div>
</div>
<div id="project-9" class="project-tile minimized-project"><img class="projects-image" src="https://i.ibb.co/HCvK3Cz/proj9.png" alt="project-tile-image">
<div class="project-title-div">
<p class="project-title">Sattva Solar</p>
</div>
</div>
<div id="project-10" class="project-tile minimized-project"><img class="projects-image" src="https://i.ibb.co/30VfSYZ/proj10.png" alt="project-tile-image">
<div class="project-title-div">
<p class="project-title">GoalCial (MovieBuff)</p>
</div>
</div>
<div id="project-11" class="project-tile minimized-project"><img class="projects-image" id="fcut-image"src="https://image.winudf.com/v2/image/c2FtcGxlYXBwLmNvbS5mY3V0X3NjcmVlbl81X3AwZW13YnB2/screen-5.jpg?fakeurl=1&type=.jpg" alt="project-tile-image">
<div class="project-title-div">
<p class="project-title">F Cut</p>
</div>
</div>
<div id="project-12" class="project-tile minimized-project"><img class="projects-image" src="https://i.ibb.co/xs9xb5f/invento.png" alt="project-tile-image">
<div class="project-title-div">
<p class="project-title">Invento</p>
</div>
</div>
<div id="project-13" class="project-tile minimized-project"><img class="projects-image" src="https://i.ibb.co/FJMqsdV/proj13.png" alt="project-tile-image">
<div class="project-title-div">
<p class="project-title">Aakshank</p>
</div>
</div>
<div id="project-14" class="project-tile minimized-project">
<img id="finadvisor-image" class="projects-image" src="https://apexcharts.com/wp-content/uploads/2018/09/candlestick-basic.svg" alt="project-tile-image">
<div class="project-title-div">
<p class="project-title">FinAdvisor</p>
</div>
</div>
<div id="project-15" class="project-tile minimized-project">
<img class="projects-image" src="https://i.ibb.co/8DrvkBj/proj16.png" alt="project-tile-image">
<div class="project-title-div">
<p class="project-title">Responsive HTML E-Mail</p>
</div>
</div>
<div id="project-16" class="project-tile minimized-project">
<img class="projects-image" src="https://i.ibb.co/xMh6XX7/costfinder.png" alt="project-tile-image">
<div class="project-title-div">
<p class="project-title">Cost Finder</p>
</div>
</div>
<div id="project-17" class="project-tile minimized-project">
<img id="costfinder-mobile-image" class="projects-image" src="https://i.ibb.co/HH7JvTr/Whats-App-Image-2019-07-24-at-9-37-06-PM.jpg" alt="project-tile-image">
<div class="project-title-div">
<p class="project-title">Cost Finder Mobile App</p>
</div>
</div>
<div id="project-18" class="project-tile minimized-project">
<img class="projects-image" id="pharmacy-image" src="https://advanta.io/wp-content/uploads/2017/10/GST-billing-e1507616813157.png" alt="project-tile-image">
<div class="project-title-div">
<p class="project-title">Pharmacy Management System (GST)</p>
</div>
</div>
<div id="project-19" class="project-tile minimized-project">
<img class="projects-image" src="https://i.ibb.co/vsQBYCk/steve.png" alt="project-tile-image">
<div class="project-title-div">
<p class="project-title">Tribute Page</p>
</div>
</div>
<div id="project-20" class="project-tile minimized-project">
<img class="projects-image" src="https://i.ibb.co/fFTvQck/survey.png" alt="project-tile-image">
<div class="project-title-div">
<p class="project-title">Simple Survey Form</p>
</div>
</div>
<div id="project-21" class="project-tile minimized-project">
<img class="projects-image" src="https://i.ibb.co/Pw90XzB/Screenshot-from-2019-07-24-23-18-34.png" alt="project-tile-image">
<div class="project-title-div">
<p class="project-title">Web Resources / Doc Page</p>
</div>
</div>
<div id="project-22" class="project-tile minimized-project">
<img class="projects-image" src="https://i.ibb.co/YRfRDZc/portfolio.png">
<div class="project-title-div">
<p class="project-title">Portfolio Samples</p>
</div>
</div>
<!--
<div id="project-23" class="project-tile">
<img class="projects-image" src="https://www.tyrepress.com/wp-content/uploads/2015/07/IMG_0548.jpg" alt="project-tile-image">
<div class="project-title-div">
<p class="project-title">Tyre Management & Tracking Software</p>
</div>
</div>
<div id="project-24" class="project-tile">
<img class="projects-image" src="https://www.team-bhp.com/forum/attachments/indian-car-scene/1768708d1528275029-indizel-bio-fuel-now-available-india-indizel.jpg" alt="project-tile-image">
<div class="project-title-div">
<p class="project-title">Pump Management System</p>
</div>
</div>
<div id="project-25" class="project-tile">
<img class="projects-image"src="https://www.dqindia.com/wp-content/uploads/2015/08/urbanclap.png">
<div class="project-title-div">
<p class="project-title">UC Service Management System</p>
</div>
</div>
-->
</div>
<div id="show-all-projects-div">
<button id="show-all-projects-button">Show All ></button>
</div>
</div>
<div id="contact">
<h2 id="contact-heading">I can help</h2>
<h3 id="contact-subheading">I’m currently available for work associations. </h3>
<p id="contact-text">You can approach me with an work opportunity, freelance project or any other assistance in development or design of project .In case you need any help or if you are stuck with a problem feel free to ping me, i am always ready to help.</p>
<div id="info-display">
<div class="phone-email-div">
<i id="phone-email-logo-1" class="fas fa-phone-square-alt info-display-icons"></i>
<span id="phone-email-content-1" class="phone-email"> +91-8878380274<span>
</div>
<div class="phone-email-div">
<i id="phone-email-logo-2" class="fas fa-envelope-square info-display-icons"></i>
<span id="phone-email-content-2" class="phone-email"> [email protected]</span>
</div>
</div>
<div id="social-logo">
<a id="social-icon-github" href="https://github.com/yadavanuj1996" target="_blank" class="social-links">
<i class="fab fa-github-square"></i>
</a>
<a href="https://www.linkedin.com/in/anuj-yadav-181074116/" target="_blank" class="social-links">
<i class="fab fa-linkedin"></i>
</a>
<a href="https://codepen.io/yadavanuj1996/" target="_blank" class="social-links">
<i class="fab fa-codepen"></i>
</a>
</div>
</div>
</body>
</html>
Raw
script.babel
var allProjectsVisible=false;
document.getElementById("show-all-projects-button").onclick = showHideMinimizedProjects;
function showHideMinimizedProjects(){
if(areAllProjectsVisible()){
hideMinimizeProjects();
allProjectsVisible=false;
}
else{
showMinimizeProjects();
allProjectsVisible=true;
}
}
function hideMinimizeProjects() {
let minimizedProjects = document.getElementsByClassName("minimized-project");
for (let i = 0; i < minimizedProjects.length; i++) {
minimizedProjects[i].style.display = 'none';
}
}
function showMinimizeProjects() {
let minimizedProjects = document.getElementsByClassName("minimized-project");
for (let i = 0; i < minimizedProjects.length; i++) {
minimizedProjects[i].style.display = 'grid';
}
}
function areAllProjectsVisible(){
if(allProjectsVisible===true){
return true;
}
return false;
}
Raw
style.css
:root{
--theme-text-color: #4AB19A;
--theme-background-color: #E0EBE8;
--theme-black-text-color: #4F6990;
--theme-text-font-size: 20px;
--theme-text-line-height: 30px;
--navbar-template-column: 10% 60% 10% 10% 10%;
--introduction-columns: 30% 40% 30%;
--about-1-columns: 20% 30% 30% 20%;
--about-2-columns: 20% 30% 30% 20%;
--contact-columns: 30% 40% 30%;
--skills-columns: 30% 40% 30%;
--skills-padding: 0px 40px 0px 40px;
--justify-lg-start-sm-center: start;
--about-subcontent: 20px;
--text-align-lg-left-sm-center: left;
--about-content-padding-bottom: 20px;
}
@media only screen and (min-width: 721px) and (max-width: 900px){
:root{
--about-subcontent: 15px !important;
}
}
@media only screen and (min-width: 320px) and (max-width: 720px) {
:root{
--navbar-template-column: 25% 10% 10% 10% 45%;
--introduction-columns: 10% 80% 10%;
--about-1-columns: 10% 40% 40% 10%;
--about-1-columns: 10% 40% 40% 10%;
--skills-padding: 0px 20px 0px 20px;
--contact-columns: 5% 90% 5%;
--justify-lg-start-sm-center: center;
--skills-columns: 5% 90% 5% !important;
--text-align-lg-left-sm-center: center;
--about-content-padding-bottom:40px;
}
.navbar-link{
display: none;
}
#about-content-1{
margin-top: 60px;
display: grid;
grid-template-rows: 20px 130px;
grid-template-columns: 10% 40% 40% 10%;
grid-template-areas:
". heading-text heading-text ."
". image image ."
". content-text content-text .";
justify-items: center;
align-items: center;
}
#about-content-2{
margin-top: 60px;
display: grid;
grid-template-rows: 40px 130px;
grid-template-columns: 10% 40% 40% 10%;
grid-template-areas:
". heading-text heading-text ."
". image image ."
". content-text content-text .";
justify-self: start;
align-items: center;
}
#skills{
margin-top: 60px;
padding: var(--skills-padding,0px 40px 0px 40px);
}
.skills-listing{
display: grid;
grid-template-rows: 50px 50px;
grid-template-columns: 20% 20% 20% 20% 20% 20% 20% 20% 20% 20%;
justify-items: center;
align-items: center;
}
#info-display{
display: none;
}
}
@media only screen and (min-width: 721px) {
.navbar-link{
text-decoration: none;
color: var(--theme-text-color,#4AB19A);
font-size: 20px;
line-height: 30px;
}
#about-content-1{
margin-top: 60px;
display: grid;
grid-template-rows: 50px 130px;
grid-template-columns:20% 30% 30% 20%;
grid-template-areas:
". image heading-text ."
". image content-text .";
justify-items: center;
align-items: center;
}
#about-content-2{
margin-top: 60px;
display: grid;
grid-template-rows: 50px 130px;
grid-template-columns: 20% 30% 30% 20%;
grid-template-areas:
". heading-text image ."
". content-text image .";
justify-self: start;
align-items: center;
}
#skills{
margin-top: 60px;
padding: var(--skills-padding,0px 40px 0px 40px);
display: grid;
grid-template-columns: var(--skills-columns,30% 40% 30%);
align-items: center;
}
.skills-listing{
grid-column: 2/3;
display: grid;
grid-template-rows: 50px;
grid-template-columns: 20% 20% 20% 20% 20% 20% 20% 20% 20% 20%;
justify-items: center;
align-items: center;
}
#info-display{
margin-top: 10px;
margin-bottom: 10px;
grid-column: 1 / 4;
display: grid;
grid-template-columns: 1fr 1fr;
grid-column-gap: 20px;
justify-items: center;
align-items: center;
padding-left:5px;
padding-right: 5px;
}
}
body{
background-color: var(--theme-background-color,#E0EBE8); /* 986775 */
font-family: 'Josefin Sans', sans-serif;
color: white;
margin:0;
color: var(--theme-black-text-color,#4F6990);
}
img{
max-width: 100%;
display: block;
height: auto;
}
h1{
text-align: center;
color: var(--theme-text-color,#4AB19A);
}
navbar{
position: fixed;
top: 0;
width: 100%;
background-color: var(--theme-background-color,#E0EBE8);/*#BE3644;*/
width: 100%;
height: 70px;
}
#navbar-links{
padding-top: 30px;
height: 100%;
display: grid;
grid-template-rows: 100%;
grid-template-columns: var(--navbar-template-column,10% 60% 10% 10% 10%);
justify-items: center;
align-items: start;
}
#navbar-about{
grid-row: 1 / 2;
grid-column: 3 / 4;
}
#navbar-project{
grid-row: 1 / 2;
grid-column: 4 / 5;
}
#navbar-notes{
grid-row: 1 / 2;
grid-column: 5 / 6;
}
#logo-image{
grid-row: 1 / 2;
grid-column: 1 / 2;
height: 60px;
margin: 0;
border: 5px solid white;
border-radius: 50%;
}
#logo-image:hover{
transform: scale(1.1);
}
#welcome-section{
height: 100vh;
margin-top: 100px;
}
#welcome-content{
padding-top: 40px;
}
#welcome-image{
height: 50vh;
width: 40% !important;
padding-left: 30%;
}
#introduction{
display: grid;
grid-template-columns: var(--introduction-columns,30% 40% 30%);
justify-items: center;
align-items: center;
}
#introduction-heading{
font-size: 25px;
line-height: 35px;
text-align: center;
color: var(--theme-text-color,#4AB19A);
text-align: center;
grid-column: 2 / 3;
}
#introduction-content{
color: var(--theme-black-text-color,#4F6990);
text-align: center;
grid-column: 2 / 3;
font-size: 20px;
line-height: 30px;
}
#about-heading{
text-align: center;
color: var(--theme-text-color,#4AB19A);
}
#about-content-heading-1{
color: var(--theme-text-color,#4AB19A);
grid-area: heading-text;
margin-top: 0px;
justify-self: var(--justify-lg-start-sm-center,start);
padding-bottom: 20px;
text-align: var(--text-align-lg-left-sm-center,left);
}
#about-content-subcontent-1{
grid-area: content-text;
font-size: var(--about-subcontent,20px);
line-height: 25px;
}
#about-content-image-1{
width: 100%;
height: 100%;
grid-area: image;
}
#about-content-heading-2{
color: var(--theme-text-color,#4AB19A);
grid-area: heading-text;
align-self: start;
margin-top: 0px;
justify-self: var(--justify-lg-start-sm-center,start);
padding-bottom: var(--about-content-padding-bottom,20px);
text-align: var(--text-align-lg-left-sm-center,left);
}
#about-content-subcontent-2{
grid-area: content-text;
justify-self: start;
font-size: var(--about-subcontent,20px);
line-height: 25px;
}
#about-content-image-2{
width: 100%;
height: 100%;
grid-area: image;
}
#skills-heading{
grid-column: 2/3;
text-align: center;
color: var(--theme-text-color,#4AB19A);
}
.skills-subheading{
grid-column: 2/3;
padding-top:20px;
padding-top:20px;
color: var(--theme-text-color,#4AB19A);
}
.skills-icon-padding{
padding-top: 20px;
}
i{
color: var(--theme-black-text-color,#4AB19A) !important;
font-size: 50px;
height: 100%;
width: 100%;
}
i:hover{
transform: scale(1.3);
}
.skills-list-images{
height: 50px;
}
#primeng{
height: 100%;
}
#projects{
margin-top: 50px;
padding: 20px 20px 20px 20px;
background-color: #45567D;
}
#project-card-holder{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
grid-gap: 40px 2.5%;
justify-items: center;
align-items: center;
width: 100%;
max-width: 1280px;
}
#projects-heading{
text-align: center;
color: #fff;
}
.project-tile{
height: 360px;
width: 100%;
display: grid;
grid-template-rows: 80% 20%;
grid-template-columns: 100%;
}
#show-all-projects-div{
margin: 40px 0px 20px 0px;
display: grid;
justify-items: center;
align-items: center;
}
#show-all-projects-button{
background-color: #303841;
color: #fff;
font-size: 20px;
border-radius: 2px;
border: 2px solid #303841;
padding: 10px;
display: block;
margin: 0px;
}
#fcut-image{
width: 70% !important;
padding-left: 15%;
padding-right: 15%;
background-color: white;
}
#costfinder-mobile-image{
width: 50% !important;
padding-left: 25%;
padding-right: 25%;
background-color: var(--theme-black-text-color,#4F6990);
}
#pharmacy-image{
width: 70% !important;
height: 70%;
padding-top: 15%;
padding-bottom: 15%;
padding-left: 15%;
padding-right: 15%;
background-color: #fff;
}
#finadvisor-image{
background-color: white;
}
.project-title-div{
background-color: #303841;
height: 100%;
display: grid;
justify-items: center;
align-items: center;
}
.projects-image{
width: 100%;
height: 100%;
grid-row: 1 / 2;
}
.project-title{
text-align: center;
margin: 0px;
color: white;
font-size: 20px;
line-height: 30px;
padding-top: 5px;
}
.minimized-project{
display: none;
}
#contact-text{
color: var(--theme-black-text-color,#4F6990);
text-align: center;
grid-column: 2 / 3;
font-size: 20px;
line-height: 25px;
}
#contact-heading{
grid-column: 2 / 3;
text-align: center;
color: var(--theme-text-color,#4AB19A);
}
#contact-subheading{
grid-column: 2 / 3;
color: var(--theme-text-color,#4AB19A);
}
#contact{
display: grid;
grid-template-columns: var(--contact-columns,30% 40% 30%);
justify-items: center;
align-items: center;
}
#social-logo{
margin-top: 10px;
margin-bottom: 10px;
grid-column: 2 / 3;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-column-gap: 20px;
justify-items: center;
align-items: center;
}
.social-links{
grid-row: 2/3;
}
.social-links > i{
font-size: 35px;
}
.info-display-icons{
font-size: 35px;
}
.phone-email-div{
display: grid;
grid-column: 1fr 5fr;
justify-items: center;
align-items: center;
}
.phone-email{
padding-left: 20px;
font-size: 15px;
}
#phone-email-logo-1{
grid-column: 1/2;
}
#phone-email-content-1{
grid-column: 2/3;
}
#phone-email-logo-2{
grid-column: 1/2;
}
#phone-email-content-2{
grid-column: 2/3;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment