Skip to content

Commit

Permalink
changed media quaries in about and product pages
Browse files Browse the repository at this point in the history
  • Loading branch information
Themalni committed Oct 11, 2019
1 parent 5aca4ae commit 514cd86
Show file tree
Hide file tree
Showing 21 changed files with 1,056 additions and 956 deletions.
6 changes: 3 additions & 3 deletions about-me.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,10 +20,10 @@
<link rel="stylesheet" type="text/css" href="css/about-me-styles.css" /><!-- about-me stylesheet -->
<link rel="stylesheet" media="screen" href="css/animations.min.css" /><!-- animations stylesheet -->

<link rel="stylesheet" media="screen and (max-width: 500px)" href="css/about_media_small.css" />
<link rel="stylesheet" media="screen and (min-width: 320px) and (max-width: 640px) and (orientation: landscape)"
href="css/media_small_landscape.css" /><!-- main mobile stylesheet -->
<link rel="stylesheet" media="screen and (min-width: 320px) and (max-width: 500px)"
href="css/about_media_small.css" /><!-- about-me mobile stylesheet -->
<!-- about-me mobile stylesheet -->
<link rel="stylesheet" media="screen and (min-width: 501px) and (max-width: 800px)"
href="css/about_media_medium.css" /><!-- about-me mobile stylesheet -->
<link rel="stylesheet" media="screen and (min-width: 800px) and (max-width: 1024px)"
Expand Down Expand Up @@ -150,7 +150,7 @@ <h1 class="about-me__skills__middle__name">JavaScript</h1>
</div>
<p class="about-me__skills__text">I've a <span class="about-me__skills__text--accent">solid</span> knowledge
of <span class="about-me__skills__text--accent">JS</span> including <span
class="about-me__skills__text--accent">JS6</span> and improve it daily by using it to <span
class="about-me__skills__text--accent">ES6</span> and improve it daily by using it to <span
class="about-me__skills__text--accent">refactor</span> some old projects and building new ones.</p>
</div>
<!-- sixth skills item -->
Expand Down
150 changes: 80 additions & 70 deletions calculator-js-app.html
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">

Expand All @@ -10,81 +11,82 @@

<title>Dina Blaszczak | Calculator JS App</title>

<link rel="shortcut icon" href="images/icon.ico" type="image/x-icon"/><!-- Favicon -->
<link rel="icon" href="images/icon.ico" type="image/x-icon"/><!-- Favicon -->
<link rel="shortcut icon" href="images/icon.ico" type="image/x-icon" /><!-- Favicon -->
<link rel="icon" href="images/icon.ico" type="image/x-icon" /><!-- Favicon -->

<link rel="stylesheet" type="text/css" href="css/normalize.css"/><!-- reset for browsers -->
<link rel="stylesheet" href="css/font-awesome.min.css"/><!-- mobile stylesheet -->
<link rel="stylesheet" type="text/css" href="css/styles.min.css"/><!-- index custom stylesheet -->
<link rel="stylesheet" type="text/css" href="css/project-styles.min.css"/><!-- project custom stylesheet -->
<link rel="stylesheet" href="css/animations.min.css"/><!-- animations stylesheet -->
<link rel="stylesheet" type="text/css" href="css/normalize.css" /><!-- reset for browsers -->
<link rel="stylesheet" href="css/font-awesome.min.css" /><!-- mobile stylesheet -->
<link rel="stylesheet" type="text/css" href="css/styles.min.css" /><!-- index custom stylesheet -->
<link rel="stylesheet" type="text/css" href="css/project-styles.min.css" /><!-- project custom stylesheet -->
<link rel="stylesheet" href="css/animations.min.css" /><!-- animations stylesheet -->

<link rel="stylesheet" media="screen and (min-width: 320px) and (max-width: 1024px)" href="css/project_media_small.css"/><!-- project mobile stylesheet -->
<link rel="stylesheet" media="screen and (min-width: 320px) and (max-width: 1024px) and (orientation: landscape)" href="css/project_media_small_landscape.css"/><!-- project mobile stylesheet -->
<link rel="stylesheet" media="screen and (max-width: 1024px)" href="css/project_media_small.css" />
<!-- project mobile stylesheet -->
<link rel="stylesheet" media="screen and (min-width: 320px) and (max-width: 1024px) and (orientation: landscape)"
href="css/project_media_small_landscape.css" /><!-- project mobile stylesheet -->


<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400" rel="stylesheet">

</head>

