Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add/share #21

Open
wants to merge 10 commits into
base: master
Choose a base branch
from
65 changes: 43 additions & 22 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,9 @@
<div class="header-right">
<div class="header-websize">
<ul>
<li><div class="list-news"><a href="#news">News</a></div></li>
<li><div class="list-about"><a href="#about">About</a></div></li>
<li><div class="list-works"><a href="#works">Works</a></div></li>
<li><div class="list-partners"><a href="#partners">Partners</a></div></li>
<li><div class="list-members"><a href="#members">Members</a></div></li>
<li><div class="list-contact"><a href="#contact">Contact</a></div></li>
Expand All @@ -64,13 +66,15 @@
</label>
<ul>
<li><a href="#top"><img src="img/Steg-logo-white.png" alt="Steg" class="header-menu-logo"></a></li>
<li><div class="pl-tw"><a href="#news">News</a></div></li>
<li><div class="pl-tw"><a href="#about">About</a></div></li>
<li><div class="pl-tw"><a href="#works">Works</a></div></li>
<li><div class="pl-tw"><a href="#partners">Partners</a></div></li>
<li><div class="pl-tw"><a href="#members">Members</a></div></li>
<li><div class="pl-tw"><a href="#contact">Contact</a></div></li>
</ul>
</div>
</nav>
</nav>
</div>
</div>
</header>
Expand All @@ -80,7 +84,23 @@
<img src="img/Steg-logo.png" alt="Steg" class="top-wrapper-logo">
</div>

<div id="news" class="news-wrapper">
<div class="wrapper-title news">News</div>
<div class="news-container">
<div class="news-contents">
<table class="news-table">
<tr class="news-text" v-for="lastest in news">
<td class="underline news-days">{{ lastest.newsDate }}</td>
<td class="underline news-bar">-</td>
<td class="underline">{{ lastest.newsContents }}</td>
</tr>
</table>
</div>
</div>
</div>

<div id="about" class="about-wrapper">
<div class="triangle-top-g"></div>
<div class="wrapper-title about">About</div>
<div class="about-steg">Stegは、ITエンジニアリングなどを通して社会に挑戦をし、成長の過程を大切にする学生ITエンジニア団体です。</div>
<div class="about-container">
Expand Down Expand Up @@ -108,6 +128,25 @@
</div>
</div>

<div id="works" class="works-wrapper">
<div class="triangle-top-w"></div>
<div class="wrapper-title works">Works</div>
<div class="works-container">
<div v-for="work in works">
<div class="works-cord">
<a class="works-link" :href="work.worksImg.url">
<img :src="work.worksImg.url" class="square" alt="イメージ画像">
</a>
<div class="works-cord-content">
<p class="works-title">{{ work.worksTitle }}</p>
<p class="works-content">{{ work.worksContents }}</p>
</div>
</div>
</div>
</div>
</div>
</div>

<div id="partners" class="partners-wrapper">
<div class="triangle-top-g"></div>
<div class="wrapper-title partners">Partners</div>
Expand Down Expand Up @@ -178,7 +217,9 @@
<div class="footer-left">
<ul>
<li><a href="#" title="Top">Top</a></li>
<li><a href="#news" title="news">News</a></li>
<li><a href="#about" title="About">About</a></li>
<li><a href="#works" title="Works">Works</a></li>
<li><a href="#partners" title="Partners">Partners</a></li>
<li><a href="#members" title="Members">Members</a></li>
<li><a href="#contact" title="Contact">Contact</a></li>
Expand All @@ -195,26 +236,6 @@
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.min.js"></script>
<script>
new Vue({
el: '#members',
data:{
members:[],
},
mounted() {
axios.get('https://steg.microcms.io/api/v1/members?limit=99',{
headers: {
'X-API-KEY': '15fcbc0e-ef8a-4e6f-8111-0811e534fe5d'
}
})
.then(response => {
this.members = response.data.contents
})
.catch(error => {
console.log('error')
})
}
})
</script>
<script src="vue.js"></script>
</body>
</html>
33 changes: 33 additions & 0 deletions responsive.css
Original file line number Diff line number Diff line change
Expand Up @@ -30,13 +30,23 @@
}
/*top-wrapper css end*/

