Кнопка на дизайне страницы, с которой я играю, не изменится в соответствии с заданной шириной экрана. Он отлично работает для небольших экранов, но не для больших экранов (800 пикселей и выше). Я только начинаю и учусь, как я go, так что это может быть довольно глупо! Совместное использование CSS кода ниже.
Код на Jsfiddle
*,
*::before,
*::after {
box-sizing: border-box;
}
/*Custom properties, update if necessary*/
:root {
--ff-primary: 'Source Sans Pro', sans-serif;
--ff-secondary: 'Source Code Pro', monospace;
--fw-reg: 300;
--fw-bold: 900;
--clr-white: #fff;
--clr-grey: #303030;
--clr-blue: #16E0BD;
--fs-h1: 3rem;
--fs-h2: 2.25rem;
--fs-h3: 1.25rem;
--fs-body: 1rem;
--bs: 0.25em 0.25em 0.75em rgba(0, 0, 0, .25),
0.125em 0.125 0.25em rgba(0, 0, 0, 0.15);
}
@media (min-width: 800px) {
:root {
--fs-h1: 4.5rem;
--fs-h2: 3.75rem;
--fs-h3: 1.5rem;
--fs-body: 1.125rem;
}
}
/*General Styles*/
body {
background: var(--clr-white);
color: var(--clr-grey);
margin: 0;
font-family: var(--ff-primary);
font-size: var(--fs-body);
line-height: 1.6;
}
section {
padding: 5em 2em;
}
img {
display: block;
max-width: 100%;
}
strong {
font-weight: var(--fw-bold)
}
:focus {
outline: 3px solid var(--clr-blue);
outline-offset: 3px;
}
/* Buttons */
.btn {
display: inline-block;
padding: .5em 2.5em;
background: var(--clr-blue);
color: var(--clr-grey);
text-decoration: none;
cursor: pointer;
font-size: .8rem;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: var(--fw-bold);
transition: transform 200ms ease-in-out;
}
.btn:hover {
transform: scale(1.1);
}
/*Typography*/
h1,
h2,
h3 {
line-height: 1;
margin: 0;
}
h1 {
font-size: var(--fs-h1)
}
h2 {
font-size: var(--fs-h2)
}
h3 {
font-size: var(--fs-h3)
}
.section__title {
margin-bottom: 0.25em;
}
.section__title--intro {
font-weight: var(--fw-reg);
}
.section__title--intro strong {
display: block;
}
.section__subtitle {
margin: 0;
font-size: var(--fs-h3);
}
.section__subtitle--intro,
.section__subtitle--about {
background: var(--clr-blue);
padding: .25em;
font-family: var(--ff-secondary);
margin-bottom: 1em;
}
/* Header section */
nav {
display: none;
}
/* Intro section */
.intro {
position: relative;
}
.intro__img {
box-shadow: var(--bs);
}
.section__subtitle--intro {
display: inline-block;
}
@media (min-width: 600px) {
.intro {
display: grid;
width: min-content;
margin: 0 auto;
grid-column-gap: 1em;
grid-template-areas:
"img title"
"img subtitle";
grid-template-columns: min-content max-content;
}
.intro__img {
grid-area: img;
min-width: 250px;
position: relative;
z-index: 2;
}
.section__subtitle--intro {
align-self: start;
grid-column: -1 / 1;
grid-row: 2;
text-align: right;
position: relative;
left: -1.5em;
width: calc(100% + 1.5em);
}
}
/*My services section*/
.myservices {
background-color: var(--clr-grey);
color: var(--clr-white);
background-size: cover;
background-image: url("https://portfolio-project-tl.s3-ap-southeast-1.amazonaws.com/computer-desk-1450x625.jpg");
background-blend-mode: multiply;
text-align: center;
}
.section__title--services {
color: var(--clr-blue);
position: relative;
}
.section__title--services::after {
content: '';
display: block;
width: 3em;
height: 1px;
margin: 0.5em auto 1em;
background: var(--clr-white);
opacity: 0.5;
}
.services {
margin-bottom: 4em;
}
.service {
max-width: 250px;
margin: 0 auto;
}
@media (min-width: 800px) {
.services {
display: flex;
max-width: 1000px;
margin-left: auto;
margin-right: auto;
}
.service+.service {
margin-left: 1.5em;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width initial-scale=1">
<title>Tanuj Lakhina's Portfolio</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" integrity="sha256-46qynGAkLSFpVbEBog43gvNhfrOj+BmwXdxFgVK/Kvc=" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Source+Code+Pro:400,900|Source+Sans+Pro:300,900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="CSS/style.css">
</head>
<body>
<header>
<div class="logo">
<img src="https://portfolio-project-tl.s3-ap-southeast-1.amazonaws.com/logo.png" alt="">
</div>
<button class="nav-toggle" aria-label="toggle navigation">
<span class="hamburger"></span>
</button>
<nav class="nav">
<ul class="nav__list">
<li class="nav__item"><a href="#home" class="nav__link">Home</a></li>
<li class="nav__item"><a href="#services" class="nav__link">My services</a></li>
<li class="nav__item"><a href="#about" class="nav__link">About me</a></li>
<li class="nav__item"><a href="#work" class="nav__link">My work</a></li>
</ul>
</nav>
</header>
<!-- INTRODUCTION -->
<section class="intro" id="home">
<h1 class="section__title section__title--intro">
Hi, I am <strong>Tanuj Lakhina</strong>
</h1>
<p class="section__subtitle section__subtitle--intro">journalist</p>
<img src="https://portfolio-project-tl.s3-ap-southeast-1.amazonaws.com/me-313x313.jpg" alt="picture of Tanuj Lakhina" class="intro__img">
</section>
<!-- My services -->
<section class="myservices" id="services">
<h2 class="section__title section__title--services">What I do</h2>
<div class="services">
<div class="service">
<h3>Journalism</h3>
<p>Professional sports journalist with Firstpost (Network18) in Delhi with strong experience of working in digital newsrooms.</p>
</div><!-- / service -->
<div class="services">
<div class="service">
<h3>Social media</h3>
<p>Have worked in B2B and B2C environments for businesses, agency and analytical organisations. I've handled accounts of large entities with over a million customers.</p>
</div><!-- / service -->
<div class="service">
<h3>Data journalism</h3>
<p>Besides the run of the mill stories, I've put special emphasis on data stories and work to offer different perspective to a topic.</p>
</div><!-- / service -->
</div><!-- / services -->
<a href="#work" class="btn">My work</a>
</section>
<!-- About me -->
<section class="about-me" id="about">
<h2 class="section__title section__title--about">Who I am?</h2>
<p class="section__subtitle section__subtitle--about">Journalist, social media enthusiast</p>
<div class="about-me__body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Velit ut tortor pretium viverra suspendisse potenti nullam ac tortor. Nunc consequat interdum varius sit amet. </p>
<p>Morbi tristique senectus et netus et malesuada fames. Morbi quis commodo odio aenean. Et leo duis ut diam quam nulla porttitor massa id. Venenatis lectus magna fringilla urna porttitor rhoncus. Suspendisse potenti nullam ac tortor vitae.</p>
</div>
<img src="https://portfolio-project-tl.s3-ap-southeast-1.amazonaws.com/IMG-20190323-WA0037-244X406.jpg" alt="About me">
<!-- INSERT ABOUT ME PHOTO ABOVE -->
</section>
<!-- My work -->
<section class="my-work" id="work">
<h2 class="section__title">My work</h2>
<p class="section__subtitle"></p>
<div class="Portfolio">
<!-- Portfolio item 1 -->
<a href="#" class="Portfolio__item">
<img src="https://portfolio-project-tl.s3-ap-southeast-1.amazonaws.com/black-ball-point-pen-with-brown-spiral-notebook-240x240.jpg" alt="" class="portfolio__img"></a>
<!-- Portfolio item 2 -->
<a href="#" class="Portfolio__item">
<img src="https://portfolio-project-tl.s3-ap-southeast-1.amazonaws.com/data-analysis-240x240.jpg" alt="" class="portfolio__img"></a>
<!-- Portfolio item 3 -->
<a href="#" class="Portfolio__item">
<img src="https://portfolio-project-tl.s3-ap-southeast-1.amazonaws.com/newspaper-illustration-240x240.png" alt="" class="portfolio__img"></a>
</div>
</section>
<!-- FOOTER -->
<footer>
<a href="mailto:tanujlakhina9@gmail.com" class="footer__link">Tanujlakhina9@gmail.com</a>
<ul class="social-list">
<li class="social-list__item"><a class="social-list__link" href="https://twitter.com/tanujlakhina"><i class="fa fa-twitter-square" style="font-size:36px"></i></a></li></ul></i>
<li class="social-list__item"><a class="social-list__link" href="https://www.facebook.com/tanujlakhina"><i class="fa fa-facebook-official" style="font-size:36px"></a></li></i>
</ul>
</footer>
</body>
</html>
PS Это все еще WIP.