1
Я не уверен, почему изображения не отображаются, когда файл открывается с помощью Safari, но отображает изображения без проблем в Chrome.Safari не отображает изображения, но работает Chrome
У меня также проблема с логотипом. Кажется, я не могу правильно разместить его с остальной частью страницы. Я не уверен, если его обивка или маржи, которая должна быть скорректирована, но, как он сидит, логотип не сидит
<!DOCTYPE html>
<html>
<meta name="description" content="David Menard Front-End Ninja resume" />
<meta name="author" content="//David Menard">
<meta name="viewport" content="width=device-width, minimun-scale=1.0, initial-scale=1.0, user-scalable=yes">
<meta itemprop="name" content="Udacity Portfolio course project">
<meta id="theme-color" name="theme-color" content="#307699">
<meta name="udacity-grader" content="http://udacity.github.io/responsive-images/project/project-grader.json" unit-tests="http://udacity.github.io/responsive-images/project/project-grader.js">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Assistant|Cambay|Didact+Gothic" rel="stylesheet">
<link rel="stylesheet" href="css/main.css" type="text/css"/>
<style>
@media screen and (min-width: 155px) and (max-width: 415px) {
h1 {
font-size: 4em;
text-align: center;
}
h2 {
font-size: 2em;
text-align: center;
}
h3 {
font-size: 2em;
text-align: center;
}
h4 {
font-size: 3em;
text-align: center;
}
h5 {
font-size: 1.5em;
text-align: center;
max-width: 100%;
}
body {
max-width: 100%;
}
.container {
width: 100%;
}
.featured_title {
max-width: 100%;
}
.col-4 {
display: block;
flex-wrap: wrap;
width: 100%;
}
.featured {
width: 100%;
}
.logo {
width: 100%;
align-self: center;
}
.content {
width: 100%;
}
.icon {
width: 50%;
padding-left: 6.5em;
margin-top: 10em;
}
.col-4 {
width: 100%;
}
}
@media screen and (min-width: 415px) and (max-width: 659px) {
.wrapper {
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-around;
align-items: baseline;
align-content: space-around;
}
.content {
display: flex;
flex-wrap: wrap;
}
.col-4 {
display: inline-flex;
flex-wrap: wrap;
width: 50%;
}
.logo {
width: 10%;
}
.logo_text {
width: 90%;
}
.icon {
width: 100%;
padding-left: 60px;
justify-content: space-around;
}
h1 {
font-size: 2em;
text-align: right;
}
h2 {
font-size: 1em;
text-align: center;
}
h3 {
font-size: 1em;
text-align: right;
}
h4 {
font-size: 1.5em;
text-align: center;
}
h5 {
text-align: center;
}
.featured {
width: 100%;
display: all;
}
.wrapper {
width: 100%;
}
}
@media screen and (min-width: 660px) {
.wrapper {
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-around;
align-items: baseline;
align-content: space-around;
}
.content {
display: flex;
flex-wrap: wrap;
}
.col-4 {
display: flex;
flex-wrap: wrap;
width: 33%;
}
.logo {
width: 50%;
}
.logo_text {
width: 50%;
}
.icon {
width: 15%;
margin-left: 70px;
}
h1 {
font-size: 2em;
text-align: right;
}
h2 {
font-size: 1em;
text-align: center;
}
h3 {
font-size: 1em;
text-align: right;
}
h4 {
font-size: 1.5em;
text-align: center;
}
h5 {
text-align: center;
}
.featured {
width: 100%;
display: all;
}
.wrapper {
width: 100%;
}
}
@media screen and (min-width: 888px) {
body {
max-width: 888px;
margin-left: auto;
margin-right: auto;
}
.slideshow {
width: 100%;
}
}
</style>
<body>
<div class="container">
<div class="content">
<div class="logo">
<img class="icon" src="img/icon.webp" srcset="img/icon.webp 2x, img/icon.jpg 1x" alt="udacity logo">
</div>
<div class="logo_text">
<h1>JANE DOETTE</h1>
<h3>FRONT-END NINJA</h3>
</div>
<div class="bar">
</div>
<div class="banner">
<picture>
<source srcset="img/slideshow_948w.jpg">
<img class="slideshow" src="img/slideshow_948w.jpg" srcset="img/slideshow_948w.jpg 2x, img/slideshow_512.jpg 1x" alt="Picture of html script">
</picture>
</div>
<div class="featured_work">
<h4 class="homepage">Featured Work</h4>
</div>
<div class="wrapper">
<div class="col-4">
<picture>
<source srcset="img/Appify.jpg">
<img class="featured" src="img/Appify.webp" srcset="img/Appify.webp 2x, img/Appify.jpg 1x" alt="Appify logo">
<div class="featured_title">
<h2>APPIFY</h2>
<h5>https://github.com/udacity/Appify/</h5>
</div>
</picture>
</div>
<div class="col-4">
<picture>
<source srcset="img/sunflower.jpg">
<img class="featured" src="img/sunflower.webp" srcset="img/sunflower.webp 2x, img/sunflower.jpg 1x" alt="Picture of sunflower">
<div class="featured_title">
<h2>SUNFLOWER</h2>
<h5>https://github.com/udacity/Sunflower/</h5>
</div>
</picture>
</div>
<div class="col-4">
<picture>
<source srcset="img/Bokeh.jpg">
<img class="featured" src="img/Bokeh.webp" srcset="img/Bokeh.webp 2x, img/Bokeh.jpg 1x" alt="light distorsion">
<div class="featured_title">
<h2>BOKEH</h2>
<h5>https://github.com/udacity/BOKEH/</h5>
</div>
</picture>
</div>
</div>
</div>
</div>
</body>
<footer>
</footer>
</html>
Вот CSS файл
body {
font-family: 'Didact Gothic', sans-serif;
font-family: 'Cambay', sans-serif;
font-family: 'Assistant', sans-serif;
}
.container {
display: flex; /* or inline-flex */
flex-direction: row;
justify-content: space-around;
align-items: baseline;
align-content: space-around;
width: 100%;
}
.content {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: baseline;
width: 100%;
}
.wrapper {
display: flex;
flex-wrap: wrap;
flex-flow: row wrap;
width: 100%;
}
/* We tell all items to be 100% width */
img, embed, object, video {
max-width: 100%;
}
.bar {
width:100%;
height: 5px;
background-color:#7d97ad;
}
.featured_work {
text-align: center;
justify-content: space-around;
}
.col-4 {
display: flex;
flex-wrap: wrap;
width: 100%;
}