RWD原理與應用-bootstrap 應用技巧 padding型規劃

Developer
Size
4,942 Kb
Views
6,072

How do I make an rwd原理與應用-bootstrap 應用技巧 padding型規劃?

What is a rwd原理與應用-bootstrap 應用技巧 padding型規劃? How do you make a rwd原理與應用-bootstrap 應用技巧 padding型規劃? This script and codes were developed by Eric on 07 December 2022, Wednesday.

RWD原理與應用-bootstrap 應用技巧 padding型規劃 Previews

RWD原理與應用-bootstrap 應用技巧 padding型規劃 - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>RWD原理與應用-bootstrap 應用技巧 padding型規劃</title> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="jumbotron"> <div class="container text-center"> <h3>城市向海的一隅</h3> <h1>餘光,啟航</h1> </div>
</header>
<section class="intro"> <div class="container"> <div class="row"> <div class="col-md-12"> <h2 class="section-heading">最後一次看見海是什麼時候呢?</h2> <h3 class="section-subheading text-muted">上一次看見的海,仍然藍的深邃</h3> </div> </div> <div class="row"> <div class="col-md-4 col-sea-circle"><img src="https://goo.gl/8oHczD" alt=""/> <h4>一望無際的海</h4> <h6 class="text-muted">就像沒有邊際的人生</h6> </div> <div class="col-md-4 col-sea-circle"><img src="https://goo.gl/8oHczD" alt=""/> <h4>一望無際的海</h4> <h6 class="text-muted">就像沒有邊際的人生</h6> </div> <div class="col-md-4 col-sea-circle"><img src="https://goo.gl/8oHczD" alt=""/> <h4>一望無際的海</h4> <h6 class="text-muted">就像沒有邊際的人生</h6> </div> </div> </div>
</section>
<section class="story"> <div class="container"> <div class="row"> <div class="col-md-12"><img class="icon-sea" src="https://goo.gl/iQ4qhl" alt=""/> <h2 class="section-heading">海洋的故事</h2> <h3 class="section-subheading text-muted">要成為海,定義上其實蠻不容易的</h3> </div> </div> <div class="row"> <div class="col-md-6"> <p class="h2">3.5525億平方公里</p> <p class="content">海洋即「海」和「洋」的總稱。地球的71%的面積被海洋覆蓋。總面積大約為3億5525萬5千平方公里。一般人們將這些占地球很大面積的鹹水水域稱為「洋」,大陸邊緣的水域被稱為「海」。</p> </div> <div class="col-md-6"> <p class="h2">3.5%</p> <p class="content">海水所含的鹽分各處不同,平均約為3.5%。這些溶解在海水中的無機鹽,最常見的是氯化鈉,即日用的食鹽。有些鹽來自海底的火山,但大部分來自地殼的岩石。	</p> </div> </div> </div>
</section>
<section class="pictures"> <div class="container-fluid"> <div class="row"> <div class="col-md-6 pic1"> <div class="text-panel"> <h1>深海的生物們</h1> <p>目前科學家探索的深海面貌不到1%</p> </div> </div> <div class="col-md-6 pic2"> <div class="text-panel"> <h1>人造物的侵襲</h1> <p>每年有數萬噸的人造物沉入黑暗的海域</p> </div> </div> </div> </div>
</section>
<section class="ask"> <div class="container"> <div class="row"> <div class="col-md-12"> <h2 class="section-heading">你對海有什麼想像呢?</h2> <h3 class="section-subheading text-muted">說說關於你,關於海洋,關於世界的故事</h3> <input class="form-control"/> </div> </div> </div>
</section> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script>
</body>
</html>

RWD原理與應用-bootstrap 應用技巧 padding型規劃 - Script Codes CSS Codes

@charset "UTF-8";
* { font-family: 微軟正黑體;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-weight: bold;
}
header.jumbotron { background-image: url("https://static.pexels.com/photos/8807/sopot.jpg"); background-position: center center; background-size: cover; padding: 180px 0; color: #FFF;
}
section { text-align: center; padding: 80px 0;
}
section .section-heading { font-size: 36px; margin-top: 0;
}
section .section-subheading { font-size: 16px;
}
.col-sea-circle { padding: 80px;
}
.col-sea-circle img { width: 100%; border-radius: 50%;
}
.col-sea-circle h4 { margin-top: 40px;
}
section.story { background: #eee;
}
section.story .col-md-6 { padding: 20px;
}
section.story .icon-sea { width: 80px; margin-bottom: 20px;
}
section.pictures { padding: 0; color: #FFF;
}
section.pictures .col-md-6 { padding: 150px; transition-duration: 0.5s; cursor: pointer;
}
section.pictures .col-md-6:hover p { opacity: 0.7;
}
section.pictures .col-md-6:hover:before { filter: brightness(0.7); background-size: 130% auto;
}
section.pictures .col-md-6:before { content: ""; display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: -1; transition-duration: 0.5s; background-position: center;
}
section.pictures .pic1:before { background-image: url("https://goo.gl/xkoHwg"); background-size: 120% auto;
}
section.pictures .pic2:before { background-image: url("https://goo.gl/tgrQ9w"); background-size: 120% auto;
}
section.pictures p { opacity: 0.4; transition-duration: 0.5s;
}
section.ask { background-color: #01233C; color: #FFF;
}
RWD原理與應用-bootstrap 應用技巧 padding型規劃 - Script Codes
RWD原理與應用-bootstrap 應用技巧 padding型規劃 - Script Codes
Home Page Home
Developer Eric
Username ericyericy
Uploaded December 07, 2022
Rating 3
Size 4,942 Kb
Views 6,072
Do you need developer help for RWD原理與應用-bootstrap 應用技巧 padding型規劃?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Eric (ericyericy) Script Codes
Name
Pen,pineapple,apple
Transition-duration
Vue add del
CSS resume
Vue
NameCard
A Pen by Eric
Brand Guideline
V-on
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!