0
私は前にやったことのないpsdファイルのモックアップであるコードテストを受けています。私は物事を動かすことに問題があります。私の主な経験は、RubyとRuby on Railsフレームワークのバックエンドです。HTMLとCSSを使って物事を正しく動かす
私は、電話アイコンの隣の電話番号を移動するのに助けが必要です。私はmiddlemanアプリフレームワークを使用しています。
@charset "utf-8";
@import "normalize";
body {
background: #white;
font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 1em;
}
nav > ul > li > a {
text-decoration: none;
}
.border{
position:relative;
}
.border:hover::after{
content:'';
position:absolute;
width: 100%;
height: 0;
left:0;
bottom: -1px; /*Change this to increase/decrease distance*/
border-bottom: 4px solid #FFA500;
}
nav {
width: 100%;
margin: 20px 0;
}
nav ul {
list-style: none;
overflow: hidden;
}
nav ul li {
float: right;
width: 10%;
}
nav ul li a {
padding: 8px 0;
display: block;
width: 100%;
margin-left: -10em;
font-family: "HelveticaNeueLTCom Hv";
color: #000000;
font-weight: bolder;
}
.logo img {
height: 100;
width: 90;
margin-left: 4.4em;
margin-top: .5em;
}
.navlogo img {
margin-left: 5em;
margin-top: 5em;
padding-bottom: 2em;
}
.socialicons {
margin-left: 73.5em;
margin-top: -32.3em;
}
.phone img{
margin-left: 62em;
margin-top: -9em;
margin-bottom: 12em;
}
h4 {
margin-left: 55em;
margin-top: 11.6em;
font-family: "HelveticaNeueLTCom Hv";
font-size: 20px;
}
.mt h1 {
color: #000000;
position: relative;
margin-left: 12em;
font-family: Helvetica regular;
font-size: 1.8em;
font-weight: 400;
}
.doc {
margin: 3em 0;
font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 1.1em;
font-weight: 300;
a {
border: 1px solid white;
border-radius: 3px;
padding: 0.75em 0.7em;
color: white;
text-decoration: none;
transition: color 0.1s linear;
&:hover {
background: rgba(0,0,0,0.2);
color: white;
transition: all 0.15s linear;
}
}
}
.welcome {
-webkit-animation-name: welcome;
-webkit-animation-duration: .9s;
}
@-webkit-keyframes welcome {
from {
-webkit-transform: scale(0);
opacity: 0;
}
50% {
-webkit-transform: scale(0);
opacity: 0;
}
82.5% {
-webkit-transform: scale(1.03);
-webkit-animation-timing-function: ease-out;
opacity: 1;
}
to {
-webkit-transform: scale(1);
}
}
HTMLはHERE
<!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">
<meta name="Author" content="Keith R. Bachand"/>
<meta name="Keywords" content="Keith Bachand, Speed Digital"/>
<meta name="Description" content="Speed Digital Mockup"/>
<meta charset="utf-8">
<title>Speed Digital Mockup</title>
</head>
<!--NAVBAR START-->
<div class="navlogo">
<%= image_tag "sdlogo.png" %>
</div>
<div class="phone">
<%= image_tag "phone.jpg" %>
</div>
<h4>800-900-9090</h4>
<div class="socialicons">
<%= link_to image_tag("facebookicon.png"), "https://www.facebook.com/speeddigitalusa/" %>
<%= link_to image_tag("youtubeicon.png"), "https://www.youtube.com/channel/UChY6iAIh9waeZ6EGAhuoAVQ" %>
<%= link_to image_tag("twittericon.png"), "https://twitter.com/speeddigitalusa" %>
</div>
<nav>
<ul>
<li><a class="border" href="#">CONTACT</a>
</li>
<li><a class="border" href="#">ABOUT US</a>
</li>
<li><a class="border" href="#">CAR FINDER</a>
</li>
<li><a class="border" href="#">SERVICES</a>
</li>
<li><a class="border" href="#">INVENTORY</a>
</li>
<li><a class="border" href="#">HOME</a>
</li>
</ul>
</nav>
<!--NAVBAR END-->
<body>
<div class="welcome">
<div class="logo">
<%= image_tag "mainimg.png" %>
</div>
<div class="mt">
<h1>MODERN TECHNOLOGY</h1>
</div>
<div class="cp">
<h3>FUELED BY CLASSIC PASSION</h3>
</div>
<p class="doc">
<%= link_to "LEARN MORE >", "https://speeddigital.com", target: "_blank" %>
</p><!-- .doc -->
</div><!-- .welcome -->
CSSで 'float'や' display：inline-block'を使ってみましたか？ – mhatch
私はそれを試してみて、それが役立つかどうかを見ていきます！ –