<body>
<!-- Navigation -->
<nav class="nav">
<a href="index.html#header" class="nav__logo__link"><img class="nav__logo" src="images/logo.svg" alt="logo"></a>
<span class="hamburger__name">menu</span>
<svg width="35px" height="35px" class="nav__hamburger">
<path d="M 5 5 L 33 5" class="hamburger"></path>
<path d="M 5 15 L 33 15" class="hamburger"></path>
<path d="M 5 25 L 33 25" class="hamburger"></path>
<!-- Navigation -->
<nav class="nav">
<a href="index.html#header" class="nav__logo__link"><img class="nav__logo" src="images/logo.svg" alt="logo"></a>
<span class="hamburger__name">menu</span>
<svg width="35px" height="35px" class="nav__hamburger">
<path d="M 5 5 L 33 5" class="hamburger"></path>
<path d="M 5 15 L 33 15" class="hamburger"></path>
<path d="M 5 25 L 33 25" class="hamburger"></path>
</svg>
</nav>
<div class="nav-menu">
<div class="nav-menu__cross">
<svg width="43px" height="35px">
<path d="M 5 5 L 30 29" class="nav-menu__cross-line"></path>
<path d="M 5 29 L 30 5" class="nav-menu__cross-line"></path>
</svg>
</nav>
<div class="nav-menu">
<div class="nav-menu__cross">
<svg width="43px" height="35px">
<path d="M 5 5 L 30 29" class="nav-menu__cross-line"></path>
<path d="M 5 29 L 30 5" class="nav-menu__cross-line"></path>
</svg>
</div>
<ul class="nav-menu__list">
<li class="nav-menu__list-item">
<a href="index.html" class="nav-menu__link">Home</a>
</li>
<li class="nav-menu__list-item">
<a href="index.html#about" class="nav-menu__link">About</a>
</li>
<li class="nav-menu__list-item">
<a href="index.html#portfolio" class="nav-menu__link">Portfolio</a>
</li>
<li class="nav-menu__list-item">
<a href="index.html#contact" class="nav-menu__link">Contact</a>
</li>
</ul>
<hr class="nav-menu__separator">
<p class="nav-menu__text">Dina Blaszczak is a front-end developer and designer based in Poland.</p>
<p class="nav-menu__email">
<a href="mailto:[email protected]" class="nav-menu__link--email">[email protected]</a>
</p>
<div class="nav-menu__social-btn">
<a href="https://twitter.com/TheMalni" target="_blank"><span class="fa fa-twitter fa-2x"></span></a>
<a href="https://codepen.io/themalni" target="_blank"><span class="fa fa-codepen fa-2x"></span></a>
<a href="https://github.com/Themalni" target="_blank"><span class="fa fa-github fa-2x"></span></a>
<a href="https://youtube.com/user/TheMalni" target="_blank"><span class="fa fa-youtube fa-2x"></span></a>
<a href="https://www.linkedin.com/in/dina-blaszczak-5b380313a/" target="_blank"><span class="fa fa-linkedin-square fa-2x"></span></a>
</div>
</div>
<ul class="nav-menu__list">
<li class="nav-menu__list-item">
<a href="index.html" class="nav-menu__link">Home</a>
</li>
<li class="nav-menu__list-item">
<a href="index.html#about" class="nav-menu__link">About</a>
</li>
<li class="nav-menu__list-item">
<a href="index.html#portfolio" class="nav-menu__link">Portfolio</a>
</li>
<li class="nav-menu__list-item">
<a href="index.html#contact" class="nav-menu__link">Contact</a>
</li>
</ul>
<hr class="nav-menu__separator">
<p class="nav-menu__text">Dina Blaszczak is a front-end developer and designer based in Poland.</p>
<p class="nav-menu__email">
<a href="mailto:[email protected]" class="nav-menu__link--email">[email protected]</a>
</p>
<div class="nav-menu__social-btn">
<a href="https://twitter.com/TheMalni" target="_blank"><span class="fa fa-twitter fa-2x"></span></a>
<a href="https://codepen.io/themalni" target="_blank"><span class="fa fa-codepen fa-2x"></span></a>
<a href="https://github.com/Themalni" target="_blank"><span class="fa fa-github fa-2x"></span></a>
<a href="https://youtube.com/user/TheMalni" target="_blank"><span class="fa fa-youtube fa-2x"></span></a>
<a href="https://www.linkedin.com/in/dina-blaszczak-5b380313a/" target="_blank"><span
class="fa fa-linkedin-square fa-2x"></span></a>
</div>
</div>
<div class="project__container">
<!-- Header -->
<header class="project__header">
<h2 class="project__title project__title--white">Calculator JS<span class="contact__title__dot title__dot--white"></span></h2>
<h2 class="project__title project__title--white">Calculator JS<span
class="contact__title__dot title__dot--white"></span></h2>
<h3 class="project__description">Basic calculator for simple arithmetic operations</h3>
<img src="images/calculator_1400.jpg"
srcset="images/calculator_800.jpg 800w,
<img src="images/calculator_1400.jpg" srcset="images/calculator_800.jpg 800w,
images/calculator_1200.jpg 1100w,
images/calculator_1400.jpg 1400w"
sizes="(max-width: 320px) 90vw,
(max-width: 640px) 100vw, 60vw"
class="project__header__img"
alt="header image"/>
images/calculator_1400.jpg 1400w" sizes="(max-width: 320px) 90vw,
(max-width: 640px) 100vw, 60vw" class="project__header__img" alt="header image" />
<div class="project__buttons-container">
<a href="https://themalni.github.io/Calculator_JS/" target="_blank" class="project__header__btn">Live Demo</a>
<a href="https://github.com/Themalni/Calculator_JS" target="_blank" class="project__header__btn">GitHub</a>
Expand All @@ -96,14 +98,16 @@ <h3 class="project__description">Basic calculator for simple arithmetic operatio
<!-- Project Description -->
<div class="project__flex__item">
<h2 class="project__flex__title">Project description</h2>
<p class="project__flex__text">Calculator JS is a web application to be used for simple arithmetic operations such as addition, subtraction, multiplication and division.</p>
<p class="project__flex__text">Calculator JS is a web application to be used for simple arithmetic operations
such as addition, subtraction, multiplication and division.</p>
<p class="project__flex__text">This app is a part of Advanced projects for Free Code Camp course.</p>
</div>
<div class="project__flex__item">
<h2 class="project__flex__title">Role</h2>
<p class="project__flex__text">Design and development of the app.</p>
<h2 class="project__flex__title">Challenge:</h2>
<p class="project__flex__text">Avoid operators chaining and allow for only a single decimal point per number.</p>
<p class="project__flex__text">Avoid operators chaining and allow for only a single decimal point per number.
</p>
<h2 class="project__flex__title">Skills</h2>
<p class="project__flex__text">
<span class="project__flex__skill">Design</span>
Expand All @@ -116,8 +120,10 @@ <h2 class="project__flex__title">Skills</h2>
</p>
</div>
</div>
<a href="pomodoro-clock-app.html" class="project__main__btn project__main__btn--previous"><span class="project__main__btn__arrow">&larr;</span>Previous</a>
<a href="every-inch-design-website.html" class="project__main__btn project__main__btn--next">Next<span class="project__main__btn__arrow">&rarr;</span></a>
<a href="pomodoro-clock-app.html" class="project__main__btn project__main__btn--previous"><span
class="project__main__btn__arrow">&larr;</span>Previous</a>
<a href="camera-css-illustration.html" class="project__main__btn project__main__btn--next">Next<span
class="project__main__btn__arrow">&rarr;</span></a>
</main>
<!-- Footer -->
<footer class="footer">
Expand All @@ -141,7 +147,8 @@ <h2 class="footer__copyright">&copy; Dina Blaszczak 2017</h2>
<a href="https://codepen.io/themalni" target="_blank"><span class="fa fa-codepen fa-2x"></span></a>
<a href="https://github.com/Themalni" target="_blank"><span class="fa fa-github fa-2x"></span></a>
<a href="https://youtube.com/user/TheMalni" target="_blank"><span class="fa fa-youtube fa-2x"></span></a>
<a href="https://www.linkedin.com/in/dina-blaszczak-5b380313a/" target="_blank"><span class="fa fa-linkedin-square fa-2x"></span></a>
<a href="https://www.linkedin.com/in/dina-blaszczak-5b380313a/" target="_blank"><span
class="fa fa-linkedin-square fa-2x"></span></a>
</div>
</div>
</footer>
Expand All @@ -152,15 +159,18 @@ <h2 class="footer__copyright">&copy; Dina Blaszczak 2017</h2>
<script type="text/javascript" src="js/scripts.min.js"></script><!-- Custom JavaScript -->

<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
(function (i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date(); a = s.createElement(o),
m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m)
})(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');

ga('create', 'UA-29336846-8', 'auto');
ga('send', 'pageview');

</script>

</body>
</html>

</html>
Loading

0 comments on commit 514cd86

Please sign in to comment.