University of Michigan Front End Web Development Capstone Project
Linda Angulo Lopez
![Linda Angulo Lopez]()
Linda Angulo Lopez
Software Heritage Ambassador ?? | Environmental Engineer ???? | #Biodiversity ?? | #SustainableDevelopment ?? | #OpenScience ?? | #GenerationRestoration ?? | #SafeAndJust ?? | ?????? Full Stack GIS Developer
Web Site About Me: Venn_Infographic
Click on link, hover over spheres, stay a while, ... then leap frog to the next sphere, scroll down to learn more & enjoy your visit!
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after these tags-->
<title>#InfoGraphics https://wd4etestingsites.byethost11.com/infographic.html
</title>
<!-- <fancy fonts from Google> -->
<link rel="stylesheet" type="text/css">
<link rel="stylesheet">
</script>
<!-- <Fontawsome icon script> -->
<script src="https://kit.fontawesome.com/9f355e218e.js" crossorigin="anonymous"></script>
<style type="text/css">
#container{
min-height: 100vh;
margin-bottom: -100px;
}
#container:after{
display: block;
content: "";
height: 100px;
}
footer {font-family: Lobster;
/*background: #005c48;*/
height: 100px;
text-align: center;
line-height: 45px;
clear: both;
width: 100%;
font-size: 1.2em;
}
.about_page{font-family: "Lucida Sans Unicode";
/*background: #005c48;*/
height: 100px;
line-height: 25px;
clear: both;
width: 100%;
font-size: .6em;
}
body{
/*background:rgba(0,0,0,.65)*/;
/*background: #fff2cc;*/
height: 100vh;
margin: 5px;
display: flex;
flex-direction: column;
padding: 25px;
/*background-color:rgb(12,23,30);*/
background: linear-gradient(90deg, #ffcccc, #ccffff, #d9ccff, #ffcccc , #ffffcc);
font-family: "Open Sans";
}
/*custom styling for all icons*/
i.fas,
i.fab {
background-color:inherit;
}
.fa-frog {
color: green;
}
.fa-feather {
color: rgba(0, 0, 0,.15);
}
.fa-feather, .fa-window-maximize, .fa-window-restore {
color: rgba(0, 0, 0,.25);
}
.fa-creative-commons-share, {
color: rgba(0, 0, 0,.5);
}
.fa-blogger, .fa-github-square, .fa-linkedin {
color: rgba(0, 0, 0, 1);
}
}
header{font-family: Lobster;
padding: 3px 0;
/*background: #B18F53;*/
height: 65px;
text-align: center;
line-height: 40px;
width: 100%;
position: center;
}
a {font-family: Lobster;
text-align: center;
font-size: 1.75em;
}
/*css for the Venn Infographic <3*/
#Infografic_container{
min-height: 60vh;
margin-top: -300px;
margin-bottom: 50px;
position: left;
}
#web {
width: 5em;
margin: .5em auto;
padding: 1em;
position: relative;
font-weight: bold;
height: 60em;
margin: 10px;
padding: 0;
font-family: "Open Sans";
/* background: #fff2cc;*/
/* background: linear-gradient(120deg, #B18F53 20%, transparent, transparent);*/
color: #005c48;
font-size: 1em;
}
#center-sphere {
width: 400px;
height: 400px;
position: absolute;
left: 300px;
top: 570px;
/* border: 2px rgb(115,166,183) solid;
border-radius: 50%;
background-color:#B18F53;*/
color: #005c48;
}
.sphere {
/* width: 450px;
height: 450px; */
border-radius: 50%;
position: absolute;
border: 2px rgb(115,166,183) solid;
border-radius: 50%;
transition: background-color 800ms ease-in-out;
background: rgba(125,184,214, .2);
transition:width 800ms, height 800ms, border-radius 800ms,left 800ms, top 800ms ;
-moz-transition:width 800ms, height 800ms, border-radius 800ms,left 800ms, top 800ms;
-ms-transition:width 800ms, height 800ms, border-radius 800ms,left 800ms, top 800ms;
-o-transition:width 800ms, height 800ms, border-radius 800ms,left 800ms, top 800ms;
-webkit-transition:width 800ms, height 800ms, border-radius 800ms,left 800ms, top 800ms;
}
.sphere:hover {
transition: background-color 800ms ease-in-out;
background: rgb(115,166,183);
color: #ffffff;
z-index: 999;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
width: 275px;
height: 275px;
}
.one{width: 375px; height: 375px;left: 10px; top: 300px; background-color: rgba(255,0,0,.25)}
.two{width: 400px; height: 400px; left: 175px; top: 350px;background-color: rgba(0,255,0,.25)}
.three{width: 375px; height: 375px;left: 10px; top: 450px; background-color: rgba(0,0,255,.25) }
.four{width: 90px; height: 90px;left: 550px; top: 915px; background-color: rgba(0, 0, 0,.25) }
.text {
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
position: relative;
top: 65px;
left: 45px;
}
.sphere:hover .text {
top: 20px;
left: 100px;
}
.sphere:hover .muscles{
top: 20px;
left: 82px;
}
.blurb {
margin: 2.5em;
color: rgba(255,255,255,0);
-ms-transform: scale(.9);
-webkit-transform: scale(.9);
transform: scale(.9);
visibility: hidden;
}
.sphere:hover .blurb {
-webkit-transition: all 2s ease-in-out;
-moz-transition: all 2s ease-in-out;
-o-transition: all 2s ease-in-out;
-ms-transition: all 2s ease-in-out;
transition: all 2s ease-in-out;
color: rgba(255,255,255,1);
visibility: visible;
}
.muscles {
top: 70px;
left: 20px;
}
.title {
position: relative;
top: 65px;
left: 55px;
}
.description {
position: relative;
top: 65px;
left: 25px;
}
</style>
</head>
<body>
<!--Make a sticky footer-->
<div id="container">
<header>
</header>
<h6><a href="#top"> <i class="fa fa-window-maximize fa-lg"><strong> Web About Me Infographic:</strong> Best Viewed on Tablet or PC</a></i></h6><i class="fas fa-feather fa-xs">Hover over spheres, stay a while, ... Then leap frog to the next sphere, scroll down to learn more. </i>
<div>
<!-- Web About Me Infographic -->
<div id="Infografic_container">
<div id="web">
<div id="center-sphere">
<h2 class="title"><i class="fas fa-frog fa-lg"></i>HOVER</h2>
<p class="description">to LEAP FROG<i class="fas fa-frog fa-lg"></i></i></hp>
</div>
<div class="sphere one" >
<span class="text CO2"><strong>#ClimateChangeResilience</strong></span>
<p class="blurb"> <i class="fas fa-feather fa-lg"></i>Quantification and Reporting of Greenhouse Gas Emissions and Removals <i class="fas fa-frog fa-xs"></i> Social & Environmental Risk <i class="fas fa-frog fa-xs"></i> Corporate Social Responsibility <i class="fas fa-frog fa-xs"></i> Environmental Policy <i class="fas fa-frog fa-xs"></i> Resource Economics<i class="fas fa-frog fa-xs"></i> Analytics <i class="fas fa-frog fa-xs"></i> Documentation <i class="fas fa-frog fa-xs"></i> Data Science <i class="fas fa-frog fa-xs"></i> Infographics <i class="fas fa-frog fa-xs"></i> StoryTelling</p>
</div>
<div class="sphere two" >
<span class="text SDG">#SustainableDevelopment</span>
<p class="blurb"><i class="fas fa-feather fa-lg"></i>Botany <i class="fas fa-frog fa-xs"></i> Water Quality Catchment Management <i class="fas fa-frog fa-xs"></i> Mine Rehabilitation Plans <i class="fas fa-frog fa-xs"> </i>Stakeholder Engagement <i class="fas fa-frog fa-xs"></i> Environmental Policy <i class="fas fa-frog fa-xs"> </i> Resource Economics </i> Analytics <i class="fas fa-frog fa-xs"></i> Documentation<i class="fas fa-frog fa-xs"></i> Data Science <i class="fas fa-frog fa-xs"></i> Infographics <i class="fas fa-frog fa-xs"></i> StoryTelling </p>
</div>
<div class="sphere three" >
<span class="text DATA">#DataScience</span>
<p class="blurb"><i class="fas fa-feather fa-lg"> </i> Excel-VBA <i class="fas fa-frog fa-xs"></i> SQL <i class="fas fa-frog fa-xs"></i> Python3 <i class="fas fa-frog fa-xs"></i> R <i class="fas fa-frog fa-xs"></i>ArcView GIS <i class="fas fa-frog fa-xs"></i> MathLab<i class="fas fa-frog fa-xs"></i> Climate Change Resilience <i class="fas fa-frog fa-xs"></i> Sustainable Development <i class="fas fa-frog fa-xs"></i> Resource Economics<i class="fas fa-frog fa-xs"></i>Analytics <i class="fas fa-frog fa-xs"></i> Documentation <i class="fas fa-frog fa-xs"></i></i> Fluent in French & <i class="fas fa-frog fa-xs"></i>English <i class="fas fa-frog fa-xs"> </i>Front End Web Developer <i class="fas fa-frog fa-xs"></i>Infographics <i class="fas fa-frog fa-xs"></i> StoryTelling</p>
</div>
<div class="sphere four" >
<span class="top"><h5><i class="fas fa-frog fa-xs">#LeapFrog</i></h5></span>
<p class="blurb"></i> <i class="fas fa-feather fa-lg">More About Me:</i> <i class="fas fa-frog fa-xs"></i> Infographics & <i class="fas fa-frog fa-xs"></i> Natural History Illustrator <i class="fas fa-frog fa-xs"></i><i class="fab fa-creative-commons-share"> 2019, by Linda.</i></p>
</div>
</div>
<section class="navbar-brand">
<!-- Contact Icons -->
<nav>
<p><a class="navbar-brand" href="https://www.dhirubhai.net/in/lindangulopez/"><i class="fab fa-linkedin"></a></i> <a class="navbar-brand" ><i class="fab fa-github-square"></a></i><a class="navbar-brand" ><i class="fab fa-blogger"></a></i></i> Infographic, by Linda Angulo Lopez, 2019.</p>
</nav>
<div>
<section class= "about_page">
<p><i class="fab fa-creative-commons-share"></i>About this Infographic<i class="fas fa-feather fa-xs"></i>Scripted from Scratch with HTML5 & CSS3 <i class="fas fa-feather fa-xs"></i> Add-ins: FontAwsome & fonts.googleapis </i><i class="fas fa-feather fa-xs"></i>Hover on type interaction <i class="fas fa-feather fa-xs"></i>Best interaction on Tablet or PC<i class="fas fa-feather fa-xs"></i>Use this View <a href="SEE.html#Lightbox_view">for Mobiles</a><i class="fas fa-feather fa-xs"></i>Part of a Capstone Submission for <i class="fas fa-feather fa-xs"></i> Web Design For Everyone Specialization<i class="fas fa-feather fa-xs"></i> University of Michigan</i></p>
</section>
</div>
</br>
<div>
</section>
</div>
<!--close sticky footer after return to top div-->
</div>
<script>
$('.handle').on('click', function(){
$('nav ul').toggleClass('showing');
});
</script>
<footer>
<h5><a href="#top"><i class="fas fa-window-restore fa-sm">Click to return to Top</a></i></h5>
</footer>
</body>
</html>
About this Specialization
Upon completing this Specialization you will have a solid foundation in the core technologies of “front end” development - HTML5 and CSS3 as well as an ability to incorporate JavaScript into your page.
By the end of the Specialization you will be able to create your own dynamic, responsive website. In addition, learners will have the skills necessary to evaluate the web accessibility of existing deployed sites. This Specialization is designed for complete beginners and can help prepare you for more advanced topics.
This Specialization covers how to write syntactically correct HTML5 and CSS3, and how to create interactive web experiences with JavaScript. Mastering this range of technologies will allow you to develop high quality web sites that, work seamlessly on mobile, tablet, and large screen browsers accessible. During the capstone you will develop a professional-quality web portfolio demonstrating your growth as a web developer and your knowledge of accessible web design. This will include your ability to design and implement a responsive site that utilizes tools to create a site that is accessible to a wide audience, including those with visual, audial, physical, and cognitive impairments.
Software Heritage Ambassador ?? | Environmental Engineer ???? | #Biodiversity ?? | #SustainableDevelopment ?? | #OpenScience ?? | #GenerationRestoration ?? | #SafeAndJust ?? | ?????? Full Stack GIS Developer
4 年Hi, I am a Polyvalent Professional, someone who asks the right questions and is able to answer it with Real World Data Analytics: [June, 2020 - Cloudburst Disaster Risk Analysis - Geospatial Analytics - ArcGIS 10.6, Model Builder, Hydrology Tools] [ March 2020 - Business Data Analytics - Excel, SQL & Tableau] [May 2020 - Cooperative Game Theory Analysis - Text Sentiment Analysis on AI Watson] [November, 2019 - Front End Web Development - HTML5, JavaScript, CSS3, Reactive] [July, 2019 - Liveability Index - AI, Python 3] #opentowork #sustainabledevelopment #datascience [2018-now, Sustainable Development Professional & Data Science Student][1996-now, Experienced Environmental Professional] [2011-2020, Business English Teacher] [1997-2002, International Mine Rehabilitation] [1996-1997, Water Catchment Management] and [2004-now, Climate Change Resilience Researcher].
Software Heritage Ambassador ?? | Environmental Engineer ???? | #Biodiversity ?? | #SustainableDevelopment ?? | #OpenScience ?? | #GenerationRestoration ?? | #SafeAndJust ?? | ?????? Full Stack GIS Developer
5 年Open link:?https://wd4etestingsites.byethost11.com/infographic.html Hover? over or click on spheres, stay a while, ... Then leap frog to the next sphere, scroll down to learn more.