RWD原理與應用-bootstrap 應用技巧 padding型規劃
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型規劃 - 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;
}
Developer | Eric |
Username | ericyericy |
Uploaded | December 07, 2022 |
Rating | 3 |
Size | 4,942 Kb |
Views | 6,072 |
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!
Name | Size |
Pen,pineapple,apple | 3,333 Kb |
Transition-duration | 1,935 Kb |
Vue add del | 2,236 Kb |
CSS resume | 6,784 Kb |
Vue | 4,864 Kb |
NameCard | 2,801 Kb |
A Pen by Eric | 1,212 Kb |
Brand Guideline | 4,033 Kb |
V-on | 3,337 Kb |
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!
Name | Username | Size |
Growing Root - Scroll control - CANVAS | Cjonasw | 2,342 Kb |
A Pen by Huan Nghiem | Nightshade | 10,646 Kb |
DevCamp 2014 - Denver Public Library | See8ch | 5,033 Kb |
Lightrays v2 | Sinthetyc | 2,903 Kb |
Dribbble Inspired Registration Form | Lancebush | 2,358 Kb |
CSS Dynamic Width Square Div | Elleestcrimi | 2,861 Kb |
Pricing Table | Semenchenko | 6,784 Kb |
SVG Scalable Text | Said_FD | 1,451 Kb |
SlideDown FixedMenu | Mp_graphic | 5,602 Kb |
Login with flip 3d animation | Mariusbalaj | 3,014 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!