내 한 페이지 웹 사이트의 바닥 글에있는 텍스트의 양쪽에 x2 소셜 미디어 아이콘을 정렬하려고합니다.동일한 줄에 텍스트 및 소셜 미디어 아이콘을 배치하는 방법
다음은 데스크탑/와이드 스크린에 표시하는 방법의 예입니다. Desktop/Wide Screens
다음은 모바일/좁은 화면에 표시하는 방법의 예입니다. Mobile/Narrower Screens
나는 내가 지금까지
P.S. (현재의 소셜 미디어 아이콘 없음)가 그 아래에 내 코드를 입력 내 소셜 미디어 아이콘 facebook.png 및 twitter.png로 저장됩니다
body {
background-color: #000;
font-family: 'Roboto Mono', 'Arial', sans-serif;
font-size: 250%;
font-weight: 300;
}
.logo {
display: block;
margin: 50px auto;
}
p {
color: #ccc;
text-align: center;
text-transform: uppercase;
letter-spacing: 3px;
}
.coming-soon {
color: #333;
letter-spacing: 3px;
}
.autumn-2017 {
color: #ccc;
}
section p {
display: block;
margin: 50px auto 10px;
font-size: 35%;
text-transform: none;
letter-spacing: 3px;
line-height: 25px;
color: #333;
}
.contact-info {
margin: 15px auto;
letter-spacing: 3px;
line-height: 25px;
color: #ccc;
text-decoration: none;
text-transform: none;
font-size: 35%;
}
a:link,
a:visited {
text-decoration: none;
color: #ccc;
transition: font-weight 0.2s;
}
a:hover,
a:active {
text-decoration: none;
color: #ccc;
font-weight: 500;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="desctription" content="Web Design & Development">
<link rel="stylesheet" type="text/css" href="normalize.css">
<link rel="stylesheet" type="text/css" href="grid.css">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="queries.css">
<link href="https://fonts.googleapis.com/css?family=Roboto+Mono:100,300,400,500,700" rel="stylesheet">
<meta name="msapplication-config" content="resources/favicons/browserconfig.xml">
</head>
<body>
<header>
<div>
<img src="iz-icon-logo.png" class="logo" alt="logo">
<p><span class="coming-soon">coming soon.</span><span class="autumn-2017"> autumn 2017.</span></p>
</div>
</header>
<section>
<div>
<p>If you have a Web Design or Development enquiry,<br>please contact:</p>
<p class="contact-info"><a href="mailto:[email protected]">[email protected]</a><br><a href="tel:07903490453">+44 (0) 7903 490453</a></p>
</div>
</section>
</body>
</html>
을 사용할 수 있습니다 문제는 무엇입니까? – Shogunivar