プログラミング

sampleで作ったHTML・CSS

トップページを作成で書いたHTML・CSSのコードです。

HTML

<div class="top-hero-wrapper text-center">
<div class="container top-hero-container">
<h1 class="text-white text-center">Welcome to My Blog</h1>
<h2 class="text-white text-center">これはサンプルで作ったプログラムです</h2>
<div class="row">
<div class="col-md-offset-3 col-md-3">
<%= link_to 'Sign in', '#', class: 'btn btn-block btn-white' %>
</div>
<div class="col-md-3">
<%= link_to 'Log in', '#',class: 'btn btn-block btn-white' %>
</div>
</div>
</div>
</div>

 

CSS

h1, h2 {
font-weight: 100;
}

.text-white {
color: #fff;
}

.btn-white {
color: #fff;
border: 1px solid #fff;
padding-top: 15px;
padding-bottom: 15px;
font-size: 20px;
background-color: rgba(0,0,0,0.0);

&:hover {
color: #fff;
}
}

.top-hero-wrapper {
width: 100vw;
height: 100vh;
background: image-url('solar-eclipse-2017-2670351_1280.jpg');
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #464646;
}

.top-hero-container {
padding-top: 220px;
h1 {
font-size: 56px;
margin-bottom: 20px;
}

h2 {
margin-bottom: 60px;
}
}

-プログラミング
-

Copyright© Nanayaku blog , 2019 All Rights Reserved Powered by AFFINGER5.