蓝色简洁样式pc+wap用户体验设计网页模板代码下载.zip资源-CSDN文库

共31个文件

png：11个

js：7个

css：6个

html5

网站模版

H5响应式

90 浏览量 2023-06-20 19:35:23 上传评论收藏 927KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

蓝色简洁样式pc+wap用户体验设计网页模板代码下载.zip （31个子文件）

21027

assets

logo-3.png 10KB

menu.png 104B

bg-pat.png 2KB

arrow-right.png 3KB

hero-bg.jpg 602KB

twitter.png 856B

logo-2.png 16KB

logo-1.png 10KB

arrow-left.png 3KB

github.png 1KB

behance.png 1KB

dribbble.png 2KB

bootstrap.js 68KB

npm.js 484B

waypoints.min.js 8KB

bootstrap.min.js 36KB

swiper.jquery.min.js 85KB

jquery.counterup.min.js 1KB

jquery-2.1.1.js 242KB

css

style.css 10KB

bootstrap.min.css 118KB

bootstrap-theme.css 26KB

bootstrap.css 143KB

bootstrap-theme.min.css 23KB

swiper.min.css 17KB

index.html 11KB

fonts

glyphicons-halflings-regular.svg 106KB

glyphicons-halflings-regular.ttf 44KB

glyphicons-halflings-regular.woff 23KB

glyphicons-halflings-regular.eot 20KB

glyphicons-halflings-regular.woff2 18KB

<!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">  <title>Home</title>  <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/bootstrap-theme.css" rel="stylesheet"> <link rel="stylesheet" href="css/swiper.min.css"> <link href="css/style.css" rel="stylesheet">  <link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700|Open+Sans:300,400,700" rel="stylesheet">    </head> <body> <header class="hero"> <div class="container"> <div class="row"> <div class="col-md-6 col-md-offset-6 col-xs-12"> <nav> <div id="menu-toggle"> <div class="hamburger"> <span class="line"></span> <span class="line"></span> <span class="line"></span> </div> <div class="cross"> <span class="line"></span> <span class="line"></span> </div> </div> <ul class="main-nav"> <li><a href="#">Home</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </nav>  <div class="hero-text"> <h1><span>Hi, I am</span><br>Maria Ferrero.</h1> <h3>Freelance designer from Melbourne</h3> <a href="#" class="btn btn-lg btn-primary">Know More</a> <ul class="social-links"> <li class="label">Join me here</li> <li><a href="#"><img src="assets/behance.png"></a></li> <li><a href="#"><img src="assets/dribbble.png"></a></li> <li><a href="#"><img src="assets/twitter.png"></a></li> <li><a href="#"><img src="assets/github.png"></a></li> </ul> </div> </div> </div> </div> </header> <section class="case-study"> <div class="container"> <div class="row"> <div class="col-md-12"> <h4 class="sub-heading">Exclusively</h4> <h1 class="heading purple"><span class="purple">works</span> with <br>Startups and founders</h1>  <div class="swiper-container client-swiper"> <div class="swiper-wrapper"> <div class="swiper-slide client-box"> <img src="assets/logo-1.png" class="client-logo"> <h3 class="text-left title">Visual identity for upsidedown</h3> <p class="text-left tag">Branding, UI, Website</p> <p class="text-left"><a href="#">Know More →</a></p> </div> <div class="swiper-slide client-box"> <img src="assets/logo-2.png" class="client-logo"> <h3 class="text-left title">User Experience design for the AI</h3> <p class="text-left tag">Branding, UI, Website</p> <p class="text-left"><a href="#">Know More →</a></p> </div> <div class="swiper-slide client-box"> <img src="assets/logo-3.png" class="client-logo"> <h3 class="text-left title">Rebranding of the best motion studio</h3> <p class="text-left tag">Branding, UI, Website</p> <p class="text-left"><a href="#">Know More →</a></p> </div> <div class="swiper-slide client-box"> <img src="assets/logo-1.png" class="client-logo"> <h3 class="text-left title">Visual identity for upsidedown</h3> <p class="text-left tag">Branding, UI, Website</p> <p class="text-left"><a href="#">Know More →</a></p> </div> <div class="swiper-slide client-box"> <img src="assets/logo-2.png" class="client-logo"> <h3 class="text-left title">Visual identity for upsidedown</h3> <p class="text-left tag">Branding, UI, Website</p> <p class="text-left"><a href="#">Know More →</a></p> </div> </div> </div>  <div class="swiper-button-next"></div> <div class="swiper-button-prev"></div> </div> </div> </div> </section> <section class="testimonial"> <div class="container"> <div class="row"> <div class="col-md-12"> <h4 class="sub-heading">Happy</h4> <h1 class="heading pink"><span class="pink">Client's</span> hello <br>testimonials</h1> </div> </div> </div> <div class="container-fluid"> <div class="row"> <div class="col-md-12">  <div class="swiper-container testimonial-swiper"> <div class="swiper-wrapper"> <div class="swiper-slide testimonial-box yellow"> <h1>Pixel Perfect design</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad </p> <div class="text-right"> <p class="name">- John Doe</p> <p class="designation">Founder, Arrow</p> </div> </div> <div class="swiper-slide testimonial-box purple"> <h1>Minimal and Clean</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad </p> <div class="text-right"> <p class="name">- Rocky Hych</p> <p class="designation">CTO, Upside Down</p> </div> </div> <div class="swiper-slide testimonial-box blue"> <h1>Built with Bootstrap</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad </p> <div class="text-right"> <p class="name">- John Doe</p> <p class="designation">Founder, Arrow</p> </div> </div> <div class="swiper-slide testimonial-box pink"> <h1>Responsive template</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad </p> <div class="text-right"> <p class="name">- Rocky Hych</p> <p class="designation">CTO, Upside Down</p> </div> </div> <div class="swiper-slide testimonial-box yellow"> <h1>Pixel Perfect</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad </p> <div class="text-right"> <p class="name">- John Doe</p> <p class="designation">Founder, Arrow</p> </div> </div> <div class="swiper-slide testimonial-box purple"> <h1>Minimal and Clean</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad </p> <div class="text-right"> <p class="name">- Rocky Hych</p> <p class="designation">CTO, Upside Down</p> </div> </div> <div class="swiper-slide testimonial-box blue"> <h1>Pixel Perfect</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad </p> <div class="text-right"> <p class="name">- John Doe</p> <p class="designation">Founder, Arrow</p> </div> </div> <div class="swiper-slide testimonial-box pink"> <h1>Minimal and Clean</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad </p> <div class="text-right"> <p class="name">- Rocky Hych</p> <p class="designation">CTO, Upside Down</p> </div> </div> </div>  <div class="swiper-pagination"></div>

评论收藏

内容反馈