/*news-wrapper css start*/

/*news-wrapper css end*/

/*about-wrapper css start*/
.about-img{
height: 30vw;
width: 30vw;
}
/*about-wrapper css end*/

/*works-wrapper css start */
.works-content{
display: none;
}
/*works-wrapper css end */

/*partners-wrapper css start*/
.partners-logo{
width: calc(180px + 1vw);
Expand Down Expand Up @@ -163,13 +173,36 @@

/*top-wrapper css end*/

/*news-wrapper css start*/
/*news-wrapper css end*/

/*about-wrapper css start*/
.about-img{
height: 40vw;
width: 40vw;
}
/*about-wrapper css end*/

/*works-wrapper css start*/
.works-title {
font-weight: 400;
padding-bottom: 1vh;
border-bottom: solid 2px rgb(32, 216, 186, 0.5);
position: relative;
width: 100%;
font-size: calc(8px + 0.8vw);
}

.works-title:after{
content: "";
position: absolute;
right: 0;
bottom: -2px;
width: 90%;
border-bottom: solid 2px #eeeeee;
}
/*works-wrapper css end*/

/*partners-wrapper css start*/
.triangle-top-g{ /*[all css] triangle-top*/
border-top: 12vh solid #ffffff;
Expand Down
36 changes: 27 additions & 9 deletions script.js
Original file line number Diff line number Diff line change
@@ -1,40 +1,58 @@
$(window).scroll(function(){
var top1 = $(".about").offset().top;
var top1 = $(".news").offset().top;
var position1 = top1 - $(window).height();
var top2 = $(".partners").offset().top;
var top2 = $(".about").offset().top;
var position2 = top2 - $(window).height();
var top3 = $(".members").offset().top;
var top3 = $(".works").offset().top;
var position3 = top3 - $(window).height();
var top4 = $(".contact").offset().top;
var top4 = $(".partners").offset().top;
var position4 = top4 - $(window).height();

var top5 = $(".members").offset().top;
var position5 = top5 - $(window).height();
var top6 = $(".contact").offset().top;
var position6 = top6 - $(window).height();

if($(window).scrollTop() > position1){
$('.list-about a').css('color', '#20d8ba');
$('.list-news a').css('color', '#20d8ba');

$(".triangle").addClass("triangle-move");
$(".header-logo").addClass("header-logo-move");
}else{
$('.list-about a').css('color', '#404040');
$('.list-news a').css('color', '#404040');

$(".triangle").removeClass("triangle-move");
$(".header-logo").removeClass("header-logo-move");
}

if($(window).scrollTop() > position2){
$('.list-news a').css('color', '#404040');
$('.list-about a').css('color', '#20d8ba');
}else{
$('.list-about a').css('color', '#404040');
}

if($(window).scrollTop() > position3){
$('.list-about a').css('color', '#404040');
$('.list-works a').css('color', '#20d8ba');
}else{
$('.list-works a').css('color', '#404040');
}

if($(window).scrollTop() > position4){
$('.list-works a').css('color', '#404040');
$('.list-partners a').css('color', '#20d8ba');
}else{
$('.list-partners a').css('color', '#404040');
}

if($(window).scrollTop() > position3){
if($(window).scrollTop() > position5){
$('.list-partners a').css('color', '#404040');
$('.list-members a').css('color', '#20d8ba');
}else{
$('.list-members a').css('color', '#404040');
}

if($(window).scrollTop() > position4){
if($(window).scrollTop() > position6){
$('.list-members a').css('color', '#404040');
$('.list-contact a').css('color', '#20d8ba');
}else{
Expand Down
Loading